WebriQ CMS

A CMS for static site generators. Give non-technical users a simple way to edit and add content to any site built with a static site generator.

Try the UI demo here: demo.webriq.com

How it works

WebriQ CMS is a single-page app that you pull into the /admin part of your site.

It presents a clean UI for editing content stored in a Git repository.

You setup a YAML config to describe the content model of your site, and typically tweak the main layout of the CMS a bit to fit your own site.

When a user navigates to /admin she'll be prompted to login, and once authenticated she'll be able to create new content or edit existing content.

Configuring your content Model

backend:
  name: github-api
  repo: owner/repo # Path to your Github repository
  branch: master # Branch to update (master by default)

media_folder: "img/uploads" # Folder where user uploaded files should go

collections: # A list of collections the CMS should be able to edit
  - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit
    label: "Post" # Used in the UI, ie.: "New Post"
    folder: "_posts" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - {label: "Title", name: "title", widget: "string", tagname: "h1"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Foo", name: "foo", widget: "foo"}
    meta: # Meta data fields. Just like fields, but without any preview element
      - {label: "Publish Date", name: "date", widget: "datetime"}
  - name: "settings"
    label: "Settings"
    files:
      - name: "general"
        label: "General settings"
        file: "_settings/general.json"
        fields:
          - {label: "Main site title", name: "site_title", widget: "string"}
          - {label: "Number of fronpage posts", name: "post_count", widget: "number"}
          - {label: "Site cover image", name: "cover", widget: "image"}

Netlify CMS works with the concept of collections of documents that a user can edit.

Collections basically comes in three forms:

1. 1 A folder. Set the folder attribute on the collection. Each document will be a file in this folder. Each document will have the same format, fields and meta fields.
2. 2 A list of files. Set the files attribute on the collection. You can set fields that all files in the folder shares directly on the collection, and set specific fields for each file. This is great when you have files with a different structure.
3. 3A file. Warning, not implemented yet. This is a collection stored in a single file. Typically a YAML file or a CSV with an array of items.

Widgets

Actual content editing happens with a side by side view where each widget has a control for editing and a preview to give the content editor an idea of how the content will look in the context of the published site.

Currently these widgets are built-in:

• string A basic text input
• markdown A markdown editor
• checkbox A simple checkbox
• date A date input
• datetime A date and time input
• number A number
• hidden Useful for setting a default value with a hidden field
• image An uploaded image
• object An object with it's own set of fields
• list A list of objects, takes it's own array of fields describing the individual objects

List or Object Widgets and Custom Previews

The list widget is very powerful and allow you to have a list of structured object within an entry, that can be reordered via drag and drop.

Here's a basic example of an entry in a file based collection that lets the user edit a list of authors.

collections:
  - name: "settings"
    label: "Settings"
      - name: "authors"
        label: "Authors"
        file: "_data/authors.yml"
        description: "Author descriptions"
        fields:
          - name: authors
            label: Authors
            widget: list
            fields:
              - {label: "Name", name: "name", widget: "string"}
              - {label: "Description", name: "description", widget: "markdown"}