Static Site Generator

Editor

The editor is an official Stapy plugin. Use it to more easily write page data and content.

Editor Grid
Editor Form

Note: The plugin is available since the version 1.16.0.

The editor is built with Pure CSS and CodeMirror. The CSS and JS are loaded from jsDelivr CDN.

When server is running, enter the following URL to access the editor:

http://127.0.0.1:1985/_editor

Configuration

The editor configuration file is located in the source directory:

source
+----- editor.json

Editor path

The default editor path key is _editor. This is set by the first parent key in the JSON data configuration:

{
  "_editor": {
    ...
  }
}
http://127.0.0.1:1985/_editor

Multiple editor paths with specific configuration are allowed:

{
  "_editor_posts": {
    ...
  },
  "_editor_static": {
    ...
  },
}

Note: the editor path key is case sensitive.

Protected pages

The "protected_page" config allows to prevent the edition of a page. The page will not appear in the list and cannot be edited.

Add the page path in the list, regex is allowed. Example:

{
  "_editor": {
    "protected_pages": [
      "robots.txt",
      "sitemap.xml",
      "secret/(.*)"
    ],
    ...
  }
}

Switcher

The switcher config adds links in the header to switch between editor paths.

{
  "_editor": {
    "editor_switcher": {
      "Full": "/_editor",
      "Content": "/_editor_c"
    },
    ...
  }
}

Grid

Columns

Choose the columns you want to display in the grid with the grid > columns config. You can set options for a list of defined values.

Option Description Excepted Default
label Column label str
options Defined values Array
{
  "_editor": {
    ...
    "grid": {
      "columns": {
        "title": {
          "label": "Title"
        },
        "enabled": {
          "label": "Enabled",
          "options": [
            {
                "values": ["", "1", 1, true],
                "label": "Yes"
            },
            {
                "values": ["0", 0, false],
                "label": "No"
            }
          ]
        }
      },
      ...
    },
    ...
  }
}

Query

A JSON query is made to get the list of pages. Set the condition and sort order of displaying pages in the grid with grid > query.

Option Description Excepted Default
where Filter key:value -
order Sort order key:dir -
limit Limit start:end 1:10000
{
  "_editor": {
    ...
    "grid": {
      ...
      "query": {
        "where": "",
        "order": "_full_path:asc",
        "limit": ""
      }
    },
    ...
  }
}

Actions

An array containing the actions to display in the grid.

Option Description Excepted Default
path The page path str
class The link element class name str
label The link element label str {label}
data The link data attributes Object {}
{
  "_editor": {
    ...
    "grid": {
      ...
      "actions": [
        {
          "path": "build/",
          "class": "button-secondary pure-button",
          "label": "Build"
        },
        {
          "path": "add/",
          "class": "pure-button pure-button-primary",
          "label": "Add",
          "data": {
            "cy": "add"
          }
        }
      ],
    },
    ...
  }
}

Form

Actions

Enables or disables form page actions.

{
  "_editor": {
    ...
    "form": {
      "actions": {
        "back": true,
        "reset": true,
        "data": true,
        "view": true,
        "delete": true,
        "save": true
      },
      ...
    }
  }
}

Fieldsets

The form has one or more fieldsets. Set the fieldset objects in form > fieldsets.

Option Description Excepted Default
label Label str Fields
column Position in the form left, right left
depends Dependencies Array or false false
fields Fields Object {}

The depends config allows the fieldset to be displayed only when another option is selected. This is useful for defining specific fields for a page.

{
  "_editor": {
    ...
    "form": {
      "fieldsets": [
        {
          "label": "SEO",
          "column": "left",
          "depends": [
            {
              "field": "_page_type",
              "values": ["html"]
            }
          ],
          "fields": {
          }
        },
        ...
      ]
    }
    ...
  }
}

In this example, SEO fieldset appears in the left column only when the _page_type field is set to html. Refresh the form to update dependencies.

The fieldset position in the form is the same as the fieldset position in the configuration.

Fields

A fieldset has one or more fields. Set the field objects in form > fieldsets > fields.

Option Description Excepted Default
label Label str Option
required Field is required bool false
disabled Field is disabled bool false
readonly Field is in Read-Only mode bool false
save Must be saved in the page data bool true
hide Dot not display the field bool false
type Field type text, textarea, date, select, multiselect, block text
allow_html Allow HTML elements (do not escape) bool false
options Options for select or multiselect Array []
mode Editor mode for block type html, md, xml, css, js, json, ${field_id} html
{
  "_editor": {
    ...
    "form": {
      "fieldsets": [
        {
          ...
          "fields": {
            "title": {
              "label": "Title",
              "required": true,
              "type": "text"
            },
            "tags": {
              "label": "Tags",
              "type": "multiselect",
              "options": [
                {
                  "value": "post",
                  "label": "Post"
                },
                {
                  "value": "sitemap",
                  "label": "Sitemap"
                },
                {
                  "value": "menu",
                  "label": "Menu"
                }
              ]
            },
            "inline_css": {
              "label": "CSS",
              "type": "block",
              "mode": "css",
              "save_dir": "content/css"
            }
          }
        },
        ...
      ]
    }
    ...
  }
}

The block type content is saved in a file in the specified directory, and will be displayed with the {% %} tag:

<style>
{% inline_css %}
</style>