Add languages: English and Greek, chosen per blog on the Settings tab

Every blog and its dashboard were hard-wired to English. A blogger can
now pick the language of their blog; it switches the whole dashboard and
the blog's fixed text — post dates, archive months, the RSS link, the
pager, the 404 page — while what the blogger wrote is left alone.

The new internal/i18n package keys translations by the English string,
so an untranslated key renders as English rather than blank, and
TestGreekCatalogComplete scans the templates and handlers to fail when
the Greek catalog misses a key or keeps a stale one. Templates are
compiled once per language with t/tf/date/postdate/month closed over the
language, so they need no data plumbing.

The language lives in settings.language (blog migration 00002), not in
the theme, so "Reset design" does not touch it. Public pages use the
blog's language; management pages use the logged-in user's own blog's,
so a superadmin editing someone else's blog keeps theirs; the login page
follows Accept-Language.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

1 files changed, 89 insertions, 89 deletions

diff --git a/internal/web/templates/dashboard/design.html b/internal/web/templates/dashboard/design.html
index 9c2a12f..e961388 100644
--- a/internal/web/templates/dashboard/design.html
+++ b/internal/web/templates/dashboard/design.html
@@ -1,21 +1,21 @@
-{{define "title"}}Design · {{.Blog.Title}}{{end}}
+{{define "title"}}{{t "Design"}} · {{.Blog.Title}}{{end}}
 {{define "content"}}
 {{$t := .Data.theme}}
 <div class="pagehead">
-  <h1>Design</h1>
-  <p class="lead muted">Changes are live as soon as you save; refresh <a href="{{.BlogURL}}" target="_blank">your blog &#8599;</a> to see them.</p>
+  <h1>{{t "Design"}}</h1>
+  <p class="lead muted">{{t "Changes are live as soon as you save; refresh"}} <a href="{{.BlogURL}}" target="_blank">{{t "your blog"}} &#8599;</a> {{t "to see them."}}</p>
 </div>
-<p class="jumps"><a href="#schemes">Schemes</a><a href="#background">Background</a><a href="#text">Text</a><a href="#header">Header</a><a href="#menu">Menu</a><a href="#posts">Posts</a><a href="#footer">Footer</a><a href="#logo">Logo &amp; icon</a></p>
-<p class="muted small">What appears where — header, columns, footer and their modules — is arranged on the <a href="/b/{{.Blog.Subdomain}}/layout">Layout</a> tab.</p>
+<p class="jumps"><a href="#schemes">{{t "Schemes"}}</a><a href="#background">{{t "Background"}}</a><a href="#text">{{t "Text"}}</a><a href="#header">{{t "Header"}}</a><a href="#menu">{{t "Menu"}}</a><a href="#posts">{{t "Posts"}}</a><a href="#footer">{{t "Footer"}}</a><a href="#logo">{{t "Logo & icon"}}</a></p>
+<p class="muted small">{{t "What appears where — header, columns, footer and their modules — is arranged on the"}} <a href="/b/{{.Blog.Subdomain}}/layout">{{t "Layout"}}</a> {{t "tab."}}</p>
 
 <div class="card" id="schemes">
-  <h2>Colour schemes</h2>
-  <p class="muted small">A quick start: applying a scheme sets every colour below and saves immediately. Images, fonts and layout are kept.</p>
+  <h2>{{t "Colour schemes"}}</h2>
+  <p class="muted small">{{t "A quick start: applying a scheme sets every colour below and saves immediately. Images, fonts and layout are kept."}}</p>
   <form method="post" action="/b/{{.Blog.Subdomain}}/design/preset" class="presets">
     <input type="hidden" name="_csrf" value="{{.CSRF}}">
-    {{range .Data.presets}}<button type="submit" name="preset" value="{{.Key}}" class="preset" title="Apply {{.Name}}">
+    {{range .Data.presets}}<button type="submit" name="preset" value="{{.Key}}" class="preset" title="{{tf "Apply %s" (t .Name)}}">
       <span class="sw" style="background:{{.HeaderBg}}"></span><span class="sw" style="background:{{.Bg}}"></span><span class="sw" style="background:{{.ContentBg}}"></span><span class="sw" style="background:{{.Link}}"></span>
