create-ginko 0.4.0 → 0.5.0

package/templates/company/modules/feeds/routes.ts

@@ -0,0 +1,13 @@
+// Synced from templates/_features/site/modules/feeds/routes.ts by `pnpm templates sync`. Edit the source, not this copy.
+/**
+ * The feed addresses a static build must list: `<page>/rss.xml` in every language for each feed the template has. A
+ * feed is a file `server/middleware/<page key>-feed.ts` (the blog's `news-feed.ts`, the changelog's
+ * `changelog-feed.ts`) whose page key is in `pages` of ginko.config.ts; a feed without its page has no address.
+ */
+export function feedRoutes(middleware: readonly string[], pages: Record<string, Record<string, string>>): string[] {
+  return middleware.flatMap((file) => {
+    const key = /^(.+)-feed\.ts$/.exec(file)?.[1]
+    const paths = key && Object.hasOwn(pages, key) ? pages[key] : undefined
+    return paths ? Object.values(paths).map((path) => `${path.replace(/\/$/, '')}/rss.xml`) : []
+  })
+}

package/templates/company/modules/page-paths/index.ts

@@ -0,0 +1,26 @@
+// Synced from templates/_features/site/modules/page-paths/index.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { defineNuxtModule, tryImportModule } from 'nuxt/kit'
+import { pagePaths, toConfig, toNuxt, type Segments, type SiteConfig } from './paths.ts'
+
+// Gives each Vue page of app/pages/ its address per language (rules in ./paths.ts) as `definePageMeta({ i18n: { paths } })`
+// would, so the page files of the shared features stay the same in every template.
+export default defineNuxtModule({
+  meta: { name: 'page-paths' },
+  async setup(_options, nuxt) {
+    const site = (nuxt.options as { ginko?: SiteConfig }).ginko
+    if (!site?.locales.length) return
+    // The words of app/routes.ts (a template without `segments` has none).
+    const routes = await tryImportModule<{ segments?: Segments }>(`${nuxt.options.srcDir}/routes.ts`)
+    const segments = routes?.segments ?? {}
+
+    nuxt.hook('pages:extend', (pages) => {
+      for (const page of pages) {
+        if (page.meta?.i18n !== undefined) continue
+        const file = toConfig(page.path)
+        const paths = pagePaths(site, segments, file)
+        if (!paths || Object.values(paths).every((path) => path === file)) continue
+        page.meta = { ...page.meta, i18n: { paths: Object.fromEntries(Object.entries(paths).map(([locale, path]) => [locale, toNuxt(path)])) } }
+      }
+    })
+  },
+})

package/templates/company/modules/page-paths/paths.ts

