Translate the optional #site-title header link at startup (AI)

document.title was already set from the siteName string, but a
visible #site-title header link stayed hardcoded in whatever language
it was typed in — a translated site showed a translated tab title
next to an untranslated header. Set once in router.js's init() rather
than showListView(), so a page that loads straight into an article
route still gets it. Documented #site-title as optional embedding
markup and corrected README's claim that <title> isn't JS-templated.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
biosiasandClaude Sonnet 5 committed 2026-09-22 16:07:45 +02:00
1 parent 057f6673cb
commit 2b2cdb1d3c
2 files changed
+18 -3

No files matched your search

+11 -3
View File
@@ -271,9 +271,12 @@ The resolved locale also drives date formatting (`Intl.DateTimeFormat`), search
tag-label sorting (`localeCompare`), via `getLocale()` in the same module — so a translation
file doesn't just relabel text, it affects how dates and sorting behave too.
Site-specific branding that lives in the embedding page itself (the page `<title>`, the header
search placeholder, the sidebar section headings) is plain static HTML, not JS-templated —
translate it by editing that page directly (`demo/index.html` for this repo's own demo).
The page `<title>` and an optional `#site-title` header link (see "Embedding in an existing
page" below) are both set from the `siteName` string at startup, so they stay in sync with the
resolved locale automatically — translate `siteName` in `strings/xx.json` rather than editing
the page. Other site-specific branding in the embedding page itself (the header search
placeholder, the sidebar section headings) is plain static HTML, not JS-templated — translate
that by editing the page directly (`demo/index.html` for this repo's own demo).
## Embedding in an existing page
@@ -350,6 +353,11 @@ demo does.
```html
<nav id="tag-filters" aria-label="Filter by tag"></nav>
```
- **Site title link — `#site-title`.** Optional; its text is set to the `siteName` string once at
startup, so it stays in sync with the resolved locale without editing the page per language.
```html
<a href="#" id="site-title">My Site</a>
```
`#tag-filters` is optional — omit it and nothing breaks, the article list and search still work
standalone.
+7
View File
@@ -78,6 +78,13 @@ function init() {
if (!document.getElementById('list-view') || !document.getElementById('article-view')) {
throw new Error('Missing required #list-view and/or #article-view element — see the "Embedding in an existing page" section of the README.');
}
// Optional embedding-page markup (see "Embedding in an existing
// page" in the README) — set once here rather than in
// showListView()/loadArticle() so a page that loads straight into
// an article route (a direct link) still gets it, not just one that
// starts on the list view.
const siteTitle = document.getElementById('site-title');
if (siteTitle) siteTitle.textContent = t('siteName');
});
// Show a top-level error if dependencies fail to load (or a mount point