@allons-y/webc-patterns 0.0.0-stage → 0.1.0-beta.1

package/index.js

@@ -0,0 +1,177 @@
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+const COMPONENTS = path.join(import.meta.dirname, "components");
+
+/**
+ * A folder path to put at the start of a glob: forward slashes, and a backslash before each character a glob reads as syntax,
+ * so a folder such as `Dropbox (Personal)` matches itself and not `Dropbox Personal`.
+ *
+ * @param {string} folder
+ * @returns {string}
+ */
+const globPath = (folder) => folder.split(path.sep).join("/").replace(/[\\()*?[\]{|}]|[!+@](?=\()/g, "\\$&");
+
+/** Component names in the package, from the files in `components/`. */
+const names = () =>
+	fs
+		.readdirSync(COMPONENTS)
+		.filter((file) => file.endsWith(".webc"))
+		.map((file) => file.slice(0, -".webc".length))
+		.sort();
+
+/**
+ * Absolute glob for the package's components, for the project's WebC `components` list.
+ *
+ * @param {{ exclude?: string[] }} [options] - Component names to leave out, so the project can supply its own
+ * @returns {string}
+ * @throws {Error} When `exclude` names a component the package does not have
+ */
+export function patterns({ exclude = [] } = {}) {
+	const available = names();
+	const unknown = exclude.filter((name) => !available.includes(name));
+	if (unknown.length) {
+		throw new Error(`patterns: no component named ${unknown.map((name) => `"${name}"`).join(", ")}. Available: ${available.join(", ")}`);
+	}
+	const dir = globPath(COMPONENTS);
+	return exclude.length ? `${dir}/!(${exclude.join("|")}).webc` : `${dir}/*.webc`;
+}
+
+/**
+ * The pages before and after one in a collection, for `norn-pager`.
+ *
+ * @param {{ href: string, title: string }[]} pages - The items, in order
+ * @param {{ url: string }} page - The current page, as Eleventy's `page`
+ * @returns {{ prev?: object, next?: object }} The items before and after the one whose `href` is the page's `url`; both undefined when none is
+ */
+export function adjacent(pages, page) {
+	const index = pages.findIndex((candidate) => candidate.href === page.url);
+	if (index === -1) return { prev: undefined, next: undefined };
+	return { prev: pages[index - 1], next: pages[index + 1] };
+}
+
+/** The empty bundle tags a page without CSS or JS is left with. HtmlBasePlugin may have rewritten the empty URL to `.`. */
+const EMPTY_BUNDLE_TAGS = /[\t ]*<link rel="stylesheet" href="[./]*">\n?|[\t ]*<script src="[./]*"[^>]*><\/script>\n?/g;
+
+/**
+ * Eleventy transform: drop the empty bundle `<link>` and `<script>` that `norn-head` leaves on a page with no bundles.
+ * `webc:if` can't guard them, because the bundle URL resolves after render. The Norn plugin registers it; without the plugin,
+ * register it yourself: `config.addTransform("empty-bundle-tags", dropEmptyBundleTags)`.
+ *
+ * @param {string} content
+ * @returns {string}
+ */
+export function dropEmptyBundleTags(content) {
+	return typeof content === "string" ? content.replace(EMPTY_BUNDLE_TAGS, "") : content;
+}
+
+/** The English defaults, frozen below as `defaultStrings`. The `norn-*` layouts have no caller to fill a slot, so their texts are keyed here by layout. */
+const STRINGS = {
+	"norn-base": { footer: "Footer", license: "Licensed under {license}" },
+	"norn-docs": { nav: "Documentation", search: "Search the docs" },
+	"norn-docs-home": { actions: "Get started", docs: "Read the docs", repo: "View on GitHub", contents: "Documentation" },
+	"norn-landing": {
+		actions: "Get started",
+		start: "Get started",
+		repo: "View on GitHub",
+		free: "Free & open source",
+		license: "License: {license}",
+		node: "Node {node}",
+		install: "Install",
+		features: "Features",
+		packages: "Packages",
+	},
+	"norn-workspace": { nav: "Packages" },
+	"norn-workspaces-home": { actions: "Get started", browse: "Browse packages", repo: "View on GitHub", packages: "Packages" },
+	"norn-breadcrumbs": { label: "Breadcrumb" },
+	"norn-callout": { note: "Note", tip: "Tip", important: "Important", warning: "Warning", caution: "Caution" },
+	"norn-code-block": { label: "{language} code", "copy-label": "Copy {name} to clipboard" },
+	"norn-code-tabs": { label: "Code samples", sample: "Sample {n}" },
+	"norn-copy-button": { copy: "Copy", copied: "Copied", failed: "Copy failed" },
+	"norn-header": { label: "Primary", summary: "Menu" },
+	"norn-notice": { info: "Note: ", success: "Success: ", warning: "Warning: ", danger: "Error: " },
+	"norn-pager": { label: "Pager" },
+	"norn-toc": { label: "On this page" },
+	"norn-search": {
+		label: "Search",
+		none: "No results",
+		"results-zero": null,
+		"results-one": "{count} result",
+		"results-two": null,
+		"results-few": null,
+		"results-many": null,
+		"results-other": "{count} results",
+	},
+	"norn-side-nav": { label: "Pages" },
+	"norn-sidebar-layout": { summary: "Menu" },
+	"norn-skip-link": { label: "Skip to content" },
+	"norn-theme-toggle": { label: "Color scheme", light: "Light", system: "System", dark: "Dark" },
+};
+
+/**
+ * Every string the components and layouts show or read, with its English default, by component or layout and key.
+ * A component's key is the slot it fills when the page leaves that slot empty, or for `norn-callout` and `norn-notice` the variant or severity whose `heading` or `prefix` it is.
+ * A layout's key names a text it writes itself, such as `norn-landing`'s `license`, a template with `{license}` for the value.
+ * `norn-code-block` takes its button texts from the `norn-copy-button` keys.
+ * A `null` default means the component has none and falls back to another key.
+ */
+export const defaultStrings = Object.freeze(Object.fromEntries(Object.entries(STRINGS).map(([component, keys]) => [component, Object.freeze(keys)])));
+
+/** Throw on a component or key `defaultStrings` doesn't list, naming the ones it does. */
+function checkStrings(table, where) {
+	for (const [component, keys] of Object.entries(table)) {
+		if (!Object.hasOwn(defaultStrings, component)) throw new Error(`componentStrings: no component named "${component}"${where}. Available: ${Object.keys(defaultStrings).join(", ")}`);
+		for (const [key, value] of Object.entries(keys ?? {})) {
+			if (!Object.hasOwn(defaultStrings[component], key)) {
+				const hint = /[A-Z]/.test(key) ? `; keys are slot names, as "${key.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase())}"` : "";
+				throw new Error(`componentStrings: ${component} has no string "${key}"${where}${hint}. Available: ${Object.keys(defaultStrings[component]).join(", ")}`);
+			}
+			if (typeof value !== "string") throw new Error(`componentStrings: ${component}.${key}${where} must be a string`);
+		}
+	}
+}
+
+/**
+ * Site-wide strings for every component and layout, so a page in another language needs no slot on each tag.
+ * The Norn plugin registers the result of its `strings` option. Without the plugin, register it once:
+ * `config.addJavaScriptFunction("nornComponentStrings", componentStrings({ "norn-toc": { label: "Sur cette page" } }))`.
+ * Keys are the slot names, as `label` or `results-one`. For several languages, key the tables by language tag, as `{ fr: { … }, de: { … } }`:
+ * a page picks its table by `page.lang`, which Eleventy's i18n plugin sets.
+ * A slot filled on the tag still wins, a missing string keeps the English default, and an unknown component or key throws.
+ *
+ * @param {Record<string, Record<string, string>>} table - Strings by component and key, or such tables by language tag
+ * @returns {(component: string, key: string, page?: { lang?: string }) => string | undefined}
+ */
+export function componentStrings(table) {
+	const byLanguage = new Map();
+	for (const [key, value] of Object.entries(table)) {
+		if (Object.hasOwn(defaultStrings, key)) continue;
+		const [lang] = canonical(key) ?? [];
+		if (!lang) throw new Error(`componentStrings: "${key}" is neither a component nor a language tag. Components: ${Object.keys(defaultStrings).join(", ")}`);
+		checkStrings(value, ` (in "${key}")`);
+		byLanguage.set(lang, value);
+	}
+	const shared = Object.fromEntries(Object.entries(table).filter(([key]) => Object.hasOwn(defaultStrings, key)));
+	checkStrings(shared, "");
+	return (component, key, page) => {
+		const [lang] = canonical(page?.lang) ?? [];
+		const own = lang && (byLanguage.get(lang) ?? byLanguage.get(lang.split("-")[0]));
+		return own?.[component]?.[key] ?? shared[component]?.[key];
+	};
+}
+
+/** A language tag in its canonical case, or nothing for a missing or malformed one. */
+function canonical(tag) {
+	try {
+		return tag ? Intl.getCanonicalLocales(tag) : undefined;
+	} catch {
+		return undefined;
+	}
+}

package/layouts/norn-base.webc

@@ -0,0 +1,137 @@
+<!doctype html>
+<html
+	:lang="$data.norn.lang"
+	:dir="['ltr', 'rtl', 'auto'].includes($data.norn.dir) ? $data.norn.dir : /^(ar|fa|he|iw|ur|ps|yi|ji|dv|ckb|sd|ug)$/i.test(String($data.norn.lang).split(/[-_]/)[0]) ? 'rtl' : 'ltr'"
+>
+	<head>
+		<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+		<meta
+			webc:is="norn-head"
+			webc:nokeep
+			:@title="$data.norn.title ? ($data.norn.name && $data.norn.title !== $data.norn.name ? $data.norn.title + ': ' + $data.norn.name : $data.norn.title) : $data.norn.tagline ? ($data.norn.name ? $data.norn.name + ': ' + $data.norn.tagline : $data.norn.tagline) : $data.norn.name || ''"
+			:@description="$data.norn.description || ''"
+			:@url="typeof $data.norn.url === 'string' ? $data.norn.url : false"
+			:@theme-color="$data.norn.themeColor || ''"
+			:@og-title="$data.norn.ogTitle || ''"
+			:@og-image="$data.norn.ogImage ? $data.norn.ogImage.src : ''"
+			:@og-image-alt="$data.norn.ogImage ? $data.norn.ogImage.alt || '' : ''"
+			:@theme-toggle="$data.norn.themeToggle ?? false"
+		/>
+		<meta webc:if="$data.norn.name" property="og:site_name" :content="$data.norn.name" />
+		<meta webc:if="$data.norn.locale" property="og:locale" :content="$data.norn.locale" />
+		<link webc:if="$data.norn.icon" rel="icon" :href="$data.norn.icon.href" :type="$data.norn.icon.type" />
+		<link webc:if="!$data.norn.icon" rel="icon" href="data:," />
+		<link webc:if="$data.norn.touchIcon" rel="apple-touch-icon" :href="$data.norn.touchIcon" />
+		<template webc:nokeep @html="nornHook('head')"></template>
+		<style>/* norn: css/base.css */</style>
+		<style>/* norn: css/print.css */</style>
+		<style>
+			@layer norn.layout {
+				/* A section directly in main is a centered column at the page width, its heading the second level. A section anywhere else is left alone. The :where() keeps the rule easy for a project to override. */
+				:where(main) > section {
+					display: grid;
+					grid-template-columns: minmax(0, 1fr);
+					align-content: start;
+					gap: var(--norn-space-m, 1.25rem);
+					inline-size: min(100% - 2 * var(--norn-space-m, 1.25rem), var(--norn-layout-width, 64rem));
+					margin-inline: auto;
+					padding-block: var(--norn-space-l, 2rem);
+					scroll-margin-block-start: var(--norn-space-m, 1.25rem);
+				}
+
+				:where(main) > section > h2,
+				:where(main) > section > norn-heading-anchor > h2 {
+					margin: 0;
+					font-family: var(--norn-font-heading, var(--norn-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
+					font-size: var(--norn-font-size-xl, 1.5rem);
+					line-height: 1.15;
+					text-wrap: balance;
+				}
+
+				@media print {
+					:where(main) > section {
+						gap: var(--norn-space-s, 0.75rem);
+						padding-block: var(--norn-space-m, 1.25rem);
+					}
+				}
+
+				/* The page title and the body's line length in a page with a navigation column, for norn-docs and norn-workspace. The base styles set the title's face and wrapping. */
+				norn-sidebar-layout {
+					& > div > article > h1 {
+						margin: 0;
+						font-size: clamp(1.9rem, 4vw, 2.5rem);
+						overflow-wrap: anywhere;
+					}
+
+					/* Prose holds to the measure, and code, tables, and callouts take the width. */
+					& > div > article > norn-rich-text > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6, norn-heading-anchor) {
+						max-inline-size: var(--norn-text-measure, 40em);
+					}
+				}
+
+				/* The space above the footer is the page's, not the footer's. */
+				norn-footer {
+					margin-block-start: var(--norn-space-xl, 4rem);
+
+					& [data-badges] {
+						display: flex;
+						flex-wrap: wrap;
+						gap: var(--norn-space-xs, 0.5rem);
+					}
+
+					& [data-badges] img {
+						display: block;
+						inline-size: auto;
+						block-size: 20px;
+					}
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<norn-skip-link></norn-skip-link>
+		<template webc:nokeep @html="nornHook('banner')"></template>
+		<norn-header>
+			<a webc:if="$data.norn.logo || $data.norn.name" slot="brand" rel="home" href="/">
+				<img webc:if="$data.norn.logo" :src="$data.norn.logo.src" :alt="$data.norn.logo.alt || $data.norn.name || ''" />
+				<span webc:else @text="$data.norn.name || ''"></span>
+			</a>
+			<a webc:for="link of $data.norn.nav" :href="link.href" :aria-current="link.href === $data.page.url ? 'page' : undefined"><norn-icon webc:if="link.icon" :@name="link.icon"></norn-icon><span webc:nokeep @text="link.title"></span></a>
+		</norn-header>
+		<main id="main" tabindex="-1"><template webc:if="nornCompiles($data, 'norn-base')" webc:nokeep @html="content"></template><template webc:else webc:nokeep @raw="content"></template><template webc:nokeep @html="nornHook('cta')"></template></main>
+		<norn-footer>
+			<div>
+				<p webc:if="$data.norn.footer.name || $data.norn.name"><strong @text="$data.norn.footer.name || $data.norn.name"></strong></p>
+				<p webc:if="$data.norn.footer.text || $data.norn.tagline" @text="$data.norn.footer.text || $data.norn.tagline"></p>
+				<p webc:if="$data.norn.footer.badges.length" data-badges>
+					<a webc:for="badge of $data.norn.footer.badges" :href="badge.href"><img :alt="badge.alt || ''" :src="badge.src" :width="badge.width || false" :height="badge.height || false" loading="lazy" /></a>
+				</p>
+				<p webc:if="$data.norn.footer.license">
+					<small
+						><span webc:nokeep @text="(nornComponentStrings?.('norn-base', 'license', $data.page) || 'Licensed under {license}').split('{license}')[0]"></span
+						><a :href="$data.norn.footer.license.url" @text="$data.norn.footer.license.name"></a
+						><span webc:nokeep @text="(nornComponentStrings?.('norn-base', 'license', $data.page) || 'Licensed under {license}').split('{license}').slice(1).join('')"></span
+					></small>
+				</p>
+			</div>
+			<nav webc:if="$data.norn.footer.groups.length" aria-labelledby="norn-base-footer">
+				<span id="norn-base-footer" hidden @text="nornComponentStrings?.('norn-base', 'footer', $data.page) || 'Footer'"></span>
+				<div webc:for="group of $data.norn.footer.groups">
+					<p><strong @text="group.heading"></strong></p>
+					<ul>
+						<li webc:for="link of group.links"><a :href="link.href" @text="link.title"></a></li>
+					</ul>
+				</div>
+			</nav>
+			<template webc:nokeep @html="nornHook('credit')"></template>
+			<p webc:if="$data.norn.footer.colophon" slot="colophon"><small @text="$data.norn.footer.colophon"></small></p>
+		</norn-footer>
+	</body>
+</html>

package/layouts/norn-docs-home.webc

@@ -0,0 +1,109 @@
+---
+layout: norn-base.webc
+nornCompiled: true
+---
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<norn-hero>
+	<h1 webc:if="$data.norn.name">
+		<span @text="$data.norn.name"></span>
+		<span webc:if="$data.norn.tagline" @text="$data.norn.tagline"></span>
+	</h1>
+	<p webc:if="$data.norn.lede || $data.norn.description" @text="$data.norn.lede || $data.norn.description"></p>
+	<nav webc:if="$data.norn.docs.length || $data.norn.repo" aria-labelledby="norn-docs-home-actions">
+		<span id="norn-docs-home-actions" hidden @text="nornComponentStrings?.('norn-docs-home', 'actions', $data.page) || 'Get started'"></span>
+		<ul role="list">
+			<li webc:if="$data.norn.docs.length"><norn-link-button :@href="$data.norn.docs[0].href"><span webc:nokeep @text="nornComponentStrings?.('norn-docs-home', 'docs', $data.page) || 'Read the docs'"></span></norn-link-button></li>
+			<li webc:if="$data.norn.repo"><norn-link-button :@href="$data.norn.repo" :@variant="$data.norn.docs.length ? 'secondary' : 'primary'"><span webc:nokeep @text="nornComponentStrings?.('norn-docs-home', 'repo', $data.page) || 'View on GitHub'"></span></norn-link-button></li>
+		</ul>
+	</nav>
+	<norn-code-block webc:if="$data.norn.install" id="install" @language="sh" :@code="$data.norn.install"></norn-code-block>
+</norn-hero>
+<section webc:if="$data.norn.docs.length" id="docs">
+	<h2 @text="nornComponentStrings?.('norn-docs-home', 'contents', $data.page) || 'Documentation'"></h2>
+	<dl data-norn-contents>
+		<div webc:for="page of $data.norn.docs">
+			<dt><a :href="page.href" @text="page.title"></a></dt>
+			<dd webc:if="page.description" @text="page.description"></dd>
+		</div>
+	</dl>
+</section>
+<section webc:if="String($data.content ?? '').trim()">
+	<norn-rich-text
+		><template webc:if="nornCompiles($data, 'norn-docs-home')" webc:nokeep @html="$data.content"></template
+		><template webc:else webc:nokeep @raw="$data.content"></template
+	></norn-rich-text>
+</section>
+<style>
+	@layer norn.layout {
+		/* Contents: a title and its description, in two columns when wide. Each row is one link, with no rules between them. */
+		[data-norn-contents] {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
+			gap: var(--norn-space-s, 0.75rem);
+			/* The rows are padded, so the text lines up with the heading above. */
+			margin: 0 calc(-1 * var(--norn-space-m, 1.25rem));
+
+			& > div {
+				--_state: 0%;
+				position: relative;
+				display: grid;
+				align-content: start;
+				gap: var(--norn-space-2xs, 0.25rem);
+				padding: var(--norn-space-s, 0.75rem) var(--norn-space-m, 1.25rem);
+				border-radius: var(--norn-ui-border-radius, 6px);
+				background-color: color-mix(in oklab, currentcolor var(--_state), transparent);
+
+				&:has(a:hover) {
+					--_state: var(--norn-ui-state-hover, 8%);
+				}
+
+				&:has(a:active) {
+					--_state: var(--norn-ui-state-press, 12%);
+				}
+
+				/* The ring goes around the row, not around the link text. */
+				&:has(a:focus-visible) {
+					outline: var(--norn-ui-focus-width, 2px) solid var(--norn-text-accent, light-dark(oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 82%, black) min(l, 0.5) c h), oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 55%, white) max(l, 0.72) c h)));
+					outline-offset: calc(-1 * var(--norn-ui-focus-offset, 2px));
+				}
+			}
+
+			& dt {
+				font-family: var(--norn-font-heading, var(--norn-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
+				font-size: var(--norn-font-size-m, 1rem);
+				font-weight: 700;
+			}
+
+			/* The link reaches over the whole row. */
+			& dt a {
+				text-decoration: none;
+
+				&::after {
+					content: "";
+					position: absolute;
+					inset: 0;
+				}
+
+				&:hover {
+					text-decoration: underline;
+				}
+
+				&:focus-visible {
+					outline: none;
+				}
+			}
+
+			& dd {
+				margin: 0;
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+			}
+		}
+	}
+</style>

package/layouts/norn-docs.webc

@@ -0,0 +1,77 @@
+---
+layout: norn-base.webc
+nornCompiled: true
+---
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<script webc:setup>
+/**
+ * The host the plain search form keeps results on: `search.site`, else the host of an absolute `url`, else none.
+ *
+ * @param {object} norn - The layout props, `$data.norn`
+ * @returns {string}
+ * @throws {Error} When `url` starts with a scheme but does not parse, naming the layout and the prop
+ */
+const searchSite = (norn) => {
+	if (norn.search && norn.search.site) return norn.search.site;
+	if (!/^https?:\/\//.test(typeof norn.url === "string" ? norn.url : "")) return "";
+	try {
+		return new URL(norn.url).host;
+	} catch (cause) {
+		throw new Error(`norn-docs: \`url\` "${norn.url}" is not a valid URL, so the search has no host to keep results on. Fix \`url\`, or set \`search.site\`.`, { cause });
+	}
+};
+</script>
+<norn-sidebar-layout>
+	<span slot="summary" @text="nornComponentStrings?.('norn-docs', 'nav', $data.page) || 'Documentation'"></span>
+	<norn-side-nav slot="nav" :@items="$data.norn.docs">
+		<span slot="label" @text="nornComponentStrings?.('norn-docs', 'nav', $data.page) || 'Documentation'"></span>
+		<norn-search
+			webc:if="$data.norn.search !== false"
+			slot="search"
+			:@bundle="($data.norn.search && $data.norn.search.bundle) || url('/pagefind/pagefind.js')"
+			:@site="searchSite($data.norn)"
+			><span slot="label" @text="nornComponentStrings?.('norn-docs', 'search', $data.page) || 'Search the docs'"></span
+		></norn-search>
+	</norn-side-nav>
+	<h1 @text="$data.norn.title || ''"></h1>
+	<template webc:nokeep webc:for="toc of [nornHeadings($data.content)]"><norn-toc webc:if="toc.length > 1" :@items="toc" @fold="narrow"></norn-toc></template>
+	<norn-rich-text @measure="none" data-pagefind-body
+		><template webc:if="nornCompiles($data, 'norn-docs')" webc:nokeep @html="$data.content"></template
+		><template webc:else webc:nokeep @raw="$data.content"></template
+	></norn-rich-text>
+	<template webc:nokeep webc:for="pair of [nornAdjacent($data.norn.docs, $data.page)]"
+		><norn-pager :@prev="$data.norn.prev !== undefined ? $data.norn.prev : pair.prev" :@next="$data.norn.next !== undefined ? $data.norn.next : pair.next"></norn-pager
+	></template>
+</norn-sidebar-layout>
+<style>
+	@layer norn.layout {
+		/* The contents sit beside the body once the page is 60rem wide. Narrower, they fold under their title, by norn-toc's fold prop. */
+		@container (width >= 60rem) {
+			/* The contents take a second, implicit column beside the body's one. */
+			norn-sidebar-layout > div > article:has(> norn-toc > nav) {
+				grid-auto-columns: 12rem;
+			}
+
+			norn-sidebar-layout > div > article > * {
+				grid-column: 1;
+			}
+
+			norn-sidebar-layout > div > article > norn-toc {
+				grid-column: 2;
+				grid-row: 1 / span 2;
+				position: sticky;
+				inset-block-start: var(--norn-space-m, 1.25rem);
+				align-self: start;
+				max-block-size: calc(100dvh - 2 * var(--norn-space-m, 1.25rem));
+				overflow-y: auto;
+			}
+		}
+	}
+</style>

package/layouts/norn-landing.webc

@@ -0,0 +1,73 @@
+---
+layout: norn-base.webc
+nornCompiled: true
+---
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<norn-hero>
+	<h1 webc:if="$data.norn.name">
+		<span @text="$data.norn.name"></span>
+		<span webc:if="$data.norn.tagline" @text="$data.norn.tagline"></span>
+	</h1>
+	<p webc:if="$data.norn.lede || $data.norn.description" @text="$data.norn.lede || $data.norn.description"></p>
+	<nav webc:if="$data.norn.install || $data.norn.repo" aria-labelledby="norn-landing-actions">
+		<span id="norn-landing-actions" hidden @text="nornComponentStrings?.('norn-landing', 'actions', $data.page) || 'Get started'"></span>
+		<ul role="list">
+			<li webc:if="$data.norn.install"><norn-link-button @href="#install"><span webc:nokeep @text="nornComponentStrings?.('norn-landing', 'start', $data.page) || 'Get started'"></span></norn-link-button></li>
+			<li webc:if="$data.norn.repo"><norn-link-button :@href="$data.norn.repo" :@variant="$data.norn.install ? 'secondary' : 'primary'"><span webc:nokeep @text="nornComponentStrings?.('norn-landing', 'repo', $data.page) || 'View on GitHub'"></span></norn-link-button></li>
+		</ul>
+	</nav>
+	<norn-fact-list @gap="l">
+		<li><norn-icon @name="check"></norn-icon><span webc:nokeep @text="nornComponentStrings?.('norn-landing', 'free', $data.page) || 'Free & open source'"></span></li>
+		<li webc:if="$data.norn.license"><norn-icon @name="check"></norn-icon><span @text="(nornComponentStrings?.('norn-landing', 'license', $data.page) || 'License: {license}').replace('{license}', $data.norn.license)"></span></li>
+		<li webc:if="$data.norn.node"><norn-icon @name="check"></norn-icon><span @text="(nornComponentStrings?.('norn-landing', 'node', $data.page) || 'Node {node}').replace('{node}', $data.norn.node)"></span></li>
+	</norn-fact-list>
+	<template webc:nokeep>
+		<norn-code-block webc:if="$data.norn.usage" id="usage" :@language="$data.norn.usage.language" :@code="$data.norn.usage.code" :@caption="$data.norn.usage.caption"></norn-code-block>
+		<norn-code-block webc:elseif="$data.norn.install" id="install" @language="sh" :@code="$data.norn.install"></norn-code-block>
+	</template>
+</norn-hero>
+<section webc:if="$data.norn.usage && $data.norn.install" id="install">
+	<h2 @text="nornComponentStrings?.('norn-landing', 'install', $data.page) || 'Install'"></h2>
+	<norn-code-block @language="sh" :@code="$data.norn.install"></norn-code-block>
+</section>
+<section webc:if="$data.norn.features.length" id="features">
+	<h2 @text="nornComponentStrings?.('norn-landing', 'features', $data.page) || 'Features'"></h2>
+	<norn-card-grid>
+		<li webc:for="feature of $data.norn.features">
+			<norn-card>
+				<h3>
+					<a webc:if="feature.href" :href="feature.href" @text="feature.title"></a>
+					<span webc:else @text="feature.title"></span>
+				</h3>
+				<p @text="feature.description"></p>
+			</norn-card>
+		</li>
+	</norn-card-grid>
+</section>
+<section webc:if="$data.norn.packages.length" id="packages">
+	<h2 @text="nornComponentStrings?.('norn-landing', 'packages', $data.page) || 'Packages'"></h2>
+	<norn-card-grid>
+		<li webc:for="pkg of $data.norn.packages">
+			<norn-card @title-face="mono">
+				<h3>
+					<a webc:if="pkg.href" :href="pkg.href" @text="pkg.title"></a>
+					<span webc:else @text="pkg.title"></span>
+				</h3>
+				<p @text="pkg.description"></p>
+			</norn-card>
+		</li>
+	</norn-card-grid>
+</section>
+<section webc:if="String($data.content ?? '').trim()">
+	<norn-rich-text
+		><template webc:if="nornCompiles($data, 'norn-landing')" webc:nokeep @html="$data.content"></template
+		><template webc:else webc:nokeep @raw="$data.content"></template
+	></norn-rich-text>
+</section>

package/layouts/norn-workspace.webc

@@ -0,0 +1,25 @@
+---
+layout: norn-base.webc
+nornCompiled: true
+---
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<norn-sidebar-layout>
+	<span slot="summary" @text="nornComponentStrings?.('norn-workspace', 'nav', $data.page) || 'Packages'"></span>
+	<norn-side-nav slot="nav" :@items="$data.norn.workspaces.map((workspace) => ({ href: workspace.href, title: workspace.title, icon: workspace.icon }))"
+		><span slot="label" @text="nornComponentStrings?.('norn-workspace', 'nav', $data.page) || 'Packages'"></span
+	></norn-side-nav>
+	<h1 @text="($data.norn.workspace && $data.norn.workspace.name) || $data.norn.title || ''"></h1>
+	<norn-rich-text @measure="none">
+		<p webc:if="$data.norn.workspace && $data.norn.workspace.description" @text="$data.norn.workspace.description"></p>
+		<template webc:nokeep @html="($data.norn.workspace && $data.norn.workspace.html) || ''"></template>
+		<template webc:if="nornCompiles($data, 'norn-workspace')" webc:nokeep @html="$data.content || ''"></template>
+		<template webc:else webc:nokeep @raw="$data.content || ''"></template>
+	</norn-rich-text>
+</norn-sidebar-layout>

package/layouts/norn-workspaces-home.webc

@@ -0,0 +1,44 @@
+---
+layout: norn-base.webc
+nornCompiled: true
+---
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<norn-hero>
+	<h1 webc:if="$data.norn.name">
+		<span @text="$data.norn.name"></span>
+		<span webc:if="$data.norn.tagline" @text="$data.norn.tagline"></span>
+	</h1>
+	<p webc:if="$data.norn.lede || $data.norn.description" @text="$data.norn.lede || $data.norn.description"></p>
+	<nav webc:if="$data.norn.workspaces.length || $data.norn.repo" aria-labelledby="norn-workspaces-home-actions">
+		<span id="norn-workspaces-home-actions" hidden @text="nornComponentStrings?.('norn-workspaces-home', 'actions', $data.page) || 'Get started'"></span>
+		<ul role="list">
+			<li webc:if="$data.norn.workspaces.length"><norn-link-button @href="#packages"><span webc:nokeep @text="nornComponentStrings?.('norn-workspaces-home', 'browse', $data.page) || 'Browse packages'"></span></norn-link-button></li>
+			<li webc:if="$data.norn.repo"><norn-link-button :@href="$data.norn.repo" :@variant="$data.norn.workspaces.length ? 'secondary' : 'primary'"><span webc:nokeep @text="nornComponentStrings?.('norn-workspaces-home', 'repo', $data.page) || 'View on GitHub'"></span></norn-link-button></li>
+		</ul>
+	</nav>
+	<norn-code-block webc:if="$data.norn.install" id="install" @language="sh" :@code="$data.norn.install"></norn-code-block>
+</norn-hero>
+<section webc:if="$data.norn.workspaces.length" id="packages">
+	<h2 @text="nornComponentStrings?.('norn-workspaces-home', 'packages', $data.page) || 'Packages'"></h2>
+	<norn-card-grid>
+		<li webc:for="workspace of $data.norn.workspaces">
+			<norn-card @title-face="mono">
+				<h3><a :href="workspace.href" @text="workspace.title"></a></h3>
+				<p webc:if="workspace.description" @text="workspace.description"></p>
+			</norn-card>
+		</li>
+	</norn-card-grid>
+</section>
+<section webc:if="String($data.content ?? '').trim()">
+	<norn-rich-text
+		><template webc:if="nornCompiles($data, 'norn-workspaces-home')" webc:nokeep @html="$data.content"></template
+		><template webc:else webc:nokeep @raw="$data.content"></template
+	></norn-rich-text>
+</section>