Make rest of the content editable from CMS

README.md

@@ -20,7 +20,7 @@ The kit includes a powerful live search system offering a UX on-par with third-p
 
 
 ### 🧰 Lightweight & easily extendable
-Easily customise the theme color and other site attributes using the global data files, or dive into the code and change anything easily. The CSS is authored using [Sass](https://sass-lang.com/) and following the [BEM](https://en.bem.info/) naming convention. JavaScript is added where needed using [Alpine](https://github.com/alpinejs/alpine) and following a component-based approach. Images are processed and optimised at build-time using the [Eleventy image plugin](https://www.11ty.dev/docs/plugins/image/). Apart from Alpine, there are no run-time dependencies, making the site both extremely lightweight and easy to pick up and modify.
+Easily customise the theme color and other site attributes using the global data files, or dive into the code and change anything. The CSS is authored using [Sass](https://sass-lang.com/) and following the [BEM](https://en.bem.info/) naming convention. JavaScript is added where needed using [Alpine](https://github.com/alpinejs/alpine) and following a component-based approach. Images are processed and optimised at build-time using the [Eleventy image plugin](https://www.11ty.dev/docs/plugins/image/). Apart from Alpine, there are no run-time dependencies, making the site both extremely lightweight and easy to pick up and modify.
 
 
 ## Run the site locally

src/_data/nav.json

@@ -1,10 +1,12 @@
-[
+{
-    {
+    "items": [
-        "text": "All recipes",
+        {
-        "url": "/recipes/"
+            "text": "All recipes",
-    },
+            "url": "/recipes/"
-    {
+        },
-        "text": "About",
+        {
-        "url": "/about/"
+            "text": "About",
-    }
+            "url": "/about/"
-]
+        }
+    ]
+}

src/_includes/components/navigation.njk

@@ -6,7 +6,7 @@
                 <span class="c-nav__nav-item c-nav__home-text {{ 'c-nav__nav-item--active' if page.url == '/' }}">Home</span>
             </a>
         </li>
-        {% for navItem in nav %}
+        {% for navItem in nav.items %}
             <li>
                 <a href="{{ navItem.url }}" class="c-nav__nav-item {{ 'c-nav__nav-item--active' if page.url == navItem.url }}">{{ navItem.text }}</a>
             </li>

src/_includes/layouts/home.njk

@@ -7,7 +7,7 @@ bodyClass: c-home
 {% block content %}
     <section>
         <div class="l-container">
-            <h1>{{title}} <span class="c-home__title-author">{{ site.author }}</span></h1>
+            <h1>{{title}}{% if authorInTitle %} <span class="c-home__title-author">{{ site.author }}</span>{% endif %}</h1>
         </div>
     </section>
 

src/admin/config.yml

@@ -36,15 +36,40 @@ collections:
         delete: false
         file: "src/_data/site.json"
         fields:
-          - {label: "Site name", name: "name", widget: "string"}
+          - {label: "Site name", name: "name", widget: "string", hint: "used for SEO"}
           - {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"}
+      - name: "nav"
+        label: "Navigation"
+        delete: false
+        file: "src/_data/nav.json"
+        fields:
+          - label: "Items"
+            name: "items"
+            widget: "list"
+            fields:
+              - {label: "Text", name: "text", widget: "string"}
+              - {label: "Url", name: "url", widget: "string"}
   - name: "pages"
     label: "Pages"
     files:
+    - name: "home"
+      label: "Homepage"
+      file: "src/index.md"
+      fields:
+        - {label: "Title", name: "title", widget: "string"}
+        - {label: "Add author to title", name: "authorInTitle", widget: "boolean"}
+        - {label: "Meta title", name: "metaTitle", widget: "string", hint: "used for SEO"}
+        - {label: "Favourite recipes label", name: "favouriteRecipes", widget: "string"}
+        - {label: "Random recipe label", name: "randomRecipe", widget: "string"}
+    - name: "recipes"
+      label: "All recipes page"
+      file: "src/recipes.md"
+      fields:
+        - {label: "Title", name: "title", widget: "string"}
     - name: "about"
       label: "About page"
       file: "src/about.md"

src/index.md

@@ -1,6 +1,7 @@
 ---
 layout: layouts/home.njk
 title: This cookbook belongs to
+authorInTitle: true
 metaTitle: Home
 favouriteRecipes: Some of my favourite recipes
 randomRecipe: random recipe

src/scss/components/_recipe.scss

@@ -3,6 +3,7 @@
     object-fit: cover;
     height: 40vh;
     min-height: 300px;
+    background-color: var(--color-grey-500); // fallback while image is loading
 }
 
 .c-recipe__title {