@@ -0,0 +1,48 @@
+// Synced from templates/_features/site/modules/page-paths/paths.ts by `pnpm templates sync`. Edit the source, not this copy.
+// The address of each Vue page in every language, from ginko.config.ts, so a page and its links never disagree.
+// A page in app/pages/ answers at its file path in the main language (`news/index.vue` at /news) and with the language
+// prefix in the others (/de/news). When ginko.config.ts gives that page other words per language (`pages.news` is
+// `/de/aktuelles` in German, or the legal route `/de/rechtliches/[slug]`), the page answers there instead:
+//   1. a path of `pages` or of a brick `route` that is the file path in one of the languages: its paths in all of them;
+//   2. else a key of `pages` named like the file's first folder (`news/[slug].vue` and `pages.news`): that page's path
+//      per language, followed by the rest of the file path (`/de/aktuelles/[slug]`). A part of that rest that
+//      `segments` in app/routes.ts has a word for is translated too (`menu/print.vue`: `/de/speisekarte/drucken`),
+//      so a nested page can have its own word without a `pages` key (a key puts the page into the sitemap).
+// So a feature page keeps its file name in every template, and a template renames it in ginko.config.ts alone
+// (app/routes.ts). A page whose definePageMeta sets `i18n` keeps its own paths.
+// This file is the pure part (unit tested); index.ts is the Nuxt module.
+
+type PathMap = Record<string, string | undefined>
+/** `segments` of app/routes.ts: the word of a path part per language. */
+export type Segments = Record<string, Record<string, string | undefined> | undefined>
+export interface SiteConfig { locales: readonly string[], pages?: Record<string, PathMap>, bricks?: Record<string, { route?: PathMap }> }
+
+/** `/news/:slug()` (Nuxt) ↔ `/news/[slug]` (ginko.config.ts). */
+export const toConfig = (path: string) => path.replace(/:(\w+)\(\)/g, '[$1]')
+export const toNuxt = (path: string) => path.replace(/\[(\w+)\]/g, ':$1()')
+
+/**
+ * The path of a page file (`/menu/print`, `/news/[slug]`) per language without the language prefix, or undefined when
+ * ginko.config.ts and `segments` give it none (the page then answers at its file path).
+ */
+export function pagePaths(site: SiteConfig, segments: Segments, file: string): Record<string, string> | undefined {
+  const [main] = site.locales
+  /** A configured path without its language prefix: `/de/aktuelles` → `/aktuelles`. */
+  const bare = (locale: string, path: string) => {
+    if (locale === main) return path
+    if (path === `/${locale}`) return '/'
+    return path.startsWith(`/${locale}/`) ? path.slice(locale.length + 1) : path
+  }
+  const maps = [...Object.values(site.pages ?? {}), ...Object.values(site.bricks ?? {}).flatMap((brick) => (brick.route ? [brick.route] : []))]
+  const exact = maps.find((map) => site.locales.some((locale) => map[locale] !== undefined && bare(locale, map[locale]!) === file))
+  if (exact) return Object.fromEntries(site.locales.flatMap((locale) => (exact[locale] ? [[locale, bare(locale, exact[locale]!)]] : [])))
+  const [, key, ...rest] = file.split('/')
+  const page = key ? site.pages?.[key] : undefined
+  if (!page) return undefined
+  return Object.fromEntries(site.locales.flatMap((locale) => {
+    const base = page[locale] === undefined ? undefined : bare(locale, page[locale]!)
+    if (base === undefined) return []
+    const tail = rest.map((part) => `/${segments[part]?.[locale] ?? part}`).join('')
+    return [[locale, `${base === '/' ? '' : base}${tail}` || '/']]
+  }))
+}

package/templates/company/nuxt.config.ts

@@ -0,0 +1,29 @@
+import tailwindcss from '@tailwindcss/vite'
+import ginko from './ginko.config.ts'
+import { checkSiteUrl } from './site-url.ts'
+
+export default defineNuxtConfig({
+  compatibilityDate: '2026-10-01',
+  modules: [
+    '@lupinum/ginko/nuxt',
+    '@nuxt/eslint',
+    '@nuxt/fonts',
+    '@nuxtjs/color-mode',
+    'nuxt-og-image',
+    'shadcn-nuxt',
+  ],
+  ginko,
+  css: ['~/assets/css/main.css'],
+  // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
+  colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },
+  // Fonts are downloaded at build time and served from the site itself: no request to Google from the visitor.
+  // The family is chosen in main.css (`--font-body`).
+  fonts: {
+    defaults: { weights: ['400 700'], styles: ['normal'], subsets: ['latin', 'latin-ext'] },
+  },
+  shadcn: { prefix: '', componentDir: './app/components/ui' },
+  hooks: {
+    'build:before': () => checkSiteUrl(ginko.url),
+  },
+  vite: { plugins: [tailwindcss()] },
+})

package/templates/company/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "company",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "check": "ginko check",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "lint": "eslint .",
+    "typecheck": "nuxt typecheck",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@lucide/vue": "^1.57.0",
+    "@lupinum/ginko": "^0.5.0",
+    "@lupinum/ginko-content": "^0.5.0",
+    "@lupinum/ginko-i18n": "^0.5.0",
+    "@nuxt/fonts": "^1.0.1",
+    "@nuxtjs/color-mode": "^4.0.1",
+    "@takumi-rs/core": "^2.15.1",
+    "@vueuse/core": "^15.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "nuxt": "^4.6.1",
+    "nuxt-og-image": "^7.0.3",
+    "reka-ui": "^2.11.0",
+    "shadcn-nuxt": "^2.8.2",
+    "sharp": "^0.35.5",
+    "tailwind-merge": "^3.7.0",
+    "vue": "^3.5.43"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "^1.17.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^24.0.0",
+    "eslint": "^10.12.0",
+    "eslint-plugin-better-tailwindcss": "^4.9.1",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^6.0.3",
+    "vue-tsc": "^3.3.13"
+  },
+  "engines": {
+    "node": "^22.22.3 || ^24.15.0 || >=26"
+  },
+  "ginko": {
+    "sampleAnchor": "2026-10-15",
+    "features": [
+      "ui",
+      "site",
+      "pages",
+      "services",
+      "jobs",
+      "blog",
+      "people",
+      "downloads",
+      "events",
+      "logos-quotes"
+    ],
+    "scriptBudget": 155
+  }
+}

