@linguanahq/cli 0.1.0

package/dist/templates/blog/tanstack-start/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/templates/blog/tanstack-start/tsconfig.json

@@ -0,0 +1,23 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"moduleResolution": "Bundler",
+		"strict": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"noEmit": true,
+		"types": ["vite/client", "node"],
+		"jsx": "react-jsx"
+	},
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		"src/**/*.vue",
+		"src/**/*.svelte",
+		"vite.config.ts"
+	]
+}

package/dist/templates/blog/tanstack-start/vite.config.ts

@@ -0,0 +1,50 @@
+import { fileURLToPath } from "node:url";
+import { linguana } from "@linguanahq/vite";
+import { react } from "@linguanahq/vite/react";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import native from "@vitejs/plugin-react";
+import { nitro } from "nitro/vite";
+import { defineConfig, loadEnv } from "vite";
+import config from "./linguana.json" with { type: "json" };
+export default defineConfig(({ mode }) => {
+	const env = { ...loadEnv(mode, process.cwd(), ""), ...process.env };
+	const connected = config.mode === "connected";
+	if (
+		connected &&
+		(!env.LINGUANA_PROJECT_ID ||
+			!env.VITE_LINGUANA_PUBLISHABLE_KEY ||
+			env.LINGUANA_PROJECT_ID !== env.VITE_LINGUANA_PROJECT_ID ||
+			env.LINGUANA_ENVIRONMENT !== env.VITE_LINGUANA_ENVIRONMENT ||
+			env.LINGUANA_API_URL !== env.VITE_LINGUANA_API_URL)
+	)
+		throw new Error(
+			"Linguana environment is incomplete or inconsistent. Run linguana env pull for this build mode.",
+		);
+	return {
+		resolve: {
+			alias: [
+				{
+					find: "tslib",
+					replacement: fileURLToPath(
+						import.meta.resolve("tslib/tslib.es6.mjs"),
+					),
+				},
+			],
+		},
+		plugins: [
+			linguana({
+				adapter: react(),
+				projectId: connected ? env.LINGUANA_PROJECT_ID! : "demo-blog",
+				environment: connected ? env.LINGUANA_ENVIRONMENT : "development",
+				sourceLocale: config.sourceLocale,
+				apiUrl: connected ? env.LINGUANA_API_URL : undefined,
+				token: connected ? env.LINGUANA_PROJECT_TOKEN : undefined,
+				upload: connected && env.LINGUANA_UPLOAD === "true",
+				translation: false,
+			}),
+			tanstackStart(),
+			nitro(),
+			native(),
+		],
+	};
+});

package/dist/templates/blog/tanstack-start/wrangler.jsonc

@@ -0,0 +1,12 @@
+{
+  "name": "linguana-demo-blog-tanstack-start",
+  "compatibility_date": "2026-10-01",
+  "main": ".output/server/index.mjs",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "assets": {
+    "directory": ".output/public",
+    "binding": "ASSETS"
+  }
+}

package/dist/templates/blog/vue/.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/vue/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/vue/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/vue/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/vue/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 vue 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.vue, literal messages in src/Copy.vue, 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/vue/_gitignore

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

package/dist/templates/blog/vue/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.ts"></script></body></html>

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

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

package/dist/templates/blog/vue/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "blog-vue",
+	"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": "vue-tsc --noEmit",
+		"deploy": "npm run build && wrangler deploy"
+	},
+	"dependencies": {
+		"@linguanahq/catalog": "0.1.1",
+		"@linguanahq/core": "0.1.1",
+		"@linguanahq/vue": "0.1.1",
+		"vue": "^3.5.24"
+	},
+	"devDependencies": {
+		"@linguanahq/vite": "0.1.1",
+		"typescript": "^6.0.0",
+		"vite": "^8.1.3",
+		"@types/node": "^24.0.0",
+		"wrangler": "^4.127.0",
+		"@vitejs/plugin-vue": "^6.0.2",
+		"@vue/compiler-dom": "^3.5.24",
+		"@vue/compiler-sfc": "^3.5.24",
+		"vue-tsc": "^3.1.0"
+	}
+}

