@linguanahq/cli 0.1.0

package/dist/templates/blog/react/.env.example

@@ -0,0 +1,15 @@
+# Demo mode works without credentials. Connect with npx @linguanahq/cli link.
+# Copying this file alone does not enable connected mode; use linguana.json.
+# Build/server only. NEVER prefix the project token with VITE_.
+LINGUANA_PROJECT_ID=
+LINGUANA_ENVIRONMENT=development
+LINGUANA_API_URL=https://linguana-api.mohammedibrahim.dev
+LINGUANA_PROJECT_TOKEN=
+LINGUANA_UPLOAD=false
+# Paid translation is disabled; this template does not enable it automatically.
+LINGUANA_TRANSLATE=false
+# Browser-safe values. A publishable key reads published catalogs only.
+VITE_LINGUANA_PROJECT_ID=
+VITE_LINGUANA_ENVIRONMENT=development
+VITE_LINGUANA_API_URL=https://linguana-api.mohammedibrahim.dev
+VITE_LINGUANA_PUBLISHABLE_KEY=

package/dist/templates/blog/react/ASSETS.md

@@ -0,0 +1 @@
+All illustrations in public/assets were drawn for these templates and are covered by LICENSE (MIT). Sample writing and translations are also MIT. No remote images, tracking pixels, or font services are used. Product images and prices describe fictional demonstration goods.

package/dist/templates/blog/react/DEPLOY.md

@@ -0,0 +1,23 @@
+# Deploy Elsewhere
+
+Demo mode needs no Linguana account. Hosting authentication is separate from the Linguana CLI.
+
+## Cloudflare Workers
+
+Install dependencies, choose a unique Worker name in wrangler.jsonc, then:
+
+```sh
+npx wrangler login
+npm run build
+npx wrangler deploy
+```
+
+Wrangler serves dist as static assets with single-page navigation fallback. Deep article/product links continue to work.
+
+## Any static host
+
+Run `npm run build` and publish dist/. Configure unknown paths to serve /index.html with status 200 (SPA fallback). A static preview can be started with `npm run preview`. Do not publish the project root.
+
+## Connected deployments
+
+Pull the intended environment with `linguana env pull --environment production`. Configure the variables from .env.example in the build host, including the matching public project/environment values. Build tokens are secrets used by the compiler only. Never upload .env files or the CLI account session. LINGUANA_TRANSLATE remains false. Catalog publication is an explicit dashboard action.

package/dist/templates/blog/react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Linguana contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/templates/blog/react/README.md

@@ -0,0 +1,36 @@
+# Elsewhere
+
+A journal for the places worth taking your time in. Articles, search, and thoughtful reading layouts.
+
+A standalone react app, generated from Linguana templates v0.1.0. Requires Node 22.12+ (or Bun).
+
+## Run
+
+```sh
+npm install
+npm run dev
+```
+
+You can also use pnpm, Yarn, or Bun. English, French, Spanish, and Arabic catalogs are bundled in demo mode. No Linguana API requests are made. The language cookie persists between visits. Arabic switches the document to RTL.
+
+## Connect your own project
+
+```sh
+npx @linguanahq/cli login
+npx @linguanahq/cli link
+npx @linguanahq/cli doctor
+```
+
+Linking writes nonsecret `linguana.json` and ignored `.env.local`. The account session stays outside this project. Only the public project ID, environment, API URL, and publishable key reach the browser. Build tokens never belong in `VITE_*` variables.
+
+Connected mode uses your published project catalogs and English source fallback. It does not load demo translations. Builds can upload the source manifest but do not start paid translations or publish catalogs. Review and publish translations in your dashboard. Existing project languages remain unchanged unless you pass `--locales`.
+
+To target another environment, use `linguana env pull --environment staging`, then `npm run build -- --mode staging`. Production uses `.env.production.local` and Vite's default production build mode. Configure matching private and public values on your build host; see .env.example.
+
+## Customize
+
+Edit native components in src/App.tsx, literal messages in src/Copy.tsx, source fallbacks in src/messages.ts, and bundled demo catalogs in src/demo-messages.ts. Keep explicit message IDs stable. Each Copy branch is an extractable literal message; structured items in src/model.ts hold identifiers, prices, dates, and media only. Build output includes .linguana/manifest.json for review.
+
+Six articles include detail routes, category and search filters, localized dates, and a not-found view.
+
+Run `npm run check-types` and `npm run build` before deploying. Deployment instructions are in DEPLOY.md. Source and illustrations are MIT; see LICENSE and ASSETS.md.