package/templates/company/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+# pnpm only: packages whose install scripts may run. pnpm 11 stops `pnpm install` on any other install script.
+# npm ignores this file.
+allowBuilds:
+  esbuild: true
+  # @nuxt/eslint's import resolver: its install script only checks for a prebuilt binary.
+  unrs-resolver: false

package/templates/company/public/logos/customer-four.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="247" height="40" viewBox="0 0 247 40" role="img" aria-label="Klärwerk Rodenau">
+  <circle cx="20" cy="20" r="15" fill="none" stroke="#71717a" stroke-width="4"/>
+  <circle cx="20" cy="20" r="6" fill="none" stroke="#71717a" stroke-width="3"/>
+  <path d="M20 5v30" stroke="#71717a" stroke-width="3"/>
+  <text x="46" y="27" fill="#71717a" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif" font-size="20" font-weight="600" font-style="italic" textLength="197" lengthAdjust="spacingAndGlyphs">Klärwerk Rodenau</text>
+</svg>

package/templates/company/public/logos/customer-one.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="271" height="40" viewBox="0 0 271 40" role="img" aria-label="Stadtwerke Eschenfeld">
+  <rect x="4" y="6" width="28" height="28" rx="6" fill="none" stroke="#71717a" stroke-width="4"/>
+  <path d="M12 26V16h12v10" fill="none" stroke="#71717a" stroke-width="3.5" stroke-linejoin="round"/>
+  <text x="44" y="27" fill="#71717a" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif" font-size="20" font-weight="700" textLength="223" lengthAdjust="spacingAndGlyphs">Stadtwerke Eschenfeld</text>
+</svg>

package/templates/company/public/logos/customer-three.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="275" height="40" viewBox="0 0 275 40" role="img" aria-label="Brauerei Hollenbach">
+  <circle cx="20" cy="20" r="15" fill="none" stroke="#71717a" stroke-width="3"/>
+  <path d="M13 13h14l-2 15H15Z" fill="#71717a"/>
+  <text x="46" y="26" fill="#71717a" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif" font-size="15" font-weight="700" letter-spacing="2.5" textLength="225" lengthAdjust="spacingAndGlyphs">BRAUEREI HOLLENBACH</text>
+</svg>

package/templates/company/public/logos/customer-two.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="270" height="40" viewBox="0 0 270 40" role="img" aria-label="Wasserverband Emsquell">
+  <path d="M18 4C12 14 6 20 6 26a12 12 0 0 0 24 0c0-6-6-12-12-22Z" fill="#71717a"/>
+  <text x="42" y="27" fill="#71717a" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif" font-size="20" font-weight="600" textLength="224" lengthAdjust="spacingAndGlyphs">Wasserverband Emsquell</text>
+</svg>

package/templates/company/server/middleware/news-feed.ts

@@ -0,0 +1,37 @@
+// Synced from templates/_features/blog/server/middleware/news-feed.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { rssXml } from '@lupinum/ginko/basics'
+import { defineEventHandler, getRequestURL, useRuntimeConfig } from 'nuxt/server'
+import site from '../../ginko.config'
+
+// The news feed of each language (RSS 2.0) at <news page>/rss.xml: /news/rss.xml, /de/aktuelles/rss.xml. Title,
+// summary, date and authors of the visible posts; the feed links to the page for the full text. Drafts are never in it.
+export default defineEventHandler(async (event) => {
+  const path = getRequestURL(event).pathname
+  if (!path.endsWith('/rss.xml')) return
+  const page = path.slice(0, -'/rss.xml'.length) || '/'
+  // Only the news page's address comes from ginko.config.ts; name, address and languages come from the runtime config,
+  // like the pages' canonical links, so the feed and the pages always name the same site address.
+  const ginko = useRuntimeConfig().public.ginko
+  const news: Partial<Record<string, string>> = site.pages.news
+  const locale = ginko.locales.find((code) => news[code] === page)
+  if (!locale) return
+  const [posts, people] = await Promise.all([getGinkoItems(event, 'posts', locale), getGinkoItems(event, 'people', locale)])
+  const names = new Map(people.map((person) => [person.id, String(person.data.name)]))
+  const origin = ginko.url.replace(/\/$/, '')
+  const { t, language } = getI18n({ context: { locale } }, 'blog')
+  event.res.headers.set('content-type', 'application/rss+xml; charset=utf-8')
+  return rssXml({
+    title: `${ginko.name}: ${t('title')}`,
+    link: `${origin}${page}`,
+    self: `${origin}${path}`,
+    description: t('lead'),
+    language,
+    items: posts.filter((post) => post.url).map((post) => ({
+      title: String(post.data.title),
+      link: `${origin}${post.url}`,
+      description: typeof post.data.description === 'string' ? post.data.description : undefined,
+      date: String(post.data.date),
+      authors: ((post.data.authors as string[] | undefined) ?? []).flatMap((id) => names.get(id) ?? []),
+    })),
+  })
+})

