added localization functionality and translated layouts

automate and localize navbar
update gimp project
2025-10-14 06:05:13 -03:00 · 2025-10-14 04:30:04 -03:00 · 2025-10-14 03:12:05 -03:00 · 2025-10-14 03:00:47 -03:00 · 2025-10-14 00:24:48 -03:00 · 2025-10-13 20:02:29 -03:00
19 changed files with 254 additions and 18 deletions
--- a/_data/88x31.toml
+++ b/_data/88x31.toml
@ -7,7 +7,9 @@ people = [
 ]

 misc = [
-    { image = "parentaladvisory", alt = "sorry..." },
-    { image = "4everfriend", alt = "yay!!" }
+    { image = "bookmarkme", alt = "bookmark this page NOW!" },
+    { image = "blink", alt = "blinking eyes" },
+    { image = "parentaladvisory", alt = "PARENTAL ADVISORY: i say FUCK a lot" },
+    { image = "4everfriend", alt = "4everfriend!!" }
 ]

--- a/_data/locale.toml
+++ b/_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"
--- a/_data/navbar.toml
+++ b/_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/"
--- a/_img/hover.xcf
+++ b/_img/hover.xcf
--- a/_includes/default_navbar.njk
+++ b/_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>
-            <li id="about"><a href="/about">about</a></li>
-            <li id="blog"><a href="/blog">blog</a></li>
-            <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>
+            {% for item in navbar[page.lang] | values %}
+            <li id="{{ item.name }}"><a href="{{ item.url }}">{{ item.name }}</a></li>
+            {% endfor %}
            <li id="nav-hover" aria-hidden="true"></li>
        </ul>
    </div>
 </nav>
-
--- a/_includes/footer.njk
+++ b/_includes/footer.njk
@ -1 +1 @@
-<p><img src="/img/buttons/4everfriend.gif" alt="yay!!"><img src="/img/buttons/parentaladvisory.gif" alt="sorry..."><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>
--- a/_layouts/base.njk
+++ b/_layouts/base.njk
@ -1,9 +1,8 @@
 ---
 lastfm: false
-navbar: "default_navbar.njk"
 ---
 <!DOCTYPE html>
-<html>
+<html lang="{{ lang }}">
    <head>
        {% include "base_head.njk" %}
    </head>
@ -11,7 +10,7 @@ navbar: "default_navbar.njk"
        <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">
@ -20,7 +19,7 @@ navbar: "default_navbar.njk"
                    </div>-->
                </div>

-                {% include navbar %}
+                {% include "default_navbar.njk" %}
            </div>
            
            <div class="base-content-wrapper">
--- a/_layouts/home.njk
+++ b/_layouts/home.njk
@ -5,8 +5,11 @@ lastfm: true
 ---
 <div class="welcome-aside-left">
    <div id="listening"></div>
+    <!-- TODO: fake ad
+    <div class="leftside-fake-ad"></div>
+    -->
    <div class="buttons-wrapper box">
-        <h2>please visit...</h3>
+        <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 }}">
@ -28,12 +31,14 @@ 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>
    </div>
-    <!--<img src="/img/home_rightside.jpg" id="rightside">-->
+    <!-- TODO: rightside home image
+    <img src="/img/home_rightside.jpg" id="rightside">
+    -->
 </div>
--- a/eleventy.config.js
+++ b/eleventy.config.js
@ -1,6 +1,11 @@
+const { I18nPlugin } = require("@11ty/eleventy");
+const i18n = require("eleventy-plugin-i18n");
 const eleventySass = require("eleventy-sass");
 const toml = require("@iarna/toml");

+const fs = require("fs");
+const path = require("path");
+
 module.exports = function(eleventyConfig) {
    eleventyConfig.setLayoutsDirectory("_layouts");
    eleventyConfig.addPassthroughCopy("img");
@ -8,9 +13,36 @@ module.exports = function(eleventyConfig) {
    eleventyConfig.addPassthroughCopy("js");
    eleventyConfig.addPassthroughCopy("LICENSE.txt");

+    eleventyConfig.addNunjucksFilter("values", obj => Object.values(obj));
+
+    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.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"
--- a/en/blog/test-post.md
+++ b/en/blog/test-post.md
--- a/en/en.11tydata.js
+++ b/en/en.11tydata.js
@ -0,0 +1,19 @@
+module.exports = {
+    lang: "en",
+    permalink: data => {
+        // `data.page.filePathStem` is the input path without extension, starting with a leading slash
+        // e.g. "/en/index" or "/en/blog/test-post"
+        const stem = data.page.filePathStem;
+        if (stem === "/en/index") {
+            // For /en/index.md → /index.html
+            return "/index.html";
+        }
+        if (stem.startsWith("/en/")) {
+            // For /en/anything-else.md (including subfolders), remove only the first /en
+            // e.g. /en/blog/test-post → /en/blog/test-post/index.html
+            return `${stem.replace(/^\/en/, "")}/index.html`;
+        }
+        // fallback: default 11ty behavior
+        return data.page.outputPath;
+    }
+};
--- a/en/index.md
+++ b/en/index.md
--- a/es/blog/test-post.md
+++ b/es/blog/test-post.md
@ -0,0 +1,14 @@
+---
+title: mi post de prueba
+layout: post
+tags: test
+---
+
+# esperad
+este es un puto teeest
+---
+
+jej
+
+## esperad
+no nada no dije nada
--- a/es/es.11tydata.js
+++ b/es/es.11tydata.js
@ -0,0 +1,8 @@
+module.exports = {
+    lang: 'es',
+    permalink: function (data) {
+        if (data.slug_override) {
+        return `/${data.lang}/${this.slugify(data.slug_override)}/`;
+        }
+    }
+};
--- a/es/index.md
+++ b/es/index.md
@ -0,0 +1,5 @@
+---
+layout: home
+---
+# oye...
+bienvenido a mi sitio!! aun no lo termino pero revisa lo que tenga hecho <3
--- a/img/buttons/blink.gif
+++ b/img/buttons/blink.gif
--- a/img/buttons/bookmarkme.gif
+++ b/img/buttons/bookmarkme.gif
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
Author	SHA1	Message	Date
yuki	36d1426cbc	added localization functionality and translated layouts	2025-10-14 06:05:13 -03:00
yuki	ede30fa2bc	automate and localize navbar	2025-10-14 04:30:04 -03:00
yuki	471c8bd91d	update gimp project	2025-10-14 03:12:05 -03:00
yuki	13746921dd	restructure website for i18n	2025-10-14 03:00:47 -03:00
yuki	df47f4d57b	start internationalization process	2025-10-14 00:24:48 -03:00
yuki	d48bdc796b	add todo	2025-10-13 20:02:29 -03:00
yuki	25d527c5aa	add extra buttons	2025-10-13 16:50:33 -03:00