package/dist/templates/blog/react/_gitignore

@@ -0,0 +1,11 @@
+node_modules/
+dist/
+.output/
+.nitro/
+.tanstack/
+.wrangler/
+.env
+.env.local
+.env.*.local
+.linguana/
+*.log

package/dist/templates/blog/react/index.html

@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="A journal for the places worth taking your time in. Articles, search, and thoughtful reading layouts."><meta name="theme-color" content="#244d64"><title>Elsewhere</title></head><body><div id="app"></div><script type="module" src="/src/main.tsx"></script></body></html>

package/dist/templates/blog/react/linguana.json

@@ -0,0 +1,10 @@
+{
+	"schemaVersion": 1,
+	"framework": "react",
+	"template": "blog",
+	"templateVersion": "0.1.0",
+	"mode": "demo",
+	"apiUrl": "https://linguana-api.mohammedibrahim.dev",
+	"sourceLocale": "en",
+	"defaultEnvironment": "development"
+}

package/dist/templates/blog/react/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "blog-react",
+	"version": "0.1.0",
+	"private": true,
+	"type": "module",
+	"license": "MIT",
+	"engines": {
+		"node": ">=22.12.0"
+	},
+	"scripts": {
+		"dev": "vite --host 127.0.0.1",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check-types": "tsc --noEmit",
+		"deploy": "npm run build && wrangler deploy"
+	},
+	"dependencies": {
+		"@linguanahq/catalog": "0.1.1",
+		"@linguanahq/core": "0.1.1",
+		"@linguanahq/react": "0.1.1",
+		"react": "^19.2.7",
+		"react-dom": "^19.2.7"
+	},
+	"devDependencies": {
+		"@linguanahq/vite": "0.1.1",
+		"typescript": "^6.0.0",
+		"vite": "^8.1.3",
+		"@types/node": "^24.0.0",
+		"wrangler": "^4.127.0",
+		"@types/react": "^19.2.17",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^6.0.3"
+	}
+}

package/dist/templates/blog/react/public/assets/scene-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#dbe6e9"/><circle cx="640" cy="115" r="53" fill="#f3e6c9"/><path d="M0 330L170 160 310 290 500 210 800 350V600H0Z" fill="#748e9a"/><g stroke="#f4ead8" stroke-width="5"><path d="M55 260H255V540H55Z" fill="#d18d73"/><path d="M300 190H500V540H300Z" fill="#e9d3ad"/><path d="M545 290H765V540H545Z" fill="#92a4a1"/></g><g fill="#456071"><path d="M80 250L155 205 255 250ZM285 183L397 135 515 183ZM531 283L657 239 779 283Z"/><path d="M91 296h36v58H91zm85 0h36v58h-36zm-85 100h36v58H91zm85 0h36v58h-36zm165-170h38v63h-38zm85 0h38v63h-38zm-85 100h38v63h-38zm85 0h38v63h-38zm162 0h38v64h-38zm92 0h38v64h-38z"/></g><path d="M356 540V448q42-50 84 0v92M118 540v-53q40-50 80 0v53M610 540v-75h70v75" fill="#bc705d"/><path d="M0 545h800v55H0Z" fill="#cecbbb"/><path d="M0 580h800" stroke="#adb9b7" stroke-width="3"/></svg>

package/dist/templates/blog/react/public/assets/scene-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#dce5db"/><circle cx="640" cy="115" r="53" fill="#f3e6c9"/><path d="M0 300q130-80 300 0t500-10v150H0Z" fill="#9aac9f"/><path d="M0 370 Q200 330 400 380 T800 360V600H0Z" fill="#738d7a"/><path d="M60 430h160m80 35h220m40-40h170M30 530h240m200 15h180" stroke="#dbe7e4" stroke-width="3" opacity=".7"/><g fill="#3f685e"><path d="M75 50l60 280H15ZM195 5l80 340H115ZM700 30l75 330H625ZM770 70l60 300H710Z"/></g><path d="M265 340h270v170H265Z" fill="#b99b7e"/><path d="M240 342l160-125 160 125Z" fill="#526c68"/><path d="M308 380h65v70h-65Zm120 0h65v70h-65Z" fill="#e9d3a2"/><path d="M390 430h30v80h-30Z" fill="#4e6866"/><path d="M0 510q240-80 400 20t400-10v80H0Z" fill="#899e80"/></svg>

