Configuration

.slimplate.json

Any project you want to use Slimplate with must have a .slimplate.json. This json object provides a basic schema for the Slimplate CMS.

{
  "engine": "github",
  "collections": {
    "articles": {
      "title": "Articles",
      "files": "/content/articles/**/*.mdx",
      "filename": "/content/articles/${slugify(name)}.mdx",
      "titleField": "name",
      "contentField": "description",
      "fields": [
        {
          "name": "name",
          "label": "Name",
          "validators": [
            "required"
          ]
        },
        {
          "name": "description",
          "label": "Description",
          "type": "richtext",
          "validators": [
            "required"
          ]
        },
        {
          "name": "location",
          "label": "Location Description",
          "type": "richtext"
        }
      ]
    },
  }
}

collections

  • title - The page title
  • filename - Where files should be saved.
  • files - Define the collection's files location.
  • titleField - Define which field should be the title.
  • contentField - Define which field should be the content.

fields

  • name - The field label
  • label - The field label
  • type - The field type (defines the widget)
  • validators - is optional and supports reqired and disabled

Fields

The fields array in each collection specifies inputs and validators for creating or editing articles. The AdminEdit component uses this information to display corresponding input widgets.

 "collections": {
  "page": {
    "title": "Page",
    "files": "/pages/**/*.mdx",
    "fields": [
      {
        "name": "title",
        "label": "Title",
        "validators": [
          "required"
        ]
      },
      {
        "name": "content",
        "label": "Body",
        "type": "richtext",
        "validators": [
          "required"
        ]
      }
    ]
  }
}

Each field can have a specified type that determines the type of input widget to be used. If no type is specified, the default is a text input widget.

Types

  • color
  • date
  • string
  • number
  • richtext

Widgets

Widgets are our way of displaying components for a specific field-type. Widgets can be added through the SlimplateProvider.

import { widgets, SlimplateProvider } from '@slimplate/react-flowbite-github'
 
window.slimplate = {
  project: {
    userName: 'YOURS_HERE',
    projectName: 'YOURS_HERE',
    branch: 'YOURS_HERE'
  },
  corsProxy: 'YOURS_HERE',
  backendURL: 'YOURS_HERE'
}
 
const widgets = {
  ...widgets,
  //...custom widgets here
}
 
ReactDOM.createRoot(document.getElementById('root')).render(
  <SlimplateProvider
    widgets={widgets}
    corsProxy={window?.slimplate?.corsProxy}
    backendURL={window?.slimplate?.backendURL}
    monoProject={window?.slimplate?.project}>
    <App />
  </SlimplateProvider>
)

Customize

You can add your own named widgets, like this:

widgets.mine = ({ value, onChange }) => {
  return 'DO YOUR STUFF!!!'
}

Now, you have a mine field-type you can use in your .slimplate.json.

Glob

Glob (opens in a new tab) patterns (opens in a new tab) are used all over the configuration.

Here is a tester to see how your pattern will match files:

Quick Startutils