From bd408614685205e2c054c3206bf04a88523b77b1 Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleatherman@gmail.com>
Date: Wed, 27 Jul 2022 17:00:44 -0500
Subject: [PATCH] Using a dictionary library for i18n, also shows how to use
 i18n with navigation plugin.

---
 .eleventy.js               | 15 +++++++++++++++
 _includes/layouts/base.njk |  2 +-
 _includes/layouts/post.njk | 11 ++++++-----
 en/about/index.md          |  5 +++--
 en/blog.njk                |  2 +-
 en/index.njk               |  2 +-
 i18n.js                    | 22 ++++++++++++++++++++++
 package.json               |  5 +++--
 8 files changed, 52 insertions(+), 12 deletions(-)
 create mode 100644 i18n.js

diff --git a/.eleventy.js b/.eleventy.js
index 741af7f..87300af 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,9 +1,11 @@
 const { DateTime } = require("luxon");
+const rosetta = require("rosetta");
 const markdownItAnchor = require("markdown-it-anchor");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const { EleventyI18nPlugin } = require("@11ty/eleventy");
+const languageStrings = require("./i18n.js");
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.ignores.add("README.md");
@@ -78,6 +80,19 @@ module.exports = function(eleventyConfig) {
     showVersion: true,
   });
 
+  // i18n filter using Rosetta
+  const rosettaLib = rosetta(languageStrings);
+
+  eleventyConfig.addFilter("i18n", function (key, lang) {
+    const I18N_PREFIX = "i18n.";
+    if(key.startsWith(I18N_PREFIX)) {
+      key = key.slice(I18N_PREFIX.length);
+    }
+    // depends on page.lang in 2.0.0-canary.14+
+    let page = this.page || this.ctx?.page || this.context?.environments?.page || {};
+    return rosettaLib.t(key, {}, lang || page.lang);
+  });
+
   return {
     // Control which files Eleventy will process
     // e.g.: *.md, *.njk, *.html, *.liquid
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 8080fbd..c64ca83 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -30,7 +30,7 @@
       {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
       <ul class="nav">
       {%- for entry in collections.all | eleventyNavigation %}
-        <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title }}</a></li>
+        <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title | i18n }}</a></li>
       {%- endfor %}
       </ul>
     </header>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
index 81c4f46..4395de1 100644
--- a/_includes/layouts/post.njk
+++ b/_includes/layouts/post.njk
@@ -18,7 +18,7 @@ templateClass: tmpl-post
 {% if i18nLinks.length %}
 <ul>
   <li>
-    This page is also available in:
+    {{ "i18n.also" | i18n }}
     {%- for link in i18nLinks %}
     <a href="{{ link.url }}" lang="{{ link.lang }}" hreflang="{{ link.lang }}">{{ link.label }}</a>
     {%- if not loop.last %},{% endif %}
@@ -28,12 +28,13 @@ templateClass: tmpl-post
 {% endif %}
 
 {%- if collections.posts %}
-{%- set previousPost = collections.posts | getPreviousCollectionItem() %}
-{%- set nextPost = collections.posts | getNextCollectionItem() %}
+{# these filters are locale-aware in 2.0.0-canary.14 #}
+{%- set previousPost = collections.posts | getPreviousCollectionItem %}
+{%- set nextPost = collections.posts | getNextCollectionItem %}
 {%- if nextPost or previousPost %}
 <ul>
-  {%- if previousPost %}<li>Previous: <a href="{{ previousPost.url | locale_url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
-  {%- if nextPost %}<li>Next: <a href="{{ nextPost.url | locale_url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+  {%- if previousPost %}<li>{{ "i18n.previous" | i18n }}: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
+  {%- if nextPost %}<li>{{ "i18n.next" | i18n }}: <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
 </ul>
 {%- endif %}
 {%- endif %}
diff --git a/en/about/index.md b/en/about/index.md
index c74e8ba..7863f73 100644
--- a/en/about/index.md
+++ b/en/about/index.md
@@ -1,10 +1,11 @@
 ---
-layout: layouts/post.njk
+layout: layouts/base.njk
 title: About Me
 templateClass: tmpl-post
 eleventyNavigation:
-  key: About Me
+  key: nav.about
   order: 3
 ---
+# {{ title }}
 
 I am a person that writes stuff.
diff --git a/en/blog.njk b/en/blog.njk
index 7fde8b9..7f7353f 100644
--- a/en/blog.njk
+++ b/en/blog.njk
@@ -1,7 +1,7 @@
 ---
 layout: layouts/home.njk
 eleventyNavigation:
-  key: Archive
+  key: nav.archive
   order: 2
 ---
 
diff --git a/en/index.njk b/en/index.njk
index 3d5da9d..1c35698 100644
--- a/en/index.njk
+++ b/en/index.njk
@@ -1,7 +1,7 @@
 ---
 layout: layouts/home.njk
 eleventyNavigation:
-  key: Home
+  key: i18n.nav.home
   order: 1
 ---
 {% set maxPosts = collections.posts.length | min(3) %}
diff --git a/i18n.js b/i18n.js
new file mode 100644
index 0000000..3feb584
--- /dev/null
+++ b/i18n.js
@@ -0,0 +1,22 @@
+module.exports = {
+  en: {
+    also: "This page is also available in:",
+    previous: "Previous",
+    next: "Next",
+    nav: {
+      home: "Home",
+      archive: "Archive",
+      about: "About Me",
+    }
+  },
+  es: {
+    also: "Esta página también está disponible en:",
+    previous: "Anterior",
+    next: "Siguiente",
+    nav: {
+      home: "Página de inicio",
+      archive: "Archivo",
+      about: "Acerca de mí",
+    }
+  }
+};
diff --git a/package.json b/package.json
index 79ca8a3..12d8557 100644
--- a/package.json
+++ b/package.json
@@ -25,11 +25,12 @@
   },
   "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
   "dependencies": {
-    "@11ty/eleventy": "^2.0.0-canary.13",
+    "@11ty/eleventy": "^2.0.0-canary.14",
     "@11ty/eleventy-navigation": "^0.3.3",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
     "luxon": "^3.0.1",
-    "markdown-it-anchor": "^8.6.4"
+    "markdown-it-anchor": "^8.6.4",
+    "rosetta": "^1.1.0"
   }
 }