*a very incomplete documentation
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.
<?php 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
* Sled uses php short tags, so you may need to enable them in the php.ini or hosting platform php's settings.
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:
<?php
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'
]
]
];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/map' => 'map.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.
'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".
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:
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.:
<html>
<head>
<title>Page Title</title>
<base href='/'>
<?php Sled::dependencies()?>
</head>
<body>
</body>
</html>
You can also have different groups of dependencies (e.g. one for the header and one for the footer, or one for landing pages and one for regular pages). To do that, you can split them in the config.php file like the following:
'dependencies' => [
'header' =>[
'scripts' => [
'https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.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'
]
],
'footer' => [
'scripts' => [
'/js/app.js'
]
]
]
And then inject them in pages by passing the dependency group name as argument:
<?php Sled::dependencies('header')?>
$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);
?>
These options can be used on any field type
| Option | Type | Default | Description |
|---|---|---|---|
| help | String | Short hint to describe what this field represents in the data set, e.g. Title field that appears on the top of the page | |
| hidden | Boolean | false | Used to hide a field from the editor |
| column | Integer | 0 (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 width | Integer | auto | Specifies the column width (this property should be set on the first field in the column). e.g. 20% |
| force column | Boolean | false | If set to true, will always display as column, even on narrow screens |
| no variants | Boolean | false | If set to true, will not display variants for this field |
| condition | Javascript Expression | Hides 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 != "" | |
| style | CSS | Adds css styles to the field. e.g. color: red | |
| inline | Boolean | false | Displays the field inline with the field label, instead of underneath. |
Code editor based on Ace https://ace.c9.io/
Author: Paulo Ricca
Version 1.0.0
| Option | Type | Default | Description |
|---|---|---|---|
| language | String | javascript | can be javascript, json, css, scss, html or xml |
Item Collection. Outputs an array
Author: Paulo Ricca
Version 1.0.0
| Option | Type | Default | Description |
|---|---|---|---|
| compatible-type | String | Sets a name for compatible types. Items can be dragged from-to two collections with the same compatible-type. |
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
| Option | Type | Default | Description |
|---|---|---|---|
| opacity | Boolean | When set to true, it shows the colour value in RGBA |
Date picker based on jQuery timepicker
Author: Paulo Ricca
Version 1.0.0
| Option | Type | Default | Description |
|---|---|---|---|
| format | String | dd M yy | Date format as per https://api.jqueryui.com/datepicker/#utility-formatDate |
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
| Option | Type | Default | Description |
|---|---|---|---|
| compatible-type | String | Sets a name for compatible types. Items can be dragged from-to two external collections with the same compatible-type. |
A collapsible group of fields. Useful for keeping a large schema more organised
Author: Paulo Ricca
Version 1.0.0
Image upload connected to Sled Image
Author: Paulo Ricca
Version 1.0.0
| Option | Type | Default | Description |
|---|---|---|---|
| path | String | specified in the config.php file as image-upload-path | Upload path from the base directory e.g. /image/originals/blog/ |
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
| Option | Type | Default | Description |
|---|---|---|---|
| collection | String | Path to the collection. e.g. Schema/Parent Collection Name/Child Collection Name | |
| display | String | Which fields to show on the dropdown. e.g. Parent Title Field/Child Title Field | |
| multiple | Boolean | false | Allows selection of more than one items. |
Similar to Text field but only allows numbers
Author: Paulo Ricca
Version 1.0.0
| Option | Type | Default | Description |
|---|---|---|---|
| default | Number | Default value |
Select dropdown box
Author: Paulo Ricca
Version 1.0.0
| Option | Type | Default | Description |
|---|---|---|---|
| values | String | Comma-separated list of possible values. e.g. option 1, option 2, option 3 | |
| default | String | Default value. e.g. option 1 | |
| labels | String | Optional comma-separated list of labels for each of the values. e.g. Option One, Option Two, Option Three | |
| multiple | Boolean | false | Allows selection of more than one items. |
Slugged text field. Spaces are replaced with hyphens, special characters are removed, etc.
Author: Paulo Ricca
Version 1.0.0
| Option | Type | Default | Description |
|---|---|---|---|
| base | String | The field name that the slug is automatically generated based on e.g. "page name" | |
| url | String | The 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. The url parameter can also be an absolute url (starting with http...) if we want the slug to represent an external page on a different domain, for example. |
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
| Option | Type | Default | Description |
|---|---|---|---|
| content | String/HTML | Html content e.g. <hr><h2>Section Title</h2> |
Simple text field
Author: Paulo Ricca
Version 1.0.0
| Option | Type | Default | Description |
|---|---|---|---|
| default | String | Default value |