From 581bf7c300d9cdeed111364c6b4cad08497bd232 Mon Sep 17 00:00:00 2001
From: Sandro Roth <16229645+rothsandro@users.noreply.github.com>
Date: Sat, 23 Nov 2024 17:46:09 +0100
Subject: [PATCH 1/5] feat: add translations

---
 .app/.eleventy.js                             |  4 +++-
 .app/app-translations.js                      | 16 +++++++++++++
 .app/i18n/en.js                               |  8 +++++++
 .app/lib/modules/search/search.macro.njk      | 24 ++++++++++---------
 .app/lib/modules/translation/index.js         | 13 ++++++++++
 .../modules/translation/translate.filter.js   | 17 +++++++++++++
 .../modules/translation/ui-lang.shortcode.js  |  5 ++++
 app.mjs                                       | 10 ++++++++
 8 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 .app/app-translations.js
 create mode 100644 .app/i18n/en.js
 create mode 100644 .app/lib/modules/translation/index.js
 create mode 100644 .app/lib/modules/translation/translate.filter.js
 create mode 100644 .app/lib/modules/translation/ui-lang.shortcode.js

diff --git a/.app/.eleventy.js b/.app/.eleventy.js
index 3a8d4dd..7744843 100644
--- a/.app/.eleventy.js
+++ b/.app/.eleventy.js
@@ -8,11 +8,12 @@ import { tagsModule } from "./lib/modules/tags/index.js";
 import { tocModule } from "./lib/modules/toc/index.js";
 import { wikilinksModule } from "./lib/modules/wikilinks/index.js";
 import { assetsModule } from "./lib/modules/assets/index.js";
+import { translationModule } from "./lib/modules/translation/index.js";
 import { core } from "./lib/core/index.js";
 
 export const config = core.configObj;
 