package/dist/templates/blog/vue/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/vue/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/vue/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/vue/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/vue/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/vue/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/vue/src/App.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { useTranslation } from "@linguanahq/vue";
+import { onMounted, onUnmounted, reactive, watchEffect } from "vue";
+import Copy from "./Copy.vue";
+import { demoLocales } from "./i18n";
+import { messages } from "./messages";
+import {
+	initialState,
+	items,
+	quantity,
+	readCart,
+	type State,
+	saveCart,
+} from "./model";
+
+const runtime = useTranslation();
+const locale = () => runtime.locale.value;
+const translate = runtime.translate;
+const locales = () =>
+	runtime.availableLocales.value.length
+		? runtime.availableLocales.value
+		: demoLocales.filter((item) => item.code === "en");
+const changeLocale = (value: string) => void runtime.setLocale(value);
+const state = reactive(initialState());
+const set = <K extends keyof State>(key: K, value: State[K]) => {
+	state[key] = value;
+};
+const pop = () => set("path", window.location.pathname);
+onMounted(() => {
+	set("cart", readCart());
+	window.addEventListener("popstate", pop);
+});
+onUnmounted(() => window.removeEventListener("popstate", pop));
+watchEffect(() => {
+	document.documentElement.lang = locale();
+	document.documentElement.dir = locale().startsWith("ar") ? "rtl" : "ltr";
+});
+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);
+};
+</script>
+<template>
+<div class="site blog"><a href="#main" class="skip-link"><Copy name="skip"></Copy></a>
+<header class="site-header"><a href="/" class="brand" @click="navigate($event)" :aria-label="'Elsewhere — ' + msg('home')"><span class="brand-mark" aria-hidden="true">✳</span>
+Elsewhere</a>
+<nav :aria-label="msg('home')"><a href="/" @click="navigate($event)"><Copy name="latest"></Copy></a>
+<label class="locale-picker"><span class="sr-only"><Copy name="language"></Copy></span>
+<select :value="locale()" :aria-label="msg('language')" @change="changeLocale(value($event))"><template v-for="language in locales()" :key="language.code"><option :value="language.code">{{ language.nativeName }}</option></template></select></label></nav></header>
+<main id="main"><template v-if="state.path === '/'"><section class="hero blog-hero"><div class="hero-copy"><p class="eyebrow"><Copy name="eyebrow"></Copy></p>
+<h1 ><Copy name="headline"></Copy></h1>
+<p class="intro"><Copy name="intro"></Copy></p>
+<a href="#journal" class="text-link"><Copy name="latest"></Copy>
+ ↘</a></div>
+<a href="/articles/lisbon" @click="navigate($event)"><img src="/assets/scene-1.svg" :alt="msg('p1Title')" class="hero-image" width="800" height="600" loading="lazy" />
+<div class="image-caption"><span >01 / LISBOA</span>
+<Copy name="read"></Copy></div></a></section>
+<section id="journal" class="section"><div class="section-heading"><h2 ><Copy name="latest"></Copy></h2>
+<span class="muted"><Copy name="notes"></Copy></span></div>
+<div class="filters"><fieldset class="filter-buttons" :aria-label="msg('collection' in messages ? 'collection' : 'latest')"><button type="button" :class="state.category === 'all' ? 'chip active' : 'chip'" :aria-pressed="state.category === 'all'" @click="set('category', 'all')"><Copy name="all"></Copy></button>
+<button type="button" :class="state.category === 'cities' ? 'chip active' : 'chip'" :aria-pressed="state.category === 'cities'" @click="set('category', 'cities')"><Copy name="cities"></Copy></button>
+<button type="button" :class="state.category === 'nature' ? 'chip active' : 'chip'" :aria-pressed="state.category === 'nature'" @click="set('category', 'nature')"><Copy name="nature"></Copy></button>
+<button type="button" :class="state.category === 'coast' ? 'chip active' : 'chip'" :aria-pressed="state.category === 'coast'" @click="set('category', 'coast')"><Copy name="coast"></Copy></button></fieldset>
+<label class="search"><span class="sr-only"><Copy name="search"></Copy></span>
+<input type="search" :placeholder="msg('search')" :value="state.query" @input="set('query', value($event))" /></label></div>
+<div class="article-grid"><template v-for="item in visible()" :key="item.id"><article class="article-card"><a :href="detailHref(item.id)" @click="navigate($event)"><img :src="item.image" :alt="msg(item.id + 'Title')" class="" width="800" height="600" loading="lazy" /></a>
+<div class="meta"><Copy :name="item.category"></Copy>
+<span >{{ date(item.date) }}</span></div>
+<h3 ><a :href="detailHref(item.id)" @click="navigate($event)"><Copy :name="item.id + 'Title'"></Copy></a></h3>
+<p ><Copy :name="item.id + 'Summary'"></Copy></p>
+<a :href="detailHref(item.id)" @click="navigate($event)"><Copy name="read"></Copy>
+ ↗</a></article></template></div>
+<template v-if="visible().length === 0"><div class="empty" role="status"><h3 ><Copy name="empty"></Copy></h3>
+<p ><Copy name="emptyHint"></Copy></p>
+<button type="button" class="button" @click="clearFilters()"><Copy name="clear"></Copy></button></div></template></section></template>
+<template v-if="detail() !== undefined"><article class="article-detail section"><a href="/" @click="navigate($event)"><Copy name="back"></Copy></a>
+<p class="eyebrow"><Copy :name="detail()!.category"></Copy></p>
+<h1 ><Copy :name="detail()!.id + 'Title'"></Copy></h1>
+<div class="meta">{{ date(detail()!.date) }}
+<Copy name="minutes" :values="{ count: detail()!.minutes }"></Copy></div>
+<img :src="detail()!.image" :alt="msg(detail()!.id + 'Title')" class="detail-image" width="800" height="600" loading="lazy" />
+<div class="prose"><p class="lead"><Copy :name="detail()!.id + 'Summary'"></Copy></p>
+<p ><Copy :name="detail()!.id + 'Body'"></Copy></p>
+<p ><Copy :name="detail()!.id + 'End'"></Copy></p></div></article></template>
+<template v-if="notFound()"><section class="section empty"><p class="eyebrow">404</p>
+<h1 ><Copy name="missing"></Copy></h1>
+<p ><Copy name="missingHint"></Copy></p>
+<a href="/" @click="navigate($event)"><Copy name="back"></Copy></a></section></template></main>
+<footer class="site-footer"><div ><a href="/" class="brand" @click="navigate($event)">Elsewhere</a>
+<p ><Copy name="about"></Copy></p></div>
+<p class="fine"><Copy name="demo"></Copy>
+<a href="https://linguana.mohammedibrahim.dev" rel="noreferrer">Linguana ↗</a></p></footer></div>
+</template>