package/dist/templates/blog/react/public/assets/scene-3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#d4e5e7"/><circle cx="640" cy="115" r="53" fill="#f3e6c9"/><path d="M0 370 Q200 330 400 380 T800 360V600H0Z" fill="#628697"/><path d="M60 430h160m80 35h220m40-40h170M30 530h240m200 15h180" stroke="#dbe7e4" stroke-width="3" opacity=".7"/><path d="M0 160q130 120 300 155l170 190-280-35L0 600Z" fill="#d9c39e"/><path d="M0 300l275 43 120 72-285 19L0 530" fill="#dec6a0"/><path d="M630 310q120-60 170-55v90Z" fill="#8da39a"/><path d="M30 510q180-80 330-56" fill="none" stroke="#efe0bf" stroke-width="14"/></svg>

package/dist/templates/blog/react/public/assets/scene-4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#dfe6ed"/><circle cx="640" cy="115" r="53" fill="#f3e6c9"/><path d="M0 460L195 110 350 300 470 100 800 470V600H0Z" fill="#7b8fa1"/><path d="M195 110l-45 85 42-20 28 22 13-25zM470 100l-58 110 57-20 20 32 28-40z" fill="#f4f4ec"/><path d="M0 480q160-120 370 10t430-20v130H0Z" fill="#a8b39a"/><path d="M350 600q130-100 65-160" fill="none" stroke="#d9ceb6" stroke-width="18"/><path d="M70 450v80h110v-80Z" fill="#977666"/><path d="M50 450l76-50 78 50Z" fill="#405f65"/></svg>

package/dist/templates/blog/react/public/assets/scene-5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#e0e9e6"/><circle cx="640" cy="115" r="53" fill="#f3e6c9"/><path d="M0 330L170 160 310 290 500 210 800 350V600H0Z" fill="#769496"/><path d="M0 370 Q200 330 400 380 T800 360V600H0Z" fill="#769496"/><path d="M60 430h160m80 35h220m40-40h170M30 530h240m200 15h180" stroke="#dbe7e4" stroke-width="3" opacity=".7"/><g stroke="#f4ead8" stroke-width="5"><path d="M55 260H255V540H55Z" fill="#bc8871"/><path d="M300 190H500V540H300Z" fill="#e9d3ad"/><path d="M545 290H765V540H545Z" fill="#92a4a1"/></g><g fill="#456071"><path d="M80 250L155 205 255 250ZM285 183L397 135 515 183ZM531 283L657 239 779 283Z"/><path d="M91 296h36v58H91zm85 0h36v58h-36zm-85 100h36v58H91zm85 0h36v58h-36zm165-170h38v63h-38zm85 0h38v63h-38zm-85 100h38v63h-38zm85 0h38v63h-38zm162 0h38v64h-38zm92 0h38v64h-38z"/></g><path d="M356 540V448q42-50 84 0v92M118 540v-53q40-50 80 0v53M610 540v-75h70v75" fill="#bc705d"/><path d="M0 545h800v55H0Z" fill="#cecbbb"/><path d="M0 580h800" stroke="#adb9b7" stroke-width="3"/></svg>

package/dist/templates/blog/react/public/assets/scene-6.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#e0e7e6"/><circle cx="640" cy="115" r="53" fill="#f3e6c9"/><path d="M0 300q130-80 300 0t500-10v150H0Z" fill="#9aac9f"/><path d="M0 370 Q200 330 400 380 T800 360V600H0Z" fill="#76948a"/><path d="M60 430h160m80 35h220m40-40h170M30 530h240m200 15h180" stroke="#dbe7e4" stroke-width="3" opacity=".7"/><g fill="#3f685e"><path d="M75 50l60 280H15ZM195 5l80 340H115ZM700 30l75 330H625ZM770 70l60 300H710Z"/></g><path d="M265 340h270v170H265Z" fill="#a78f77"/><path d="M240 342l160-125 160 125Z" fill="#526c68"/><path d="M308 380h65v70h-65Zm120 0h65v70h-65Z" fill="#e9d3a2"/><path d="M390 430h30v80h-30Z" fill="#4e6866"/><path d="M0 510q240-80 400 20t400-10v80H0Z" fill="#899e80"/></svg>

