Make site settings editable from CMS

.eleventy.js

@@ -42,10 +42,6 @@ module.exports = config => {
         return util.inspect(value);
     });
 
-    config.addFilter('dateToYear', function (date) {
-        return date.getFullYear();
-    });
-
     config.addFilter('noEmoji', function(value) {
         return value.replace(emojiRegex, '').trim();
     });
@@ -90,6 +86,7 @@ module.exports = config => {
     }
 
     config.addNunjucksAsyncShortcode('recipeimage', imageShortcode);
+    config.addShortcode('year', () => `${new Date().getFullYear()}`);
 
     return {
         dir: {

src/_data/site.js

@@ -1,9 +0,0 @@
-module.exports = {
-    name: "My Online Cookbook",
-    metaDescription: "The online cookbook of John Doe",
-    author: "John Doe",
-    buildTime: new Date(),
-    primaryColor: "#ffdb70",
-    secondaryColor: "#32816e",
-    searchLabel: "Find recipes by name or ingredients"
-};

src/_data/site.json

@@ -0,0 +1,8 @@
+{
+    "name": "My Online Cookbook",
+    "metaDescription": "The online cookbook of John Doe",
+    "author": "John Doe",
+    "primaryColor": "#ffdb70",
+    "secondaryColor": "#32816e",
+    "searchLabel": "Find recipes by name or ingredients"
+}

src/_includes/components/footer.njk

@@ -1,2 +1,2 @@
 <p>Made with <a href="https://github.com/maeligg/my-online-cookbook">My Online Cookbook</a></p>
-<p>© {{ site.author }} {{ site.buildTime | dateToYear }}</p>
+<p>© {{ site.author }} {% year %}</p>

src/admin/config.yml

@@ -17,7 +17,7 @@ collections:
         widget: "list"
         required: false
         summary: "{{fields.tag}}"
-        field: {label: "Tag", name: "tag", widget: string}
+        field: {label: "Tag", name: "tag", widget: "string"}
       - {label: "Preparation time", name: "time", widget: "string", required: false}
       - {label: "Number of servings", name: "servings", widget: "number", required: false}
       - {label: "Source of the recipe", name: "sourceLabel", widget: "string", required: false}
@@ -26,5 +26,19 @@ collections:
         name: "ingredients"
         widget: "list"
         summary: "{{fields.ingredient}}"
-        field: {label: "Ingredient", name: "ingredient", widget: string}
-      - {label: "Body", name: "body", widget: "markdown"}
+        field: {label: "Ingredient", name: "ingredient", widget: "string"}
+      - {label: "Body", name: "body", widget: "markdown"}
+  - name: "settings"
+    label: "Settings"
+    files:
+      - name: "site"
+        label: "Site settings"
+        delete: false
+        file: "src/_data/site.json"
+        fields:
+          - {label: "Site name", name: "name", widget: "string"}
+          - {label: "Site meta description", name: "metaDescription", widget: "string", hint: "used for SEO"}
+          - {label: "Author", name: "author", widget: "string"}
+          - {label: "Primary color", name: "primaryColor", widget: "color", hint: "make sure to choose a color that is light enough to display as a background behind dark text"}
+          - {label: "Secondary color", name: "secondaryColor", widget: "color", hint: "used for links and focus styles"}
+          - {label: "Search label", name: "searchLabel", widget: "string"}