@gjsify/site 0.64.11 → 0.64.12-next.279

package/lib/render/feed.js

@@ -0,0 +1,97 @@
+import { esc } from './html.js';
+function formatDateRFC3339(date) {
+    // date-only YYYY-MM-DD means 00:00:00Z
+    if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+        return date + 'T00:00:00Z';
+    }
+    // Try to parse as ISO date-time
+    const d = new Date(date);
+    if (isNaN(d.getTime())) {
+        // Fallback: if it looks like ISO, try to normalize
+        // Otherwise just append Z if no timezone?
+        return date;
+    }
+    // Format as RFC3339 UTC
+    return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
+}
+/** A complete Atom document. Dates are given as YYYY-MM-DD or ISO; output RFC 3339 (date-only → T00:00:00Z). Feed <updated> = newest entry updated/published, or 1970-01-01T00:00:00Z when empty. */
+export function atomFeed(info, entries) {
+    let feedUpdated = '1970-01-01T00:00:00Z';
+    if (entries.length > 0) {
+        let newest = -Infinity;
+        for (const entry of entries) {
+            const updatedDate = entry.updated ?? entry.published;
+            const t = formatDateRFC3339(updatedDate);
+            // For comparison, use Date
+            const d = new Date(t);
+            if (d.getTime() > newest) {
+                newest = d.getTime();
+                feedUpdated = t.endsWith('Z') && t.includes('T') && t.length > 10 ? t : formatDateRFC3339(updatedDate);
+                // ensure proper format
+                if (!feedUpdated.includes('T')) {
+                    feedUpdated = feedUpdated + 'T00:00:00Z';
+                }
+                else if (!feedUpdated.endsWith('Z') && !feedUpdated.match(/[+-]\d{2}:?\d{2}$/)) {
+                    // try to convert
+                    feedUpdated = new Date(feedUpdated).toISOString().replace(/\.\d{3}Z$/, 'Z');
+                }
+            }
+        }
+        // Recompute properly
+        let maxTime = -Infinity;
+        let maxStr = '1970-01-01T00:00:00Z';
+        for (const entry of entries) {
+            const updatedDate = entry.updated ?? entry.published;
+            const formatted = formatDateRFC3339(updatedDate);
+            const d = new Date(formatted);
+            if (!isNaN(d.getTime()) && d.getTime() > maxTime) {
+                maxTime = d.getTime();
+                maxStr = formatted.includes('T') ? formatted : formatted + 'T00:00:00Z';
+                if (maxStr.match(/\.\d{3}Z$/)) {
+                    maxStr = maxStr.replace(/\.\d{3}Z$/, 'Z');
+                }
+            }
+        }
+        feedUpdated = maxStr;
+    }
+    let xml = '<?xml version="1.0" encoding="utf-8"?>\n';
+    xml += `<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="${esc(info.lang)}">\n`;
+    xml += `  <id>${esc(info.id)}</id>\n`;
+    xml += `  <title>${esc(info.title)}</title>\n`;
+    if (info.subtitle) {
+        xml += `  <subtitle>${esc(info.subtitle)}</subtitle>\n`;
+    }
+    xml += `  <updated>${feedUpdated}</updated>\n`;
+    xml += `  <link rel="self" type="application/atom+xml" href="${esc(info.selfUrl)}"/>\n`;
+    xml += `  <link rel="alternate" type="text/html" href="${esc(info.siteUrl)}"/>\n`;
+    if (info.icon) {
+        xml += `  <icon>${esc(info.icon)}</icon>\n`;
+    }
+    xml += `  <author>\n`;
+    xml += `    <name>${esc(info.author.name)}</name>\n`;
+    if (info.author.uri) {
+        xml += `    <uri>${esc(info.author.uri)}</uri>\n`;
+    }
+    xml += `  </author>\n`;
+    for (const entry of entries) {
+        xml += `  <entry>\n`;
+        xml += `    <id>${esc(entry.id)}</id>\n`;
+        xml += `    <title>${esc(entry.title)}</title>\n`;
+        xml += `    <link rel="alternate" href="${esc(entry.url)}"/>\n`;
+        const published = formatDateRFC3339(entry.published);
+        xml += `    <published>${published.includes('T') ? published.replace(/\.\d{3}Z$/, 'Z') : published + 'T00:00:00Z'}</published>\n`;
+        const updated = entry.updated ? formatDateRFC3339(entry.updated) : published;
+        const updatedOut = updated.includes('T') ? updated.replace(/\.\d{3}Z$/, 'Z') : updated + 'T00:00:00Z';
+        xml += `    <updated>${updatedOut}</updated>\n`;
+        if (entry.summary) {
+            xml += `    <summary>${esc(entry.summary)}</summary>\n`;
+        }
+        xml += `    <content type="html">${esc(entry.contentHtml)}</content>\n`;
+        for (const tag of entry.tags) {
+            xml += `    <category term="${esc(tag)}"/>\n`;
+        }
+        xml += `  </entry>\n`;
+    }
+    xml += `</feed>`;
+    return xml;
+}

