Changeset fe86013 in Klonkt

Timestamp:

06/21/2026 11:45:21 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

929d98d

Parents:

137cca5

Message:

feat(i18n phase 4): post comments/like/related + search page (NL/EN/DE)

post.ejs (comment heading with plural, empty state, reply/delete/cancel,
comment form, pending notice, related posts), search.ejs (title, placeholder,
button, results with plural, sections, empty), like button (login title).

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

Location:

src

Files:

• services/i18n.js (modified) (3 diffs)
• views/pages/post.ejs (modified) (8 diffs)
• views/pages/search.ejs (modified) (5 diffs)
• views/partials/like-button.ejs (modified) (1 diff)

src/services/i18n.js

@@ -92 +92 @@
     // Bottom-tab (mobiel)
     'tab.home': 'Home', 'tab.search': 'Zoek', 'tab.write': 'Schrijven', 'tab.profile': 'Profiel',
+    // Reacties + gerelateerd (post-pagina)
+    'comments.heading_one': '{n} reactie', 'comments.heading_other': '{n} reacties',
+    'comments.empty': 'Nog geen reacties.',
+    'comments.to_start': 'om de conversatie te starten.',
+    'comments.reply': 'Reageer', 'comments.delete': 'Verwijder', 'comments.cancel': 'Annuleren',
+    'comments.delete_confirm': 'Deze reactie verwijderen?',
+    'comments.reply_to': 'Antwoord aan {name}…',
+    'comments.add_as': 'Reageer als', 'comments.placeholder': 'Deel je gedachten…',
+    'comments.post': 'Plaats reactie', 'comments.login_to_comment': 'Log in om te reageren',
+    'comments.pending': 'Je reactie wacht op goedkeuring. Hij verschijnt zodra een beheerder hem goedkeurt.',
+    'related.title': 'Gerelateerde posts',
+    // Zoeken + like
+    'search.placeholder': 'Zoek posts en nummers…', 'search.button': 'Zoek',
+    'search.error': 'Kon die zoekopdracht niet uitvoeren. Probeer een eenvoudiger term.',
+    'search.results_one': '{n} resultaat voor “{q}”', 'search.results_other': '{n} resultaten voor “{q}”',
+    'search.section_tracks': 'Nummers', 'search.section_posts': 'Posts',
+    'search.empty': 'Niets gevonden.', 'search.in_post': 'in post →',
+    'like.login_title': 'Log in om deze post te liken',
   },
   en: {
@@ -169 +187 @@
     'auth.f_password': 'Password (min 8 chars)',
     'tab.home': 'Home', 'tab.search': 'Search', 'tab.write': 'Write', 'tab.profile': 'Profile',
+    'comments.heading_one': '{n} comment', 'comments.heading_other': '{n} comments',
+    'comments.empty': 'No comments yet.',
+    'comments.to_start': 'to start the conversation.',
+    'comments.reply': 'Reply', 'comments.delete': 'Delete', 'comments.cancel': 'Cancel',
+    'comments.delete_confirm': 'Delete this comment?',
+    'comments.reply_to': 'Reply to {name}…',
+    'comments.add_as': 'Add a comment as', 'comments.placeholder': 'Share your thoughts…',
+    'comments.post': 'Post comment', 'comments.login_to_comment': 'Log in to comment',
+    'comments.pending': 'Your comment is awaiting moderation. It will appear once an admin approves it.',
+    'related.title': 'Related posts',
+    'search.placeholder': 'Search posts and tracks…', 'search.button': 'Search',
+    'search.error': 'Couldn’t run that search. Try a simpler term.',
+    'search.results_one': '{n} result for “{q}”', 'search.results_other': '{n} results for “{q}”',
+    'search.section_tracks': 'Tracks', 'search.section_posts': 'Posts',
+    'search.empty': 'Nothing found.', 'search.in_post': 'in post →',
+    'like.login_title': 'Log in to like this post',
   },
   de: {
@@ -246 +280 @@
     'auth.f_password': 'Passwort (min. 8 Zeichen)',
     'tab.home': 'Start', 'tab.search': 'Suche', 'tab.write': 'Schreiben', 'tab.profile': 'Profil',
+    'comments.heading_one': '{n} Kommentar', 'comments.heading_other': '{n} Kommentare',
+    'comments.empty': 'Noch keine Kommentare.',
+    'comments.to_start': 'um das Gespräch zu starten.',
+    'comments.reply': 'Antworten', 'comments.delete': 'Löschen', 'comments.cancel': 'Abbrechen',
+    'comments.delete_confirm': 'Diesen Kommentar löschen?',
+    'comments.reply_to': 'Antwort an {name}…',
+    'comments.add_as': 'Kommentieren als', 'comments.placeholder': 'Teile deine Gedanken…',
+    'comments.post': 'Kommentar posten', 'comments.login_to_comment': 'Zum Kommentieren anmelden',
+    'comments.pending': 'Dein Kommentar wartet auf Freigabe. Er erscheint, sobald ein Administrator ihn genehmigt.',
+    'related.title': 'Ähnliche Beiträge',
+    'search.placeholder': 'Beiträge und Titel suchen…', 'search.button': 'Suchen',
+    'search.error': 'Diese Suche konnte nicht ausgeführt werden. Versuch einen einfacheren Begriff.',
+    'search.results_one': '{n} Ergebnis für „{q}“', 'search.results_other': '{n} Ergebnisse für „{q}“',
+    'search.section_tracks': 'Titel', 'search.section_posts': 'Beiträge',
+    'search.empty': 'Nichts gefunden.', 'search.in_post': 'im Beitrag →',
+    'like.login_title': 'Zum Liken anmelden',
   },
 };

