@gjsify/site 0.63.1-next.236 → 0.64.0

package/README.md

@@ -39,6 +39,7 @@ gjsify site build --runtime node        # build and run on a specific runtime
 
 | Option | Meaning |
 | --- | --- |
+| `--overview <file>` | `build`: render the support overview listed in this JSON file instead of one app (see below). |
 | `--root <path>` | Repository to work on — a checkout whose root `package.json` has `gjsify.site`. Default: the working directory. |
 | `--out <dir>` | Output directory, emptied first. Default: `<root>/dist`. |
 | `--offline` | Skip every network call. The page then links to the releases page and omits the counts. |
@@ -47,6 +48,36 @@ gjsify site build --runtime node        # build and run on a specific runtime
 | `--check` | `i18n`: report what is out of date instead of writing it. |
 | `--runtime <r>` | `gjs` \| `node` \| `bun` \| `deno`. Default: the runtime the CLI itself is on. |
 
+## Support pages and SEO
+
+With `gjsify.site.support` set, a build also writes `/<base><lang>/support/index.html` (title
+"Support" / "Unterstützen"; the landing page's support section links to it). It needs no script:
+the GiroCode, the bank details and the link cards (GitHub Sponsors, Liberapay, PayPal) are plain
+markup. The transfer reference defaults to `Support <app name>`, so every app's income is
+recognisable on the statement; `reference` in the `sepa` entry overrides it.
+
+Every build also writes a 1200×630 link-preview card per language (`og-<lang>.png`, drawn as SVG
+and rasterised by GdkPixbuf), `SoftwareApplication` JSON-LD, `hreflang` alternates with an
+`x-default` that points at the default-language page, a valid `og:locale` (`de_DE`), and a
+`sitemap.xml`. `robots.txt` is written only when `gjsify.site.base` is `/`; below a path the host
+root owns it and must list this sitemap. A page title or meta description that is too short
+(or only the app name) is reported as a build warning.
+
+`gjsify site build --overview <file> --out <dir>` renders one page that lists several apps, each
+linking to its own support page, for a host such as `jumplink.eu/support/`:
+
+```json
+{
+  "url": "https://jumplink.eu/",
+  "base": "/support/",
+  "languages": ["en", "de"],
+  "apps": ["../learn6502", "../beifahrer"]
+}
+```
+
+Each `apps` entry is a repository root (relative to the file) with its own `gjsify.site` block;
+its name and published address are read from there.
+
 `GITHUB_TOKEN` is optional and only raises the API rate limit. When a lookup fails the build
 warns rather than failing: a release API outage is not a reason to have no page.
 

package/lib/cli.js

@@ -5,13 +5,15 @@
 // the CLI itself is on, and runs it — so there is no `gjsify-site` bin bound to
 // one runtime. See `packages/infra/cli/src/commands/site.ts`.
 import { join, resolve } from 'node:path';
-import { buildSite, syncSiteI18n } from './site.js';
+import { buildOverview, buildSite, syncSiteI18n } from './site.js';
 const USAGE = `Usage: gjsify site <command> [options]
 
   build [options]    Render the static pages of a repository
   i18n [options]     Update the page catalogues from the strings the build can emit
 
 Options:
+  --overview <file>  build: render the support overview listed in this JSON file
+                     instead of one app (url, languages, apps)
   --root <path>      Repository to work on (default: the working directory)
   --out <dir>        Output directory, emptied first (default: <root>/dist)
   --offline          Skip every network call
@@ -42,6 +44,16 @@ function cacheOption(flags) {
     return flagValue(flags, '--cache-dir');
 }
 async function build(flags) {
+    const overview = flagValue(flags, '--overview');
+    if (overview) {
+        const result = await buildOverview({
+            config: overview,
+            out: resolve(flagValue(flags, '--out') ?? join(process.cwd(), 'dist')),
+            packageDir: flagValue(flags, '--package-dir'),
+        });
+        console.log(`Built ${result.languages.length} overview pages for ${result.apps} apps`);
+        return 0;
+    }
     const root = resolve(flagValue(flags, '--root') ?? process.cwd());
     const result = await buildSite({
         root,

package/lib/client/site.css

@@ -362,16 +362,20 @@ h1 {
   border-block-start: 1px solid var(--band-line);
 }
 
+/* Three fixed rows — pill, value, label — so a badge whose pill is taller (the platform glyphs) or
+ * that carries no value at all still lands its label on the neighbours' line. */
 .badge {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: 2.75rem minmax(1.5rem, auto) auto;
   align-items: center;
+  justify-items: center;
   gap: 0.3rem;
   min-width: 0;
   text-align: center;
 }
 
 .badge-pill {
+  grid-row: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -451,10 +455,10 @@ h1 {
   --platform-color: #4285f4;
 }
 
-/* Kept in the flow even when a badge has no value, so every label sits on the same line. */
+/* The row is reserved even when a badge has no value, so every label sits on the same line. */
 .badge-value {
+  grid-row: 2;
   line-height: 1.5;
-  min-height: 1.5em;
   font-weight: 700;
   font-size: 0.95rem;
   /* A long licence id must wrap inside the badge instead of widening the row. */
@@ -462,6 +466,7 @@ h1 {
 }
 
 .badge-label {
+  grid-row: 3;
   color: var(--muted);
   font-size: 0.78rem;
 }
@@ -517,11 +522,15 @@ h1 {
 /* `--shot-w` is the CSS width this screenshot's renditions were cut for: at that width a 2560px
  * source is a 2× image, and above it the browser would be upscaling. Width and max-height
  * together shrink-wrap the artwork — `object-fit: contain` would letterbox it instead, and the
- * shadow would then be drawn around the empty strip. */
+ * shadow would then be drawn around the empty strip. Both are maxima on an `auto` box, and the
+ * height cap is `--shot-h`, not `100%`: the figure is `fit-content`, and in that intrinsic pass a
+ * percentage max-height counts as none, so the figure took the full width while the image was
+ * capped in height — a portrait shot (a browser popup) came out squashed. */
 .slide img {
-  width: min(100%, var(--shot-w, 100%));
+  width: auto;
+  max-width: min(100%, var(--shot-w, 100%));
   height: auto;
-  max-height: 100%;
+  max-height: var(--shot-h);
   border-radius: var(--radius-lg);
   box-shadow: var(--shot-shadow);
 }
@@ -1045,6 +1054,18 @@ app-download:not([data-enhanced]) .download-toggle {
   margin-block: 2rem;
 }
 
+app-support {
+  display: block;
+}
+
+.support-intro {
+  margin-block: 0 1.5rem;
+}
+
+.support-back {
+  margin-block: 1.5rem 0;
+}
+
 /* Footer */
 
 .footer {

package/lib/client/site.js

@@ -1 +1 @@
-function enhanceDialog(e,t){let n=e.querySelector(`.dialog-close`);n&&(n.hidden=!1,n.addEventListener(`click`,()=>e.close())),t?.addEventListener(`click`,t=>{t.preventDefault(),e.showModal()}),e.addEventListener(`click`,t=>{t.target===e&&e.close()})}const e={linux:`x86_64`,darwin:`arm64`,win32:`x86_64`,android:`arm64`,web:`noarch`};function detectOs(e){let t=`${e.platform??``} ${e.userAgent??``}`;if(/android/i.test(t))return`android`;if(/iphone|ipad|ipod|\bios\b/i.test(t))return`web`;if(/mac|darwin/i.test(t))return`darwin`;if(/win/i.test(t))return`win32`;if(/linux|x11|bsd|cros|chrome ?os/i.test(t))return`linux`}function detectArch(e){if(e.architecture)return e.bitness===`32`?void 0:/arm/i.test(e.architecture)?`arm64`:/x86|amd/i.test(e.architecture)?`x86_64`:void 0;let t=e.userAgent??``;if(/arm64|aarch64/i.test(t))return`arm64`;if(/x86_64|x86-64|amd64|win64|wow64|\bx64\b/i.test(t))return`x86_64`}function detectBrowser(e){let t=e.userAgent??``;if(/firefox|fxios/i.test(t))return`firefox`;if(e.brands?.some(e=>/chromium|chrome|edge|opera|brave/i.test(e))||/chrome|chromium|crios|edg(a|ios)?\/|opr\//i.test(t))return`chromium`}function detectVisitorPlatform(t){let n=detectOs(t),r=detectArch(t);return{os:n,browser:detectBrowser(t),arch:r??(n?e[n]:void 0),archAssumed:r===void 0}}const t=[`firefox`,`chromium`];function isBrowserList(e){return e.length>0&&e.every(e=>t.includes(e.os))}function inGroup(e,n){return t.includes(n)?{...e,browser:n}:{...e,os:n}}function recommendTarget(e,t){let n=isBrowserList(e)?t.browser:t.os;if(!n)return;let r=e.filter(e=>e.os===n&&e.available!==!1),fits=e=>e.arch===`noarch`||e.arch===t.arch;return r.find(e=>e.recommended&&fits(e))??r.find(fits)??r.find(e=>e.recommended)??r[0]}async function readHints(){let e=navigator.userAgentData,t={platform:e?.platform,userAgent:navigator.userAgent,brands:e?.brands?.map(e=>e.brand)};if(e?.getHighEntropyValues)try{let n=await e.getHighEntropyValues([`architecture`,`bitness`]);t.architecture=n.architecture,t.bitness=n.bitness}catch{}return t}function readRows(e){return[...e.querySelectorAll(`li.target`)].flatMap(e=>{let t=e.querySelector(`a`),n=e.dataset.os,r=e.dataset.arch;return!t||!n||!r?[]:[{os:n,arch:r,recommended:e.dataset.recommended!==void 0,url:t.href,cta:e.dataset.cta??t.textContent?.trim()??``,size:e.dataset.size??``}]})}var AppDownload=class extends HTMLElement{connectedCallback(){let e=this.querySelector(`dialog`),t=this.querySelector(`a.download-cta`);if(!e||!t)return;this.dataset.enhanced=`true`,enhanceDialog(e,this.querySelector(`.download-toggle`));let n=readRows(this),r=[...this.querySelectorAll(`.os-group`)],i=[...this.querySelectorAll(`.os-tab`)],a=this.querySelector(`.os-tabs`),o=i.length>1;a&&o&&(a.hidden=!1);let s={os:void 0,arch:void 0,browser:void 0,archAssumed:!0},show=e=>{for(let t of r)t.hidden=o&&t.dataset.os!==e;for(let t of i){let n=t.dataset.os===e;t.setAttribute(`aria-selected`,String(n)),t.tabIndex=n?0:-1}},offer=e=>{t.href=e.url,t.dataset.os=e.os,t.dataset.arch=e.arch;let n=t.querySelector(`.download-label`);n&&(n.textContent=e.cta);let r=document.querySelector(`.badge-size`),i=r?.querySelector(`.badge-value`);if(r&&i){i.textContent=e.size,r.hidden=e.size===``;let t=r.closest(`.badges`);if(t){let e=[...t.children].filter(e=>!e.hidden).length;t.style.setProperty(`--badge-count`,String(e)),t.toggleAttribute(`data-odd`,e%2==1)}}},select=e=>{show(e);let t=recommendTarget(n,inGroup(s,e));t&&offer(t)},c=i.find(e=>e.getAttribute(`aria-selected`)===`true`)?.dataset.os;c&&show(c);for(let e of i)e.addEventListener(`click`,()=>{let t=e.dataset.os;t&&select(t)});a?.addEventListener(`keydown`,e=>{let t=i.indexOf(document.activeElement);if(t===-1)return;let n={ArrowRight:t+1,ArrowLeft:t-1,Home:0,End:i.length-1}[e.key];if(n===void 0)return;e.preventDefault();let r=i[(n+i.length)%i.length];r?.focus(),r?.click()}),readHints().then(e=>{s=detectVisitorPlatform(e);let t=recommendTarget(n,s);t&&(show(t.os),offer(t))})}};customElements.define(`app-download`,AppDownload);function enhanceCopy(e){let t=e.querySelector(`span`),n=t?.textContent??``;navigator.clipboard&&(e.hidden=!1,e.addEventListener(`click`,async()=>{try{await navigator.clipboard.writeText(e.dataset.copy??``)}catch{return}t&&(t.textContent=e.dataset.done??n),setTimeout(()=>{t&&(t.textContent=n)},2e3)}))}var AppSupport=class extends HTMLElement{connectedCallback(){let e=this.querySelector(`dialog`);if(e){this.dataset.enhanced=`true`,enhanceDialog(e,this.querySelector(`.support-cta`));for(let e of this.querySelectorAll(`.sepa-copy`))enhanceCopy(e)}}};customElements.define(`app-support`,AppSupport);var ReleaseNotes=class extends HTMLElement{connectedCallback(){let e=this.querySelector(`.release-body`),t=this.querySelector(`.release-more`);if(!e||!t)return;this.dataset.enhanced=`true`;let n=this.dataset.more??t.textContent??``,r=this.dataset.less??n;if(e.classList.add(`clamped`),e.scrollHeight<=e.clientHeight){e.classList.remove(`clamped`);return}t.hidden=!1,t.textContent=n,t.setAttribute(`aria-expanded`,`false`),t.addEventListener(`click`,()=>{let i=e.classList.toggle(`clamped`);t.textContent=i?n:r,t.setAttribute(`aria-expanded`,String(!i))})}};customElements.define(`release-notes`,ReleaseNotes);var ScreenshotCarousel=class extends HTMLElement{connectedCallback(){let e=this.querySelector(`.carousel-track`),t=[...this.querySelectorAll(`.slide`)];if(!e||t.length===0)return;this.dataset.enhanced=`true`,e.tabIndex=0;let n=matchMedia(`(prefers-reduced-motion: reduce)`),r=[...this.querySelectorAll(`.carousel-dot`)],i=this.querySelector(`.carousel-prev`),a=this.querySelector(`.carousel-next`),o=[this.querySelector(`.carousel-dots`),i,a];if(t.length>1)for(let e of o)e&&(e.hidden=!1);let s=0,clamp=e=>Math.max(0,Math.min(e,t.length-1)),goTo=r=>{let i=t[clamp(r)];if(!i)return;let a=i.offsetLeft-e.offsetLeft-(e.clientWidth-i.clientWidth)/2;e.scrollTo({left:a,behavior:n.matches?`auto`:`smooth`})},mark=e=>{s=e;for(let[t,n]of r.entries())n.setAttribute(`aria-current`,String(t===e));i&&(i.disabled=e===0),a&&(a.disabled=e===t.length-1)};mark(0),i?.addEventListener(`click`,()=>goTo(s-1)),a?.addEventListener(`click`,()=>goTo(s+1));for(let[e,t]of r.entries())t.addEventListener(`click`,()=>goTo(e));let arrowStep=e=>e===`ArrowRight`?1:e===`ArrowLeft`?-1:0;e.addEventListener(`keydown`,e=>{let t=arrowStep(e.key);t!==0&&(e.preventDefault(),goTo(s+t))});let c=new IntersectionObserver(e=>{for(let n of e)n.isIntersecting&&mark(t.indexOf(n.target))},{root:e,threshold:.6});for(let e of t)c.observe(e);let l=this.querySelector(`.lightbox`),u=l?.querySelector(`figure`);if(!l||!u)return;let open=e=>{let n=t[clamp(e)]?.querySelector(`figure`);if(!n)return;s=clamp(e);let r=[...n.children].filter(e=>!e.classList.contains(`slide-expand`));u.replaceChildren(...r.map(e=>e.cloneNode(!0))),l.open||l.showModal()};for(let[e,n]of t.entries()){let t=n.querySelector(`.slide-expand`);t&&(t.hidden=!1,t.addEventListener(`click`,()=>open(e)))}enhanceDialog(l,null),l.addEventListener(`keydown`,e=>{let t=arrowStep(e.key);t!==0&&(e.preventDefault(),open(s+t),goTo(s))})}};customElements.define(`screenshot-carousel`,ScreenshotCarousel);
+function enhanceDialog(e,t){let n=e.querySelector(`.dialog-close`);n&&(n.hidden=!1,n.addEventListener(`click`,()=>e.close())),t?.addEventListener(`click`,t=>{t.preventDefault(),e.showModal()}),e.addEventListener(`click`,t=>{t.target===e&&e.close()})}const e={linux:`x86_64`,darwin:`arm64`,win32:`x86_64`,android:`arm64`,web:`noarch`};function detectOs(e){let t=`${e.platform??``} ${e.userAgent??``}`;if(/android/i.test(t))return`android`;if(/iphone|ipad|ipod|\bios\b/i.test(t))return`web`;if(/mac|darwin/i.test(t))return`darwin`;if(/win/i.test(t))return`win32`;if(/linux|x11|bsd|cros|chrome ?os/i.test(t))return`linux`}function detectArch(e){if(e.architecture)return e.bitness===`32`?void 0:/arm/i.test(e.architecture)?`arm64`:/x86|amd/i.test(e.architecture)?`x86_64`:void 0;let t=e.userAgent??``;if(/arm64|aarch64/i.test(t))return`arm64`;if(/x86_64|x86-64|amd64|win64|wow64|\bx64\b/i.test(t))return`x86_64`}function detectBrowser(e){let t=e.userAgent??``;if(/firefox|fxios/i.test(t))return`firefox`;if(e.brands?.some(e=>/chromium|chrome|edge|opera|brave/i.test(e))||/chrome|chromium|crios|edg(a|ios)?\/|opr\//i.test(t))return`chromium`}function detectVisitorPlatform(t){let n=detectOs(t),r=detectArch(t);return{os:n,browser:detectBrowser(t),arch:r??(n?e[n]:void 0),archAssumed:r===void 0}}const t=[`firefox`,`chromium`];function isBrowserList(e){return e.length>0&&e.every(e=>t.includes(e.os))}function inGroup(e,n){return t.includes(n)?{...e,browser:n}:{...e,os:n}}function recommendTarget(e,t){let n=isBrowserList(e)?t.browser:t.os;if(!n)return;let r=e.filter(e=>e.os===n&&e.available!==!1),fits=e=>e.arch===`noarch`||e.arch===t.arch;return r.find(e=>e.recommended&&fits(e))??r.find(fits)??r.find(e=>e.recommended)??r[0]}async function readHints(){let e=navigator.userAgentData,t={platform:e?.platform,userAgent:navigator.userAgent,brands:e?.brands?.map(e=>e.brand)};if(e?.getHighEntropyValues)try{let n=await e.getHighEntropyValues([`architecture`,`bitness`]);t.architecture=n.architecture,t.bitness=n.bitness}catch{}return t}function readRows(e){return[...e.querySelectorAll(`li.target`)].flatMap(e=>{let t=e.querySelector(`a`),n=e.dataset.os,r=e.dataset.arch;return!t||!n||!r?[]:[{os:n,arch:r,recommended:e.dataset.recommended!==void 0,url:t.href,cta:e.dataset.cta??t.textContent?.trim()??``,size:e.dataset.size??``}]})}var AppDownload=class extends HTMLElement{connectedCallback(){let e=this.querySelector(`dialog`),t=this.querySelector(`a.download-cta`);if(!e||!t)return;this.dataset.enhanced=`true`,enhanceDialog(e,this.querySelector(`.download-toggle`));let n=readRows(this),r=[...this.querySelectorAll(`.os-group`)],i=[...this.querySelectorAll(`.os-tab`)],a=this.querySelector(`.os-tabs`),o=i.length>1;a&&o&&(a.hidden=!1);let s={os:void 0,arch:void 0,browser:void 0,archAssumed:!0},show=e=>{for(let t of r)t.hidden=o&&t.dataset.os!==e;for(let t of i){let n=t.dataset.os===e;t.setAttribute(`aria-selected`,String(n)),t.tabIndex=n?0:-1}},offer=e=>{t.href=e.url,t.dataset.os=e.os,t.dataset.arch=e.arch;let n=t.querySelector(`.download-label`);n&&(n.textContent=e.cta);let r=document.querySelector(`.badge-size`),i=r?.querySelector(`.badge-value`);if(r&&i){i.textContent=e.size,r.hidden=e.size===``;let t=r.closest(`.badges`);if(t){let e=[...t.children].filter(e=>!e.hidden).length;t.style.setProperty(`--badge-count`,String(e)),t.toggleAttribute(`data-odd`,e%2==1)}}},select=e=>{show(e);let t=recommendTarget(n,inGroup(s,e));t&&offer(t)},c=i.find(e=>e.getAttribute(`aria-selected`)===`true`)?.dataset.os;c&&show(c);for(let e of i)e.addEventListener(`click`,()=>{let t=e.dataset.os;t&&select(t)});a?.addEventListener(`keydown`,e=>{let t=i.indexOf(document.activeElement);if(t===-1)return;let n={ArrowRight:t+1,ArrowLeft:t-1,Home:0,End:i.length-1}[e.key];if(n===void 0)return;e.preventDefault();let r=i[(n+i.length)%i.length];r?.focus(),r?.click()}),readHints().then(e=>{s=detectVisitorPlatform(e);let t=recommendTarget(n,s);t&&(show(t.os),offer(t))})}};customElements.define(`app-download`,AppDownload);function enhanceCopy(e){let t=e.querySelector(`span`),n=t?.textContent??``;navigator.clipboard&&(e.hidden=!1,e.addEventListener(`click`,async()=>{try{await navigator.clipboard.writeText(e.dataset.copy??``)}catch{return}t&&(t.textContent=e.dataset.done??n),setTimeout(()=>{t&&(t.textContent=n)},2e3)}))}var AppSupport=class extends HTMLElement{connectedCallback(){this.dataset.enhanced=`true`;let e=this.querySelector(`dialog`);e&&enhanceDialog(e,this.querySelector(`.support-cta`));for(let e of this.querySelectorAll(`.sepa-copy`))enhanceCopy(e)}};customElements.define(`app-support`,AppSupport);var ReleaseNotes=class extends HTMLElement{connectedCallback(){let e=this.querySelector(`.release-body`),t=this.querySelector(`.release-more`);if(!e||!t)return;this.dataset.enhanced=`true`;let n=this.dataset.more??t.textContent??``,r=this.dataset.less??n;if(e.classList.add(`clamped`),e.scrollHeight<=e.clientHeight){e.classList.remove(`clamped`);return}t.hidden=!1,t.textContent=n,t.setAttribute(`aria-expanded`,`false`),t.addEventListener(`click`,()=>{let i=e.classList.toggle(`clamped`);t.textContent=i?n:r,t.setAttribute(`aria-expanded`,String(!i))})}};customElements.define(`release-notes`,ReleaseNotes);var ScreenshotCarousel=class extends HTMLElement{connectedCallback(){let e=this.querySelector(`.carousel-track`),t=[...this.querySelectorAll(`.slide`)];if(!e||t.length===0)return;this.dataset.enhanced=`true`,e.tabIndex=0;let n=matchMedia(`(prefers-reduced-motion: reduce)`),r=[...this.querySelectorAll(`.carousel-dot`)],i=this.querySelector(`.carousel-prev`),a=this.querySelector(`.carousel-next`),o=[this.querySelector(`.carousel-dots`),i,a];if(t.length>1)for(let e of o)e&&(e.hidden=!1);let s=0,clamp=e=>Math.max(0,Math.min(e,t.length-1)),goTo=r=>{let i=t[clamp(r)];if(!i)return;let a=i.offsetLeft-e.offsetLeft-(e.clientWidth-i.clientWidth)/2;e.scrollTo({left:a,behavior:n.matches?`auto`:`smooth`})},mark=e=>{s=e;for(let[t,n]of r.entries())n.setAttribute(`aria-current`,String(t===e));i&&(i.disabled=e===0),a&&(a.disabled=e===t.length-1)};mark(0),i?.addEventListener(`click`,()=>goTo(s-1)),a?.addEventListener(`click`,()=>goTo(s+1));for(let[e,t]of r.entries())t.addEventListener(`click`,()=>goTo(e));let arrowStep=e=>e===`ArrowRight`?1:e===`ArrowLeft`?-1:0;e.addEventListener(`keydown`,e=>{let t=arrowStep(e.key);t!==0&&(e.preventDefault(),goTo(s+t))});let c=new IntersectionObserver(e=>{for(let n of e)n.isIntersecting&&mark(t.indexOf(n.target))},{root:e,threshold:.6});for(let e of t)c.observe(e);let l=this.querySelector(`.lightbox`),u=l?.querySelector(`figure`);if(!l||!u)return;let open=e=>{let n=t[clamp(e)]?.querySelector(`figure`);if(!n)return;s=clamp(e);let r=[...n.children].filter(e=>!e.classList.contains(`slide-expand`));u.replaceChildren(...r.map(e=>e.cloneNode(!0))),l.open||l.showModal()};for(let[e,n]of t.entries()){let t=n.querySelector(`.slide-expand`);t&&(t.hidden=!1,t.addEventListener(`click`,()=>open(e)))}enhanceDialog(l,null),l.addEventListener(`keydown`,e=>{let t=arrowStep(e.key);t!==0&&(e.preventDefault(),open(s+t),goTo(s))})}};customElements.define(`screenshot-carousel`,ScreenshotCarousel);

package/lib/render/i18n.js

@@ -1,7 +1,7 @@
 import { existsSync } from 'node:fs';
 import { readFile, readdir, writeFile } from 'node:fs/promises';
 import { join, relative } from 'node:path';
-import { DOWNLOAD_LABELS, FORMAT_LABELS, UI_SOURCE_LANGUAGE, languageCandidates, parseCatalog, parsePo, quotePo, } from '../site-data/index.js';
+import { DOWNLOAD_LABELS, FORMAT_LABELS, SUPPORT_KIND_LABELS, UI_SOURCE_LANGUAGE, languageCandidates, parseCatalog, parsePo, quotePo, } from '../site-data/index.js';
 // EITHER quote style, because the formatter picks one and this is not its decision. The renderers
 // were written with double quotes, and the first `gjsify format` that could see them — .gitignore
 // had hidden the directory — rewrote all 66 translator calls to single quotes; a double-quote-only
@@ -33,7 +33,7 @@ export async function rendererMsgids(renderDir) {
     if (fromSources === 0) {
         throw new Error(`${renderDir}: no translator call found in any renderer — the extractor is broken, not the sources`);
     }
-    for (const label of [...Object.values(DOWNLOAD_LABELS), ...Object.values(FORMAT_LABELS)])
+    for (const label of [...Object.values(DOWNLOAD_LABELS), ...Object.values(FORMAT_LABELS), ...SUPPORT_KIND_LABELS])
         msgids.add(label);
     return [...msgids];
 }

package/lib/render/image-backend.d.ts

@@ -24,3 +24,5 @@ export interface RasterImage {
 }
 export declare function decodeImageFile(path: string): RasterImage;
 export declare function decodeImageBytes(bytes: Uint8Array): RasterImage;
+/** Rasterises an SVG document at its own size, through the same loader set as the screenshots. */
+export declare function svgToPng(svg: string): Uint8Array;

package/lib/render/image-backend.js

@@ -128,3 +128,7 @@ export function decodeImageBytes(bytes) {
         throw new Error('Could not decode an image from memory');
     return wrap(pixbuf);
 }
+/** Rasterises an SVG document at its own size, through the same loader set as the screenshots. */
+export function svgToPng(svg) {
+    return decodeImageBytes(new TextEncoder().encode(svg)).encode('png');
+}

package/lib/render/og-card.d.ts

@@ -0,0 +1,13 @@
+export declare const OG_WIDTH = 1200;
+export declare const OG_HEIGHT = 630;
+export interface OgCardInput {
+    name: string;
+    summary: string;
+    background: string;
+    foreground: string;
+    /** The app icon as a data URI; the card has no text column offset without one. */
+    iconHref?: string;
+}
+/** Greedy word wrap on character count; what does not fit in `maxLines` is cut with an ellipsis. */
+export declare function wrapText(text: string, maxChars: number, maxLines: number): string[];
+export declare function ogCardSvg(input: OgCardInput): string;

package/lib/render/og-card.js

@@ -0,0 +1,50 @@
+// The 1200×630 link-preview card, drawn as SVG and rasterised by GdkPixbuf's SVG loader
+// (`renderCardPng` in `images.ts`) — the same backend as the screenshots, no extra dependency.
+import { esc } from './html.js';
+export const OG_WIDTH = 1200;
+export const OG_HEIGHT = 630;
+/** Greedy word wrap on character count; what does not fit in `maxLines` is cut with an ellipsis. */
+export function wrapText(text, maxChars, maxLines) {
+    const lines = [];
+    let current = '';
+    let rest = text.split(/\s+/).filter(Boolean);
+    while (rest.length > 0) {
+        const [word, ...others] = rest;
+        const next = current ? `${current} ${word}` : word;
+        if (next.length <= maxChars || !current) {
+            current = next;
+            rest = others;
+            continue;
+        }
+        lines.push(current);
+        current = '';
+    }
+    if (current)
+        lines.push(current);
+    if (lines.length <= maxLines)
+        return lines;
+    const kept = lines.slice(0, maxLines);
+    kept[maxLines - 1] = `${kept[maxLines - 1].slice(0, Math.max(1, maxChars - 1)).replace(/[\s,;:.]+$/, '')}…`;
+    return kept;
+}
+const PADDING = 80;
+const ICON = 256;
+export function ogCardSvg(input) {
+    const textX = input.iconHref ? PADDING + ICON + 64 : PADDING;
+    const textWidth = OG_WIDTH - textX - PADDING;
+    // Average glyph advance of a bold sans face is about 0.58 em, a regular one 0.5 em.
+    const nameSize = Math.max(48, Math.min(88, Math.floor(textWidth / (Math.max(input.name.length, 1) * 0.58))));
+    const summarySize = 40;
+    const summaryLines = wrapText(input.summary, Math.floor(textWidth / (summarySize * 0.5)), 3);
+    const lineHeight = 54;
+    const height = nameSize * 1.1 + (summaryLines.length > 0 ? 28 + summaryLines.length * lineHeight : 0);
+    const top = (OG_HEIGHT - height) / 2;
+    const nameY = top + nameSize;
+    const summary = summaryLines
+        .map((line, index) => `<text x="${textX}" y="${Math.round(nameY + 28 + (index + 1) * lineHeight - 12)}" font-size="${summarySize}" opacity="0.9">${esc(line)}</text>`)
+        .join('');
+    const icon = input.iconHref
+        ? `<image x="${PADDING}" y="${(OG_HEIGHT - ICON) / 2}" width="${ICON}" height="${ICON}" xlink:href="${esc(input.iconHref)}"/>`
+        : '';
+    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${OG_WIDTH}" height="${OG_HEIGHT}" viewBox="0 0 ${OG_WIDTH} ${OG_HEIGHT}"><rect width="${OG_WIDTH}" height="${OG_HEIGHT}" fill="${esc(input.background)}"/>${icon}<g font-family="Cantarell, Inter, sans-serif" fill="${esc(input.foreground)}"><text x="${textX}" y="${Math.round(nameY)}" font-size="${nameSize}" font-weight="700">${esc(input.name)}</text>${summary}</g></svg>`;
+}