-      <span class="pname">{{.Name}}</span>
+      <span class="pname">{{t .Name}}</span>
     </button>
     {{end}}
   </form>
@@ -25,158 +25,158 @@
 <input type="hidden" name="_csrf" value="{{.CSRF}}">
 
 <div class="card" id="background">
-  <h2>Background</h2>
+  <h2>{{t "Background"}}</h2>
   <div class="row">
-    <label>Colour<br><input type="color" name="bg_color" value="{{$t.BgColor}}"></label>
-    <label>Image style<br><select name="bg_mode">
-      <option value="cover"{{if eq $t.BgMode "cover"}} selected{{end}}>Stretch to fill</option>
-      <option value="fixed"{{if eq $t.BgMode "fixed"}} selected{{end}}>Fill, fixed while scrolling</option>
-      <option value="tile"{{if eq $t.BgMode "tile"}} selected{{end}}>Repeat (tile)</option>
+    <label>{{t "Colour"}}<br><input type="color" name="bg_color" value="{{$t.BgColor}}"></label>
+    <label>{{t "Image style"}}<br><select name="bg_mode">
+      <option value="cover"{{if eq $t.BgMode "cover"}} selected{{end}}>{{t "Stretch to fill"}}</option>
+      <option value="fixed"{{if eq $t.BgMode "fixed"}} selected{{end}}>{{t "Fill, fixed while scrolling"}}</option>
+      <option value="tile"{{if eq $t.BgMode "tile"}} selected{{end}}>{{t "Repeat (tile)"}}</option>
     </select></label>
   </div>
-  {{template "imagepick" (dict "name" "bg_image" "current" $t.BgImage "sub" .Blog.Subdomain "images" .Data.images "label" "Background image")}}
+  {{template "imagepick" (dict "name" "bg_image" "current" $t.BgImage "sub" .Blog.Subdomain "images" .Data.images "label" (t "Background image"))}}
 </div>
 
 <div class="card" id="text">
-  <h2>Text &amp; content area</h2>
+  <h2>{{t "Text & content area"}}</h2>
   <div class="row">
-    <label>Content background<br><input type="color" name="content_bg" value="{{$t.ContentBg}}"></label>
-    <label>Text colour<br><input type="color" name="text_color" value="{{$t.TextColor}}"></label>
-    <label>Link colour<br><input type="color" name="link_color" value="{{$t.LinkColor}}"></label>
+    <label>{{t "Content background"}}<br><input type="color" name="content_bg" value="{{$t.ContentBg}}"></label>
+    <label>{{t "Text colour"}}<br><input type="color" name="text_color" value="{{$t.TextColor}}"></label>
+    <label>{{t "Link colour"}}<br><input type="color" name="link_color" value="{{$t.LinkColor}}"></label>
   </div>
   <div class="hoverpick">
     <input type="checkbox" name="link_hover_custom" id="link-hover-custom"{{if $t.LinkHover}} checked{{end}}>
-    <label for="link-hover-custom" class="check">Change colour when the mouse is over a link</label>
-    <label class="hover-color">Hover colour<br><input type="color" name="link_hover" value="{{if $t.LinkHover}}{{$t.LinkHover}}{{else}}{{$t.LinkColor}}{{end}}"></label>
+    <label for="link-hover-custom" class="check">{{t "Change colour when the mouse is over a link"}}</label>
+    <label class="hover-color">{{t "Hover colour"}}<br><input type="color" name="link_hover" value="{{if $t.LinkHover}}{{$t.LinkHover}}{{else}}{{$t.LinkColor}}{{end}}"></label>
   </div>
   <div class="row">
-    <label>Font<br><select name="font">
+    <label>{{t "Font"}}<br><select name="font">
       <option value="sans"{{if eq $t.Font "sans"}} selected{{end}}>Sans-serif (Helvetica/Arial)</option>
       <option value="serif"{{if eq $t.Font "serif"}} selected{{end}}>Serif (Georgia/Times)</option>
       <option value="mono"{{if eq $t.Font "mono"}} selected{{end}}>Monospace (Courier)</option>
     </select></label>