package/lib/render/i18n.d.ts

@@ -1,4 +1,4 @@
-import { type Catalog, type SiteConfig } from '../site-data/index.js';
+import { type Catalog, type AnySiteConfig } from '../site-data/index.js';
 /**
  * The msgids the renderer itself can emit: every translator call in its sources, plus the default
  * download labels. They belong to this package and are translated in its own `po/`.
@@ -9,7 +9,7 @@ export declare function rendererMsgids(renderDir: string): Promise<string[]>;
  * consumer and are translated in the consumer's `pageTranslations`. Screenshot captions are not
  * among them — they live in the metainfo and are translated there.
  */
-export declare function configMsgids(config: SiteConfig): string[];
+export declare function configMsgids(config: AnySiteConfig): string[];
 /** Every msgid in a `.po`/`.pot` file, translated or not, header excluded. */
 export declare function catalogMsgids(file: string): Promise<Set<string>>;
 /** Writes a catalogue: the translations in `known` are kept, everything else is left empty. */

package/lib/render/i18n.js

@@ -44,6 +44,8 @@ export async function rendererMsgids(renderDir) {
  */
 export function configMsgids(config) {
     const msgids = new Set();
+    if (config.kind !== 'app')
+        return [];
     for (const download of config.downloads)
         if (download.label)
             msgids.add(download.label);

package/lib/render/icons.d.ts

@@ -3,7 +3,7 @@
  * theme: inlining them costs no request and no licence notice, and a symbolic 16×16 grid is
  * little enough geometry to keep in one file. Every path uses `currentColor` and is sized by CSS.
  */
-export type IconName = 'linux' | 'macos' | 'windows' | 'android' | 'web' | 'firefox' | 'chromium' | 'package' | 'download' | 'license' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'close' | 'copy' | 'expand' | 'external' | 'code' | 'bug' | 'heart' | 'help' | 'mail' | 'people' | 'translate';
+export type IconName = 'linux' | 'macos' | 'windows' | 'android' | 'web' | 'firefox' | 'chromium' | 'package' | 'download' | 'license' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'close' | 'copy' | 'expand' | 'external' | 'code' | 'bug' | 'heart' | 'help' | 'mail' | 'people' | 'translate' | 'blog' | 'cv' | 'feed';
 export interface IconOptions {
     /** Added to the `<svg>`, on top of the shared `icon` class. */
     class?: string;

package/lib/render/icons.js

@@ -31,6 +31,9 @@ const PATHS = {
     mail: `<g ${STROKE}><rect x="1.8" y="3.4" width="12.4" height="9.2" rx="1.6"/><path d="m2.4 4.6 5.6 4.2 5.6-4.2"/></g>`,
     people: `<g ${STROKE}><circle cx="6.2" cy="5.2" r="2.6"/><path d="M1.6 13.8c0-2.5 2.1-4.2 4.6-4.2s4.6 1.7 4.6 4.2"/><path d="M10.6 3.1a2.6 2.6 0 0 1 0 5.1M12.1 9.9c1.4.5 2.3 1.7 2.3 3.3"/></g>`,
     translate: `<g ${STROKE}><path d="M2 4.4c0-.9.7-1.6 1.6-1.6h5.1c.9 0 1.6.7 1.6 1.6v2.3c0 .9-.7 1.6-1.6 1.6H6L3.6 10.4V8.3h-.1c-.8 0-1.5-.7-1.5-1.6V4.4Z"/><path d="M12.3 6h.1c.9 0 1.6.7 1.6 1.6v2.3c0 .9-.7 1.6-1.6 1.6h-.1v2.1L9.9 11.5H8"/></g>`,
+    blog: `<g ${STROKE}><path d="M10.6 2.4a1.5 1.5 0 0 1 2.1 2.1L6 11.2l-2.8.7.7-2.8 6.7-6.7Z"/><path d="M2.2 14.2h11.6"/></g>`,
+    cv: `<g ${STROKE}><rect x="2.6" y="1.8" width="10.8" height="12.4" rx="1.6"/><circle cx="8" cy="6" r="1.8"/><path d="M5.2 10.6c.4-1.2 1.5-1.9 2.8-1.9s2.4.7 2.8 1.9"/></g>`,
+    feed: `<g ${STROKE}><path d="M3 7.2a5.8 5.8 0 0 1 5.8 5.8M3 2.6A10.4 10.4 0 0 1 13.4 13"/></g><circle cx="3.9" cy="12.1" r="1.3"/>`,
 };
 /** Renders one icon as an inline `<svg>`; decorative by default. */
 export function icon(name, options = {}) {

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

@@ -19,7 +19,8 @@ export interface RasterImage {
     opaqueBounds(threshold: number): Rect | null;
     cropped(rect: Rect): RasterImage;
     /** Keeps the aspect ratio. Never enlarges: a width at or above this one answers the same image. */
-    resizedToWidth(width: number): RasterImage;
+    /** `nearest` keeps pixel art's hard edges; the default resamples smoothly. */
+    resizedToWidth(width: number, filter?: 'smooth' | 'nearest'): RasterImage;
     encode(format: ImageFormat): Uint8Array;
 }
 export declare function decodeImageFile(path: string): RasterImage;

package/lib/render/image-backend.js

@@ -91,14 +91,14 @@ function wrap(pixbuf) {
                 throw new Error(`Could not crop an image to ${rect.width}x${rect.height}`);
             return wrap(sub);
         },
-        resizedToWidth(target) {
+        resizedToWidth(target, filter = 'smooth') {
             if (target >= width)
                 return wrap(pixbuf);
             const scaled = pixbuf.scale_simple(target, Math.max(1, Math.round((height * target) / width)), 
             // HYPER over BILINEAR: these are large screenshots scaled far
             // down, where bilinear drops thin UI lines (1px borders, text
             // stems) that the page is meant to show.
-            GdkPixbuf.InterpType.HYPER);
+            filter === 'nearest' ? GdkPixbuf.InterpType.NEAREST : GdkPixbuf.InterpType.HYPER);
             if (!scaled)
                 throw new Error(`Could not scale an image to ${target}px`);
             return wrap(scaled);

package/lib/render/images.d.ts

@@ -20,6 +20,8 @@ export interface ImageOptions {
     /** Persistent store of encoded renditions; AVIF is slow, so it is reused while the source is unchanged. */
     cacheDir: string;
     urlBase: string;
+    /** `theme.imageRendering: pixelated` — nearest-neighbour renditions for pixel art. */
+    pixelated?: boolean;
 }
 /**
  * The widest the page ever shows a screenshot, in CSS pixels. A screenshot is shown at its natural

package/lib/render/images.js

@@ -75,9 +75,10 @@ export async function processImage(source, slug, options) {
         let scaled;
         for (const format of FORMATS) {
             const name = `${slug}-${width}.${format}`;
-            const cached = join(options.cacheDir, name);
+            // The filter is part of the cache key: switching the theme must not serve stale renditions.
+            const cached = join(options.cacheDir, options.pixelated ? `px-${name}` : name);
             if (!(await isFresh(cached, source))) {
-                scaled ??= image.resizedToWidth(width);
+                scaled ??= image.resizedToWidth(width, options.pixelated ? 'nearest' : 'smooth');
                 await writeFile(cached, scaled.encode(format));
             }
             await copyFile(cached, join(options.outDir, name));

package/lib/render/layout.d.ts

@@ -0,0 +1,94 @@
+/**
+ * The frame every page kind shares: `<head>`, the top bar and the footer. App pages, blog pages and
+ * developer pages all render through it, so a fix to the head or the footer lands on all of them
+ * (ADR 0120 §6). What differs between the kinds is the `Shell` they build; what differs between two
+ * pages of one site is their `PageMeta`.
+ */
+import type { SiteCommonConfig } from '../site-data/index.js';
+import { type IconName } from './icons.js';
+export type Translate = (msgid: string) => string;
+export interface ClientAssets {
+    js: string;
+    css: string[];
+}
+/** A link in the top bar next to the language switch. */
+export interface NavLink {
+    href: string;
+    label: string;
+    glyph: IconName;
+    /** The page being rendered is this link's target or below it. */
+    current?: boolean;
+}
+/** What stays the same on every page of one site in one language. */
+export interface Shell {
+    config: SiteCommonConfig;
+    lang: string;
+    t: Translate;
+    assets: ClientAssets;
+    /** The site's name: the bar brand and `og:site_name`. */
+    name: string;
+    /** Root-relative address the brand links to. */
+    home: string;
+    /** Published URL of the icon: bar brand, favicon. */
+    iconUrl?: string;
+    /** Paints the masthead and the bar; `undefined` keeps the stylesheet's palette. */
+    branding: {
+        light?: string;
+        dark?: string;
+    };
+    /** Address of the source code, not `owner/name`; see `githubUrl`. */
+    repository?: string;
+    /** Translated footer sentences about licences. */
+    licenses: readonly string[];
+    nav: readonly NavLink[];
+    /** Atom feeds announced in `<head>` of every page. */
+    feeds: ReadonlyArray<{
+        title: string;
+        href: string;
+    }>;
+    /** Root-relative URL of the content-hashed `theme.displayFont`. */
+    displayFontUrl?: string;
+}
+/** What makes one page different from its siblings. */
+export interface PageMeta {
+    title: string;
+    description: string;
+    /** Root-relative address of this page in every language it exists in, including the shell's. */
+    urls: Readonly<Record<string, string>>;
+    /** Where the language switch leads for a language this page has no translation in. */
+    fallback?: (lang: string) => string;
+    ogType?: 'website' | 'article' | 'profile';
+    /** Root-relative URL of the link-preview card. */
+    ogImage?: string;
+    /** Further `<meta property>` pairs, e.g. `article:published_time`. */
+    meta?: ReadonlyArray<[string, string]>;
+    /** Ready `<script type="application/ld+json">` markup. */
+    jsonLd?: string;
+}
+/** `/<lang>/` under the site's base, plus an optional sub path such as `privacy/`. */
+export declare function sitePageUrl(config: Pick<SiteCommonConfig, 'base'>, lang: string, path?: string): string;
+export declare function absoluteUrl(config: Pick<SiteCommonConfig, 'url'>, rootRelative: string): string;
+export declare function languageName(code: string): string;
+export declare function languageSwitch(shell: Shell, page: PageMeta, className: string, style: 'code' | 'name'): string;
+export declare function documentHead(shell: Shell, page: PageMeta): string;
+/** `gjsify.site.repository` is `owner/name`; a link needs the address. */
+export declare function githubUrl(repository: string | undefined): string | undefined;
+export declare function topBar(shell: Shell, page: PageMeta): string;
+export declare function footer(shell: Shell, page: PageMeta): string;
+/** A whole document: head, bar, the page's own markup, footer. */
+export declare function documentPage(shell: Shell, page: PageMeta, body: string, bodyClass?: string): string;
+/** The small masthead of a secondary page: the site's icon, a heading and who it belongs to. */
+export declare function pageMasthead(shell: Pick<Shell, 'iconUrl'>, heading: string, byline?: string): string;
+/** A text page — support, privacy, legal notice, a blog post — in one column under a small masthead. */
+export declare function simplePage(shell: Shell, page: PageMeta, options: {
+    heading: string;
+    byline?: string;
+    columnClass?: string;
+    body: string;
+    back?: {
+        href: string;
+        label: string;
+    };
+}): 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 rootPage(config: Pick<SiteCommonConfig, 'base' | 'url' | 'languages' | 'defaultLanguage'>, name: string, assets: ClientAssets, iconUrl: string | undefined): string;

package/lib/render/layout.js

@@ -0,0 +1,216 @@
+import { readableText } from './color.js';
+import { esc, plain } from './html.js';
+import { icon } from './icons.js';
+import { OG_HEIGHT, OG_WIDTH } from './og-card.js';
+import { ogLocale } from './seo.js';
+/** `/<lang>/` under the site's base, plus an optional sub path such as `privacy/`. */
+export function sitePageUrl(config, lang, path = '') {
+    return `${config.base}${lang}/${path}`;
+}
+export function absoluteUrl(config, rootRelative) {
+    return new URL(rootRelative.replace(/^\//, ''), `${new URL(config.url).origin}/`).href;
+}
+export function languageName(code) {
+    return new Intl.DisplayNames([code], { type: 'language' }).of(code) ?? code;
+}
+function switchUrl(shell, page, code) {
+    return page.urls[code] ?? page.fallback?.(code) ?? sitePageUrl(shell.config, code);
+}
+export function languageSwitch(shell, page, className, style) {
+    const { config, lang, t } = shell;
+    const items = config.languages.map((code) => {
+        const label = style === 'code' ? code.toUpperCase() : languageName(code);
+        // Only a real translation is the same page in another language; a fallback is not.
+        const hreflang = page.urls[code] ? ` hreflang="${esc(code)}"` : '';
+        return code === lang
+            ? `<li><span aria-current="true">${esc(label)}</span></li>`
+            : `<li><a href="${esc(switchUrl(shell, page, code))}"${hreflang} lang="${esc(code)}">${esc(label)}</a></li>`;
+    });
+    return `<nav class="${className}" aria-label="${esc(t('Language'))}"><ul>${items.join('')}</ul></nav>`;
+}
+/**
+ * The theme as inline CSS: accent and display font as custom properties the stylesheet reads, and
+ * nearest-neighbour scaling for pixel art. Empty without a theme, so the default look is untouched.
+ */
+function themeStyle(shell) {
+    const { theme } = shell.config;
+    const { light, dark } = shell.branding;
+    const vars = [
+        light ? `--brand-light:${light};--band-fg-light:${readableText(light)}` : '',
+        dark ? `--brand-dark:${dark};--band-fg-dark:${readableText(dark)}` : '',
+        theme.accent
+            ? `--accent-light:${theme.accent.light};--accent-dark:${theme.accent.dark};--accent-fg-light:${readableText(theme.accent.light)};--accent-fg-dark:${readableText(theme.accent.dark)}`
+            : '',
+        shell.displayFontUrl ? '--display-font:"Site Display"' : '',
+    ]
+        .filter(Boolean)
+        .join(';');
+    const rules = [
+        shell.displayFontUrl
+            ? `@font-face{font-family:"Site Display";src:url(${JSON.stringify(shell.displayFontUrl)}) format("woff2");font-display:swap}`
+            : '',
+        vars ? `:root{${vars}}` : '',
+        theme.imageRendering === 'pixelated' ? 'img{image-rendering:pixelated}' : '',
+    ].join('');
+    return rules ? `<style>${rules}</style>` : '';
+}
+export function documentHead(shell, page) {
+    const { config, lang, name } = shell;
+    const { title, description } = page;
+    const url = absoluteUrl(config, page.urls[lang] ?? sitePageUrl(config, lang));
+    const ogImage = page.ogImage ? absoluteUrl(config, page.ogImage) : undefined;
+    const languages = config.languages.filter((code) => page.urls[code] !== undefined);
+    const alternates = languages.map((code) => `<link rel="alternate" hreflang="${esc(code)}" href="${esc(absoluteUrl(config, page.urls[code]))}">`);
+    const xDefault = page.urls[config.defaultLanguage];
+    const meta = [
+        ['og:type', page.ogType ?? 'website'],
+        ['og:title', title],
+        ['og:description', description],
+        ['og:url', url],
+        ['og:site_name', name],
+        ['og:locale', ogLocale(lang)],
+        ...languages
+            .filter((code) => code !== lang)
+            .map((code) => ['og:locale:alternate', ogLocale(code)]),
+    ];
+    if (ogImage) {
+        meta.push(['og:image', ogImage], ['og:image:width', String(OG_WIDTH)], ['og:image:height', String(OG_HEIGHT)], ['og:image:alt', title]);
+    }
+    meta.push(...(page.meta ?? []));
+    const { light, dark } = shell.branding;
+    return `<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(title)}</title>
+<meta name="description" content="${esc(description)}">
+<link rel="canonical" href="${esc(url)}">
+${alternates.join('\n')}
+${xDefault ? `<link rel="alternate" hreflang="x-default" href="${esc(absoluteUrl(config, xDefault))}">` : ''}
+${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)">
+${shell.iconUrl ? `<link rel="icon"${shell.iconUrl.endsWith('.svg') ? ' type="image/svg+xml"' : ''} href="${esc(shell.iconUrl)}">` : ''}
+${shell.feeds.map((feed) => `<link rel="alternate" type="application/atom+xml" title="${esc(feed.title)}" href="${esc(feed.href)}">`).join('\n')}
+${page.jsonLd ?? ''}
+${themeStyle(shell)}
+${shell.assets.css.map((href) => `<link rel="stylesheet" href="${esc(href)}">`).join('\n')}
+<script type="module" src="${esc(shell.assets.js)}"></script>`;
+}
+/** `gjsify.site.repository` is `owner/name`; a link needs the address. */
+export function githubUrl(repository) {
+    return repository ? `https://github.com/${repository}` : undefined;
+}
+function onGitHub(url) {
+    return /(^|\.)github\.com$/.test(new URL(url).host);
+}
+export function topBar(shell, page) {
+    const { t, repository } = shell;
+    const nav = shell.nav.map((link) => `<a class="bar-link" href="${esc(link.href)}"${link.current ? ' aria-current="page"' : ''}>${icon(link.glyph)}<span>${esc(link.label)}</span></a>`);
+    return `<div class="topbar">
+<div class="bar-inner">
+<a class="bar-brand" href="${esc(shell.home)}">
+${shell.iconUrl ? `<img src="${esc(shell.iconUrl)}" alt="" width="24" height="24">` : ''}
+<span>${esc(shell.name)}</span>
+</a>
+<div class="bar-end">
+${nav.join('\n')}
+${languageSwitch(shell, page, 'bar-languages', 'code')}
+${repository ? `<a class="bar-link" href="${esc(repository)}">${icon('code')}<span>${onGitHub(repository) ? 'GitHub' : esc(t('Source code'))}</span></a>` : ''}
+</div>
+</div>
+</div>`;
+}
+export function footer(shell, page) {
+    const { config, lang, t, repository } = shell;
+    // The privacy and legal-notice links are derived, never configured: a consumer with a
+    // `gjsify.site.privacy`/`legalNotice` block gets the link on every page without also listing
+    // it in `legal`, which would be a second place for the two to disagree.
+    const legal = [
+        ...(config.legalNotice
+            ? [`<li><a href="${esc(sitePageUrl(config, lang, 'legal-notice/'))}">${esc(t('Legal Notice'))}</a></li>`]
+            : []),
+        ...(config.privacy
+            ? [`<li><a href="${esc(sitePageUrl(config, lang, 'privacy/'))}">${esc(t('Privacy'))}</a></li>`]
+            : []),
+        ...config.legal.map((link) => `<li><a href="${esc(link.url)}">${esc(link.label)}</a></li>`),
+    ].join('');
+    return `<footer class="footer">
+<div class="footer-inner">
+${languageSwitch(shell, page, 'footer-languages', 'name')}
+${repository ? `<p class="footer-source"><a href="${esc(repository)}">${icon('code')}<span>${esc(t('Source code'))}</span></a></p>` : ''}
+${shell.licenses.length > 0 ? `<p class="footer-license">${shell.licenses.map(esc).join(' ')}</p>` : ''}
+<p class="footer-made"><a href="https://github.com/gjsify/gjsify">${esc(plain(t('Made with {project}'), { project: 'gjsify' }))}</a></p>
+${legal ? `<ul class="footer-legal">${legal}</ul>` : ''}
+</div>
+</footer>`;
+}
+/** A whole document: head, bar, the page's own markup, footer. */
+export function documentPage(shell, page, body, bodyClass) {
+    return `<!doctype html>
+<html lang="${esc(shell.lang)}">
+<head>
+${documentHead(shell, page)}
+</head>
+<body${bodyClass ? ` class="${esc(bodyClass)}"` : ''}>
+${topBar(shell, page)}
+${body}
+${footer(shell, page)}
+</body>
+</html>
+`;
+}
+/** The small masthead of a secondary page: the site's icon, a heading and who it belongs to. */
+export function pageMasthead(shell, heading, byline) {
+    return `<header class="masthead">
+<div class="hero-inner">
+${shell.iconUrl ? `<div class="hero-icon" style="--icon-url:url(${esc(shell.iconUrl)})"><img src="${esc(shell.iconUrl)}" alt="" width="128" height="128"></div>` : ''}
+<div class="hero-text">
+<h1>${esc(heading)}</h1>
+${byline ? `<p class="hero-by">${esc(byline)}</p>` : ''}
+</div>
+</div>
+</header>`;
+}
+/** A text page — support, privacy, legal notice, a blog post — in one column under a small masthead. */
+export function simplePage(shell, page, options) {
+    const back = options.back
+        ? `\n<p class="support-back"><a href="${esc(options.back.href)}">${options.back.label}</a></p>`
+        : '';
+    return documentPage(shell, page, `${pageMasthead(shell, options.heading, options.byline)}
+<main>
+<div class="column${options.columnClass ? ` ${options.columnClass}` : ''}">
+${options.body}${back}
+</div>
+</main>`);
+}
+/** The root page: a script picks the visitor's language, the link list is what everyone else (and every crawler) sees. */
+export function rootPage(config, name, assets, iconUrl) {
+    const json = (value) => JSON.stringify(value).replace(/</g, '\\u003c');
+    const choose = `var l=${json(config.languages)},d=${json(config.defaultLanguage)},p=(navigator.languages||[navigator.language]).map(function(x){return String(x).toLowerCase()}),c=d;for(var i=0;i<p.length;i++){var m=l.filter(function(x){return p[i]===x.toLowerCase()||p[i].split("-")[0]===x.toLowerCase()})[0];if(m){c=m;break}}location.replace(${json(config.base)}+c+"/")`;
+    const home = (code) => sitePageUrl(config, code);
+    const alternates = config.languages.map((code) => `<link rel="alternate" hreflang="${esc(code)}" href="${esc(absoluteUrl(config, home(code)))}">`);
+    return `<!doctype html>
+<html lang="${esc(config.defaultLanguage)}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(name)}</title>
+<link rel="canonical" href="${esc(absoluteUrl(config, home(config.defaultLanguage)))}">
+${alternates.join('\n')}
+<link rel="alternate" hreflang="x-default" href="${esc(absoluteUrl(config, home(config.defaultLanguage)))}">
+${iconUrl ? `<link rel="icon"${iconUrl.endsWith('.svg') ? ' type="image/svg+xml"' : ''} href="${esc(iconUrl)}">` : ''}
+${assets.css.map((href) => `<link rel="stylesheet" href="${esc(href)}">`).join('\n')}
+<script>${choose}</script>
+</head>
+<body class="root">
+<main>
+<h1>${esc(name)}</h1>
+<ul class="languages-list">${config.languages.map((code) => `<li><a href="${esc(home(code))}" hreflang="${esc(code)}" lang="${esc(code)}">${esc(languageName(code))}</a></li>`).join('')}</ul>
+</main>
+</body>
+</html>
+`;
+}

package/lib/render/markdown.d.ts

@@ -1 +1,15 @@
-export declare function renderMarkdown(source: string): string;
+/**
+ * The subset of Markdown a privacy/legal statement actually uses: headings up to three levels,
+ * paragraphs (wrapped lines joined back into one), ordered and unordered lists, GFM pipe tables,
+ * a horizontal rule, inline links/bold/code, fenced code blocks, images, blockquotes, and
+ * emphasis. Also used for blog posts. Nothing else — this is not a Markdown engine,
+ * it is the smallest renderer that can show the statement files consumers already write by hand.
+ *
+ * Heading levels are shifted up by one (`#`→`h2`, `##`→`h3`, `###`→`h4`): the page already has its
+ * own `<h1>` (the page title), and a statement file's own top-level heading restates it.
+ */
+export interface MarkdownOptions {
+    /** Rewrites a link href or image src; absolute and `#` URLs are passed in too. */
+    resolveUrl?: (url: string) => string;
+}
+export declare function renderMarkdown(source: string, options?: MarkdownOptions): string;