package/lib/render/overview.d.ts

@@ -0,0 +1,19 @@
+import type { ClientAssets } from './pages.js';
+export interface OverviewApp {
+    name: string;
+    /** Absolute address of this app's support page in the rendered language. */
+    url: string;
+}
+export interface OverviewPage {
+    lang: string;
+    languages: readonly string[];
+    defaultLanguage: string;
+    /** Absolute address of the overview per language. */
+    urls: Readonly<Record<string, string>>;
+    /** Root-relative address per language, for the language switch. */
+    paths: Readonly<Record<string, string>>;
+    apps: readonly OverviewApp[];
+    assets: ClientAssets;
+    t: (msgid: string) => string;
+}
+export declare function renderOverview(page: OverviewPage): string;

package/lib/render/overview.js

@@ -0,0 +1,53 @@
+// The page that lists several apps, each linking to its own support page. It reads no app's data
+// beyond a name and an icon, so it needs none of the per-app page machinery.
+import { esc } from './html.js';
+import { languageName, linkCard } from './pages.js';
+import { ogLocale } from './seo.js';
+export function renderOverview(page) {
+    const { lang, t } = page;
+    const title = t('Support');
+    const intro = t('These apps are free software. Pick one to see how to support its development.');
+    const alternates = page.languages.map((code) => `<link rel="alternate" hreflang="${esc(code)}" href="${esc(page.urls[code])}">`);
+    const switcher = page.languages
+        .map((code) => code === lang
+        ? `<li><span aria-current="true">${esc(languageName(code))}</span></li>`
+        : `<li><a href="${esc(page.paths[code])}" hreflang="${esc(code)}" lang="${esc(code)}">${esc(languageName(code))}</a></li>`)
+        .join('');
+    return `<!doctype html>
+<html lang="${esc(lang)}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(title)}</title>
+<meta name="description" content="${esc(intro)}">
+<link rel="canonical" href="${esc(page.urls[lang])}">
+${alternates.join('\n')}
+<link rel="alternate" hreflang="x-default" href="${esc(page.urls[page.defaultLanguage])}">
+<meta property="og:type" content="website">
+<meta property="og:title" content="${esc(title)}">
+<meta property="og:description" content="${esc(intro)}">
+<meta property="og:url" content="${esc(page.urls[lang])}">
+<meta property="og:locale" content="${esc(ogLocale(lang))}">
+${page.assets.css.map((href) => `<link rel="stylesheet" href="${esc(href)}">`).join('\n')}
+</head>
+<body>
+<header class="masthead">
+<div class="hero-inner">
+<div class="hero-text">
+<h1>${esc(title)}</h1>
+</div>
+</div>
+</header>
+<main>
+<div class="column">
+<p class="support-intro">${esc(intro)}</p>
+<ul class="card-list">
+${page.apps.map((app) => linkCard(app.url, app.name, 'heart')).join('\n')}
+</ul>
+</div>
+</main>
+<footer class="footer"><div class="footer-inner"><nav class="footer-languages" aria-label="${esc(t('Language'))}"><ul>${switcher}</ul></nav></div></footer>
+</body>
+</html>
+`;
+}