package/templates/company/server/plugins/font-preload.ts

@@ -0,0 +1,17 @@
+// Synced from templates/_features/site/server/plugins/font-preload.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { useServerHooks } from 'nuxt/server'
+
+// Preloads the basic Latin file of each web font (@nuxt/fonts writes its @font-face rules into the page's head), so
+// the browser fetches it with the page instead of after the stylesheet and the scripts. Text set in the fallback
+// re-wraps when the font arrives late, and a heading that gains a line pushes the page down (layout shift). @nuxt/fonts'
+// own `preload` option puts the file into the build manifest, but the server renders no link for it.
+const FACE = /@font-face\s*\{[^}]*\}/g
+const LATIN = /unicode-range:\s*U\+(?:\?\?|0-FF)(?=[,;}])/i
+const WOFF2 = /url\(\s*["']?([^"')]+\.woff2)["']?\s*\)/
+
+export default () => {
+  useServerHooks().hook('render:html', (html) => {
+    const urls = new Set((html.head.join('').match(FACE) ?? []).filter((face) => LATIN.test(face)).flatMap((face) => WOFF2.exec(face)?.[1] ?? []))
+    if (urls.size) html.head.unshift([...urls].map((url) => `<link rel="preload" as="font" type="font/woff2" href="${url}" crossorigin>`).join(''))
+  })
+}

package/templates/company/site-url.ts

@@ -0,0 +1,21 @@
+// Synced from templates/_features/site/site-url.ts by `pnpm templates sync`. Edit the source, not this copy.
+// The site's public address (TEMPLATES T12), read once by ginko.config.ts: NUXT_PUBLIC_SITE_URL, else the production
+// address Vercel sets (VERCEL_PROJECT_PRODUCTION_URL), else `fallback` from ginko.config.ts. Canonical links, the
+// sitemap and share cards start with it, so a Vercel deploy with the example address must not happen.
+
+/** The address to use, without a trailing slash. */
+export function siteUrl(fallback: string): string {
+  const env = process.env.NUXT_PUBLIC_SITE_URL || (process.env.VERCEL_PROJECT_PRODUCTION_URL ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` : '')
+  return (env || fallback).replace(/\/+$/, '')
+}
+
+/**
+ * Stops a Vercel build that would still use an example.com address and names the variable to set. Any other build
+ * (CI, a local build, another host) only prints a warning, so a fresh copy of the template builds as it is.
+ */
+export function checkSiteUrl(url: string): void {
+  if (!/^https?:\/\/([^/]+\.)?example\.com(\/|$)/.test(url)) return
+  const message = `The site address is still ${url}. Set NUXT_PUBLIC_SITE_URL to the address of the live site (for example https://www.my-site.com) in the build environment, or change \`url\` in ginko.config.ts.`
+  if (process.env.VERCEL) throw new Error(message)
+  console.warn(`Warning: ${message} Canonical links, the sitemap and share cards use this address.`)
+}

package/templates/company/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" }
+  ]
+}

package/templates/company.json

@@ -0,0 +1,18 @@
+{
+  "locales": [
+    "en",
+    "de"
+  ],
+  "shift": {
+    "notices": [
+      "until"
+    ],
+    "jobs": [
+      "validUntil"
+    ],
+    "events": [
+      "when",
+      "bookingUntil"
+    ]
+  }
+}