src/views/pages/post.ejs

@@ -75 +75 @@
   <section class="post-comments" id="comments">
     <h2 class="comments-heading">
-      <%= totalComments %> comment<%= totalComments === 1 ? '' : 's' %>
+      <%= t(totalComments === 1 ? 'comments.heading_one' : 'comments.heading_other', { n: totalComments }) %>
     </h2>
 
@@ -86 +86 @@
           var s = document.createElement('div');
           s.className = 'comments-pending-flash';
-          s.textContent = 'Your comment is awaiting moderation. It will appear once an admin approves it.';
+          s.textContent = <%- JSON.stringify(t('comments.pending')) %>;
           document.currentScript.parentNode.insertBefore(s, document.currentScript);
         }
@@ -93 +93 @@
 
     <% if (!comments || !comments.length) { %>
-      <p class="comments-empty">No comments yet.<% if (!user) { %> <a href="/auth/login?next=<%= encodeURIComponent(_base + '/' + post.slug + '#comments') %>">Log in</a> to start the conversation.<% } %></p>
+      <p class="comments-empty"><%= t('comments.empty') %><% if (!user) { %> <a href="/auth/login?next=<%= encodeURIComponent(_base + '/' + post.slug + '#comments') %>"><%= t('nav.login') %></a> <%= t('comments.to_start') %><% } %></p>
     <% } else { %>
       <ol class="comments-list">
@@ -113 +113 @@
               <div class="comment-actions">
                 <% if (user && canMutate) { %>
-                  <button type="button" class="comment-reply-btn" data-reply-to="<%= c.id %>">Reply</button>
+                  <button type="button" class="comment-reply-btn" data-reply-to="<%= c.id %>"><%= t('comments.reply') %></button>
                 <% } %>
                 <% if (user && permissions.canDeleteComment(user, c, site)) { %>
-                  <form method="post" action="<%= _base %>/comments/<%= c.id %>/delete" style="display:inline" onsubmit="return confirm('Delete this comment?')">
-                    <button type="submit" class="comment-delete-btn">Delete</button>
+                  <form method="post" action="<%= _base %>/comments/<%= c.id %>/delete" style="display:inline" onsubmit="return confirm('<%= t('comments.delete_confirm') %>')">
+                    <button type="submit" class="comment-delete-btn"><%= t('comments.delete') %></button>
                   </form>
                 <% } %>
@@ -127 +127 @@
                   <input type="hidden" name="post_slug" value="<%= post.slug %>">
                   <input type="hidden" name="parent_comment_id" value="<%= c.id %>">
-                  <textarea name="content" rows="3" maxlength="4000" placeholder="Reply to <%= c.author_username %>…" required></textarea>
+                  <textarea name="content" rows="3" maxlength="4000" placeholder="<%= t('comments.reply_to', { name: c.author_username }) %>" required></textarea>
                   <div class="comment-reply-form-actions">
-                    <button type="submit" class="btn btn-primary">Reply</button>
-                    <button type="button" class="btn comment-cancel-reply">Cancel</button>
+                    <button type="submit" class="btn btn-primary"><%= t('comments.reply') %></button>
+                    <button type="button" class="btn comment-cancel-reply"><%= t('comments.cancel') %></button>
                   </div>
                 </form>
@@ -155 +155 @@
                         <div class="comment-actions">
                           <% if (user && permissions.canDeleteComment(user, r, site)) { %>
-                            <form method="post" action="<%= _base %>/comments/<%= r.id %>/delete" style="display:inline" onsubmit="return confirm('Delete this comment?')">
-                              <button type="submit" class="comment-delete-btn">Delete</button>
+                            <form method="post" action="<%= _base %>/comments/<%= r.id %>/delete" style="display:inline" onsubmit="return confirm('<%= t('comments.delete_confirm') %>')">
+                              <button type="submit" class="comment-delete-btn"><%= t('comments.delete') %></button>
                             </form>
                           <% } %>
@@ -176 +176 @@
         <input type="hidden" name="post_slug" value="<%= post.slug %>">
         <label class="comment-form-label">
-          <span>Add a comment as <strong><%= user.username %></strong></span>
-          <textarea name="content" rows="3" maxlength="4000" placeholder="Share your thoughts…" required></textarea>
+          <span><%= t('comments.add_as') %> <strong><%= user.username %></strong></span>
+          <textarea name="content" rows="3" maxlength="4000" placeholder="<%= t('comments.placeholder') %>" required></textarea>
         </label>
-        <button type="submit" class="btn btn-primary">Post comment</button>
+        <button type="submit" class="btn btn-primary"><%= t('comments.post') %></button>
       </form>
     <% } else if (!user) { %>
       <p class="comments-login-cta">
-        <a href="/auth/login?next=<%= encodeURIComponent(_base + '/' + post.slug + '#comments') %>" class="btn">Log in to comment</a>
+        <a href="/auth/login?next=<%= encodeURIComponent(_base + '/' + post.slug + '#comments') %>" class="btn"><%= t('comments.login_to_comment') %></a>
       </p>
     <% } else { %>
@@ -217 +217 @@
   <% if (relatedPosts && relatedPosts.length > 0) { %>
     <section class="post-related" aria-labelledby="related-heading">
-      <h2 class="post-related-heading" id="related-heading">Gerelateerde posts</h2>
+      <h2 class="post-related-heading" id="related-heading"><%= t('related.title') %></h2>
       <ul class="post-related-grid">
         <% relatedPosts.forEach(function(rp) { %>

src/views/pages/search.ejs

@@ -2 +2 @@
 <% const _tracks = (typeof tracks !== 'undefined' && tracks) ? tracks : []; %>
 <div class="container search-page">
-  <h1>Zoeken</h1>
+  <h1><%= t('nav.search') %></h1>
 
   <form method="get" action="<%= _base %>/search" class="search-page-form">
@@ -9 +9 @@
       name="q"
       value="<%= query %>"
-      placeholder="Zoek posts en nummers…"
+      placeholder="<%= t('search.placeholder') %>"
       autocomplete="off"
       autofocus
-      aria-label="Zoekopdracht">
-    <button type="submit" class="btn btn-primary">Zoek</button>
+      aria-label="<%= t('nav.search') %>">
+    <button type="submit" class="btn btn-primary"><%= t('search.button') %></button>
   </form>
 
   <% if (queryError) { %>
-    <p class="search-error">Kon die zoekopdracht niet uitvoeren. Probeer een eenvoudiger term.</p>
+    <p class="search-error"><%= t('search.error') %></p>
   <% } %>
 
   <% if (query && !queryError) { %>
     <p class="search-meta">
-      <%= total %> resulta<%= total === 1 ? 'at' : 'ten' %> voor &ldquo;<%= query %>&rdquo;
+      <%= t(total === 1 ? 'search.results_one' : 'search.results_other', { n: total, q: query }) %>
     </p>
   <% } %>
 
   <% if (_tracks.length) { %>
-    <h2 class="search-section-title">Nummers</h2>
+    <h2 class="search-section-title"><%= t('search.section_tracks') %></h2>
     <div class="search-tracks">
       <% _tracks.forEach(function(t) {
@@ -56 +56 @@
                hx-swap="innerHTML"
                hx-push-url="<%= t.postUrl %>"
-               aria-label="Open in post">in post →</a>
+               aria-label="<%= t('search.in_post') %>"><%= t('search.in_post') %></a>
           <% } %>
         </div>
@@ -64 +64 @@
 
   <% if (results && results.length) { %>
-    <% if (_tracks.length) { %><h2 class="search-section-title">Posts</h2><% } %>
+    <% if (_tracks.length) { %><h2 class="search-section-title"><%= t('search.section_posts') %></h2><% } %>
     <ol class="search-results">
       <% results.forEach(function(r) { %>
@@ -89 +89 @@
 
   <% if (query && !queryError && !results.length && !_tracks.length) { %>
-    <p class="search-empty">Niets gevonden.</p>
+    <p class="search-empty"><%= t('search.empty') %></p>
   <% } %>
 </div>

src/views/partials/like-button.ejs

@@ -18 +18 @@
 <% } else { %>
   <a class="like-btn" href="/auth/login?next=<%= encodeURIComponent((typeof loginNext !== 'undefined' && loginNext) ? loginNext : '/') %>"
-     title="Log in om deze post te liken">
+     title="<%= t('like.login_title') %>">
     <span class="like-heart" aria-hidden="true">♡</span>
     <span class="like-count"><%= _cnt %></span>