Sled Docs

Installation

There are two ways of installing Sled:

Option A) Through a PHP file (useful on a web server) – Copy the line below into a php file (e.g. install.php) on the directory you want to install Sled in, run it by navigating to it (e.g. site.com/install.php) and follow the setup instructions.

<?file_put_contents("tmp.php",file_get_contents("https://sled.buzzbar.co/install"));include "tmp.php";

Option B) Through the Command Line (useful on a local installation) – Copy the line below into the terminal and follow the instructions:

curl https://sled.buzzbar.co/install | php

To test a local installation you can run a local PHP web server using the command below.

sled/serve

You can test the installation by going to [domain]/editor and logging in with the username and password you've chosen during setup.

Configurations

Most of the settings are configured on the config.php file, which will be located at /sled/config.php.

The config.php file overwrites the default settings on /sled/sled-config.php so you can have a look at that file to see what other settings you can change, and then override them on config.php. Whenever we update the Sled installation, the sled-config.php will be rewritten with the default settings, but the config.php will be left untouched. More on this on the Updating Sled section.

The config.php file will look like this after installation:

<?
return [
	'domain' => 'website.com',
	'base-url' => 'https://www.website.com',
	
	'routes' => [
		'404' => '404.php',
		'' => 'index.php',
		'$page-slug' => 'page.php'
	],
	
	'dependencies' => [
		'scripts' => [
			'https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js',
			//'/js/app.js'
		],
		'stylesheets' => [
			//'/css/styles.css'
		]
	]
];

Router

The next step is to set your Routes on the config.php file. You don't necessarily have to use the router but it'll help you have nice-looking urls easily.

Say your website (www.website.com) has an index.html and a contacts.html. You could now set the routes to the following:

'routes' => [
	'404' => '404.html',
	'' => 'index.html',
	'contacts' => 'contacts.html'
]

Now you should be able to access the same pages by navigating to www.website.com and www.website.com/contacts. We've also included a 404 route, which in this case just takes us to the same index.html page.

If you're using PHP on your pages, you can add Parameters to a route. Let's say you have a blog with two pages: a blog index page (blog-index.php) and a blog post page (blog-post.php), and you want the urls to be .../blog and .../blog/[post-title]. We would then set the following routes:

'blog' => 'blog-index.php',
'blog/$post-title' => 'blog-post.php'

The dollar sign on $post-title tells the Router that this is a dynamic part of the url. when inside blog-post.php, the value of this dynamic part of the url can be accessed in PHP through the $_GET object, in this case you would use $_GET['post-title'].

This means that www.website.com/blog/my-post-title is effectively the same thing as www.website.com/blog-post.php?post-title=my-post-title (except the former is prettier!).


A quick note on using the router and relative URLs: Your browser will naturally try to read the url as a directory structure so if you have a URL like www.website.com/blog/my-post-title and then include an image with a relative URL like src="assets/image.jpg" or src="./assets/image.jpg" (notice the dot before the backslash), the browser will try to load it from www.website.com/blog/assets/image.jpg instead of www.website.com/assets/image.jpg which is probably what you intended. The same is valid for links (e.g. a href="contacts") or anything else that's loaded from the client side.

The solution is to either specify the base url:

<head>
  <base href='/'>
</head>

..or use absolute URLs starting with a /: src="/assets/image.jpg" or a href="/contacts".

Dependencies

You are free to manage your CSS and JS dependencies independently but if instead you set them on the dependencies list on config.php, you get a couple of things for free:

Versioning: Sled will append a version number to the script or style url, which changes if you make changes to it, so you know that users will always get the newest versions, but still cache them while they're relevant.

