added localization functionality and translated layouts

_data/locale.toml

@@ -0,0 +1,11 @@
+[license]
+en = "Do What The Fuck You Want To Public License"
+es = "WTFPL"
+
+[please-visit]
+en = "please visit..."
+es = "visita también..."
+
+[recent-posts]
+en = "recent posts"
+es = "posts recientes"

_includes/footer.njk

@@ -1 +1 @@
-<p>{% for button in 88x31.buttons.misc.slice(0, 3) %}<img src="/img/buttons/{{ button.image }}.gif" alt="{{ button.alt }}">{% endfor %}<br>est. 2025 | yuki &#169; <a href="LICENSE.txt">Do What the Fuck You Want to Public License</a> </p>
+<p>{% for button in 88x31.buttons.misc.slice(0, 3) %}<img src="/img/buttons/{{ button.image }}.gif" alt="{{ button.alt }}">{% endfor %}<br>est. 2025 | yuki &#169; <a href="/LICENSE.txt">{{ "license" | i18n }}</a> </p>

_layouts/base.njk

@@ -10,7 +10,7 @@ lastfm: false
         <div class="main-page-wrapper">
             <div class="header-wrapper">
                 <div class="header">
-                    <h1>yukinets</h1>
+                    <h1>{{ meta.sitename }}</h1>
                     <a href="/"><div class="header-banner" title="{{ meta.sitename }}"></div></a>
                     <!--<div class="motd">
                         <marquee behavior="scroll" direction="left">

_layouts/home.njk

@@ -9,7 +9,7 @@ lastfm: true
     <div class="leftside-fake-ad"></div>
     -->
     <div class="buttons-wrapper box">
-        <h2>please visit...</h2>
+        <h2>{{ "please-visit" | i18n }}</h2>
         <div class="buttons">
             {% for button in 88x31.buttons.people.slice(0, 5) %}
             <a href="{{ button.link }}" target="_blank" title="{{ button.name }}">
@@ -31,9 +31,9 @@ lastfm: true
 
 <div class="welcome-aside-right">
     <div class="recent-posts box">
-        <h2>recent posts</h2>
+        <h2>{{ "recent-posts" | i18n }}</h2>
         <ul>
-        {% for post in collections.post.slice(0, 5) %}
+        {% for post in collections.post | i18n_filter(5) %}
             <li><p><a href="{{ post.url }}">{{ post.data.title }}</a> | <span class="date"> {{ post.date.toLocaleString("en-GB", {year: 'numeric', month: '2-digit', day: '2-digit'}) }}</span></p></li>
         {% endfor %}
         </ul>

eleventy.config.js

@@ -1,10 +1,13 @@
+const { I18nPlugin } = require("@11ty/eleventy");
+const i18n = require("eleventy-plugin-i18n");
 const eleventySass = require("eleventy-sass");
 const toml = require("@iarna/toml");
-const {EleventyI18nPlugin} = require('@11ty/eleventy');
+
+const fs = require("fs");
+const path = require("path");
 
 module.exports = function(eleventyConfig) {
     eleventyConfig.setLayoutsDirectory("_layouts");
-    
     eleventyConfig.addPassthroughCopy("img");
     eleventyConfig.addPassthroughCopy("css/fonts");
     eleventyConfig.addPassthroughCopy("js");
@@ -12,12 +15,34 @@ module.exports = function(eleventyConfig) {
 
     eleventyConfig.addNunjucksFilter("values", obj => Object.values(obj));
 
-    eleventyConfig.addPlugin(EleventyI18nPlugin, {
+    eleventyConfig.addFilter("i18n_filter", function(collection, limit = null) {
+        const lang = this.page.lang; // access page.lang from context
+        let filtered = collection.filter(item => item.data.lang === lang);
+        if (limit !== null) {
+            filtered = filtered.slice(0, limit);
+        }
+        return filtered;
+    });
+
+    eleventyConfig.addPlugin(eleventySass);
+    eleventyConfig.addPlugin(I18nPlugin, {
         defaultLanguage: "en"
     });
-    eleventyConfig.addPlugin(eleventySass);
     eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));
 
+    const translationsToml = fs.readFileSync(
+        path.join(__dirname, "_data", "locale.toml"),
+        "utf-8"
+    );
+    const translations = toml.parse(translationsToml);
+
+    eleventyConfig.addPlugin(i18n, {
+        translations,
+        fallbackLocales: {
+            "*": "en",
+        },
+    });
+
     return {
         markdownTemplateEngine: "njk",
         htmlTemplateEngine: "njk"

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@11ty/eleventy": "^3.0.0",
         "@iarna/toml": "^2.2.5",
+        "eleventy-plugin-i18n": "^0.1.3",
         "eleventy-sass": "^3.0.0-beta.0",
         "markdown-it-emoji": "^3.0.0",
         "markdown-it-emoji-customizer": "github:actuallysomecat/markdown-it-emoji-customizer",
@@ -604,6 +605,21 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -759,6 +775,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -783,6 +815,24 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
     "node_modules/commander": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
@@ -916,6 +966,17 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "license": "MIT"
     },
+    "node_modules/eleventy-plugin-i18n": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-i18n/-/eleventy-plugin-i18n-0.1.3.tgz",
+      "integrity": "sha512-O4FtB4t7g0T3ujH3ciFGCyJ/r1CHzp33WYrDqgnX6s6KZ4R63CkN/RndRKU36ahWWUmF0BrLjQ+IDwj2ntsicw==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.1",
+        "lodash.get": "^4.4.2",
+        "templite": "^1.1.0"
+      }
+    },
     "node_modules/eleventy-sass": {
       "version": "3.0.0-beta.0",
       "resolved": "https://registry.npmjs.org/eleventy-sass/-/eleventy-sass-3.0.0-beta.0.tgz",
@@ -1247,6 +1308,15 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
@@ -1498,6 +1568,13 @@
       "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
       "license": "MIT"
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "deprecated": "This package is deprecated. Use the optional chaining (?.) operator instead.",
+      "license": "MIT"
+    },
     "node_modules/luxon": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
@@ -2133,6 +2210,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/templite": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/templite/-/templite-1.2.0.tgz",
+      "integrity": "sha512-O9BpPXF44a9Pg84Be6mjzlrqOtbP2I/B5PNLWu5hb1n9UQ1GTLsjdMg1z5ROCkF6NFXsO5LQfRXEpgTGrZ7Q0Q==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@11ty/eleventy": "^3.0.0",
     "@iarna/toml": "^2.2.5",
+    "eleventy-plugin-i18n": "^0.1.3",
     "eleventy-sass": "^3.0.0-beta.0",
     "markdown-it-emoji": "^3.0.0",
     "markdown-it-emoji-customizer": "github:actuallysomecat/markdown-it-emoji-customizer",