package/dist/templates/blog/vue/src/Copy.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { T } from "@linguanahq/vue";
+
+defineProps<{ name: string; values?: Record<string, string | number> }>();
+</script>
+<template>
+<T v-if="name === 'language'" id="language" defaultMessage="Language" :values="values" />
+<T v-else-if="name === 'skip'" id="skip" defaultMessage="Skip to content" :values="values" />
+<T v-else-if="name === 'home'" id="home" defaultMessage="Home" :values="values" />
+<T v-else-if="name === 'search'" id="search" defaultMessage="Search" :values="values" />
+<T v-else-if="name === 'all'" id="all" defaultMessage="All" :values="values" />
+<T v-else-if="name === 'empty'" id="empty" defaultMessage="Nothing here yet." :values="values" />
+<T v-else-if="name === 'emptyHint'" id="emptyHint" defaultMessage="Try another search or clear your filters." :values="values" />
+<T v-else-if="name === 'clear'" id="clear" defaultMessage="Clear filters" :values="values" />
+<T v-else-if="name === 'missing'" id="missing" defaultMessage="This page took a different path." :values="values" />
+<T v-else-if="name === 'missingHint'" id="missingHint" defaultMessage="We could not find that page. There is plenty to discover back home." :values="values" />
+<T v-else-if="name === 'back'" id="back" defaultMessage="Back to home" :values="values" />
+<T v-else-if="name === 'demo'" id="demo" defaultMessage="A multilingual demo, made with Linguana." :values="values" />
+<T v-else-if="name === 'email'" id="email" defaultMessage="Email address" :values="values" />
+<T v-else-if="name === 'name'" id="name" defaultMessage="Your name" :values="values" />
+<T v-else-if="name === 'simulated'" id="simulated" defaultMessage="Demo only. Your information stays in this browser." :values="values" />
+<T v-else-if="name === 'sent'" id="sent" defaultMessage="Thank you, {name}! This was a demo; nothing was sent." :values="values" />
+<T v-else-if="name === 'formError'" id="formError" defaultMessage="Please enter your name and a valid email address." :values="values" />
+<T v-else-if="name === 'eyebrow'" id="eyebrow" defaultMessage="A journal of slower journeys" :values="values" />
+<T v-else-if="name === 'headline'" id="headline" defaultMessage="Somewhere new. A little more you." :values="values" />
+<T v-else-if="name === 'intro'" id="intro" defaultMessage="Stories from the long way round. Good coffee, unfamiliar streets, and the people who make a place." :values="values" />
+<T v-else-if="name === 'latest'" id="latest" defaultMessage="The latest field notes" :values="values" />
+<T v-else-if="name === 'read'" id="read" defaultMessage="Read the story" :values="values" />
+<T v-else-if="name === 'cities'" id="cities" defaultMessage="City walks" :values="values" />
+<T v-else-if="name === 'nature'" id="nature" defaultMessage="In the wild" :values="values" />
+<T v-else-if="name === 'coast'" id="coast" defaultMessage="By the water" :values="values" />
+<T v-else-if="name === 'minutes'" id="minutes" defaultMessage="{count, plural, one {# minute read} other {# minutes read}}" :values="values" />
+<T v-else-if="name === 'notes'" id="notes" defaultMessage="Small observations. Lasting memories." :values="values" />
+<T v-else-if="name === 'about'" id="about" defaultMessage="Elsewhere is an independent journal about travelling with curiosity and leaving room for the unexpected." :values="values" />
+<T v-else-if="name === 'p1Title'" id="p1Title" defaultMessage="Lisbon, before the city wakes" :values="values" />
+<T v-else-if="name === 'p1Summary'" id="p1Summary" defaultMessage="A morning of tiled doorways, warm pastries, and no particular destination." :values="values" />
+<T v-else-if="name === 'p1Body'" id="p1Body" defaultMessage="At seven, the tram tracks are still quiet. We follow them uphill, past a florist arranging buckets on the pavement. A baker opens his window and the smell of cinnamon settles over the street. We order two coffees and a pastry, then another pastry. There is no reason to hurry." :values="values" />
+<T v-else-if="name === 'p1End'" id="p1End" defaultMessage="By the river the light turns silver. An older couple share a newspaper on a bench, folding it between stories. We take the long route home through streets we cannot name. The best thing we found today was an hour with no plans. Come early, wear comfortable shoes, and let the hills choose your route." :values="values" />
+<T v-else-if="name === 'p2Title'" id="p2Title" defaultMessage="A quieter side of Kyoto" :values="values" />
+<T v-else-if="name === 'p2Summary'" id="p2Summary" defaultMessage="Beyond the busy gates, a walking route lined with small gardens." :values="values" />
+<T v-else-if="name === 'p2Body'" id="p2Body" defaultMessage="Rain softens the sound of our footsteps along the canal. We pass a gardener sweeping leaves into a careful pile. She points us towards a small tea room with room for four people. Inside, a kettle sings and the windows fog at the edges. We warm our hands around the cups and watch the garden change colour." :values="values" />
+<T v-else-if="name === 'p2End'" id="p2End" defaultMessage="We leave with a hand-drawn map and a recommendation to return in autumn. The canal is easy to follow, so put your phone away for a while. Keep your voice low near the houses and give the narrow paths to the people who live here. A good journey also makes room for someone else’s ordinary day." :values="values" />
+<T v-else-if="name === 'p3Title'" id="p3Title" defaultMessage="The coastal road to nowhere" :values="values" />
+<T v-else-if="name === 'p3Summary'" id="p3Summary" defaultMessage="Salt air and a picnic on the Atlantic edge of Portugal." :values="values" />
+<T v-else-if="name === 'p3Body'" id="p3Body" defaultMessage="We stop the car whenever the sea disappears, just to find it again. A narrow track leads through rosemary to a beach without a sign. The sand is cool beneath our feet. Lunch is bread, tomatoes, and cheese from the last village, eaten from the paper they came wrapped in." :values="values" />
+<T v-else-if="name === 'p3End'" id="p3End" defaultMessage="The tide comes in slowly. We pack every scrap of paper and follow our own footprints back. Check the tide before you explore, keep clear of the cliff edges, and bring more water than you think you need. The road will still be there when you are ready to leave." :values="values" />
+<T v-else-if="name === 'p4Title'" id="p4Title" defaultMessage="Walking into the Dolomites" :values="values" />
+<T v-else-if="name === 'p4Summary'" id="p4Summary" defaultMessage="A simple mountain hut, a shared table, and an early start." :values="values" />
+<T v-else-if="name === 'p4Body'" id="p4Body" defaultMessage="The path begins behind a wooden barn and climbs steadily through the trees. We walk in the cool morning, stopping to hear the cowbells below. Above the tree line the mountains seem impossibly close. At the hut, soup arrives in deep bowls and strangers slide along the bench to make room." :values="values" />
+<T v-else-if="name === 'p4End'" id="p4End" defaultMessage="Clouds gather after lunch, so we take the shorter path down. Knowing when to turn around is part of being outdoors. Ask the hut keeper about the weather, carry a proper map, and choose a trail that matches your experience. We reach the village tired, happy, and already talking about next time." :values="values" />
+<T v-else-if="name === 'p5Title'" id="p5Title" defaultMessage="Copenhagen by bicycle" :values="values" />
+<T v-else-if="name === 'p5Summary'" id="p5Summary" defaultMessage="Harbour dips, generous bakeries, and the city at cycling speed." :values="values" />
+<T v-else-if="name === 'p5Body'" id="p5Body" defaultMessage="Our rented bicycles have baskets large enough for a day’s supplies. We follow the harbour, keeping to the right and letting commuters pass. The city feels different at this pace: close enough to notice a painted doorway, quick enough to follow a sudden idea across a bridge." :values="values" />
+<T v-else-if="name === 'p5End'" id="p5End" defaultMessage="At a waterside bakery we share a cinnamon bun and mark our favourite places on a paper map. Signal before turning, lock your bicycle even for a quick stop, and leave the cycle lane clear when you pause. The best souvenir is a route you could happily ride again." :values="values" />
+<T v-else-if="name === 'p6Title'" id="p6Title" defaultMessage="A cabin beside the lake" :values="values" />
+<T v-else-if="name === 'p6Summary'" id="p6Summary" defaultMessage="Three days in Finland with very little on the itinerary." :values="values" />
+<T v-else-if="name === 'p6Body'" id="p6Body" defaultMessage="The cabin key waits beneath a flowerpot. Inside there is a stove, a small shelf of books, and a window facing the lake. We fill the kettle and unpack slowly. The first afternoon passes without an event worth recording, which turns out to be exactly what we needed." :values="values" />
+<T v-else-if="name === 'p6End'" id="p6End" defaultMessage="On the last morning we sweep the floor and leave dry wood beside the stove. There are no recommendations to collect here, just a little space to think. Bring groceries before you arrive, respect the quiet, and leave the cabin ready for the next visitor. Some places ask for less, not more." :values="values" />
+</template>