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:
1 parent
057f6673cb
commit
2b2cdb1d3c
2 files changed
+18
-3
No files matched your search
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in new issue
Block a user