diff --git a/assets/kit/interimm.js b/assets/kit/interimm.js index 2a60b8c..28d8d81 100644 --- a/assets/kit/interimm.js +++ b/assets/kit/interimm.js @@ -20,7 +20,12 @@ const GITHUB_ICON = ''; const MENU_ICON = ''; - 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) => `${esc(item.name)}`; const items = nav.menu.map((item) => { if (item.children && item.children.length) { @@ -29,7 +34,7 @@ } return `
  • ${link(item).replace('`; }).join(''); - const langs = nav.languages.map((l) => `${esc(nav.labels.language)}: ${esc(l.name)}`).join(''); + const langs = nav.languages.map((l) => `${esc(nav.labels.language)}: ${esc(l.name)}`).join(''); return `
    ${esc(nav.title)} @@ -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 */ }) diff --git a/kit/README.md b/kit/README.md index fa92e4d..4b0b9dd 100644 --- a/kit/README.md +++ b/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`, diff --git a/layouts/partials/kit.html b/layouts/partials/kit.html index 85eb8b2..e6c650f 100644 --- a/layouts/partials/kit.html +++ b/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 -}}