Kit: let a site point the language link at its own page

assets/kit/interimm.js

@@ -20,7 +20,12 @@
   const GITHUB_ICON = '<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.921.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>';
   const MENU_ICON = '<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="24" height="24"><path d="M4 7h16M4 12h16M4 17h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
 
-  const renderHeader = (nav, current) => {
+  // A site with its own page in another language names it on the header, e.g.
+  // data-lang-cn="https://cities.interimm.org/?lang=cn"; otherwise the language
+  // link goes to that language's interimm.org home page.
+  const langUrl = (header, l) => header.getAttribute(`data-lang-${l.lang}`) || l.url;
+
+  const renderHeader = (header, nav, current) => {
     const link = (item) => `<a href="${esc(item.url)}"${item.id === current ? ' aria-current="page"' : ''}>${esc(item.name)}</a>`;
     const items = nav.menu.map((item) => {
       if (item.children && item.children.length) {
@@ -29,7 +34,7 @@
       }
       return `<li class="nav-item">${link(item).replace('<a ', '<a class="nav-link" ')}</li>`;
     }).join('');
-    const langs = nav.languages.map((l) => `<a class="nav-link lang-link" href="${esc(l.url)}" hreflang="${esc(l.code)}" lang="${esc(l.code)}"><span class="sr-only">${esc(nav.labels.language)}: </span>${esc(l.name)}</a>`).join('');
+    const langs = nav.languages.map((l) => `<a class="nav-link lang-link" href="${esc(langUrl(header, l))}" hreflang="${esc(l.code)}" lang="${esc(l.code)}"><span class="sr-only">${esc(nav.labels.language)}: </span>${esc(l.name)}</a>`).join('');
     return `<div class="wrap header-inner">
       <a class="brand" href="${esc(nav.home)}"><img class="brand-mark" src="${esc(nav.logo)}" alt="" width="32" height="32"><span class="brand-name">${esc(nav.title)}</span></a>
       <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav"><span class="sr-only">${esc(nav.labels.menu)}</span>${MENU_ICON}</button>
@@ -101,7 +106,7 @@
     fetch(new URL(`nav.${lang}.json`, base))
       .then((r) => { if (!r.ok) throw new Error(r.status); return r.json(); })
       .then((nav) => {
-        if (header) header.innerHTML = renderHeader(nav, header.dataset.current);
+        if (header) header.innerHTML = renderHeader(header, nav, header.dataset.current);
         if (footer) footer.innerHTML = renderFooter(nav);
       })
       .catch(() => { /* keep the page's own fallback markup */ })

kit/README.md

@@ -52,6 +52,17 @@ All of it is static files on GitHub Pages, so it costs nothing. GitHub Pages sen
 `data-lang` is `en` or `cn`; without it the script uses the page's `lang`. Without JavaScript, or if
 interimm.org can't be reached, the fallback markup stays.
 
+The header's language link (中文 / English) goes to the interimm.org home page of the other language. A site
+that has its own page in another language says where it is with `data-lang-cn` or `data-lang-en` on the header,
+for example `data-lang-cn="https://cities.interimm.org/?lang=cn"`, and the link goes there instead.
+
+### Caching
+
+GitHub Pages lets browsers cache files for about 10 minutes, so a kit change reaches other sites within that
+time. A site's own scripts and styles are a different matter: when a page starts using a new kit feature, add a
+version stamp to its own asset URLs (for example `js/main.js?v=20261003`, changed on every deploy) so phones
+don't keep running an old copy against the new page.
+
 Main building blocks: `.wrap`, `.space` (always-dark band with stars), `.kicker`, `.section`, `.section-alt`,
 `.section-title`, `.page-hero`, `.btn` / `.btn-primary` / `.btn-ghost` / `.btn-lg`, `.chips`, `.card`,
 `.card-grid`, `.tile` and `.bento`, `.card-link-wrap` + `.card-link` (whole card clickable), `.text-link`,

layouts/partials/kit.html

@@ -15,7 +15,7 @@
 
 {{- $languages := slice -}}
 {{- range site.Sites }}{{ if ne .Language.Lang site.Language.Lang -}}
-  {{- $languages = $languages | append (dict "code" .Language.LanguageCode "name" .Language.LanguageName "url" .Home.Permalink) -}}
+  {{- $languages = $languages | append (dict "lang" .Language.Lang "code" .Language.LanguageCode "name" .Language.LanguageName "url" .Home.Permalink) -}}
 {{- end }}{{ end -}}
 
 {{- $footer := slice -}}