-export default function (eleventyConfig) {
+export default async function (eleventyConfig) {
   sharedModule.setup(eleventyConfig);
   customPropsModule.setup(eleventyConfig);
   dynamicContentModule.setup(eleventyConfig);
@@ -23,6 +24,7 @@ export default function (eleventyConfig) {
   tocModule.setup(eleventyConfig);
   wikilinksModule.setup(eleventyConfig);
   assetsModule.setup(eleventyConfig);
+  await translationModule.setup(eleventyConfig);
 
   core.setup(eleventyConfig);
 }
diff --git a/.app/app-translations.js b/.app/app-translations.js
new file mode 100644
index 0000000..8d2960c
--- /dev/null
+++ b/.app/app-translations.js
@@ -0,0 +1,16 @@
+// @ts-check
+import en from "./i18n/en.js";
+
+/**
+ * @typedef {typeof en} BaseTranslations;
+ * @typedef {{ [TKey in keyof BaseTranslations]: BaseTranslations[TKey] |  (string & {})}} Translations
+ * @typedef {{ lang: string; translations: Partial<Translations>}} TranslationConfig
+ */
+
+/**
+ * @param {TranslationConfig} config
+ * @returns {TranslationConfig} The config
+ */
+export function defineTranslations(config) {
+  return config;
+}
diff --git a/.app/i18n/en.js b/.app/i18n/en.js
new file mode 100644
index 0000000..6a3f8c9
--- /dev/null
+++ b/.app/i18n/en.js
@@ -0,0 +1,8 @@
+export default /** @type {const} */ ({
+  "search.noscript": "Please enable JavaScript to use the search.",
+  "search.shortcutInfo": 'Press "/" to activate search',
+  "search.input.placeholder": "Search...",
+  "search.popover.placeholder": "Search by title, content and #tags",
+  "search.popover.searching": "Searching...",
+  "search.popover.noResults": "Nothing found, try a different search term.",
+});
diff --git a/.app/lib/modules/search/search.macro.njk b/.app/lib/modules/search/search.macro.njk
index 8525cb0..35b9cf6 100644
--- a/.app/lib/modules/search/search.macro.njk
+++ b/.app/lib/modules/search/search.macro.njk
@@ -3,8 +3,8 @@
   {% set id = uniqueId() %}
 
   {% if mode === 'inline' %}
-    <noscript lang="en">
-      Please enable JavaScript to use the search.
+    <noscript lang="{% uiLang %}">
+      {{ 'search.noscript' | t }}
     </noscript>
   {% endif %}
 
@@ -23,7 +23,7 @@
         aria-expanded="false"
         :aria-activedescendant="open && selectedId ? `{{ id('result', '') }}${selectedId}` : ''"
         :aria-expanded="open"
-        placeholder="Search..."
+        placeholder="{{ 'search.input.placeholder' | t }}"
         class="search__input"
         autocorrect="off"
         autocapitalize="off"
@@ -34,24 +34,26 @@
         @focus="open = true"
         @keydown="onKeyDown"
         @pageshow.window="term = $el.value"
-        lang="en"
+        lang="{% uiLang %}"
         {{ 'autofocus' if mode === 'inline' else '' }}
       >
       {% if mode === 'overlay' %}
         <kbd class="search__kbd" aria-hidden="true">/</kbd>
-        <span class="visually-hidden" lang="en">Press <kbd>/<kbd> to activate search</span>
+        <span class="visually-hidden" lang="{% uiLang %}">
+          {{ 'search.shortcutInfo' | t }}
+        </span>
       {% endif %}
     </div>
     <template x-if="open{{ '|| true' if mode === 'inline' else '' }}">
       <div class="search__popover" id="{{ id('popup') }}">
-        <div x-show="!term" class="search__info" lang="en">
-          Search by title, content and #tags
+        <div x-show="!term" class="search__info" lang="{% uiLang %}">
+          {{ 'search.popover.placeholder' | t }}
         </div>
-        <div x-show="!!term && results && !results.length" class="search__info" lang="en">
-          Nothing found, try a different search term.
+        <div x-show="!!term && results && !results.length" class="search__info" lang="{% uiLang %}">
+          {{ 'search.popover.noResults' | t }}
         </div>
-        <div x-show="!!term && !results" class="search__info" lang="en">
-          Searching...
+        <div x-show="!!term && !results" class="search__info" lang="{% uiLang %}">
+          {{ 'search.popover.searching' | t }}
         </div>
 
         <ul x-show="term && results && results.length" class="search__results" role="listbox" aria-label="Search Results">
diff --git a/.app/lib/modules/translation/index.js b/.app/lib/modules/translation/index.js
new file mode 100644
index 0000000..f81af6b
--- /dev/null
+++ b/.app/lib/modules/translation/index.js
@@ -0,0 +1,13 @@
+import { translateFilter } from "./translate.filter.js";
+import { uiLangShortcode } from "./ui-lang.shortcode.js";
+
+export const translationModule = {
+  /**
+   * Sets up the module
+   * @param {import("@11ty/eleventy").UserConfig} config
+   */
+  async setup(config) {
+    config.addFilter("t", await translateFilter(config));
+    config.addShortcode("uiLang", await uiLangShortcode(config));
+  },
+};
diff --git a/.app/lib/modules/translation/translate.filter.js b/.app/lib/modules/translation/translate.filter.js
new file mode 100644
index 0000000..8253997
--- /dev/null
+++ b/.app/lib/modules/translation/translate.filter.js
@@ -0,0 +1,17 @@
+import en from "../../../i18n/en.js";
+
+export const translateFilter = async () => {
+  const app = await import("../../../../app.mjs");
+  const translations = app.translations
+    ? { ...en, ...app.translations.translations }
+    : en;
+
+  return (key) => {
+    if (!(key in translations)) {
+      console.warn("Unknown translation key " + key);
+      return key;
+    }
+
+    return translations[key];
+  };
+};
diff --git a/.app/lib/modules/translation/ui-lang.shortcode.js b/.app/lib/modules/translation/ui-lang.shortcode.js
new file mode 100644
index 0000000..5f1ab69
--- /dev/null
+++ b/.app/lib/modules/translation/ui-lang.shortcode.js
@@ -0,0 +1,5 @@
+export const uiLangShortcode = async () => {
+  const app = await import("../../../../app.mjs");
+  const lang = app.translations?.lang ?? "en";
+  return () => lang;
+};
diff --git a/app.mjs b/app.mjs
index 76ee5f1..a8a0a3f 100644
--- a/app.mjs
+++ b/app.mjs
@@ -1,5 +1,15 @@
 // @ts-check
 import { defineConfig, createNotesQuery } from "./.app/app-config.js";
+import { defineTranslations } from "./.app/app-translations.js";
+
+// TODO: For testing purposes only => remove
+export const translations = defineTranslations({
+  lang: "de",
+  translations: {
+    "search.input.placeholder": "Suchen...",
+    "search.popover.placeholder": "Suche nach Titel, Inhalt und #tag",
+  },
+});
 
 export default defineConfig({
   title: "Eleventy Notes",

From 1d345237d036b7c6b77b2e2e623d19e1dbd3bbc5 Mon Sep 17 00:00:00 2001
From: Sandro Roth <16229645+rothsandro@users.noreply.github.com>
Date: Sun, 24 Nov 2024 13:00:54 +0100
Subject: [PATCH 2/5] feat: validate translation keys

---
 .app/app-translations.js | 22 +++++++++++++++++++++-
 app.mjs                  |  1 +
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/.app/app-translations.js b/.app/app-translations.js
index 8d2960c..fb085f6 100644
--- a/.app/app-translations.js
+++ b/.app/app-translations.js
@@ -4,7 +4,8 @@ import en from "./i18n/en.js";
 /**
  * @typedef {typeof en} BaseTranslations;
  * @typedef {{ [TKey in keyof BaseTranslations]: BaseTranslations[TKey] |  (string & {})}} Translations
- * @typedef {{ lang: string; translations: Partial<Translations>}} TranslationConfig
+ * @typedef {{ lang: string; partial: true; translations: Partial<Translations>}
+ *  | { lang: string; partial?: false; translations: Translations}} TranslationConfig
  */
 
 /**
@@ -12,5 +13,24 @@ import en from "./i18n/en.js";
  * @returns {TranslationConfig} The config
  */
 export function defineTranslations(config) {
+  validateKeys(config);
   return config;
 }
+
+/**
+ * @param {TranslationConfig} config
+ */
+function validateKeys(config) {
+  const base = Object.keys(en);
+  const overrides = Object.keys(config.translations);
+
+  overrides
+    .filter((key) => !base.includes(key))
+    .forEach((key) => console.error(`[Translation] Invalid key '${key}'`));
+
+  if (config.partial !== true) {
+    base
+      .filter((key) => !overrides.includes(key))
+      .forEach((key) => console.error(`[Translation] Missing key '${key}'`));
+  }
+}
diff --git a/app.mjs b/app.mjs
index a8a0a3f..79816f8 100644
--- a/app.mjs
+++ b/app.mjs
@@ -5,6 +5,7 @@ import { defineTranslations } from "./.app/app-translations.js";
 // TODO: For testing purposes only => remove
 export const translations = defineTranslations({
   lang: "de",
+  partial: true,
   translations: {
     "search.input.placeholder": "Suchen...",
     "search.popover.placeholder": "Suche nach Titel, Inhalt und #tag",

From a4ebaacd57880862e1744924fe5569390931e130 Mon Sep 17 00:00:00 2001
From: Sandro Roth <16229645+rothsandro@users.noreply.github.com>
Date: Sun, 24 Nov 2024 19:01:56 +0100
Subject: [PATCH 3/5] feat: translate ui

---
 .app/i18n/en.js                               | 31 +++++++++++++++++--
 .app/lib/core/nav-toggle.partial.njk          |  4 +--
 .../bookmarks/bookmark-toggle.macro.njk       |  4 +--
 .../modules/notes/edit-this-note.macro.njk    |  4 +--
 .../lib/modules/notes/notes-panel.partial.njk | 24 ++++++++++----
 .../modules/search/search-button.partial.njk  |  4 +--
 .app/lib/modules/search/search.macro.njk      |  4 +--
 .../modules/sidebar/sidebar-tree.macro.njk    |  2 +-
 .app/lib/modules/sidebar/sidebar.partial.njk  | 26 ++++++++++------
 .../modules/themes/theme-switcher.partial.njk |  8 ++---
 .../modules/translation/translate.filter.js   | 10 ++++--
 .../shared/skip-link/skip-link.partial.njk    |  4 +--
 .app/pages/search.njk                         |  4 ++-
 .app/pages/tag.njk                            |  2 +-
 .app/pages/tags.njk                           |  2 +-
 15 files changed, 93 insertions(+), 40 deletions(-)

diff --git a/.app/i18n/en.js b/.app/i18n/en.js
index 6a3f8c9..f0fb710 100644
--- a/.app/i18n/en.js
+++ b/.app/i18n/en.js
@@ -1,8 +1,35 @@
 export default /** @type {const} */ ({
+  "nav_toggle.label": "Menu",
+  "search.action": "Search",
   "search.noscript": "Please enable JavaScript to use the search.",
-  "search.shortcutInfo": 'Press "/" to activate search',
+  "search.shortcut_info": 'Press "/" to activate search',
   "search.input.placeholder": "Search...",
   "search.popover.placeholder": "Search by title, content and #tags",
   "search.popover.searching": "Searching...",
-  "search.popover.noResults": "Nothing found, try a different search term.",
+  "search.popover.no_results": "Nothing found, try a different search term.",
+  "theme_switcher.label": "Appearance",
+  "theme_switcher.options.light": "Light",
+  "theme_switcher.options.dark": "Dark",
+  "theme_switcher.options.system": "System",
+  "skip_link.label": "Skip to content",
+  "sidebar.label": "Navigation",
+  "sidebar.sections.main.label": "Main",
+  "sidebar.sections.main.home_link": "Home",
+  "sidebar.sections.main.tags_link": "Tags",
+  "sidebar.sections.main.search_link": "Search",
+  "sidebar.sections.links.label": "Links",
+  "sidebar.sections.bookmarks.label": "Bookmarks",
+  "sidebar.sections.tags.label": "Tags",
+  "sidebar.navItemToggle.label": "Toggle {{ title }}",
+  "panel.table_of_contents.label": "On this page",
+  "panel.custom_properties.label": "Properties",
+  "panel.tags.label": "Tags",
+  "panel.incoming_links.label": "Incoming",
+  "panel.outgoing_links.label": "Outgoing",
+  "panel.external_links.label": "External",
+  "bookmark_toggle.label": "Bookmark",
+  "edit_this_note.label": "Edit",
+  "page.tags.title": "Tags",
+  "page.tag.title": "Tag:",
+  "page.search.title": "Search",
 });
diff --git a/.app/lib/core/nav-toggle.partial.njk b/.app/lib/core/nav-toggle.partial.njk
index ea1f460..456dea5 100644
--- a/.app/lib/core/nav-toggle.partial.njk
+++ b/.app/lib/core/nav-toggle.partial.njk
@@ -4,10 +4,10 @@
     :aria-expanded="$store.nav.open"
     @click="$store.nav.toggle()"
     x-cloak
-    lang="en"
+    lang="{% uiLang %}"
   >
     <span x-show="!$store.nav.open">{{ 'menu' | feather | safe }}</span>
     <span x-show="$store.nav.open">{{ 'x' | feather | safe }}</span>
-    <span class="visually-hidden">Menu</span>
+    <span class="visually-hidden">{{ 'nav_toggle.label' | t }}</span>
   </button>
 </div>
diff --git a/.app/lib/modules/bookmarks/bookmark-toggle.macro.njk b/.app/lib/modules/bookmarks/bookmark-toggle.macro.njk
index c115d76..8534c11 100644
--- a/.app/lib/modules/bookmarks/bookmark-toggle.macro.njk
+++ b/.app/lib/modules/bookmarks/bookmark-toggle.macro.njk
@@ -5,9 +5,9 @@
     class="toggle-btn"
     :aria-pressed="$store.bookmarks.is('{{ id }}')"
     @click="$store.bookmarks.toggle('{{ id }}')"
-    lang="en"
+    lang="{% uiLang %}"
   >
     {{ 'bookmark' | feather | safe }}
-    <span>Bookmark</span>
+    <span>{{ 'bookmark_toggle.label' | t }}</span>
   </button>
 {% endmacro %}
diff --git a/.app/lib/modules/notes/edit-this-note.macro.njk b/.app/lib/modules/notes/edit-this-note.macro.njk
index c9f0500..48622f1 100644
--- a/.app/lib/modules/notes/edit-this-note.macro.njk
+++ b/.app/lib/modules/notes/edit-this-note.macro.njk
@@ -4,10 +4,10 @@
       href="{{ page | editThisNoteLink(config) }}"
       {{ 'target="_blank" rel="noopener"' if config.openInNewTab == true else '' }}
       class="toggle-btn"
-      lang="en"
+      lang="{% uiLang %}"
     >
       {{ 'edit-2' | feather({ width: '1em', height: '1em' }) | safe }}
-      <span>Edit</span>
+      <span>{{ 'edit_this_note.label' | t }}</span>
     </a>
   {% endif %}
 {% endmacro %}
diff --git a/.app/lib/modules/notes/notes-panel.partial.njk b/.app/lib/modules/notes/notes-panel.partial.njk
index fdc088a..b9d1ff2 100644
--- a/.app/lib/modules/notes/notes-panel.partial.njk
+++ b/.app/lib/modules/notes/notes-panel.partial.njk
@@ -11,7 +11,9 @@
     x-on:scroll.window.throttle.30ms="onScroll()"
     :style="indicatorStyles"
   >
-    <h2 class="toc__label" id="app-panel-toc" lang="en">On this page</h2>
+    <h2 class="toc__label" id="app-panel-toc" lang="{% uiLang %}">
+      {{ 'panel.table_of_contents.label' | t }}
+    </h2>
     <ul class="toc__list" role="list" aria-labelledby="app-panel-toc">
       {% for item in toc %}
       <li style="--level: {{ item.level }}" class="toc__item">
@@ -27,7 +29,9 @@
   {% set props = app.customProperties.properties | resolveCustomProps %}
   {% if props | length and app.panel.customProperties %}
   <div class="custom-props">
-    <h2 class="custom-props__label" id="app-panel-props" data-pagefind-ignore lang="en">Properties</h2>
+    <h2 class="custom-props__label" id="app-panel-props" data-pagefind-ignore lang="{% uiLang %}">
+      {{ 'panel.custom_properties.label' | t }}
+    </h2>
     <dl class="custom-props__list stack" data-stack="4" role="list" aria-labelledby="app-panel-props">
       {% for prop in props %}
       <div>
@@ -57,7 +61,9 @@
 
   {% if tags | length and app.panel.tags %}
   <div class="grouped-links">
-    <h2 class="grouped-links__label" id="app-panel-tags" lang="en">Tags</h2>
+    <h2 class="grouped-links__label" id="app-panel-tags" lang="{% uiLang %}">
+      {{ 'panel.tags.label' | t }}
+    </h2>
     <ul class="grouped-links__list" role="list" aria-labelledby="app-panel-tags">
       {% for tag in tags %}
       {% set tagConfig = collections.tags.byId[tag] %}
@@ -77,7 +83,9 @@
   {% set links = collections._links[page.url]() %}
   {% if links.incoming | length and app.panel.incomingLinks %}
   <div class="grouped-links" data-pagefind-ignore>
-    <h2 class="grouped-links__label" id="app-panel-incoming" lang="en">Incoming</h2>
+    <h2 class="grouped-links__label" id="app-panel-incoming" lang="{% uiLang %}">
+      {{ 'panel.incoming_links.label' | t }}
+    </h2>
     <ul class="grouped-links__list" role="list" aria-labelledby="app-panel-incoming">
       {% for incoming in links.incoming %}
         <li>
@@ -93,7 +101,9 @@
 
   {% if links.outgoing | length and app.panel.outgoingLinks %}
   <div class="grouped-links" data-pagefind-ignore>
-    <h2 class="grouped-links__label" id="app-panel-outgoing" lang="en">Outgoing</h2>
+    <h2 class="grouped-links__label" id="app-panel-outgoing" lang="{% uiLang %}">
+      {{ 'panel.outgoing_links.label' | t }}
+    </h2>
     <ul class="grouped-links__list" role="list" aria-labelledby="app-panel-outgoing">
       {% for outgoing in links.outgoing %}
         <li>
@@ -109,7 +119,9 @@
   
   {% if links.external | length and app.panel.externalLinks %}
   <div class="grouped-links" data-pagefind-ignore>
-    <h2 class="grouped-links__label" id="app-panel-external" lang="en">External</h2>
+    <h2 class="grouped-links__label" id="app-panel-external" lang="{% uiLang %}">
+      {{ 'panel.external_links.label' | t }}
+    </h2>
     <ul class="grouped-links__list" role="list" aria-labelledby="app-panel-external">
       {% for external in links.external %}
         <li>
diff --git a/.app/lib/modules/search/search-button.partial.njk b/.app/lib/modules/search/search-button.partial.njk
index d52585a..a2b58d6 100644
--- a/.app/lib/modules/search/search-button.partial.njk
+++ b/.app/lib/modules/search/search-button.partial.njk
@@ -1,4 +1,4 @@
-<a href="/search/" class="icon-btn" lang="en">
+<a href="/search/" class="icon-btn" lang="{% uiLang %}">
   {{ 'search' | feather | safe }}
-  <span class="visually-hidden">Search</span>
+  <span class="visually-hidden">{{ 'search.action' | t }}</span>
 </a>
diff --git a/.app/lib/modules/search/search.macro.njk b/.app/lib/modules/search/search.macro.njk
index 35b9cf6..4668d6e 100644
--- a/.app/lib/modules/search/search.macro.njk
+++ b/.app/lib/modules/search/search.macro.njk
@@ -40,7 +40,7 @@
       {% if mode === 'overlay' %}
         <kbd class="search__kbd" aria-hidden="true">/</kbd>
         <span class="visually-hidden" lang="{% uiLang %}">
-          {{ 'search.shortcutInfo' | t }}
+          {{ 'search.shortcut_info' | t }}
         </span>
       {% endif %}
     </div>
@@ -50,7 +50,7 @@
           {{ 'search.popover.placeholder' | t }}
         </div>
         <div x-show="!!term && results && !results.length" class="search__info" lang="{% uiLang %}">
-          {{ 'search.popover.noResults' | t }}
+          {{ 'search.popover.no_results' | t }}
         </div>
         <div x-show="!!term && !results" class="search__info" lang="{% uiLang %}">
           {{ 'search.popover.searching' | t }}
diff --git a/.app/lib/modules/sidebar/sidebar-tree.macro.njk b/.app/lib/modules/sidebar/sidebar-tree.macro.njk
index 862ef00..d1faa2b 100644
--- a/.app/lib/modules/sidebar/sidebar-tree.macro.njk
+++ b/.app/lib/modules/sidebar/sidebar-tree.macro.njk
@@ -30,7 +30,7 @@
               >
                 {{ 'chevron-right' | feather | safe }}
                 <span class="visually-hidden">
-                  Toggle {{ item.title }}
+                  {{ 'sidebar.navItemToggle.label' | t({ title: item.title }) }}
                 </span>
               </button>
             {% endif %}
diff --git a/.app/lib/modules/sidebar/sidebar.partial.njk b/.app/lib/modules/sidebar/sidebar.partial.njk
index 6e0815a..cce7273 100644
--- a/.app/lib/modules/sidebar/sidebar.partial.njk
+++ b/.app/lib/modules/sidebar/sidebar.partial.njk
@@ -1,10 +1,10 @@
 {% from 'modules/sidebar/sidebar-tree.macro.njk' import sidebarTree %}
 
 <aside>
-  <h2 class="visually-hidden" lang="en">Navigation</h2>
+  <h2 class="visually-hidden" lang="{% uiLang %}">{{ 'sidebar.title' | t }}</h2>
 
   <nav aria-labelledby="app:sidebar:nav" class="nav-section">
-    <h3 id="app:sidebar:nav" class="visually-hidden" lang="en">Main</h3>
+    <h3 id="app:sidebar:nav" class="visually-hidden" lang="{% uiLang %}">{{ 'sidebar.sections.main.label' | t }}</h3>
     <ul class="nav-list" role="list" aria-labelledby="app:sidebar:nav">
       <li>
         <a
@@ -15,7 +15,7 @@
           {{ 'home' | feather | safe }}
           {% set indexQuery = { filter: [['url', 'isEqual', '/' ]] } %}
           {% set indexNote = (collections._notes | query(indexQuery)) | first %}
-          <span>{{ indexNote.data.title if indexNote else 'Home' }}</span>
+          <span>{{ indexNote.data.title if indexNote else ('sidebar.sections.main.home_link' | t) }}</span>
         </a>
       </li>
       {% if collections.tags.length %}
@@ -24,10 +24,10 @@
             href="/tags/"
             {{ '/tags/' | ariaCurrent }}
             class="nav-list__link"
-            lang="en"
+            lang="{% uiLang %}"
           >
             {{ 'hash' | featherRef | safe }}
-            <span>Tags</span>
+            <span>{{ 'sidebar.sections.main.tags_link' | t }}</span>
           </a>
         </li>
       {% endif %}
@@ -36,10 +36,10 @@
           href="/search/"
           {{ '/search/' | ariaCurrent }}
           class="nav-list__link"
-          lang="en"
+          lang="{% uiLang %}"
         >
           {{ 'search' | feather | safe }}
-          <span>Search</span>
+          <span>{{ 'sidebar.sections.main.search_link' | t }}</span>
         </a>
       </li>
     </ul>
@@ -47,7 +47,9 @@
 
   {% if app.sidebar.links.length %}
     <nav aria-labelledby="app:sidebar:section:links" class="nav-section nav-section--continued">
-      <h3 id="app:sidebar:section:links" class="visually-hidden" lang="en">Links</h3>
+      <h3 id="app:sidebar:section:links" class="visually-hidden" lang="{% uiLang %}">
+        {{ 'sidebar.sections.links.label' | t }}
+      </h3>
       <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:links">
         {% for item in app.sidebar.links %}
           <li>
@@ -67,7 +69,9 @@
 
   <template x-if="$store.bookmarks.items.length">
     <nav aria-labelledby="app:sidebar:section:bookmarks" class="nav-section" x-cloak>
-      <h3 id="app:sidebar:section:bookmarks" class="nav-section__title" lang="en">Bookmarks</h3>
+      <h3 id="app:sidebar:section:bookmarks" class="nav-section__title" lang="{% uiLang %}">
+        {{ 'sidebar.sections.bookmarks.label' | t }}
+      </h3>
       <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:bookmarks">
         <template x-for="bkm in $store.bookmarks.items">
           <li>
@@ -122,7 +126,9 @@
 
   {% if collections.tags.length %}
     <nav aria-labelledby="app:sidebar:section:tags" class="nav-section">
-      <h3 id="app:sidebar:section:tags" class="nav-section__title" lang="en">Tags</h3>
+      <h3 id="app:sidebar:section:tags" class="nav-section__title" lang="{% uiLang %}">
+        {{ 'sidebar.sections.tags.label' | t }}
+      </h3>
       <ul class="nav-list" role="list" aria-labelledby="app:sidebar:section:tags">
         {% for tag in collections.tags %}
         <li>
diff --git a/.app/lib/modules/themes/theme-switcher.partial.njk b/.app/lib/modules/themes/theme-switcher.partial.njk
index a421020..832a49d 100644
--- a/.app/lib/modules/themes/theme-switcher.partial.njk
+++ b/.app/lib/modules/themes/theme-switcher.partial.njk
@@ -1,6 +1,6 @@
 {% set id = uniqueId() %}
 
-<div role="radiogroup" aria-label="Appearance" class="theme-switcher" x-data x-cloak lang="en">
+<div role="radiogroup" aria-label="{{ 'theme_switcher.label' | t }}" class="theme-switcher" x-data x-cloak lang="{% uiLang %}">
   <input
     id="{{ id('light') }}"
     type="radio"
@@ -9,7 +9,7 @@
     value="light"
     class="visually-hidden"
   >
-  <label for="{{ id('light') }}" class="theme-switcher__label" aria-label="Light">
+  <label for="{{ id('light') }}" class="theme-switcher__label" aria-label="{{ 'theme_switcher.options.light' | t}}">
     {{ 'sun' | feather | safe }}
   </label>
 
@@ -21,7 +21,7 @@
     value="dark"
     class="visually-hidden"
   >
-  <label for="{{ id('dark') }}" class="theme-switcher__label" aria-label="Dark">
+  <label for="{{ id('dark') }}" class="theme-switcher__label" aria-label="{{ 'theme_switcher.options.dark' | t }}">
     {{ 'moon' | feather | safe }}
   </label>
 
@@ -33,7 +33,7 @@
     value="system"
     class="visually-hidden"
   >
-  <label for="{{ id('system') }}" class="theme-switcher__label" aria-label="System">
+  <label for="{{ id('system') }}" class="theme-switcher__label" aria-label="{{ 'theme_switcher.options.system' | t }}">
     {{ 'monitor' | feather | safe }}
   </label>
 </div>
diff --git a/.app/lib/modules/translation/translate.filter.js b/.app/lib/modules/translation/translate.filter.js
index 8253997..3b79155 100644
--- a/.app/lib/modules/translation/translate.filter.js
+++ b/.app/lib/modules/translation/translate.filter.js
@@ -6,12 +6,18 @@ export const translateFilter = async () => {
     ? { ...en, ...app.translations.translations }
     : en;
 
-  return (key) => {
+  return (key, params) => {
     if (!(key in translations)) {
       console.warn("Unknown translation key " + key);
       return key;
     }
 
-    return translations[key];
+    const value = translations[key];
+    if (!params) return value;
+
+    const placeholders = Object.keys(params);
+    const pattern = new RegExp(`{{\\s*(${placeholders.join("|")})\\s*}}`, "gi");
+
+    return value.replace(pattern, (_, match) => params[match]);
   };
 };
diff --git a/.app/lib/shared/skip-link/skip-link.partial.njk b/.app/lib/shared/skip-link/skip-link.partial.njk
index 5077d81..a1bca81 100644
--- a/.app/lib/shared/skip-link/skip-link.partial.njk
+++ b/.app/lib/shared/skip-link/skip-link.partial.njk
@@ -1,3 +1,3 @@
-<a href="#app-content" class="skip-link" lang="en">
-  Skip to content
+<a href="#app-content" class="skip-link" lang="{% uiLang %}">
+  {{ 'skip_link.label' | t }}
 </a>
diff --git a/.app/pages/search.njk b/.app/pages/search.njk
index f399a73..48b708f 100644
--- a/.app/pages/search.njk
+++ b/.app/pages/search.njk
@@ -9,7 +9,9 @@ panel: false
 
 <div class="page">
   <main class="page__main" id="app-content">
-    <h1 class="page__title" lang="en">Search</h1>
+    <h1 class="page__title" lang="{% uiLang %}">
+      {{ 'page.search.title' | t }}
+    </h1>
     {{ searchInput('inline') }}
   </main>
 </div>
diff --git a/.app/pages/tag.njk b/.app/pages/tag.njk
index 5080d30..c64089e 100644
--- a/.app/pages/tag.njk
+++ b/.app/pages/tag.njk
@@ -13,7 +13,7 @@ panel: false
 
 <div class="page">
   <main class="page__main" id="app-content">
-    <h1 class="page__title"><span lang="en">Tag:</span> {{ tag.label }} <small>({{ tag.notes.length }})</small></h1>
+    <h1 class="page__title"><span lang="{% uiLang %}">{{ 'page.tag.title' | t}}</span> {{ tag.label }} <small>({{ tag.notes.length }})</small></h1>
     <ul role="list" class="stack">
       {% for post in tag.notes | sortNotesByTitle %}
         <li>
diff --git a/.app/pages/tags.njk b/.app/pages/tags.njk
index 6b17374..ab071f7 100644
--- a/.app/pages/tags.njk
+++ b/.app/pages/tags.njk
@@ -7,7 +7,7 @@ panel: false
 
 <div class="page">
   <main class="page__main" id="app-content">
-    <h1 class="page__title" lang="en">Tags <small>({{ collections.tags.length }})</small></h1>
+    <h1 class="page__title" lang="{% uiLang %}">{{ 'page.tags.title' | t }} <small>({{ collections.tags.length }})</small></h1>
     <div class="stack" data-stack="6">
       <ul role="list" class="tags-list">
         {% for tag in collections.tags %}

From d8c0aa474030c6564308e566eeb3fcdc845685cd Mon Sep 17 00:00:00 2001
From: Sandro Roth <16229645+rothsandro@users.noreply.github.com>
Date: Sat, 30 Nov 2024 10:42:53 +0100
Subject: [PATCH 4/5] docs: add language

---
 Features/Bookmarks.md |  2 +-
 Features/Language.md  | 62 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 Features/Language.md

diff --git a/Features/Bookmarks.md b/Features/Bookmarks.md
index 49203fc..beaf827 100644
--- a/Features/Bookmarks.md
+++ b/Features/Bookmarks.md
@@ -1,5 +1,5 @@
 ---
-sort: 5
+sort: 6
 tags: [feature]
 ---
 
diff --git a/Features/Language.md b/Features/Language.md
new file mode 100644
index 0000000..094e7e8
--- /dev/null
+++ b/Features/Language.md
@@ -0,0 +1,62 @@
+---
+sort: 5
+tags: [feature]
+---
+
+Eleventy Notes distinguishes between two types of languages: content language and UI language.
+
+- **Content Language**: This is the language used in your notes, tags, custom properties, etc.
+- **UI Language**: This is the language used in the user interface elements such as the search bar and theme switcher. This also includes invisible labels used for assistive technologies.
+
+## Content Language
+
+The default content language is English. If you prefer to write your notes in another language, you can change the content language in the configuration file via the `lang` property. Refer to the [[Configuration file]] for detailed instructions on how to set up the configuration file.
+
+```js
+// /app.mjs
+export default defineConfig({
+  lang: "de",
+  // ... (other configuration)
+});
+```
+
+## UI Language
+
+By default, Eleventy Notes supports English as the UI language. However, you can customize the translations or add support for other languages by providing a `translations` object in your configuration file.
+
+### Changing Language
+
+You can change the UI language of Eleventy Notes by providing your own translations. To do this, open your existing `app.mjs` configuration file, create a named export `translations`, and use the provided `defineTranslations()` function. You can find the default translations in `.app/i18n/en.js`.
+
+```js
+// /app.mjs
+import { defineTranslations } from "./.app/app-translations.js";
+
+export const translations = defineTranslations({
+  lang: "de",
+  translations: {
+    "search.input.placeholder": "Suchen...",
+    // ... (all other translations)
+  },
+});
+```
+
+> [!TIP] Autocompletion
+> For an improved developer experience, consider using an editor like [VS Code](https://code.visualstudio.com/). Adding `// @ts-check` at the top of your configuration file will enable autocompletion for translation keys and values.
+
+### Customizing texts
+
+If you want to customize specific texts while keeping English as the UI language, you can do so by defining the translations as described above and adding a `partial` property.
+
+```js
+// /app.mjs
+import { defineTranslations } from "./.app/app-translations.js";
+
+export const translations = defineTranslations({
+  lang: "en",
+  partial: true,
+  translations: {
+    "search.popover.placeholder": "Search for lessons by title and content",
+  },
+});
+```

From aaabe010273f400f526936d90891c609e63c3dd4 Mon Sep 17 00:00:00 2001
From: Sandro Roth <16229645+rothsandro@users.noreply.github.com>
Date: Sat, 30 Nov 2024 10:52:09 +0100
Subject: [PATCH 5/5] chore: remove translations

---
 app.mjs | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/app.mjs b/app.mjs
index 79816f8..76ee5f1 100644
--- a/app.mjs
+++ b/app.mjs
@@ -1,16 +1,5 @@
 // @ts-check
 import { defineConfig, createNotesQuery } from "./.app/app-config.js";
-import { defineTranslations } from "./.app/app-translations.js";
-
-// TODO: For testing purposes only => remove
-export const translations = defineTranslations({
-  lang: "de",
-  partial: true,
-  translations: {
-    "search.input.placeholder": "Suchen...",
-    "search.popover.placeholder": "Suche nach Titel, Inhalt und #tag",
-  },
-});
 
 export default defineConfig({
   title: "Eleventy Notes",