-    <label>Heading font<br><select name="heading_font">
-      <option value="same"{{if eq $t.HeadingFont "same"}} selected{{end}}>Same as text</option>
+    <label>{{t "Heading font"}}<br><select name="heading_font">
+      <option value="same"{{if eq $t.HeadingFont "same"}} selected{{end}}>{{t "Same as text"}}</option>
       <option value="sans"{{if eq $t.HeadingFont "sans"}} selected{{end}}>Sans-serif</option>
       <option value="serif"{{if eq $t.HeadingFont "serif"}} selected{{end}}>Serif</option>
       <option value="mono"{{if eq $t.HeadingFont "mono"}} selected{{end}}>Monospace</option>
     </select></label>
-    <label>Text size<br><select name="font_size">
-      <option value="small"{{if eq $t.FontSize "small"}} selected{{end}}>Small</option>
-      <option value="normal"{{if eq $t.FontSize "normal"}} selected{{end}}>Normal</option>
-      <option value="large"{{if eq $t.FontSize "large"}} selected{{end}}>Large</option>
+    <label>{{t "Text size"}}<br><select name="font_size">
+      <option value="small"{{if eq $t.FontSize "small"}} selected{{end}}>{{t "Small"}}</option>
+      <option value="normal"{{if eq $t.FontSize "normal"}} selected{{end}}>{{t "Normal"}}</option>
+      <option value="large"{{if eq $t.FontSize "large"}} selected{{end}}>{{t "Large"}}</option>
     </select></label>
-    <label>Underline links<br><select name="link_underline">
-      <option value="always"{{if eq $t.LinkUnderline "always"}} selected{{end}}>Always</option>
-      <option value="hover"{{if eq $t.LinkUnderline "hover"}} selected{{end}}>Only on hover</option>
-      <option value="never"{{if eq $t.LinkUnderline "never"}} selected{{end}}>Never</option>
+    <label>{{t "Underline links"}}<br><select name="link_underline">
+      <option value="always"{{if eq $t.LinkUnderline "always"}} selected{{end}}>{{t "Always"}}</option>
+      <option value="hover"{{if eq $t.LinkUnderline "hover"}} selected{{end}}>{{t "Only on hover"}}</option>
+      <option value="never"{{if eq $t.LinkUnderline "never"}} selected{{end}}>{{t "Never"}}</option>
     </select></label>
   </div>
   <div class="row">
-    <label>Box style<br><select name="content_style">
-      <option value="card"{{if eq $t.ContentStyle "card"}} selected{{end}}>Card (shadow, rounded corners)</option>
-      <option value="flat"{{if eq $t.ContentStyle "flat"}} selected{{end}}>Flat</option>
+    <label>{{t "Box style"}}<br><select name="content_style">
+      <option value="card"{{if eq $t.ContentStyle "card"}} selected{{end}}>{{t "Card (shadow, rounded corners)"}}</option>
+      <option value="flat"{{if eq $t.ContentStyle "flat"}} selected{{end}}>{{t "Flat"}}</option>
     </select></label>
-    <label>Padding <span class="muted">(inside the box)</span><br><select name="content_padding">
-      <option value="compact"{{if eq $t.ContentPadding "compact"}} selected{{end}}>Compact</option>
-      <option value="normal"{{if eq $t.ContentPadding "normal"}} selected{{end}}>Normal</option>
-      <option value="roomy"{{if eq $t.ContentPadding "roomy"}} selected{{end}}>Roomy</option>
+    <label>{{t "Padding"}} <span class="muted">({{t "inside the box"}})</span><br><select name="content_padding">
+      <option value="compact"{{if eq $t.ContentPadding "compact"}} selected{{end}}>{{t "Compact"}}</option>
+      <option value="normal"{{if eq $t.ContentPadding "normal"}} selected{{end}}>{{t "Normal"}}</option>
+      <option value="roomy"{{if eq $t.ContentPadding "roomy"}} selected{{end}}>{{t "Roomy"}}</option>
     </select></label>
   </div>
-  <p class="muted small">The content spans the whole page; how much of it the posts get is set by the column widths on the <a href="/b/{{.Blog.Subdomain}}/layout#columns">Layout</a> tab.</p>
+  <p class="muted small">{{t "The content spans the whole page; how much of it the posts get is set by the column widths on the"}} <a href="/b/{{.Blog.Subdomain}}/layout#columns">{{t "Layout"}}</a> {{t "tab."}}</p>
 </div>
 
 <div class="card" id="header">
