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).
One option for easier editing would be to use DecapCMS (and specifically the GitHub backend).
A minimal working example (run
npm startand alsonpx decap-server, then visit http://localhost:8080/admin):src/admin/index.htmlsrc/admin/config.yml.eleventy.jsNotes / issues