Skip to content

Use NetlifyCMS/DecapCMS for easier editing #500

@rasmi

Description

@rasmi

One option for easier editing would be to use DecapCMS (and specifically the GitHub backend).

A minimal working example (run npm start and also npx decap-server, then visit http://localhost:8080/admin):

src/admin/index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>Content Manager</title>
  </head>
  <body>
    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
  </body>
</html>

src/admin/config.yml

local_backend: true
backend:
  name: git-gateway
  # name: github
  # repo: civiform/docs
  # branch: main
site_url: https://civiform.us
publish_mode: editorial_workflow
media_folder: "src/assets/img"
public_folder: "/img"

collections:
  - name: "pages"
    label: "Pages"
    editor:
      preview: true
    files:
      - label: "Home"
        name: "index"
        file: "src/index.md"
        fields:
          - { label: "Title", name: "title", widget: "string" }
          - { label: "Body", name: "body", widget: "markdown" }
      - label: "About"
        name: "about"
        file: "src/about.md"
        fields:
          - { label: "Title", name: "title", widget: "string" }
          - { label: "Body", name: "body", widget: "markdown" }
      - label: "News"
        name: "news"
        file: "src/news.md"
        fields:
          - { label: "Title", name: "title", widget: "string" }
          - { label: "Body", name: "body", widget: "markdown" }
      - label: "Contact"
        name: "contact"
        file: "src/contact.md"
        fields:
          - { label: "Title", name: "title", widget: "string" }
          - { label: "Body", name: "body", widget: "markdown" }
      - label: "FAQ"
        name: "faq"
        file: "src/faq.md"
        fields:
          - { label: "Title", name: "title", widget: "string" }
          - { label: "Body", name: "body", widget: "markdown" }
  - name: "news-items"
    label: "News Items"
    editor:
      preview: false
    files:
      - label: "News Items"
        name: "newsItems"
        file: "src/_data/news.json"
        fields:
          - label: "News Items"
            name: "newsItems"
            widget: "list"
            allow_add: true
            fields:
              - { label: "Title", name: "Title", widget: "string" }
              - {
                  label: "Description",
                  name: "Description",
                  widget: "string",
                  required: false,
                }
              - { label: "URL", name: "URL", widget: "string" }
              - { label: "Government", name: "Government", widget: "string" }
              - { label: "Publisher", name: "Publisher", widget: "string" }
              - { label: "Date", name: "Date", widget: "string" }
              - {
                  label: "Image",
                  name: "Image",
                  widget: "file",
                  required: false,
                }
              - {
                  label: "Image Description",
                  name: "ImageDescription",
                  widget: "string",
                  required: false,
                }
              - {
                  label: "Featured",
                  name: "Featured",
                  widget: "boolean",
                  required: false,
                }

.eleventy.js

  eleventyConfig.ignores.add("src/admin");
  eleventyConfig.addPassthroughCopy({ "src/admin": "admin" });

Notes / issues

  • Live preview is bad (but you can still preview the rendered site through GH Codespaces for example).
  • Still have to deal with markdown/HTML for non-trivial changes.
  • Decap will create a pull request for you (rather than having to do so manually).

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions