automate and localize navbar

_data/navbar.toml

@@ -0,0 +1,49 @@
+[en]
+[en.home]
+name = "home"
+url = "/en/"
+
+[en.about]
+name = "about"
+url = "/en/about/"
+
+[en.blog]
+name = "blog"
+url = "/en/blog/"
+
+[en.reviews]
+name = "reviews"
+url = "/en/reviews/"
+
+[en.links]
+name = "links"
+url = "/en/links/"
+
+[en.contact]
+name = "contact"
+url = "/en/contact/"
+
+[es]
+[es.home]
+name = "inicio"
+url = "/es/"
+
+[es.about]
+name = "acerca de"
+url = "/es/acerca-de/"
+
+[es.blog]
+name = "blog"
+url = "/es/blog/"
+
+[es.reviews]
+name = "reviews"
+url = "/es/reviews/"
+
+[es.links]
+name = "links"
+url = "/es/links/"
+
+[es.contact]
+name = "contacto"
+url = "/es/contacto/"

_includes/default_navbar.njk

@@ -1,14 +1,10 @@
 <nav class="navbar-wrapper">
     <div class="navbar-content">
         <ul>
-            <li id="home"><a href="/">home</a></li>
+            {% for item in navbar[page.lang] | values %}
-            <li id="about"><a href="/about">about</a></li>
+            <li id="{{ item.name }}"><a href="{{ item.url }}">{{ item.name }}</a></li>
-            <li id="blog"><a href="/blog">blog</a></li>
+            {% endfor %}
-            <li id="reviews"><a href="/reviews">reviews</a></li>
-            <li id="links"><a href="/links">links</a></li>
-            <li id="contact"><a href="/contact">contact</a></li>
             <li id="nav-hover" aria-hidden="true"></li>
         </ul>
     </div>
 </nav>
-

eleventy.config.js

@@ -10,6 +10,8 @@ module.exports = function(eleventyConfig) {
     eleventyConfig.addPassthroughCopy("js");
     eleventyConfig.addPassthroughCopy("LICENSE.txt");
 
+    eleventyConfig.addNunjucksFilter("values", obj => Object.values(obj));
+
     eleventyConfig.addPlugin(EleventyI18nPlugin, {
         defaultLanguage: "en"
     });