feat: add decap cms for editing content

config/collections/index.js

@@ -30,6 +30,6 @@ const catalogueByType = (collection) => {
 };
 
 module.exports = {
-  postsByTag,
   catalogueByType,
+  postsByTag,
 };

eleventy.config.js

@@ -1,8 +1,8 @@
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 
 const {
-  postsByTag,
   catalogueByType,
+  postsByTag,
 } = require("./config/collections/index.js");
 const { dir } = require("./config/constants.js");
 const {
@@ -29,8 +29,8 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addPlugin(pluginRss);
 
   // 	--------------------- Custom Collections -----------------------
-  eleventyConfig.addCollection("postsByTag", postsByTag);
   eleventyConfig.addCollection("catalogueByType", catalogueByType);
+  eleventyConfig.addCollection("postsByTag", postsByTag);
 
   // 	--------------------- Custom Filters -----------------------
   eleventyConfig.addFilter("allTagCounts", allTagCounts);

src/_data/preloads.js

@@ -1,4 +1,4 @@
-const { getFontUrl } = require("../../config/utils");
+const { getFontUrl } = require("../utils/fonts");
 const fonts = require("../../config/design-tokens/fonts.json");
 
 const preloads = [

src/about.md

@@ -2,6 +2,7 @@
 layout: "layouts/base"
 permalink: /about/index.html
 title: About
+tags: ["page"]
 ---
 
 Hello! Ahoj! Welcome to my site!

src/admin/config.njk

@@ -0,0 +1,84 @@
+---
+permalink: /admin/config.yml
+---
+
+backend:
+    name: github
+    repo: wonderfulfrog/wonderfulfrog.com
+    branch: main
+
+media_folder: ""
+
+collections:
+    - name: "post"
+      label: "Post"
+      folder: "src/posts"
+      create: true
+      fields:
+      - { label: "Title", name: "title", widget: "string" }
+      - { label: "Excerpt", name: "excerpt", widget: "string" }
+      - { label: "Tags", name: "tags", widget: "list" }
+      - { label: "Using YouTube", name: "youtube", widget: "boolean", hint: "If using the YouTube shortcode, enable this option to append the lite-youtube script." }
+      - { label: "Body", name: "body", widget: "markdown" }
+    - label: "Page"
+      name: "page"
+      create: false
+      files:
+      {% for page in collections.page %}
+        - label: "{{ page.data.title }}"
+          name: "{{ page.fileSlug }}"
+          file: "{{ page.inputPath | replace("./", "") }}"
+          fields:
+            - { label: "Title", name: "title", widget: "string" }
+            - { label: "Permalink", name: "permalink", widget: "string" }
+            - { label: "Layout", name: "layout", widget: "hidden", default: "layouts/base" }
+            - { label: "Body", name: "body", widget: "markdown" }
+      {% endfor %}
+    - name: "book"
+      label: "Book"
+      folder: "src/catalogue/books"
+      create: true
+      fields:
+      - { label: "Title", name: "title", widget: "string" }
+      - { label: "Subtitle", name: "subtitle", widget: "string" }
+      - { label: "Author", name: "author", widget: "string" }
+      - { label: "Rating", name: "rating", widget: "number", min: 1, max: 5 }
+      - { label: "Image", name: "image", widget: "string", hint: "A CDN URL."}
+      - { label: "Tags", name: "tags", widget: "list" }
+      - { label: "Body", name: "body", widget: "markdown" }
+    - name: "game"
+      label: "Game"
+      folder: "src/catalogue/games"
+      create: true
+      fields:
+      - { label: "Title", name: "title", widget: "string" }
+      - { label: "Subtitle", name: "subtitle", widget: "string" }
+      - { label: "Year", name: "year", widget: "string" }
+      - { label: "Rating", name: "rating", widget: "number", min: 1, max: 5 }
+      - { label: "Image", name: "image", widget: "string", hint: "A CDN URL."}
+      - { label: "Tags", name: "tags", widget: "list" }
+      - { label: "Body", name: "body", widget: "markdown" }
+    - name: "comic"
+      label: "Comic"
+      folder: "src/catalogue/comics"
+      create: true
+      fields:
+      - { label: "Title", name: "title", widget: "string" }
+      - { label: "Publisher", name: "publisher", widget: "string" }
+      - { label: "Author", name: "author", widget: "string" }
+      - { label: "Year", name: "year", widget: "string" }
+      - { label: "Rating", name: "rating", widget: "number", min: 1, max: 5 }
+      - { label: "Image", name: "image", widget: "string", hint: "A CDN URL."}
+      - { label: "Tags", name: "tags", widget: "list" }
+      - { label: "Body", name: "body", widget: "markdown" }
+    - name: "podcast"
+      label: "Podcast"
+      folder: "src/catalogue/podcasts"
+      create: true
+      fields:
+      - { label: "Title", name: "title", widget: "string" }
+      - { label: "URL", name: "url", widget: "string", hint: "A URL for someone to listen to the podcast." }
+      - { label: "Rating", name: "rating", widget: "number", min: 1, max: 5 }
+      - { label: "Image", name: "image", widget: "string", hint: "A CDN URL."}
+      - { label: "Tags", name: "tags", widget: "list" }
+      - { label: "Body", name: "body", widget: "markdown" }

src/admin/index.html

@@ -0,0 +1,17 @@
+---
+permalink: 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>
+        <!-- Include the script that builds the page and powers Decap CMS -->
+        <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+    </body>
+</html>

src/colophon.md

@@ -2,6 +2,7 @@
 layout: "layouts/base"
 permalink: /colophon/index.html
 title: Colophon
+tags: ["page"]
 ---
 
 # Colophon

src/css-utils/font-family.js

@@ -1,8 +1,6 @@
-const path = require("path").posix;
+const { getFontUrl } = require("../utils/fonts");
 const fonts = require("../../config/design-tokens/fonts.json");
 
-const getFontUrl = (src) => path.join("/assets/fonts", src);
-
 const fontsToCss = (fonts) => {
   return Object.entries(fonts).reduce((css, [, fontProperties]) => {
     const family = fontProperties.family;

src/links.md

@@ -2,6 +2,7 @@
 layout: "layouts/base"
 permalink: /links/index.html
 title: Links
+tags: ["page"]
 ---
 
 # Find me online

src/uses.md

@@ -2,6 +2,7 @@
 layout: "layouts/base"
 permalink: /uses/index.html
 title: /uses
+tags: ["page"]
 ---
 
 # Uses

src/utils/fonts.js

@@ -0,0 +1,7 @@
+const path = require("path");
+
+const getFontUrl = (src) => path.join("/assets/fonts", src);
+
+module.exports = {
+  getFontUrl,
+};