package/dist/templates/blog/react/src/App.tsx

@@ -0,0 +1,465 @@
+import { useTranslation } from "@linguanahq/react";
+import { Fragment, useCallback, useEffect, useState } from "react";
+import Copy from "./Copy.tsx";
+import { demoLocales } from "./i18n";
+import { messages } from "./messages";
+import {
+	initialState,
+	items,
+	quantity,
+	readCart,
+	type State,
+	saveCart,
+} from "./model";
+
+export default function App({ path }: { path?: string }) {
+	const runtime = useTranslation();
+	const locale = () => runtime.locale;
+	const locales = () =>
+		runtime.availableLocales.length
+			? runtime.availableLocales
+			: demoLocales.filter((item) => item.code === runtime.sourceLocale);
+	const translate = runtime.translate;
+	const changeLocale = (value: string) => void runtime.setLocale(value);
+	const [state, setState] = useState(() => initialState(path));
+	const set = useCallback(
+		<K extends keyof State>(key: K, value: State[K]) =>
+			setState((previous) => ({ ...previous, [key]: value })),
+		[],
+	);
+	useEffect(() => {
+		set("cart", readCart());
+		const pop = () => set("path", window.location.pathname);
+		window.addEventListener("popstate", pop);
+		return () => window.removeEventListener("popstate", pop);
+	}, [set]);
+	useEffect(() => {
+		document.documentElement.lang = runtime.locale;
+		document.documentElement.dir = runtime.locale.startsWith("ar")
+			? "rtl"
+			: "ltr";
+	}, [runtime.locale]);
+	const msg = (id: string, values?: Record<string, string | number>) =>
+		String(translate(id, messages[id] ?? id, values));
+	const value = (event: Event | { currentTarget: EventTarget | null }) =>
+		(event.currentTarget as HTMLInputElement).value;
+	const _money = (amount: number) =>
+		new Intl.NumberFormat(locale(), {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 2,
+		}).format(amount);
+	const date = (input: string) =>
+		new Intl.DateTimeFormat(locale(), {
+			dateStyle: "medium",
+			timeZone: "UTC",
+		}).format(new Date(input));
+	const visible = () =>
+		items
+			.filter(
+				(item) =>
+					(state.category === "all" || item.category === state.category) &&
+					`${msg(`${item.id}Title`)} ${msg(`${item.id}Summary`)}`
+						.toLocaleLowerCase(locale())
+						.includes(state.query.toLocaleLowerCase(locale()).trim()),
+			)
+			.sort((a, b) =>
+				state.sort === "low"
+					? a.price - b.price
+					: state.sort === "high"
+						? b.price - a.price
+						: 0,
+			);
+	const detailHref = (id: string) =>
+		`/articles/${items.find((item) => item.id === id)!.slug}`;
+	const detail = () => items.find((item) => detailHref(item.id) === state.path);
+	const notFound = () => state.path !== "/" && detail() === undefined;
+	const clearFilters = () => {
+		set("query", "");
+		set("category", "all");
+	};
+	const _count = () =>
+		Object.values(state.cart).reduce((total, count) => total + count, 0);
+	const cartItems = () =>
+		items.filter((item) => (state.cart[item.id] ?? 0) > 0);
+	const _total = () =>
+		cartItems().reduce(
+			(total, item) => total + item.price * state.cart[item.id]!,
+			0,
+		);
+	const updateCart = (id: string, count: number) => {
+		const cart = { ...state.cart };
+		if (count <= 0) delete cart[id];
+		else cart[id] = quantity(count);
+		set("cart", cart);
+		saveCart(cart);
+	};
+	const _add = (id: string, count: number) => {
+		updateCart(id, (state.cart[id] ?? 0) + count);
+		set("added", true);
+		set("checkout", false);
+	};
+	const _checkout = () => {
+		set("cart", {});
+		saveCart({});
+		set("checkout", true);
+		set("added", false);
+	};
+	const _submit = (event: { preventDefault(): void }) => {
+		event.preventDefault();
+		const valid = Boolean(
+			state.name.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email),
+		);
+		set("error", !valid);
+		set("sent", valid);
+	};
+	const navigate = (event: {
+		currentTarget: EventTarget | null;
+		preventDefault(): void;
+		metaKey: boolean;
+		ctrlKey: boolean;
+		shiftKey: boolean;
+		altKey: boolean;
+		button: number;
+	}) => {
+		if (
+			event.metaKey ||
+			event.ctrlKey ||
+			event.shiftKey ||
+			event.altKey ||
+			event.button !== 0
+		)
+			return;
+		const target = new URL((event.currentTarget as HTMLAnchorElement).href);
+		if (target.origin !== window.location.origin) return;
+		event.preventDefault();
+		window.history.pushState({}, "", target.pathname);
+		set("path", target.pathname);
+		set("quantity", 1);
+		set("added", false);
+		window.scrollTo(0, 0);
+	};
+
+	return (
+		<div className="site blog">
+			<a href="#main" className="skip-link">
+				<Copy name="skip" />
+			</a>
+			<header className="site-header">
+				<a
+					href="/"
+					className="brand"
+					onClick={(event) => {
+						navigate(event);
+					}}
+					aria-label={`Elsewhere — ${msg("home")}`}
+				>
+					<span className="brand-mark" aria-hidden="true">
+						{"✳"}
+					</span>
+					{"Elsewhere"}
+				</a>
+				<nav aria-label={msg("home")}>
+					<a
+						href="/"
+						onClick={(event) => {
+							navigate(event);
+						}}
+					>
+						<Copy name="latest" />
+					</a>
+					<label className="locale-picker">
+						<span className="sr-only">
+							<Copy name="language" />
+						</span>
+						<select
+							value={locale()}
+							aria-label={msg("language")}
+							onChange={(event) => {
+								changeLocale(value(event));
+							}}
+						>
+							{locales().map((language) => (
+								<Fragment key={language.code}>
+									<option value={language.code}>{language.nativeName}</option>
+								</Fragment>
+							))}
+						</select>
+					</label>
+				</nav>
+			</header>
+			<main id="main">
+				{state.path === "/" && (
+					<>
+						<section className="hero blog-hero">
+							<div className="hero-copy">
+								<p className="eyebrow">
+									<Copy name="eyebrow" />
+								</p>
+								<h1>
+									<Copy name="headline" />
+								</h1>
+								<p className="intro">
+									<Copy name="intro" />
+								</p>
+								<a href="#journal" className="text-link">
+									<Copy name="latest" />
+									{" ↘"}
+								</a>
+							</div>
+							<a
+								href="/articles/lisbon"
+								onClick={(event) => {
+									navigate(event);
+								}}
+							>
+								<img
+									src="/assets/scene-1.svg"
+									alt={msg("p1Title")}
+									className="hero-image"
+									width={800}
+									height={600}
+									loading="lazy"
+								/>
+								<div className="image-caption">
+									<span>{"01 / LISBOA"}</span>
+									<Copy name="read" />
+								</div>
+							</a>
+						</section>
+						<section id="journal" className="section">
+							<div className="section-heading">
+								<h2>
+									<Copy name="latest" />
+								</h2>
+								<span className="muted">
+									<Copy name="notes" />
+								</span>
+							</div>
+							<div className="filters">
+								<fieldset
+									className="filter-buttons"
+									aria-label={msg(
+										"collection" in messages ? "collection" : "latest",
+									)}
+								>
+									<button
+										type="button"
+										className={
+											state.category === "all" ? "chip active" : "chip"
+										}
+										aria-pressed={state.category === "all"}
+										onClick={(_event) => {
+											set("category", "all");
+										}}
+									>
+										<Copy name="all" />
+									</button>
+									<button
+										type="button"
+										className={
+											state.category === "cities" ? "chip active" : "chip"
+										}
+										aria-pressed={state.category === "cities"}
+										onClick={(_event) => {
+											set("category", "cities");
+										}}
+									>
+										<Copy name="cities" />
+									</button>
+									<button
+										type="button"
+										className={
+											state.category === "nature" ? "chip active" : "chip"
+										}
+										aria-pressed={state.category === "nature"}
+										onClick={(_event) => {
+											set("category", "nature");
+										}}
+									>
+										<Copy name="nature" />
+									</button>
+									<button
+										type="button"
+										className={
+											state.category === "coast" ? "chip active" : "chip"
+										}
+										aria-pressed={state.category === "coast"}
+										onClick={(_event) => {
+											set("category", "coast");
+										}}
+									>
+										<Copy name="coast" />
+									</button>
+								</fieldset>
+								<label className="search">
+									<span className="sr-only">
+										<Copy name="search" />
+									</span>
+									<input
+										type="search"
+										placeholder={msg("search")}
+										value={state.query}
+										onInput={(event) => {
+											set("query", value(event));
+										}}
+									/>
+								</label>
+							</div>
+							<div className="article-grid">
+								{visible().map((item) => (
+									<Fragment key={item.id}>
+										<article className="article-card">
+											<a
+												href={detailHref(item.id)}
+												onClick={(event) => {
+													navigate(event);
+												}}
+											>
+												<img
+													src={item.image}
+													alt={msg(`${item.id}Title`)}
+													className=""
+													width={800}
+													height={600}
+													loading="lazy"
+												/>
+											</a>
+											<div className="meta">
+												<Copy name={item.category} />
+												<span>{date(item.date)}</span>
+											</div>
+											<h3>
+												<a
+													href={detailHref(item.id)}
+													onClick={(event) => {
+														navigate(event);
+													}}
+												>
+													<Copy name={`${item.id}Title`} />
+												</a>
+											</h3>
+											<p>
+												<Copy name={`${item.id}Summary`} />
+											</p>
+											<a
+												href={detailHref(item.id)}
+												onClick={(event) => {
+													navigate(event);
+												}}
+											>
+												<Copy name="read" />
+												{" ↗"}
+											</a>
+										</article>
+									</Fragment>
+								))}
+							</div>
+							{visible().length === 0 && (
+								<div className="empty" role="status">
+									<h3>
+										<Copy name="empty" />
+									</h3>
+									<p>
+										<Copy name="emptyHint" />
+									</p>
+									<button
+										type="button"
+										className="button"
+										onClick={(_event) => {
+											clearFilters();
+										}}
+									>
+										<Copy name="clear" />
+									</button>
+								</div>
+							)}
+						</section>
+					</>
+				)}
+				{detail() !== undefined && (
+					<article className="article-detail section">
+						<a
+							href="/"
+							onClick={(event) => {
+								navigate(event);
+							}}
+						>
+							<Copy name="back" />
+						</a>
+						<p className="eyebrow">
+							<Copy name={detail()!.category} />
+						</p>
+						<h1>
+							<Copy name={`${detail()!.id}Title`} />
+						</h1>
+						<div className="meta">
+							{date(detail()!.date)}
+							<Copy name="minutes" values={{ count: detail()!.minutes }} />
+						</div>
+						<img
+							src={detail()!.image}
+							alt={msg(`${detail()!.id}Title`)}
+							className="detail-image"
+							width={800}
+							height={600}
+							loading="lazy"
+						/>
+						<div className="prose">
+							<p className="lead">
+								<Copy name={`${detail()!.id}Summary`} />
+							</p>
+							<p>
+								<Copy name={`${detail()!.id}Body`} />
+							</p>
+							<p>
+								<Copy name={`${detail()!.id}End`} />
+							</p>
+						</div>
+					</article>
+				)}
+				{notFound() && (
+					<section className="section empty">
+						<p className="eyebrow">{"404"}</p>
+						<h1>
+							<Copy name="missing" />
+						</h1>
+						<p>
+							<Copy name="missingHint" />
+						</p>
+						<a
+							href="/"
+							onClick={(event) => {
+								navigate(event);
+							}}
+						>
+							<Copy name="back" />
+						</a>
+					</section>
+				)}
+			</main>
+			<footer className="site-footer">
+				<div>
+					<a
+						href="/"
+						className="brand"
+						onClick={(event) => {
+							navigate(event);
+						}}
+					>
+						{"Elsewhere"}
+					</a>
+					<p>
+						<Copy name="about" />
+					</p>
+				</div>
+				<p className="fine">
+					<Copy name="demo" />
+					<a href="https://linguana.mohammedibrahim.dev" rel="noreferrer">
+						{"Linguana ↗"}
+					</a>
+				</p>
+			</footer>
+		</div>
+	);
+}