Changeset 91c0a39 in Klonkt for src/views/pages


Ignore:
Timestamp:
06/20/2026 01:50:48 PM (3 months ago)
Author:
roboburr <roboburr@…>
Branches:
main
Children:
66cfbaa
Parents:
03fa548
Message:

feat(i18n phase 2): admin dashboard + public calendar/downloads translated + language switcher in admin

  • Language switcher (select) also in the admin dashboard → choice for god/admin.
  • Translated: admin dashboard (title, tagline, all shortcuts, statistics, sections, table headers, post row), public calendar (shows) + downloads (incl. fix: loop var 't' shadowed the translate t() → label fetched upfront).
  • Dictionary extended (nl/en/de). Remaining admin sub-pages to follow.

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

Location:
src/views/pages
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • src/views/pages/admin.ejs

    r03fa548 r91c0a39  
    11<div class="container admin-page">
    2   <h1>Beheer</h1>
     2  <% if (typeof langs !== 'undefined' && langs && langs.length > 1) { %>
     3    <select class="footer-lang" style="float:right;margin-left:1rem" aria-label="<%= t('nav.language') %>"
     4            onchange="location.href='/lang/'+this.value+'?r='+encodeURIComponent(location.pathname+location.search)">
     5      <% langs.forEach(function(l){ %><option value="<%= l.code %>"<%= l.active ? ' selected' : '' %>><%= l.name %></option><% }); %>
     6    </select>
     7  <% } %>
     8  <h1><%= t('admin.title') %></h1>
    39  <% if (tenancy === 'hub') { %>
    4     <p class="admin-tagline">Hub-modus — bedrijfssite met gebruikers, elk hun eigen Klonkt Hub.</p>
     10    <p class="admin-tagline"><%= t('admin.tagline_hub') %></p>
    511  <% } else { %>
    6     <p class="admin-tagline">Solo-modus — jouw site.</p>
     12    <p class="admin-tagline"><%= t('admin.tagline_solo') %></p>
    713  <% } %>
    814
    915  <nav class="admin-quick-links" aria-label="Beheer-snelkoppelingen">
    1016    <% if (tenancy === 'hub') { %>
    11       <a href="/admin/sites" class="btn">🌐 Sites</a>
    12       <a href="/admin/users" class="btn">👥 Gebruikers</a>
    13       <a href="/admin/audio" class="btn">🎵 Audio</a>
    14       <a href="/admin/playlists" class="btn">📃 Playlists</a>
    15       <a href="/admin/comments" class="btn">💬 Reacties</a>
    16       <% if (primarySite) { %><a href="/admin/seo" class="btn">🔎 SEO</a><% } %>
    17       <a href="/admin/settings" class="btn">⚙️ Instellingen</a>
     17      <a href="/admin/sites" class="btn"><%= t('admin.b_sites') %></a>
     18      <a href="/admin/users" class="btn"><%= t('admin.b_users') %></a>
     19      <a href="/admin/audio" class="btn"><%= t('admin.b_audio') %></a>
     20      <a href="/admin/playlists" class="btn"><%= t('admin.b_playlists') %></a>
     21      <a href="/admin/comments" class="btn"><%= t('admin.b_comments') %></a>
     22      <% if (primarySite) { %><a href="/admin/seo" class="btn"><%= t('admin.b_seo') %></a><% } %>
     23      <a href="/admin/settings" class="btn"><%= t('admin.b_settings') %></a>
    1824    <% } else { %>
    19       <a href="/posts/new" class="btn">✍️ Nieuwe post</a>
    20       <a href="/admin/audio" class="btn">🎵 Audio</a>
    21       <a href="/admin/comments" class="btn">💬 Reacties</a>
     25      <a href="/posts/new" class="btn"><%= t('admin.b_newpost') %></a>
     26      <a href="/admin/audio" class="btn"><%= t('admin.b_audio') %></a>
     27      <a href="/admin/comments" class="btn"><%= t('admin.b_comments') %></a>
    2228      <% if (primarySite) { %>
    23         <a href="/admin/sites/<%= primarySite.slug %>/edit" class="btn">🎨 Uiterlijk</a>
     29        <a href="/admin/sites/<%= primarySite.slug %>/edit" class="btn"><%= t('admin.b_look') %></a>
    2430      <% } else { %>
    25         <a href="/admin/sites/new" class="btn">🎨 Maak je site aan</a>
     31        <a href="/admin/sites/new" class="btn"><%= t('admin.b_makesite') %></a>
    2632      <% } %>
    2733      <% if (tenancy === 'circle') { %>
    28         <a href="/admin/circle" class="btn">🔗 Cirkel</a>
     34        <a href="/admin/circle" class="btn"><%= t('admin.b_circle') %></a>
    2935      <% } %>
    30       <% if (primarySite) { %><a href="/admin/seo" class="btn">🔎 SEO</a><% } %>
    31       <a href="/admin/settings" class="btn">⚙️ Instellingen</a>
     36      <% if (primarySite) { %><a href="/admin/seo" class="btn"><%= t('admin.b_seo') %></a><% } %>
     37      <a href="/admin/settings" class="btn"><%= t('admin.b_settings') %></a>
    3238    <% } %>
    3339    <% if (typeof premiumUnlocked === 'undefined' || premiumUnlocked) { %>
    34       <a href="/admin/stats" class="btn">📊 Statistieken</a>
    35       <a href="/admin/newsletter" class="btn">✉️ Nieuwsbrief</a>
    36       <% if (tenancy !== 'hub' && primarySite) { %><a href="/pers" class="btn" target="_blank">📰 Perskit</a><% } %>
    37       <% if (tenancy !== 'hub' && primarySite) { %><a href="/downloads" class="btn" target="_blank">⬇ Downloads</a><% } %>
    38       <% if (tenancy !== 'hub' && primarySite) { %><a href="/links" class="btn" target="_blank">🔗 Link-in-bio</a><% } %>
    39       <a href="/admin/shows" class="btn">📅 Agenda</a>
     40      <a href="/admin/stats" class="btn"><%= t('admin.b_stats') %></a>
     41      <a href="/admin/newsletter" class="btn"><%= t('admin.b_newsletter') %></a>
     42      <% if (tenancy !== 'hub' && primarySite) { %><a href="/pers" class="btn" target="_blank"><%= t('admin.b_perskit') %></a><% } %>
     43      <% if (tenancy !== 'hub' && primarySite) { %><a href="/downloads" class="btn" target="_blank"><%= t('admin.b_downloads') %></a><% } %>
     44      <% if (tenancy !== 'hub' && primarySite) { %><a href="/links" class="btn" target="_blank"><%= t('admin.b_linkbio') %></a><% } %>
     45      <a href="/admin/shows" class="btn"><%= t('admin.b_agenda') %></a>
    4046    <% } %>
    41     <a href="/admin/settings/google" class="btn">🔑 Google</a>
    42     <a href="/admin/updates" class="btn">🔄 Updates</a>
    43     <a href="/admin/handleiding" class="btn">📖 Handleiding</a>
     47    <a href="/admin/settings/google" class="btn"><%= t('admin.b_google') %></a>
     48    <a href="/admin/updates" class="btn"><%= t('admin.b_updates') %></a>
     49    <a href="/admin/handleiding" class="btn"><%= t('admin.b_help') %></a>
    4450  </nav>
    4551
    4652  <div class="admin-stats">
    4753    <% if (tenancy === 'hub') { %>
    48       <div class="stat-card"><div class="stat-num"><%= stats.users %></div><div class="stat-label">Gebruikers</div></div>
    49       <div class="stat-card"><div class="stat-num"><%= stats.sites %></div><div class="stat-label">Sites</div></div>
     54      <div class="stat-card"><div class="stat-num"><%= stats.users %></div><div class="stat-label"><%= t('admin.st_users') %></div></div>
     55      <div class="stat-card"><div class="stat-num"><%= stats.sites %></div><div class="stat-label"><%= t('admin.st_sites') %></div></div>
    5056    <% } %>
    51     <div class="stat-card"><div class="stat-num"><%= stats.posts %></div><div class="stat-label">Posts</div></div>
    52     <div class="stat-card"><div class="stat-num"><%= stats.published %></div><div class="stat-label">Gepubliceerd</div></div>
     57    <div class="stat-card"><div class="stat-num"><%= stats.posts %></div><div class="stat-label"><%= t('admin.st_posts') %></div></div>
     58    <div class="stat-card"><div class="stat-num"><%= stats.published %></div><div class="stat-label"><%= t('admin.st_published') %></div></div>
    5359  </div>
    5460
    5561  <% if (typeof posts !== 'undefined' && posts && posts.length) { %>
    5662    <% var _drafts = posts.filter(function(p){ return p.isDraft; }).length; %>
    57     <h2>Posts<% if (_drafts) { %> <span class="pl-draftcount"><%= _drafts %> concept<%= _drafts === 1 ? '' : 'en' %></span><% } %></h2>
     63    <h2><%= t('admin.sec_posts') %><% if (_drafts) { %> <span class="pl-draftcount"><%= _drafts %> <%= t('admin.draft').toLowerCase() %><%= _drafts === 1 ? '' : 's' %></span><% } %></h2>
    5864    <ul class="post-admin-list">
    5965      <% posts.forEach(function(p) { %>
    6066        <li class="pal-row<%= p.isDraft ? ' is-draft' : '' %>">
    6167          <a class="pal-title" href="<%= p.editUrl %>">
    62             <% if (p.isDraft) { %><span class="pal-badge">Concept</span><% } %>
     68            <% if (p.isDraft) { %><span class="pal-badge"><%= t('admin.draft') %></span><% } %>
    6369            <span class="pal-name"><%= p.title || '(zonder titel)' %></span>
    6470          </a>
    6571          <span class="pal-actions">
    66             <a class="pal-link" href="<%= p.editUrl %>">Bewerken</a>
    67             <% if (!p.isDraft) { %><a class="pal-link" href="<%= p.viewUrl %>">Bekijk</a><% } %>
     72            <a class="pal-link" href="<%= p.editUrl %>"><%= t('admin.edit') %></a>
     73            <% if (!p.isDraft) { %><a class="pal-link" href="<%= p.viewUrl %>"><%= t('admin.view') %></a><% } %>
    6874          </span>
    6975        </li>
    … …  
    7379
    7480  <% if (sites && sites.length) { %>
    75     <h2>Sites</h2>
     81    <h2><%= t('admin.sec_sites') %></h2>
    7682    <table class="admin-table">
    7783      <thead>
    78         <tr><th>Slug</th><th>Title</th><th>Owner</th><th>Created</th></tr>
     84        <tr><th><%= t('admin.th_slug') %></th><th><%= t('admin.th_title') %></th><th><%= t('admin.th_owner') %></th><th><%= t('admin.th_created') %></th></tr>
    7985      </thead>
    8086      <tbody>
    … …  
    9298
    9399  <% if (users && users.length) { %>
    94     <h2>Users</h2>
     100    <h2><%= t('admin.sec_users') %></h2>
    95101    <table class="admin-table">
    96102      <thead>
    97         <tr><th>Username</th><th>Email</th><th>Role</th><th>Joined</th></tr>
     103        <tr><th><%= t('admin.th_username') %></th><th><%= t('admin.th_email') %></th><th><%= t('admin.th_role') %></th><th><%= t('admin.th_joined') %></th></tr>
    98104      </thead>
    99105      <tbody>

  • src/views/pages/downloads.ejs

    r03fa548 r91c0a39  
    11<%
    22  var ts = (typeof dlTracks !== 'undefined') ? dlTracks : [];
     3  // NB: de loop hieronder gebruikt 't' als track-variabele, die de vertaal-t()
     4  // overschaduwt. Daarom het knoplabel hier al ophalen.
     5  var _dlBtn = t('downloads.btn');
    36%>
    47<article class="container post-page">
    58  <%- include('../partials/post-nav', { newerPost: (typeof newerPost !== 'undefined' ? newerPost : null), olderPost: (typeof olderPost !== 'undefined' ? olderPost : null) }) %>
    69  <section class="dls">
    7   <h1 class="dls-h1">Downloads</h1>
    8   <p class="dls-sub">Gratis te downloaden — laat je e-mailadres achter en je krijgt het bestand.</p>
     10  <h1 class="dls-h1"><%= t('downloads.title') %></h1>
     11  <p class="dls-sub"><%= t('downloads.sub') %></p>
    912
    1013  <% if (!ts.length) { %>
    11     <p class="dls-empty">Er staan momenteel geen downloads klaar.</p>
     14    <p class="dls-empty"><%= t('downloads.empty') %></p>
    1215  <% } else { %>
    1316    <ul class="dls-list">
    … …  
    1922            <% if (t.artist) { %><span class="dls-artist"><%= t.artist %></span><% } %>
    2023          </span>
    21           <a class="dls-btn" href="<%= siteUrlBase %>/download/<%= t.id %>">⬇ Download</a>
     24          <a class="dls-btn" href="<%= siteUrlBase %>/download/<%= t.id %>"><%= _dlBtn %></a>
    2225        </li>
    2326      <% }); %>

  • src/views/pages/shows.ejs

    r03fa548 r91c0a39  
    44%>
    55<section class="sh">
    6   <h1 class="sh-h1">Agenda</h1>
     6  <h1 class="sh-h1"><%= t('agenda.title') %></h1>
    77
    8   <% if (st === 'done') { %><div class="sh-msg">✓ Je staat op de lijst — je hoort het zodra er een evenement wordt aangekondigd.</div>
    9   <% } else if (st === 'check') { %><div class="sh-msg">✉ Check je mail om je aanmelding te bevestigen.</div>
     8  <% if (st === 'done') { %><div class="sh-msg"><%= t('agenda.msg_done') %></div>
     9  <% } else if (st === 'check') { %><div class="sh-msg"><%= t('agenda.msg_check') %></div>
    1010  <% } else if (st === 'error') { %><div class="sh-msg sh-bad"><%= (typeof notifyMsg!=='undefined')?notifyMsg:'Er ging iets mis.' %></div><% } %>
    1111
    1212  <% if (!ss.length) { %>
    13     <p class="sh-empty">Geen aangekondigde evenementen op dit moment.</p>
     13    <p class="sh-empty"><%= t('agenda.empty') %></p>
    1414  <% } else { %>
    1515    <ul class="sh-list">
    … …  
    2525            <% if (s.notes) { %><span class="sh-notes"><%= s.notes %></span><% } %>
    2626          </span>
    27           <% if (s.ticket_url) { %><a class="sh-tix" href="<%= s.ticket_url %>" target="_blank" rel="noopener">Tickets</a><% } %>
     27          <% if (s.ticket_url) { %><a class="sh-tix" href="<%= s.ticket_url %>" target="_blank" rel="noopener"><%= t('agenda.tickets') %></a><% } %>
    2828        </li>
    2929      <% }); %>
    … …  
    3333  <% if (!(typeof footerNewsletter !== 'undefined' && footerNewsletter)) { %>
    3434  <div class="sh-notify">
    35     <h2 class="sh-h2">Mis geen evenement</h2>
    36     <p class="sh-sub">Laat je e-mail achter en je krijgt een seintje bij een nieuw evenement. Uitschrijven kan altijd.</p>
     35    <h2 class="sh-h2"><%= t('agenda.notify_h') %></h2>
     36    <p class="sh-sub"><%= t('agenda.notify_sub') %></p>
    3737    <form method="POST" action="<%= siteUrlBase %>/shows/notify" class="sh-form">
    38       <input type="email" name="email" required placeholder="jouw@email.nl" autocomplete="email">
    39       <button type="submit" class="sh-btn">Houd me op de hoogte</button>
     38      <input type="email" name="email" required placeholder="<%= t('common.email_placeholder') %>" autocomplete="email">
     39      <button type="submit" class="sh-btn"><%= t('agenda.notify_btn') %></button>
    4040    </form>
    4141  </div>
Note: See TracChangeset for help on using the changeset viewer.