Make all labels translatable

src/_data/site.json

@@ -4,5 +4,7 @@
     "author": "John Doe",
     "primaryColor": "#ffdb70",
     "secondaryColor": "#32816e",
-    "searchLabel": "Find recipes by name or ingredients"
+    "searchLabel": "Find recipes by name or ingredients",
+    "servingsLabel": "servings",
+    "ingredientsLabel": "Ingredients"
 }

src/_includes/components/taglist.njk

@@ -1,9 +1,9 @@
 <nav>
     <ul class="c-tags">
         {% if page.fileSlug == "recipes" %}
-            <li class="c-tags__tag c-tag__tag--selected">All recipes</li>
+            <li class="c-tags__tag c-tag__tag--selected">{{ title }}{{ allRecipesLabel }}</li>
         {% else %}
-            <li><a class="c-tags__tag" href="/recipes">All recipes</a></li>
+            <li><a class="c-tags__tag" href="/recipes">{{ title }}{{ allRecipesLabel }}</a></li>
         {% endif %}
         {% for tagItem in collections.tagList %}
             {% if selectedTag == tagItem %}

src/_includes/layouts/recipe.njk

@@ -30,13 +30,13 @@
                                         +
                                         <span class="u-sr-only">Add 1 serving</span>
                                     </button>
-                                    <span> servings</span>
+                                    <span>{{ site.servingsLabel }}</span>
                                 </p>
                             {% endif %}
                         </div>
                     {% endif %}
 
-                    <h3>Ingredients</h3>
+                    <h3>{{ site.ingredientsLabel }}</h3>
                     <template x-if="currentServings">
                         <ul class="c-recipe__ingredients-list">
                             <template x-for="(ingredient, index) in ingredients" :key="index">

src/_includes/layouts/recipes-list.njk

@@ -4,7 +4,7 @@
     <main>
         <section>
             <div class="l-container">
-                <h1>{{ selectedTag }}{{ " " if selectedTag }}{{title}}</h1>
+                <h1>{{ selectedTag }}{{ title }}</h1>
 
                 {% if not selectedTag %}
                     {% include 'components/taglist.njk' %}

src/admin/config.yml

@@ -41,7 +41,9 @@ collections:
           - {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"}
+          - {label: "Search (label)", name: "searchLabel", widget: "string"}
+          - {label: "Servings (label)", name: "servingsLabel", widget: "string"}
+          - {label: "Ingredients (label)", name: "ingredientsLabel", widget: "string"}
       - name: "nav"
         label: "Navigation"
         delete: false
@@ -70,6 +72,11 @@ collections:
       file: "src/recipes.md"
       fields:
         - {label: "Title", name: "title", widget: "string"}
+    - name: "tags"
+      label: "Tags pages"
+      file: "src/tag.md"
+      fields:
+        - {label: "All recipes (label)", name: "allRecipesLabel", widget: "string"}
     - name: "about"
       label: "About page"
       file: "src/about.md"

src/tag.md

@@ -5,6 +5,7 @@ pagination:
   alias: selectedTag
 permalink: /tags/{{ selectedTag | noEmoji | slug }}/
 layout: layouts/recipes-list.njk
+allRecipesLabel: All recipes
 eleventyComputed:
   metaTitle: "{{ selectedTag | noEmoji }}"
 ---