-  <h2>Header</h2>
+  <h2>{{t "Header"}}</h2>
   <div class="row">
-    <label>Background<br><input type="color" name="header_bg" value="{{$t.HeaderBg}}"></label>
-    <label>Text colour<br><input type="color" name="header_text" value="{{$t.HeaderText}}"></label>
-    <label>Alignment<br><select name="header_align">
-      <option value="left"{{if eq $t.HeaderAlign "left"}} selected{{end}}>Left</option>
-      <option value="center"{{if eq $t.HeaderAlign "center"}} selected{{end}}>Centred</option>
+    <label>{{t "Background"}}<br><input type="color" name="header_bg" value="{{$t.HeaderBg}}"></label>
+    <label>{{t "Text colour"}}<br><input type="color" name="header_text" value="{{$t.HeaderText}}"></label>
+    <label>{{t "Alignment"}}<br><select name="header_align">
+      <option value="left"{{if eq $t.HeaderAlign "left"}} selected{{end}}>{{t "Left"}}</option>
+      <option value="center"{{if eq $t.HeaderAlign "center"}} selected{{end}}>{{t "Centred"}}</option>
     </select></label>
-    <label>Image height<br><select name="header_image_height">
-      <option value="short"{{if eq $t.HeaderImageHeight "short"}} selected{{end}}>Short</option>
-      <option value="medium"{{if eq $t.HeaderImageHeight "medium"}} selected{{end}}>Medium</option>
-      <option value="tall"{{if eq $t.HeaderImageHeight "tall"}} selected{{end}}>Tall</option>
+    <label>{{t "Image height"}}<br><select name="header_image_height">
+      <option value="short"{{if eq $t.HeaderImageHeight "short"}} selected{{end}}>{{t "Short"}}</option>
+      <option value="medium"{{if eq $t.HeaderImageHeight "medium"}} selected{{end}}>{{t "Medium"}}</option>
+      <option value="tall"{{if eq $t.HeaderImageHeight "tall"}} selected{{end}}>{{t "Tall"}}</option>
     </select></label>
   </div>
-  <p class="muted small">The title, logo and menu are header modules — add, remove and order them on the <a href="/b/{{.Blog.Subdomain}}/layout#header">Layout</a> tab. The banner below is shown across the top of the header whenever one is chosen.</p>
-  {{template "imagepick" (dict "name" "header_image" "current" $t.HeaderImage "sub" .Blog.Subdomain "images" .Data.images "label" "Header image (banner)")}}
+  <p class="muted small">{{t "The title, logo and menu are header modules — add, remove and order them on the"}} <a href="/b/{{.Blog.Subdomain}}/layout#header">{{t "Layout"}}</a> {{t "tab."}} {{t "The banner below is shown across the top of the header whenever one is chosen."}}</p>
+  {{template "imagepick" (dict "name" "header_image" "current" $t.HeaderImage "sub" .Blog.Subdomain "images" .Data.images "label" (t "Header image (banner)"))}}
 </div>
 
 <div class="card" id="menu">
-  <h2>Menu</h2>
-  <p class="muted small">Which links the menu shows, and where it sits, is set on the <a href="/b/{{.Blog.Subdomain}}/layout#menu">Layout</a> tab. Here you choose how it looks.</p>
+  <h2>{{t "Menu"}}</h2>
+  <p class="muted small">{{t "Which links the menu shows, and where it sits, is set on the"}} <a href="/b/{{.Blog.Subdomain}}/layout#menu">{{t "Layout"}}</a> {{t "tab."}} {{t "Here you choose how it looks."}}</p>
   <div class="row">