package/lib/render/pages.d.ts

@@ -1,4 +1,5 @@
 import { type DownloadTarget, type Localized, type Screenshot, type SiteData, type SiteSupportSepa } from '../site-data/index.js';
+import { type IconName } from './icons.js';
 import type { ProcessedImage } from './images.js';
 export interface ClientAssets {
     js: string;
@@ -13,10 +14,19 @@ export interface RenderContext {
     images: ReadonlyMap<string, ProcessedImage>;
     /** Published URL of the app icon, when there is one. */
     iconUrl?: string;
+    /** Which page of the app this renders; the language switch and the head follow it. Default `app`. */
+    view?: 'app' | 'support';
+    /** Root-relative URL of the link-preview card for this language. */
+    ogImage?: string;
 }
 type Translate = (msgid: string) => string;
 export declare function localized(text: Localized, lang: string): string;
 export declare function pageUrl(data: SiteData, lang: string): string;
+export declare function absolute(data: SiteData, rootRelative: string): string;
+export declare function supportUrl(data: SiteData, lang: string): string;
+/** The transfer reference when the config sets none: one per app, so the bank statement says what it was for. */
+export declare function supportReference(data: SiteData): string;
+export declare function languageName(code: string): string;
 /**
  * What the primary button says. Installing from a store, opening the web build and downloading a
  * file are three different promises, so each gets its own wording.
@@ -24,9 +34,23 @@ export declare function pageUrl(data: SiteData, lang: string): string;
 export declare function ctaLabel(target: DownloadTarget, t: Translate): string;
 /** A window shot brings its own shadow; ours would draw a second one around it. */
 export declare function frameAttribute(ctx: Pick<RenderContext, 'images'>, screenshot: Screenshot): 'none' | undefined;
+/**
+ * The facts row under the hero. A badge whose fact is missing is left out, not faked, and the row
+ * tells CSS how many it ended up with so the columns divide the width evenly.
+ */
+export declare function badges(ctx: Pick<RenderContext, 'data' | 't' | 'lang'>): string;
+export declare function linkCard(href: string, title: string, glyph: IconName): string;
 /** A bank transfer as a card: the details to read or copy, and an EPC QR code that fills them into a banking app. */
 export declare function sepaCard(entry: SiteSupportSepa, t: Translate): string;
+/** The title and description of one page; also what the build checks for weak ones. */
+export declare function pageMeta(ctx: Pick<RenderContext, 'data' | 'lang' | 't'>, view?: 'app' | 'support'): {
+    name: string;
+    title: string;
+    description: string;
+};
 export declare function renderPage(ctx: RenderContext): string;
+/** `/<lang>/support/`: the ways to support the app, as plain markup that needs no script. */
+export declare function renderSupportPage(page: RenderContext): string;
 /** The root page: a script picks the visitor's language, the link list is what everyone else (and every crawler) sees. */
 export declare function renderRoot(data: SiteData, assets: ClientAssets, iconUrl: string | undefined): string;
 export {};

package/lib/render/pages.js

@@ -2,7 +2,9 @@ import { epcPayload, formatIban, isBrowserPlatform, PLATFORM_ORDER, pickByLangua
 import { readableText } from './color.js';
 import { attrs, esc, fmt, plain } from './html.js';
 import { icon } from './icons.js';
+import { OG_HEIGHT, OG_WIDTH } from './og-card.js';
 import { qrSvg } from './qr.js';
+import { metaDescription, ogLocale, pageTitle, softwareApplicationJsonLd } from './seo.js';
 const FORMAT_TYPES = { avif: 'image/avif', webp: 'image/webp', png: 'image/png' };
 const LINKS = [
     ['homepage', (t) => t('Website'), 'web'],
@@ -13,7 +15,7 @@ const LINKS = [
     ['contribute', (t) => t('Contribute'), 'people'],
     ['translate', (t) => t('Help translate'), 'translate'],
     ['contact', (t) => t('Contact'), 'mail'],
-    ['donation', (t) => t('Donate'), 'heart'],
+    ['donation', (t) => t('Support'), 'heart'],
 ];
 const PLATFORM_ICONS = {
     linux: 'linux',
@@ -30,10 +32,17 @@ export function localized(text, lang) {
 export function pageUrl(data, lang) {
     return `${data.config.base}${lang}/`;
 }
-function absolute(data, rootRelative) {
+export function absolute(data, rootRelative) {
     return new URL(rootRelative.replace(/^\//, ''), `${new URL(data.config.url).origin}/`).href;
 }
-function languageName(code) {
+export function supportUrl(data, lang) {
+    return `${pageUrl(data, lang)}support/`;
+}
+/** The transfer reference when the config sets none: one per app, so the bank statement says what it was for. */
+export function supportReference(data) {
+    return `Support ${data.app.name.source}`;
+}
+export function languageName(code) {
     return new Intl.DisplayNames([code], { type: 'language' }).of(code) ?? code;
 }
 function blocks(content, lang) {
@@ -245,9 +254,12 @@ ${data.downloads.hasReleases ? `<p class="dialog-foot"><a href="${esc(data.downl
 </app-download>`;
 }
 function badge(spec) {
+    // An absent value is not an empty element: the row reserves the line, the DOM stays clean.
+    const value = spec.value
+        ? `\n<span${attrs({ class: 'badge-value', title: spec.title })}>${esc(spec.value)}</span>`
+        : '';
     return `<li${attrs({ class: spec.class ? `badge ${spec.class}` : 'badge', hidden: spec.hidden })}>
-<span class="badge-pill">${spec.pill ?? icon(spec.glyph)}</span>
-<span${attrs({ class: 'badge-value', title: spec.title })}>${esc(spec.value)}</span>
+<span class="badge-pill">${spec.pill ?? icon(spec.glyph)}</span>${value}
 <span class="badge-label">${esc(spec.label)}</span>
 </li>`;
 }
@@ -259,7 +271,7 @@ function shortLicense(id) {
  * The facts row under the hero. A badge whose fact is missing is left out, not faked, and the row
  * tells CSS how many it ended up with so the columns divide the width evenly.
  */
-function badges(ctx) {
+export function badges(ctx) {
     const { data, t, lang } = ctx;
     const number = new Intl.NumberFormat(lang, { notation: 'compact', maximumFractionDigits: 1 });
     const targets = data.downloads.targets;
@@ -286,7 +298,7 @@ function badges(ctx) {
             .map((os) => icon(PLATFORM_ICONS[os], { title: osName(os, t), class: `platform platform-${os}` }))
             .join('');
         const label = oses.every(isBrowserPlatform) ? t('Browsers') : t('Platforms');
-        specs.push({ pill: `<span class="badge-platforms">${glyphs}</span>`, value: '', label });
+        specs.push({ pill: `<span class="badge-platforms">${glyphs}</span>`, label });
     }
     if (data.app.ageRating) {
         const { minAge } = data.app.ageRating;
@@ -351,7 +363,7 @@ ${blocks(release.description, lang)}
         : ''}
 </section>`;
 }
-function linkCard(href, title, glyph) {
+export function linkCard(href, title, glyph) {
     return `<li>
 <a href="${esc(href)}">
 <span class="link-icon">${icon(glyph)}</span>
@@ -405,32 +417,18 @@ ${qrSvg(epcPayload(entry), t('QR code for a bank transfer'))}
 </figure>
 </li>`;
 }
-function supportItem(entry, t) {
+function supportItem(entry, t, reference) {
     return entry.kind === 'sepa'
-        ? sepaCard(entry, t)
+        ? sepaCard({ ...entry, reference: entry.reference ?? reference }, t)
         : linkCard(entry.url, t(entry.kind), 'heart');
 }
-/**
- * Ways to support the project, if the site configures any. Same no-JavaScript shape as the
- * download dialog: an anchor to a dialog that stays an open panel until the component takes over.
- */
+/** The landing page only points at the support page: the details live there, readable without a dialog. */
 function support(ctx) {
-    const { data, t } = ctx;
+    const { data, lang, t } = ctx;
     if (data.config.support.length === 0)
         return '';
     return `<section class="support">
-<app-support class="support-widget">
-<a class="button support-cta" href="#support-ways">${icon('heart')}<span>${esc(t('Support this project'))}</span></a>
-<dialog id="support-ways" class="support-dialog" aria-labelledby="support-ways-title">
-<div class="dialog-head">
-<h2 id="support-ways-title">${esc(t('Support this project'))}</h2>
-<button class="dialog-close" type="button" aria-label="${esc(t('Close'))}" hidden>${icon('close')}</button>
-</div>
-<ul class="card-list">
-${data.config.support.map((entry) => supportItem(entry, t)).join('\n')}
-</ul>
-</dialog>
-</app-support>
+<a class="button support-cta" href="${esc(supportUrl(data, lang))}">${icon('heart')}<span>${esc(t('Support this project'))}</span></a>
 </section>`;
 }
 function tags(ctx) {
@@ -455,7 +453,7 @@ function languageSwitch(ctx, className, style) {
         const label = style === 'code' ? code.toUpperCase() : languageName(code);
         return code === lang
             ? `<li><span aria-current="true">${esc(label)}</span></li>`
-            : `<li><a href="${esc(pageUrl(data, code))}" hreflang="${esc(code)}" lang="${esc(code)}">${esc(label)}</a></li>`;
+            : `<li><a href="${esc(ctx.view === 'support' ? supportUrl(data, code) : pageUrl(data, code))}" hreflang="${esc(code)}" lang="${esc(code)}">${esc(label)}</a></li>`;
     });
     return `<nav class="${className}" aria-label="${esc(t('Language'))}"><ul>${items.join('')}</ul></nav>`;
 }
@@ -525,15 +523,58 @@ ${legal ? `<ul class="footer-legal">${legal}</ul>` : ''}
 </div>
 </footer>`;
 }
-function head(ctx) {
-    const { data, lang } = ctx;
+/** The title and description of one page; also what the build checks for weak ones. */
+export function pageMeta(ctx, view = 'app') {
+    const { data, lang, t } = ctx;
     const name = localized(data.app.name, lang);
+    if (view === 'support') {
+        return {
+            name,
+            title: `${t('Support')} – ${name}`,
+            description: plain(t('{app} is free software. Support its development with a transfer or a service.'), {
+                app: name,
+            }),
+        };
+    }
     const summary = localized(data.app.summary, lang);
-    const title = `${name} – ${summary}`;
-    const url = absolute(data, pageUrl(data, lang));
-    const first = data.screenshots[0];
-    const og = first ? ctx.images.get(first.slug) : undefined;
-    const ogImage = og ? absolute(data, og.formats.png.at(-1).url) : undefined;
+    const first = data.app.description.find((block) => block.type === 'paragraph');
+    const paragraph = first?.type === 'paragraph' ? localized(first.text, lang) : undefined;
+    return { name, title: pageTitle(name, summary), description: metaDescription(summary, paragraph) };
+}
+const SCHEMA_OS = {
+    linux: 'Linux',
+    darwin: 'macOS',
+    win32: 'Windows',
+    android: 'Android',
+    web: 'Web browser',
+    firefox: 'Web browser',
+    chromium: 'Web browser',
+};
+function structuredData(ctx, title, description) {
+    const { data, lang } = ctx;
+    const systems = [
+        ...new Set(data.downloads.targets.filter((target) => target.available).map((target) => SCHEMA_OS[target.os])),
+    ];
+    return softwareApplicationJsonLd({
+        name: localized(data.app.name, lang),
+        description,
+        url: absolute(data, pageUrl(data, lang)),
+        image: ctx.iconUrl ? absolute(data, ctx.iconUrl) : undefined,
+        version: data.version,
+        operatingSystems: systems,
+        license: data.app.license,
+        downloadUrl: data.downloads.releasesUrl,
+        repository: repositoryUrl(data),
+        languages: data.config.languages,
+    });
+}
+function head(ctx) {
+    const { data, lang } = ctx;
+    const view = ctx.view ?? 'app';
+    const viewPath = (code) => (view === 'support' ? supportUrl(data, code) : pageUrl(data, code));
+    const { name, title, description } = pageMeta(ctx, view);
+    const url = absolute(data, viewPath(lang));
+    const ogImage = ctx.ogImage ? absolute(data, ctx.ogImage) : undefined;
     const { light, dark } = data.app.branding;
     // An app without `<branding>` keeps the stylesheet's own palette: the custom property is left
     // unset so its `var()` fallback wins, rather than being set to a stand-in colour here.
@@ -543,29 +584,37 @@ function head(ctx) {
     ]
         .filter(Boolean)
         .join(';');
-    const alternates = data.config.languages.map((code) => `<link rel="alternate" hreflang="${esc(code)}" href="${esc(absolute(data, pageUrl(data, code)))}">`);
+    const alternates = data.config.languages.map((code) => `<link rel="alternate" hreflang="${esc(code)}" href="${esc(absolute(data, viewPath(code)))}">`);
     const meta = [
         ['og:type', 'website'],
         ['og:title', title],
-        ['og:description', summary],
+        ['og:description', description],
         ['og:url', url],
         ['og:site_name', name],
-        ['og:locale', lang.replace(/-/g, '_')],
+        ['og:locale', ogLocale(lang)],
+        ...data.config.languages
+            .filter((code) => code !== lang)
+            .map((code) => ['og:locale:alternate', ogLocale(code)]),
     ];
-    if (ogImage)
-        meta.push(['og:image', ogImage]);
+    if (ogImage) {
+        meta.push(['og:image', ogImage], ['og:image:width', String(OG_WIDTH)], ['og:image:height', String(OG_HEIGHT)], ['og:image:alt', name]);
+    }
     return `<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${esc(title)}</title>
-<meta name="description" content="${esc(summary)}">
+<meta name="description" content="${esc(description)}">
 <link rel="canonical" href="${esc(url)}">
 ${alternates.join('\n')}
-<link rel="alternate" hreflang="x-default" href="${esc(absolute(data, data.config.base))}">
+<link rel="alternate" hreflang="x-default" href="${esc(absolute(data, viewPath(data.config.defaultLanguage)))}">
 ${meta.map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n')}
 <meta name="twitter:card" content="${ogImage ? 'summary_large_image' : 'summary'}">
+<meta name="twitter:title" content="${esc(title)}">
+<meta name="twitter:description" content="${esc(description)}">
+${ogImage ? `<meta name="twitter:image" content="${esc(ogImage)}">` : ''}
 <meta name="theme-color" content="${esc(light ?? '#ffffff')}" media="(prefers-color-scheme: light)">
 <meta name="theme-color" content="${esc(dark ?? '#1e1e1e')}" media="(prefers-color-scheme: dark)">
 ${ctx.iconUrl ? `<link rel="icon" type="image/svg+xml" href="${esc(ctx.iconUrl)}">` : ''}
+${view === 'app' ? structuredData(ctx, title, description) : ''}
 ${brandVars ? `<style>:root{${brandVars}}</style>` : ''}
 ${ctx.assets.css.map((href) => `<link rel="stylesheet" href="${esc(href)}">`).join('\n')}
 <script type="module" src="${esc(ctx.assets.js)}"></script>`;
@@ -597,6 +646,44 @@ ${footer(ctx)}
 </html>
 `;
 }
+/** `/<lang>/support/`: the ways to support the app, as plain markup that needs no script. */
+export function renderSupportPage(page) {
+    const ctx = { ...page, view: 'support' };
+    const { data, lang, t } = ctx;
+    const meta = pageMeta(ctx, 'support');
+    const reference = supportReference(data);
+    return `<!doctype html>
+<html lang="${esc(lang)}">
+<head>
+${head(ctx)}
+</head>
+<body>
+${topBar(ctx)}
+<header class="masthead">
+<div class="hero-inner">
+${ctx.iconUrl ? `<div class="hero-icon" style="--icon-url:url(${esc(ctx.iconUrl)})"><img src="${esc(ctx.iconUrl)}" alt="" width="128" height="128"></div>` : ''}
+<div class="hero-text">
+<h1>${esc(t('Support'))}</h1>
+<p class="hero-by">${esc(meta.name)}</p>
+</div>
+</div>
+</header>
+<main>
+<div class="column">
+<p class="support-intro">${esc(meta.description)}</p>
+<app-support>
+<ul class="card-list">
+${data.config.support.map((entry) => supportItem(entry, t, reference)).join('\n')}
+</ul>
+</app-support>
+<p class="support-back"><a href="${esc(pageUrl(data, lang))}">${fmt(t('Back to {app}'), { app: meta.name })}</a></p>
+</div>
+</main>
+${footer(ctx)}
+</body>
+</html>
+`;
+}
 /** The root page: a script picks the visitor's language, the link list is what everyone else (and every crawler) sees. */
 export function renderRoot(data, assets, iconUrl) {
     const { config } = data;
@@ -612,7 +699,7 @@ export function renderRoot(data, assets, iconUrl) {
 <title>${esc(name)}</title>
 <link rel="canonical" href="${esc(absolute(data, pageUrl(data, config.defaultLanguage)))}">
 ${alternates.join('\n')}
-<link rel="alternate" hreflang="x-default" href="${esc(absolute(data, config.base))}">
+<link rel="alternate" hreflang="x-default" href="${esc(absolute(data, pageUrl(data, config.defaultLanguage)))}">
 ${iconUrl ? `<link rel="icon" type="image/svg+xml" href="${esc(iconUrl)}">` : ''}
 ${assets.css.map((href) => `<link rel="stylesheet" href="${esc(href)}">`).join('\n')}
 <script>${choose}</script>

package/lib/render/seo.d.ts

@@ -0,0 +1,41 @@
+/** `de` → `de_DE`, `pt-BR` → `pt_BR`; a language with no known default territory is passed through. */
+export declare function ogLocale(lang: string): string;
+/** Search results cut a title near 60 characters and a description near 160. */
+export declare const TITLE_MIN = 20;
+export declare const DESCRIPTION_MIN = 70;
+export declare const DESCRIPTION_MAX = 160;
+/** `Name – summary`, or the bare name when the summary adds nothing to it. */
+export declare function pageTitle(name: string, summary: string): string;
+/**
+ * The description for search results and link previews. A metainfo summary is a few words by
+ * design (Flathub caps it), so the first paragraph of the description carries more.
+ */
+export declare function metaDescription(summary: string, firstParagraph: string | undefined): string;
+/** What is wrong with a page's title or description, one sentence each; empty when both are fine. */
+export declare function seoWarnings(page: {
+    lang: string;
+    name: string;
+    title: string;
+    description: string;
+}): string[];
+export interface SoftwareApplicationInput {
+    name: string;
+    description: string;
+    url: string;
+    image?: string;
+    version?: string;
+    category?: string;
+    operatingSystems: string[];
+    /** An SPDX identifier; only a single id has a page of its own. */
+    license?: string;
+    downloadUrl?: string;
+    repository?: string;
+    languages: string[];
+}
+/** schema.org `SoftwareApplication` as a `<script type="application/ld+json">`. Nothing is invented: absent facts are left out. */
+export declare function softwareApplicationJsonLd(input: SoftwareApplicationInput): string;
+/** One logical page, as its absolute address per language. */
+export type SitemapPage = Readonly<Record<string, string>>;
+/** `sitemap.xml` with a self-including `xhtml:link` alternate set per page, and `x-default` on the default language. */
+export declare function sitemapXml(pages: readonly SitemapPage[], defaultLanguage: string): string;
+export declare function robotsTxt(sitemapUrl: string): string;

package/lib/render/seo.js

@@ -0,0 +1,113 @@
+// Everything a crawler or a link preview reads that is not the visible page: locale tags, the
+// title and description, structured data, the sitemap. Pure string work, so it runs on every runtime.
+import { esc } from './html.js';
+/** Facebook's Open Graph wants `language_TERRITORY`; a bare language code is not a valid `og:locale`. */
+const DEFAULT_TERRITORY = {
+    cs: 'CZ',
+    da: 'DK',
+    de: 'DE',
+    en: 'US',
+    es: 'ES',
+    fi: 'FI',
+    fr: 'FR',
+    it: 'IT',
+    ja: 'JP',
+    ko: 'KR',
+    nb: 'NO',
+    nl: 'NL',
+    pl: 'PL',
+    pt: 'PT',
+    ru: 'RU',
+    sv: 'SE',
+    tr: 'TR',
+    uk: 'UA',
+    zh: 'CN',
+};
+/** `de` → `de_DE`, `pt-BR` → `pt_BR`; a language with no known default territory is passed through. */
+export function ogLocale(lang) {
+    const [primary = lang, ...rest] = lang.split(/[-_]/);
+    const language = primary.toLowerCase();
+    const territory = rest.find((part) => /^[A-Za-z]{2}$/.test(part))?.toUpperCase() ?? DEFAULT_TERRITORY[language];
+    return territory ? `${language}_${territory}` : language;
+}
+/** Search results cut a title near 60 characters and a description near 160. */
+export const TITLE_MIN = 20;
+export const DESCRIPTION_MIN = 70;
+export const DESCRIPTION_MAX = 160;
+/** `Name – summary`, or the bare name when the summary adds nothing to it. */
+export function pageTitle(name, summary) {
+    const trimmed = summary.trim();
+    return trimmed === '' || trimmed.toLowerCase() === name.trim().toLowerCase() ? name : `${name} – ${trimmed}`;
+}
+/**
+ * The description for search results and link previews. A metainfo summary is a few words by
+ * design (Flathub caps it), so the first paragraph of the description carries more.
+ */
+export function metaDescription(summary, firstParagraph) {
+    const text = firstParagraph?.replace(/\s+/g, ' ').trim();
+    if (!text || text.length <= summary.length)
+        return summary;
+    if (text.length <= DESCRIPTION_MAX)
+        return text;
+    const cut = text.slice(0, DESCRIPTION_MAX - 1);
+    const space = cut.lastIndexOf(' ');
+    return `${(space > DESCRIPTION_MAX / 2 ? cut.slice(0, space) : cut).replace(/[\s,;:.–-]+$/, '')}…`;
+}
+/** What is wrong with a page's title or description, one sentence each; empty when both are fine. */
+export function seoWarnings(page) {
+    const { lang, name, title, description } = page;
+    const warnings = [];
+    if (title === name) {
+        warnings.push(`${lang}: the page title is only the app name "${name}" — give the metainfo a distinct summary`);
+    }
+    else if (title.length < TITLE_MIN) {
+        warnings.push(`${lang}: the page title "${title}" is shorter than ${TITLE_MIN} characters`);
+    }
+    if (description.trim() === name.trim() || description.length < DESCRIPTION_MIN) {
+        warnings.push(`${lang}: the meta description is ${description.length} characters (under ${DESCRIPTION_MIN}) — ` +
+            'write a longer first paragraph in the metainfo description');
+    }
+    return warnings;
+}
+/** schema.org `SoftwareApplication` as a `<script type="application/ld+json">`. Nothing is invented: absent facts are left out. */
+export function softwareApplicationJsonLd(input) {
+    const spdx = input.license && /^[A-Za-z0-9.+-]+$/.test(input.license) ? input.license : undefined;
+    const data = {
+        '@context': 'https://schema.org',
+        '@type': 'SoftwareApplication',
+        name: input.name,
+        description: input.description,
+        url: input.url,
+        image: input.image,
+        softwareVersion: input.version || undefined,
+        applicationCategory: input.category,
+        operatingSystem: input.operatingSystems.length > 0 ? input.operatingSystems.join(', ') : undefined,
+        license: spdx ? `https://spdx.org/licenses/${spdx}.html` : undefined,
+        downloadUrl: input.downloadUrl,
+        sameAs: input.repository ? [input.repository] : undefined,
+        inLanguage: input.languages,
+    };
+    const json = JSON.stringify(data).replace(/</g, '\\u003c');
+    return `<script type="application/ld+json">${json}</script>`;
+}
+/** `sitemap.xml` with a self-including `xhtml:link` alternate set per page, and `x-default` on the default language. */
+export function sitemapXml(pages, defaultLanguage) {
+    const entries = pages.flatMap((page) => {
+        const languages = Object.keys(page);
+        const alternates = [
+            ...languages.map((code) => `    <xhtml:link rel="alternate" hreflang="${esc(code)}" href="${esc(page[code])}"/>`),
+            ...(page[defaultLanguage]
+                ? [`    <xhtml:link rel="alternate" hreflang="x-default" href="${esc(page[defaultLanguage])}"/>`]
+                : []),
+        ].join('\n');
+        return languages.map((code) => `  <url>\n    <loc>${esc(page[code])}</loc>\n${alternates}\n  </url>`);
+    });
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+${entries.join('\n')}
+</urlset>
+`;
+}
+export function robotsTxt(sitemapUrl) {
+    return `User-agent: *\nAllow: /\n\nSitemap: ${sitemapUrl}\n`;
+}

package/lib/site-data/config.d.ts

@@ -21,3 +21,5 @@ export interface RootManifest {
 export declare function normalizeBase(base: string): string;
 /** Validates `gjsify.site` and applies defaults; the error names the offending key. */
 export declare function parseSiteConfig(manifest: RootManifest): SiteConfig;
+/** The `kind` labels the support page knows by name; the page catalogues translate them. */
+export declare const SUPPORT_KIND_LABELS: readonly ["GitHub Sponsors", "Liberapay", "PayPal"];

package/lib/site-data/config.js

@@ -140,3 +140,5 @@ export function parseSiteConfig(manifest) {
         })),
     };
 }
+/** The `kind` labels the support page knows by name; the page catalogues translate them. */
+export const SUPPORT_KIND_LABELS = ['GitHub Sponsors', 'Liberapay', 'PayPal'];

package/lib/site.d.ts

@@ -47,3 +47,29 @@ export interface SiteI18nOptions {
  * own `po/` when called without a root, otherwise the consumer's `pageTranslations`.
  */
 export declare function syncSiteI18n(options?: SiteI18nOptions): Promise<I18nResult>;
+/**
+ * The `--overview` input: one JSON file naming the host and the apps whose support pages it lists.
+ * Each app is a repository root (relative to the file) with its own `gjsify.site` block, which is
+ * where its published address, languages and metainfo already live.
+ */
+export interface OverviewConfig {
+    /** Origin the overview is published on, e.g. `https://jumplink.eu/`. */
+    url: string;
+    /** Path the overview lives under; default `/support/`. */
+    base?: string;
+    languages: string[];
+    defaultLanguage?: string;
+    apps: string[];
+}
+export interface OverviewBuildOptions {
+    /** The overview JSON file. */
+    config: string;
+    out: string;
+    log?: (message: string) => void;
+    warn?: (message: string) => void;
+    packageDir?: string;
+}
+export declare function buildOverview(options: OverviewBuildOptions): Promise<{
+    languages: string[];
+    apps: number;
+}>;

package/lib/site.js

@@ -3,12 +3,17 @@
 import { createHash } from 'node:crypto';
 import { existsSync } from 'node:fs';
 import { copyFile, mkdir, readFile, readdir, rm, writeFile } from 'node:fs/promises';
-import { basename, dirname, join, resolve } from 'node:path';
+import { basename, dirname, extname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { catalogMsgids, configMsgids, rendererMsgids, syncCatalogs } from './render/i18n.js';
+import { readableText } from './render/color.js';
+import { svgToPng } from './render/image-backend.js';
 import { processImage } from './render/images.js';
-import { renderPage, renderRoot } from './render/pages.js';
-import { UI_SOURCE_LANGUAGE, loadCatalogs, loadSiteData, mergeCatalogs, parseSiteConfig, translator, } from './site-data/index.js';
+import { ogCardSvg } from './render/og-card.js';
+import { absolute, localized, pageMeta, pageUrl, renderPage, renderRoot, renderSupportPage, supportUrl, } from './render/pages.js';
+import { renderOverview } from './render/overview.js';
+import { robotsTxt, seoWarnings, sitemapXml } from './render/seo.js';
+import { UI_SOURCE_LANGUAGE, loadCatalogs, loadSiteData, mergeCatalogs, parseMetainfo, parseSiteConfig, pickByLanguage, translator, } from './site-data/index.js';
 /**
  * This package's own directory: `lib/` holds the client bundle, `po/` the page catalogues.
  *
@@ -60,6 +65,17 @@ async function processScreenshots(data, { out }, cacheDir) {
     const entries = await Promise.all(data.screenshots.map(async (screenshot) => [screenshot.slug, await processImage(screenshot.file, screenshot.slug, options)]));
     return new Map(entries);
 }
+const ICON_TYPES = { '.svg': 'image/svg+xml', '.png': 'image/png' };
+/** The icon inlined, so the card's SVG is self-contained when the pixbuf loader rasterises it. */
+async function iconDataUri(data, { root }) {
+    if (!data.app.icon)
+        return undefined;
+    const type = ICON_TYPES[extname(data.app.icon).toLowerCase()];
+    if (!type)
+        return undefined;
+    const bytes = await readFile(resolve(root, data.app.icon));
+    return `data:${type};base64,${bytes.toString('base64')}`;
+}
 async function publishIcon(data, { root, out }) {
     if (!data.app.icon)
         return undefined;
@@ -110,12 +126,38 @@ export async function buildSite(options) {
     });
     const images = await processScreenshots(data, target, cacheDir ?? defaultCacheDir(target.root));
     const iconUrl = await publishIcon(data, target);
+    const iconHref = await iconDataUri(data, target);
+    const { light = '#84bbfd' } = data.app.branding;
+    const hasSupport = data.config.support.length > 0;
     for (const lang of data.config.languages) {
-        const html = renderPage({ data, lang, t: translator(catalogs[lang]), assets, images, iconUrl });
+        const t = translator(catalogs[lang]);
+        const ctx = { data, lang, t, assets, images, iconUrl, ogImage: `${data.config.base}og-${lang}.png` };
+        const meta = pageMeta(ctx);
+        for (const warning of seoWarnings({ lang, ...meta }))
+            options.warn?.(warning);
+        const card = ogCardSvg({
+            name: meta.name,
+            summary: localized(data.app.summary, lang),
+            background: light,
+            foreground: readableText(light),
+            iconHref,
+        });
+        await writeFile(join(target.out, `og-${lang}.png`), svgToPng(card));
         await mkdir(join(target.out, lang), { recursive: true });
-        await writeFile(join(target.out, lang, 'index.html'), html);
+        await writeFile(join(target.out, lang, 'index.html'), renderPage(ctx));
+        if (hasSupport) {
+            await mkdir(join(target.out, lang, 'support'), { recursive: true });
+            await writeFile(join(target.out, lang, 'support', 'index.html'), renderSupportPage(ctx));
+        }
     }
     await writeFile(join(target.out, 'index.html'), renderRoot(data, assets, iconUrl));
+    const address = (build) => Object.fromEntries(data.config.languages.map((lang) => [lang, absolute(data, build(data, lang))]));
+    const pages = [address(pageUrl), ...(hasSupport ? [address(supportUrl)] : [])];
+    await writeFile(join(target.out, 'sitemap.xml'), sitemapXml(pages, data.config.defaultLanguage));
+    // Only a site served from the host root can own `/robots.txt`; below a path the host does.
+    if (data.config.base === '/') {
+        await writeFile(join(target.out, 'robots.txt'), robotsTxt(absolute(data, `${data.config.base}sitemap.xml`)));
+    }
     return { languages: [...data.config.languages], screenshots: images.size };
 }
 /** The languages this package keeps a catalogue for: whichever `po/<lang>.po` files exist. */
@@ -159,3 +201,52 @@ export async function syncSiteI18n(options = {}) {
         await mkdir(dir, { recursive: true });
     return syncCatalogs({ dir, languages: config.languages, msgids, check, base: root });
 }
+export async function buildOverview(options) {
+    const file = resolve(options.config);
+    const overview = JSON.parse(await readFile(file, 'utf8'));
+    if (!overview.url || !Array.isArray(overview.apps) || !Array.isArray(overview.languages))
+        throw new Error(`${file} needs "url", "languages" and "apps"`);
+    const out = resolve(options.out);
+    const base = overview.base ?? '/support/';
+    const defaultLanguage = overview.defaultLanguage ?? overview.languages[0];
+    const self = selfDir(options.packageDir);
+    await rm(out, { recursive: true, force: true });
+    await mkdir(out, { recursive: true });
+    const assets = await stageClientAssets(base, out, self);
+    const catalogs = await loadCatalogs(poDir(self), overview.languages);
+    const apps = await Promise.all(overview.apps.map(async (entry) => {
+        const root = resolve(dirname(file), entry);
+        const config = await readConfig(root);
+        const metainfo = parseMetainfo(await readFile(resolve(root, config.metainfo), 'utf8'));
+        return { config, metainfo };
+    }));
+    const origin = new URL(overview.url).origin;
+    const pathFor = (lang) => `${base}${lang}/`;
+    const urls = Object.fromEntries(overview.languages.map((lang) => [lang, `${origin}${pathFor(lang)}`]));
+    const paths = Object.fromEntries(overview.languages.map((lang) => [lang, pathFor(lang)]));
+    for (const lang of overview.languages) {
+        const html = renderOverview({
+            lang,
+            languages: overview.languages,
+            defaultLanguage,
+            urls,
+            paths,
+            assets,
+            t: translator(catalogs[lang]),
+            apps: apps.map(({ config, metainfo }) => ({
+                name: pickByLanguage(metainfo.name.byLanguage, lang) ?? metainfo.name.source,
+                url: `${new URL(config.url).origin}${config.base}${config.languages.includes(lang) ? lang : config.defaultLanguage}/support/`,
+            })),
+        });
+        await mkdir(join(out, lang), { recursive: true });
+        await writeFile(join(out, lang, 'index.html'), html);
+    }
+    const root = `<!doctype html>
+<html lang="${defaultLanguage}"><head><meta charset="utf-8"><title>Support</title>
+<link rel="canonical" href="${urls[defaultLanguage]}"><meta http-equiv="refresh" content="0; url=${pathFor(defaultLanguage)}"></head>
+<body><a href="${pathFor(defaultLanguage)}">Support</a></body></html>
+`;
+    await writeFile(join(out, 'index.html'), root);
+    await writeFile(join(out, 'sitemap.xml'), sitemapXml([urls], defaultLanguage));
+    return { languages: overview.languages, apps: apps.length };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/site",
-    "version": "0.63.1-next.236",
+    "version": "0.64.0",
     "description": "Static landing page generator for a GNOME-style app, rendered from its AppStream metainfo — downloads, screenshots, release notes, support links, no JavaScript required.",
     "type": "module",
     "main": "lib/index.js",
@@ -54,26 +54,25 @@
     "license": "MIT",
     "dependencies": {
         "@girs/gdkpixbuf-2.0": "5.4.0",
-        "@gjsify/console": "0.63.1-next.236",
-        "@gjsify/crypto": "0.63.1-next.236",
-        "@gjsify/fs": "0.63.1-next.236",
-        "@gjsify/module": "0.63.1-next.236",
-        "@gjsify/os": "0.63.1-next.236",
-        "@gjsify/path": "0.63.1-next.236",
-        "@gjsify/process": "0.63.1-next.236",
-        "@gjsify/url": "0.63.1-next.236",
+        "@gjsify/console": "^0.64.0",
+        "@gjsify/crypto": "^0.64.0",
+        "@gjsify/fs": "^0.64.0",
+        "@gjsify/module": "^0.64.0",
+        "@gjsify/os": "^0.64.0",
+        "@gjsify/path": "^0.64.0",
+        "@gjsify/process": "^0.64.0",
+        "@gjsify/url": "^0.64.0",
         "fast-xml-parser": "^5.11.2",
         "qrcode-generator": "^2.0.4"
     },
     "devDependencies": {
-        "@gjsify/cli": "0.63.1-next.236",
+        "@gjsify/cli": "^0.64.0",
         "@gjsify/node-gi": "file:../../node-gi/node-gi",
-        "@gjsify/unit": "0.63.1-next.236",
+        "@gjsify/unit": "^0.64.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
     },
     "gjsify": {
         "tier": 2
-    },
-    "gitHead": "d4ae412daabae9cb89f4fa11ee7279a308c9e4be"
+    }
 }

package/po/de.po

@@ -6,6 +6,15 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
+msgid "Support"
+msgstr "Unterstützen"
+
+msgid "These apps are free software. Pick one to see how to support its development."
+msgstr "Diese Apps sind freie Software. Wähle eine aus, um zu sehen, wie du ihre Entwicklung unterstützen kannst."
+
+msgid "Language"
+msgstr "Sprache"
+
 msgid "Website"
 msgstr "Webseite"
 
@@ -30,9 +39,6 @@ msgstr "Beim Übersetzen helfen"
 msgid "Contact"
 msgstr "Kontakt"
 
-msgid "Donate"
-msgstr "Spenden"
-
 msgid "Linux"
 msgstr "Linux"
 
@@ -192,9 +198,6 @@ msgstr "Stichwörter"
 msgid "Architectures"
 msgstr "Architekturen"
 
-msgid "Language"
-msgstr "Sprache"
-
 msgid "by {developer}"
 msgstr "von {developer}"
 
@@ -207,6 +210,12 @@ msgstr "Diese Seite gibt Texte unter der Lizenz {license} wieder."
 msgid "Made with {project}"
 msgstr "Gemacht mit {project}"
 
+msgid "{app} is free software. Support its development with a transfer or a service."
+msgstr "{app} ist freie Software. Unterstütze die Entwicklung per Überweisung oder über einen Dienst."
+
+msgid "Back to {app}"
+msgstr "Zurück zu {app}"
+
 msgid "Flathub"
 msgstr "Flathub"
 
@@ -263,3 +272,12 @@ msgstr "Store"
 
 msgid "Firefox add-on"
 msgstr "Firefox-Add-on"
+
+msgid "GitHub Sponsors"
+msgstr "GitHub Sponsors"
+
+msgid "Liberapay"
+msgstr "Liberapay"
+
+msgid "PayPal"
+msgstr "PayPal"

package/po/site.pot

@@ -5,6 +5,15 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
+msgid "Support"
+msgstr ""
+
+msgid "These apps are free software. Pick one to see how to support its development."
+msgstr ""
+
+msgid "Language"
+msgstr ""
+
 msgid "Website"
 msgstr ""
 
@@ -29,9 +38,6 @@ msgstr ""
 msgid "Contact"
 msgstr ""
 
-msgid "Donate"
-msgstr ""
-
 msgid "Linux"
 msgstr ""
 
@@ -191,9 +197,6 @@ msgstr ""
 msgid "Architectures"
 msgstr ""
 
-msgid "Language"
-msgstr ""
-
 msgid "by {developer}"
 msgstr ""
 
@@ -206,6 +209,12 @@ msgstr ""
 msgid "Made with {project}"
 msgstr ""
 
+msgid "{app} is free software. Support its development with a transfer or a service."
+msgstr ""
+
+msgid "Back to {app}"
+msgstr ""
+
 msgid "Flathub"
 msgstr ""
 
@@ -262,3 +271,12 @@ msgstr ""
 
 msgid "Firefox add-on"
 msgstr ""
+
+msgid "GitHub Sponsors"
+msgstr ""
+
+msgid "Liberapay"
+msgstr ""
+
+msgid "PayPal"
+msgstr ""