package/templates/docs/.env.example

@@ -0,0 +1,9 @@
+# Copy this file to .env for `nuxt dev` and `nuxt preview`, and set the same variables where the site runs.
+
+# Signs the URLs of the share cards (nuxt-og-image). Any 32 or more random characters (`openssl rand -hex 32`).
+# A static build (`npm run generate`) draws the cards at build time and needs none.
+NUXT_APP_SECRET=
+
+# The address of the live site, for canonical links, the sitemap and share cards. A build on Vercel stops
+# while it is still example.com; other builds print a warning. On Vercel, the production address is used when this is empty.
+NUXT_PUBLIC_SITE_URL=

package/templates/docs/.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+# Lint, type-check and build on every push and pull request.
+# To use pnpm instead of npm: commit a pnpm-lock.yaml, add `- run: corepack enable pnpm` before the install step,
+# and replace `npm install` with `pnpm install --frozen-lockfile` and `npm run` with `pnpm run`.
+name: ci
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6
+        with:
+          persist-credentials: false
+      - uses: actions/setup-node@249970729cb0ef3589644e2896645e5dc5ba9c38 # v6
+        with:
+          node-version: 24
+      - run: npm install
+      - run: npm run lint
+      - run: npm run typecheck
+      - run: npm run build

package/templates/docs/DESIGN.md

@@ -0,0 +1,77 @@
+# Design system
+
+The rules behind this docs site's look. Read them before you change colours, type or the layout, so the site stays
+consistent and accessible (WCAG 2.2 AA, light and dark). The look comes from the Nuxt layer `@lupinum/ginko-docs`:
+header, search, navigation, page, table of contents, start page, changelog and the Markdown components. This site only
+sets its colours and its content.
+
+## Principles
+
+- A quiet, neutral base; the text and the code carry the page. One accent colour.
+- Hierarchy from size and weight, not colour. One primary button per view (the first link of the start page).
+- Phone first. Every page works at 320 px wide with no horizontal scroll; long code scrolls inside its block.
+- Only tokens. Colours, radius and fonts are CSS variables with shadcn names; change a token, not a component.
+
+## Where things live
+
+| What | File |
+|---|---|
+| Your accent | `app/assets/css/main.css` (`--primary`, `--primary-foreground`, `--ring`, `--accent`, `--accent-foreground`); the light accent again as `seo.color` in `ginko.config.ts` (share cards) |
+| Name, logo, links in the footer, "Edit this page" | `app/app.config.ts` (`docs`), the name in `ginko.config.ts` |
+| Texts of your own links | `i18n/en.json`, `i18n/de.json` (`docs.footer.<id>`, `docs.nav.<id>`) |
+| Everything else (layout, neutral colours, type, components) | the layer `@lupinum/ginko-docs`; its README lists every token |
+
+## Colours
+
+Each token is `light-dark(light, dark)`. The header button switches between them and remembers the reader's choice;
+without one the site follows the system. The layer's defaults, emerald on zinc:
+
+| Token | Light | Dark | Use |
+|---|---|---|---|
+| `--background` | `#ffffff` | `#09090b` | page |
+| `--foreground` | `#27272a` | `#fafafa` | text (14.9:1 / 19.1:1) |
+| `--muted` | `#f4f4f5` | `#27272a` | inline code, buttons, the phone menu's chips |
+| `--muted-foreground` | `#6b6b74` | `#a1a1aa` | secondary text (5.3:1 / 7.8:1) |
+| `--border` | `#e4e4e7` | `#3f3f46` | dividers, never text |
+| `--primary` | `#047857` | `#34d399` | links in text, the main button, the active page (5.5:1 / 10.3:1) |
+| `--primary-foreground` | `#ffffff` | `#09090b` | text on the accent (5.5:1 / 10.3:1) |
+| `--ring` | `#047857` | `#34d399` | focus ring (2px, 2px away) |
+| `--accent` / `--accent-foreground` | `#ecfdf5` / `#065f46` | `#052e22` / `#6ee7b7` | the active page in the navigation (7.3:1 / 9.7:1) |
+
+**Your accent.** Change the five tokens in `main.css` together. Rules: the accent on the background ≥ 4.5:1 in both
+modes, because links use it; text on the accent ≥ 4.5:1; the ring ≥ 3:1. In dark mode use a light tint of the
+accent. Set the light value as `seo.color` in `ginko.config.ts` too. A second preset is built in:
+`docs: { theme: 'green' }` in `app.config.ts` (green on slate).
+
+Code blocks are a dark panel tinted with the accent in both modes (`--ginko-code-*` tokens of
+`@lupinum/ginko-components`).
+
+## Type
+
+Inter for text and JetBrains Mono for code, both served from the site itself (`/_docs/fonts/`); Inter is preloaded,
+so text does not re-wrap when it arrives. Running text is at most 38rem wide (`--docs-measure`). Change the faces with
+`--font-sans` and `--font-mono` in `main.css` (and load the font files yourself).
+
+## Layout
+
+| Token | Default | Use |
+|---|---|---|
+| `--docs-header` | `4rem` | header height |
+| `--docs-sidebar` | `17rem` | side navigation (from 64rem wide) |
+| `--docs-toc` | `13.5rem` | "On this page" (from 80rem wide) |
+| `--docs-max` | `90rem` | page width |
+| `--radius` | `0.75rem` | buttons, code, notes |
+
+Below 64rem the navigation, the site links, the languages and the Auto/Light/Dark switch move into the menu behind
+the menu button; search and the light/dark button stay in the header. "On this page" becomes a menu above the page.
+
+## Focus and motion
+
+Every link and button shows a 2px ring in `--ring` when reached with the keyboard. Motion only for a change of state
+(the menu fades in in 150 ms); with `prefers-reduced-motion` it does not move.
+
+## Components in the text
+
+The Markdown components (`::callout`, `::steps`, `::code-group`, `::tabs`, `::card` and more) come from
+`@lupinum/ginko-components`; Ginko checks every tag and prop when it builds. Use a callout for a warning the reader
+must not miss, not for decoration: at most one or two per page.