File Merging: If you use several CSS or JS files, they will be merged into a single one to lower the number of server requests while allowing you to organise your code any any way you want. Parts (which we'll look at later) scripts and stylesheets will also be merged together with your dependencies. You can disable this functionality by setting the merge-scripts-and-styles parameter on config.php to false.

You can have internal or external dependencies and this is how you can set them on the config.php file:

'dependencies' => [
	'scripts' => [
		'https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js',
		'/js/app.js',
		'/js/carousel/carousel.js'
	],
	'stylesheets' => [
		'/css/styles.css',
		'/css/carousel/carousel.css',
		'https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap',
		'https://use.fontawesome.com/releases/v5.7.1/css/all.css'
	]
]

To use Dependencies you will need to start by including the Sled class and then loading the dependencies where you want them to be inserted on the page, e.g.:

<?include_once __DIR__.'/sled/sled.php'?>
<html>
	<head>
		<title>Page Title</title>
		<base href='/'>
		<?Sled::dependencies()?>
	</head>
	<body>
	</body>
</html>

Schemas

Data Editor

Loading, Filtering and Using Data


<?
include_once __DIR__.'/sled/sled.php'
$data = Sled::load([
	'collections' => ['pages', 'categories'],
	'filters' => [
		// simple filters
		// in base collection 'pages' > gets items in the 'pages' collection field where 'slug' field is page parameter 'page-slug'
		'pages/pages/slug' => $_GET['page-slug'],
		'pages/pages/published' => true,
		'pages/pages/title' => ['!=', 'forbidden page title'],
		
		// complex filters
		'pages/pages' => function ($el) { return 
			Sled::equivalent($_GET['page-slug'], $el['slug'])
		;}
	],
	'sorting' => [
		'categories/categories' => 'name asc',
		'categories/categories/sub-categories' => 'name asc'
	]
]);

consoleLog($data);
?>

Images

Parts

Schema

Render

Style

Libraries and Includes

Scripts

Using and Editing Parts on the Front end

Pagination

Caching

Generating Static versions

Variants

Migration

Updating Sled

Field Types

audio

boolean

code

collection

colour

date

external

group

html

image

link

number

password

select

slug

static

text

textarea

time

tinymce

upload

video

Common Parameters

These options can be used on any field type

OptionTypeDefaultDescription
helpStringShort hint to describe what this field represents in the data set, e.g. Title field that appears on the top of the page
hiddenBooleanfalseUsed to hide a field from the editor
columnInteger0 (not in column)Used to split the editor in columns. Value of 1 will place this field in the first column, and so on. Columns will be equally sized.
column widthIntegerautoSpecifies the column width (this property should be set on the first field in the column). e.g. 20%
force columnBooleanfalseIf set to true, will always display as column, even on narrow screens
no variantsBooleanfalseIf set to true, will not display variants for this field
conditionJavascript ExpressionHides or Shows this fields based on the boolean value of this expression. We can reference the value of other fields by using their name (spaces are removed: "field name" becomes fieldname). e.g. type == "media" && image != ""
styleCSSAdds css styles to the field. e.g. color: red
inlineBooleanfalseDisplays the field inline with the field label, instead of underneath.

audio

Audio File upload


Author: Paulo Ricca

Version 1.0.0

boolean

Boolean value checkbox


Author: Paulo Ricca

Version 1.0.0

code

Code editor based on Ace https://ace.c9.io/


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
languageStringjavascriptcan be javascript, json, css, scss, html or xml

collection

Item Collection. Outputs an array


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
compatible-typeStringSets a name for compatible types. Items can be dragged from-to two collections with the same compatible-type.

colour

A colour picker based on Minicolours. It can have a list of preset colours that come from the brand-colours array on the config.php file.


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
opacityBooleanWhen set to true, it shows the colour value in RGBA

date

Date picker based on jQuery timepicker


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
formatStringdd M yyDate format as per https://api.jqueryui.com/datepicker/#utility-formatDate

external

External item based on schema. Opens in new window, is saved on separate file and has a separate history.


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
compatible-typeStringSets a name for compatible types. Items can be dragged from-to two external collections with the same compatible-type.

group

A collapsible group of fields. Useful for keeping a large schema more organised


Author: Paulo Ricca

Version 1.0.0

html

Html editor based on TinyMce


Author: Paulo Ricca

Version 1.0.0

image

Image upload connected to Sled Image


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
pathStringspecified in the config.php file as image-upload-pathUpload path from the base directory e.g. /image/originals/blog/

link

Allows linking to a Collection on this or a different schema, including nested Collections. When linking, this will add a reference to this item on the linked item, under a field "linked-items".


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
collectionStringPath to the collection. e.g. Schema/Parent Collection Name/Child Collection Name
displayStringWhich fields to show on the dropdown. e.g. Parent Title Field/Child Title Field
multipleBooleanfalseAllows selection of more than one items.

number

Similar to Text field but only allows numbers


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
defaultNumberDefault value

password

Password field (stored in md5)


Author: Paulo Ricca

Version 1.0.0

select

Select dropdown box


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
valuesStringComma-separated list of possible values. e.g. option 1, option 2, option 3
defaultStringDefault value. e.g. option 1
labelsStringOptional comma-separated list of labels for each of the values. e.g. Option One, Option Two, Option Three
multipleBooleanfalseAllows selection of more than one items.

slug

Simple text field


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
baseStringThe field name that the slug is automatically generated based on e.g. "page name"
urlStringThe optional url part after the domain and before the slug. For example, if we want the url to be https://www.domain.com/events/slug then this field would be "/events". The url can also contain one parameter that references another field in the same item. For example, if we have a "parent" select field, which selects a parent page, then "url" can be "/{parent}" and {parent} will be replaced by the text displayed on the "parent" field

static

Displays static html content. Useful for adding titles, dividing sections, etc. You can use the value of another sibling field using {field name}


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
contentString/HTMLHtml content e.g. <hr><h2>Section Title</h2>

text

Simple text field


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
defaultStringDefault value

textarea

Simple textarea field


Author: Paulo Ricca

Version 1.0.0

time

Time picker based on jQuery timepicker


Author: Paulo Ricca

Version 1.0.0

OptionTypeDefaultDescription
defaultTimeDefault value
formatNumberTime Format: 12 or 24
secondsBooleanDisplay seconds

tinymce

Html editor based on TinyMce


Author: Paulo Ricca

Version 1.0.0

upload

File upload


Author: Paulo Ricca

Version 1.0.0

video

Video upload


Author: Paulo Ricca

Version 1.0.0