-    <label>Alignment <span class="muted">(menu in the header)</span><br><select name="nav_align">
-      <option value="left"{{if eq $t.NavAlign "left"}} selected{{end}}>Left</option>
-      <option value="center"{{if eq $t.NavAlign "center"}} selected{{end}}>Centred</option>
-      <option value="right"{{if eq $t.NavAlign "right"}} selected{{end}}>Right</option>
+    <label>{{t "Alignment"}} <span class="muted">({{t "menu in the header"}})</span><br><select name="nav_align">
+      <option value="left"{{if eq $t.NavAlign "left"}} selected{{end}}>{{t "Left"}}</option>
+      <option value="center"{{if eq $t.NavAlign "center"}} selected{{end}}>{{t "Centred"}}</option>
+      <option value="right"{{if eq $t.NavAlign "right"}} selected{{end}}>{{t "Right"}}</option>
     </select></label>
-    <label>Link style<br><select name="nav_style">
-      <option value="normal"{{if eq $t.NavStyle "normal"}} selected{{end}}>Normal</option>
-      <option value="uppercase"{{if eq $t.NavStyle "uppercase"}} selected{{end}}>Uppercase, spaced</option>
+    <label>{{t "Link style"}}<br><select name="nav_style">
+      <option value="normal"{{if eq $t.NavStyle "normal"}} selected{{end}}>{{t "Normal"}}</option>
+      <option value="uppercase"{{if eq $t.NavStyle "uppercase"}} selected{{end}}>{{t "Uppercase, spaced"}}</option>
     </select></label>
   </div>
-  <h3>Menu colours</h3>
+  <h3>{{t "Menu colours"}}</h3>
   <div class="row">
-    <label>Background<br><input type="color" name="nav_bg" value="{{$t.NavBg}}"></label>
-    <label>Text<br><input type="color" name="nav_text" value="{{$t.NavText}}"></label>
+    <label>{{t "Background"}}<br><input type="color" name="nav_bg" value="{{$t.NavBg}}"></label>
+    <label>{{t "Text"}}<br><input type="color" name="nav_text" value="{{$t.NavText}}"></label>
   </div>
   <div class="hoverpick">
     <input type="checkbox" name="nav_hover_custom" id="nav-hover-custom"{{if $t.NavHover}} checked{{end}}>
-    <label for="nav-hover-custom" class="check">Change colour when the mouse is over a link</label>
-    <label class="hover-color">Hover colour<br><input type="color" name="nav_hover" value="{{if $t.NavHover}}{{$t.NavHover}}{{else}}{{$t.NavText}}{{end}}"></label>
+    <label for="nav-hover-custom" class="check">{{t "Change colour when the mouse is over a link"}}</label>
+    <label class="hover-color">{{t "Hover colour"}}<br><input type="color" name="nav_hover" value="{{if $t.NavHover}}{{$t.NavHover}}{{else}}{{$t.NavText}}{{end}}"></label>
   </div>
 </div>
 
 <div class="card" id="posts">
-  <h2>Posts &amp; dates</h2>
-  <label class="check"><input type="checkbox" name="show_dates"{{if $t.ShowDates}} checked{{end}}> Show the date on posts</label>
+  <h2>{{t "Posts & dates"}}</h2>
+  <label class="check"><input type="checkbox" name="show_dates"{{if $t.ShowDates}} checked{{end}}> {{t "Show the date on posts"}}</label>
   <div class="row">
-    <label>Date format<br><select name="date_format">
-      <option value="long"{{if eq $t.DateFormat "long"}} selected{{end}}>12 September 2026</option>
-      <option value="short"{{if eq $t.DateFormat "short"}} selected{{end}}>12 Sep 2026</option>
-      <option value="iso"{{if eq $t.DateFormat "iso"}} selected{{end}}>2026-09-12</option>
+    <label>{{t "Date format"}}<br><select name="date_format">
+      <option value="long"{{if eq $t.DateFormat "long"}} selected{{end}}>{{postdate "long" .Data.today}}</option>
+      <option value="short"{{if eq $t.DateFormat "short"}} selected{{end}}>{{postdate "short" .Data.today}}</option>
+      <option value="iso"{{if eq $t.DateFormat "iso"}} selected{{end}}>{{postdate "iso" .Data.today}}</option>
     </select></label>
   </div>
 </div>
 
 <div class="card" id="footer">
-  <h2>Footer</h2>
-  <p class="muted small">The footer text, RSS link and other footer modules live on the <a href="/b/{{.Blog.Subdomain}}/layout#footer">Layout</a> tab.</p>
+  <h2>{{t "Footer"}}</h2>
+  <p class="muted small">{{t "The footer text, RSS link and other footer modules live on the"}} <a href="/b/{{.Blog.Subdomain}}/layout#footer">{{t "Layout"}}</a> {{t "tab."}}</p>
   <div class="row">
