refactor(share): translate messages

apps/server/src/assets/translations/en/server.json

@@ -294,5 +294,14 @@
   },
   "modals": {
     "error_title": "Error"
+  },
+  "share_theme": {
+    "site-theme": "Site Theme",
+    "search_placeholder": "Search...",
+    "image_alt": "Article Image",
+    "last-updated": "Last updated on {{- date}}",
+    "subpages": "Subpages:",
+    "on-this-page": "On This Page",
+    "expand": "Expand"
   }
 }

packages/share-theme/src/templates/page.ejs

@@ -123,7 +123,7 @@ content = content.replaceAll(headingRe, (...match) => {
                     <%= subRoot.note.title %>
                 </a>
                 <div class="theme-selection">
-                    <span id="sitetheme">Site Theme</span>
+                    <span id="sitetheme"><%= t("share_theme.site-theme") %></span>
                     <label class="switch">
                       <input type="checkbox" checked="<%= currentTheme === "dark" %>" aria-labelledby="sitetheme">
                       <span class="slider"></span>
@@ -134,7 +134,7 @@ content = content.replaceAll(headingRe, (...match) => {
                 <% if (hasTree) { %>
                     <div class="search-item">
                         <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path></svg>
-                        <input type="text" class="search-input" placeholder="Search...">
+                        <input type="text" class="search-input" placeholder="<%= t("share_theme.search_placeholder") %>">
                     </div>
                 <% } %>
             </div>
@@ -163,7 +163,7 @@ content = content.replaceAll(headingRe, (...match) => {
                     <p>This note has no content.</p>
                 <% } else { %>
                     <%
-                    content = content.replace(/<img /g, `<img alt="Article Image" loading="lazy" `);
+                    content = content.replace(/<img /g, `<img alt="${t("share_theme.image_alt")}" loading="lazy" `);
                     %>
                     <%- content %>
                 <% } %>
@@ -172,7 +172,7 @@ content = content.replaceAll(headingRe, (...match) => {
             <% if (note.hasVisibleChildren() || note.type === "book") { %>
                 <nav id="childLinks" class="<% if (isEmpty) { %>grid<% } else { %>list<% } %>">
                     <% if (!isEmpty) { %>
-                        <span>Subpages:</span>
+                        <span><%= t("share_theme.subpages") %></span>
                     <% } %>
 
                     <ul>
@@ -194,10 +194,8 @@ content = content.replaceAll(headingRe, (...match) => {
             <footer id="content-footer">
                 <% if (!isEmpty) { %>
                     <div class="updated">
-                        <% 
+                        <% const lastUpdated = new Date(note.utcDateModified); %>
-                            const lastUpdated = new Date(note.utcDateModified);
+                        <%- t("share_theme.last-updated", { date: `<time datetime="${lastUpdated.toISOString()}">${lastUpdated.toLocaleDateString()}</time>`}) %>
-                        %>
-                        Last updated on <time datetime="<%- lastUpdated.toISOString() %>"><%- lastUpdated.toLocaleDateString() %></time>
                     </div>
                 <% } %>
 
@@ -232,7 +230,7 @@ content = content.replaceAll(headingRe, (...match) => {
             }
         %>
             <div id="toc-pane">
-                <h3>On This Page</h3>
+                <h3><%= t("share_theme.on-this-page") %></h3>
                 <ul id="toc">
                     <% for (const entry of toc) { %>
                         <%- include("toc_item", {entry}) %>

packages/share-theme/src/templates/tree_item.ejs

@@ -7,7 +7,7 @@ const target = isExternalLink ? ` target="_blank" rel="noopener noreferrer"` : "
 
     <% if (note.noteId !== subRoot.note.noteId) { %>
     <a class="<%= linkClass %>" href="<%= linkHref %>"<%= target %>>
-        <% if (note.hasVisibleChildren()) { %><button class="collapse-button" aria-label="Expand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg></button><% } %>
+        <% if (note.hasVisibleChildren()) { %><button class="collapse-button" aria-label="<%= t("share_theme.expand") %>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg></button><% } %>
         <span><i class="<%= note.getIcon() %>"></i> <%= note.title %></span>
     </a>
 <% } %>