package/templates/docs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-2026 Lupinum OG
+
+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/templates/docs/MEDIA.md

@@ -0,0 +1,14 @@
+# Media
+
+Photos and other media in this template, with their source and license. The code is MIT (see LICENSE); media keep
+their own license.
+
+This template ships no photos: docs pages show an image only when you add one (`![Alt text](/file.png)` with the file
+in `public/`, or next to the page in `content/docs/`). When you add photos, list each here.
+
+| File | Source | License |
+|---|---|---|
+| `public/logo.svg`, `public/logo-dark.svg`, `public/favicon.svg` | the sample logo of "Orbit SDK", drawn for this template | MIT, like the code |
+| `.github/screenshots/home-light.png`, `page-dark.png` | screenshots of this template | MIT, like the code |
+
+The fonts Inter and JetBrains Mono come with `@lupinum/ginko-docs` (SIL Open Font License 1.1).

package/templates/docs/NOTES.md

@@ -0,0 +1,18 @@
+# Notes before release
+
+- Everything about Orbit is made up: the SDK, the package `@orbit-example/sdk`, the API at
+  `api.orbit.example.com`, the dashboard, the key prefixes, the status codes and limits, and the three releases in
+  `content/changelog/`. The Git host and the footer links point at `example.com` (`app/app.config.ts`), so "Edit this
+  page" and "Report an issue" lead nowhere until a user sets their repository; the README says so under "Before you
+  deploy".
+- `content/docs/7.upgrading-to-v2.md` has no German file on purpose. It shows how the layer handles a page without a
+  translation (left out of the German navigation and search; German links to it go to the English page; the language
+  menu says "Not translated: opens the start page"), and gate 3 (`_features/docs/e2e/docs.spec.ts`) tests that. The
+  German changelog entry for 2.0.0 links to it and says "(auf Englisch)".
+- German uses "du", as the layer's own German texts do ("Tippe, um Seiten und Abschnitte zu finden").
+- The changelog dates (6 October, 25 August, 16 June 2026) are history and never move; `sampleAnchor` is there for
+  create-ginko, but this template has no date that shifts.
+- Script weight (gate 6, gzip, 390 px): every docs page and the start page 149.8 kB, the changelog 147.2 kB. That is
+  too close to the default budget of 150 kB, so `ginko.scriptBudget` in `package.json` is 160. The layer loads the
+  Markdown components of `@lupinum/ginko-components` on every page; KaTeX, mermaid and the search engine load only when
+  a page needs them.