Changeset 03fa548 in Klonkt for src/views/partials/footer.ejs

Timestamp:

06/20/2026 01:39:41 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

91c0a39

Parents:

d0f4c10

Message:

feat(i18n): interface language NL/EN/DE with visitor switcher (phase 1: chrome)

• i18n.js (t helper + nl/en/de dictionary + resolveLang: session → browser → nl).
• render.js passes t/lang/langs to all views; /lang/:code sets the language in the session.
• Language switcher (select) in the footer; chrome translated: topnav (Archive/Login/Account/Admin/Logout/…), pill (Agenda/Solo/Circle/Timeline/Grid), post nav (Newer/Older), footer.
• Content (posts/site name/bio) stays in the author's language. Admin + deeper page strings follow in a next phase.

Co-Authored-By: Claude <noreply@…>

File:

• src/views/partials/footer.ejs (modified) (3 diffs)

src/views/partials/footer.ejs

@@ -2 +2 @@
   <% if (typeof footerNewsletter !== 'undefined' && footerNewsletter && (typeof premiumUnlocked === 'undefined' || premiumUnlocked) && typeof site !== 'undefined' && site) { %>
     <div class="container footer-nl">
-      <span class="footer-nl-label">📬 Blijf op de hoogte</span>
+      <span class="footer-nl-label">📬 <%= t('footer.subscribe_cta') %></span>
       <form method="post" action="<%= (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '' %>/nieuwsbrief" class="footer-nl-form">
-        <input type="email" name="email" required placeholder="jouw@email.nl" autocomplete="email" aria-label="E-mailadres">
-        <button type="submit">Inschrijven</button>
+        <input type="email" name="email" required placeholder="<%= t('common.email_placeholder') %>" autocomplete="email" aria-label="E-mailadres">
+        <button type="submit"><%= t('footer.subscribe') %></button>
       </form>
     </div>
@@ -17 +17 @@
     <button type="button" class="install-app-btn install-app-btn--footer" data-pcms-install-app>
       <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M5 20h14v-2H5v2zm7-18L5.33 9h3.84v6h5.66V9h3.84L12 2z" fill="currentColor"/></svg>
-      <span>Installeer app</span>
+      <span><%= t('footer.install') %></span>
     </button>
     <div class="footer-meta">
+      <% if (typeof langs !== 'undefined' && langs && langs.length > 1) { %>
+        <select class="footer-lang" aria-label="<%= t('nav.language') %>"
+                onchange="location.href='/lang/'+this.value+'?r='+encodeURIComponent(location.pathname+location.search)">
+          <% langs.forEach(function(l){ %><option value="<%= l.code %>"<%= l.active ? ' selected' : '' %>><%= l.name %></option><% }); %>
+        </select>
+      <% } %>
       <a class="footer-version" href="<%= (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '' %>/changelog" title="Bekijk wat er per release veranderd is">Klonkt Beta<%= (typeof appVersion !== 'undefined' && appVersion) ? ' v' + appVersion : '' %></a>
       <%# Mobile-only theme toggle. On desktop the topnav has its own toggle
@@ -101 +107 @@
   display: inline-flex; align-items: center; gap: 0.75rem;
 }
+.footer-lang {
+  background: transparent; color: var(--ink); opacity: 1;
+  border: 1px solid var(--rule); border-radius: 999px;
+  padding: 0.3rem 0.5rem; font-size: 0.78rem; cursor: pointer;
+  font-family: inherit;
+}
+.footer-lang:hover { border-color: var(--accent); }
 .footer-version { color: inherit; text-decoration: none; }
 .footer-version:hover { color: var(--accent); text-decoration: underline; }