-    <label>Background<br><input type="color" name="footer_bg" value="{{$t.FooterBg}}"></label>
-    <label>Text colour<br><input type="color" name="footer_color" value="{{$t.FooterColor}}"></label>
+    <label>{{t "Background"}}<br><input type="color" name="footer_bg" value="{{$t.FooterBg}}"></label>
+    <label>{{t "Text colour"}}<br><input type="color" name="footer_color" value="{{$t.FooterColor}}"></label>
   </div>
 </div>
 
 <div class="card" id="logo">
-  <h2>Logo &amp; site icon</h2>
+  <h2>{{t "Logo & site icon"}}</h2>
   <div class="row">
-    <label>Logo size<br><select name="logo_size">
-      <option value="small"{{if eq $t.LogoSize "small"}} selected{{end}}>Small (48 px tall)</option>
-      <option value="medium"{{if eq $t.LogoSize "medium"}} selected{{end}}>Medium (80 px)</option>
-      <option value="large"{{if eq $t.LogoSize "large"}} selected{{end}}>Large (140 px)</option>
+    <label>{{t "Logo size"}}<br><select name="logo_size">
+      <option value="small"{{if eq $t.LogoSize "small"}} selected{{end}}>{{t "Small (48 px tall)"}}</option>
+      <option value="medium"{{if eq $t.LogoSize "medium"}} selected{{end}}>{{t "Medium (80 px)"}}</option>
+      <option value="large"{{if eq $t.LogoSize "large"}} selected{{end}}>{{t "Large (140 px)"}}</option>
     </select></label>
   </div>
-  {{template "imagepick" (dict "name" "logo" "current" $t.Logo "sub" .Blog.Subdomain "images" .Data.images "label" "Logo" "hint" "Shown wherever you place a Logo module (Layout tab); it links to your front page.")}}
-  {{template "imagepick" (dict "name" "favicon" "current" $t.Favicon "sub" .Blog.Subdomain "images" .Data.images "label" "Favicon" "hint" "The small icon browsers show in the tab. A square PNG or ICO of 32–64 px works best; pick None for the Blogspace icon." "accept" "image/png,image/x-icon,image/gif,image/webp,image/jpeg,.ico")}}
+  {{template "imagepick" (dict "name" "logo" "current" $t.Logo "sub" .Blog.Subdomain "images" .Data.images "label" (t "Logo") "hint" (t "Shown wherever you place a Logo module (Layout tab); it links to your front page."))}}
+  {{template "imagepick" (dict "name" "favicon" "current" $t.Favicon "sub" .Blog.Subdomain "images" .Data.images "label" (t "Favicon") "hint" (t "The small icon browsers show in the tab. A square PNG or ICO of 32–64 px works best; pick None for the Blogspace icon.") "accept" "image/png,image/x-icon,image/gif,image/webp,image/jpeg,.ico")}}
 </div>
 
 <div class="savebar">
-  <button type="submit">Save design</button>
-  <a class="btn secondary" href="{{.BlogURL}}" target="_blank">View blog &#8599;</a>
+  <button type="submit">{{t "Save design"}}</button>
+  <a class="btn secondary" href="{{.BlogURL}}" target="_blank">{{t "View blog"}} &#8599;</a>
 </div>
 </form>
 
 <details class="help reset">
-  <summary>Reset to defaults</summary>
-  <p>Puts every colour, font and layout option back to how a new blog starts and forgets the chosen images (they stay in your library).</p>
+  <summary>{{t "Reset to defaults"}}</summary>
+  <p>{{t "Puts every colour, font and layout option back to how a new blog starts and forgets the chosen images (they stay in your library)."}}</p>
   <form method="post" action="/b/{{.Blog.Subdomain}}/design/reset">
     <input type="hidden" name="_csrf" value="{{.CSRF}}">
-    <button type="submit" class="danger">Reset everything</button>
+    <button type="submit" class="danger">{{t "Reset everything"}}</button>
   </form>
 </details>
 {{end}}