create-ginko 0.4.0 → 0.6.0

package/templates/portfolio/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "portfolio",
+  "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",
+      "projects",
+      "gallery",
+      "blog",
+      "people"
+    ]
+  }
+}

package/templates/portfolio/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/portfolio/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/portfolio/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/portfolio/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/portfolio/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/portfolio.json

@@ -0,0 +1,11 @@
+{
+  "locales": [
+    "en",
+    "de"
+  ],
+  "shift": {
+    "notices": [
+      "until"
+    ]
+  }
+}

package/templates/restaurant/.env.example

@@ -0,0 +1,8 @@
+# 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`).
+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/restaurant/.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/restaurant/DESIGN.md

@@ -0,0 +1,197 @@
+# Design system
+
+The rules behind this site's look. Read them before you change colours, type or components, so the site stays
+consistent and accessible (WCAG 2.2 AA, light and dark). The same system runs every Ginko template; only the accent
+and the fonts differ.
+
+## Principles
+
+- A quiet, neutral base; your content and photos carry the character. One accent colour.
+- Hierarchy from size and weight, not colour. One primary button per view. No gradients, glass, blur or decorative
+  shadows. Separate with a 1px border or a background, never both.
+- Phone first. Every page works at 320 px wide with no horizontal scroll; touch targets are at least 44 px.
+- Only tokens. Tailwind's default palette, type scale, radii and shadows are switched off, so `bg-red-500` or
+  `text-2xl` do nothing. A new value is a new token in the CSS and a row in this file, in the same change.
+
+## Where things live
+
+| What | File |
+|---|---|
+| Your accent and fonts | `app/assets/css/main.css` (`--brand`, `--brand-foreground`, `--font-body`, optional `--font-heading`); the light accent again as `seo.color` in `ginko.config.ts` (share cards) |
+| Neutral colours, type scale, spacing, radii, shadow, focus, motion | `app/assets/css/tokens.css` (shared by all templates; do not edit) |
+| Name, logo, navigation, footer links, profiles | `app/app.config.ts` |
+| Components | `app/components/ui/` (shadcn-vue), `app/components/site/`, `app/components/block/` |
+
+`tokens.css` and the components are copied from the Ginko repository (`templates/_features/`). You can change them in
+your own site; in the Ginko repository, change the source there instead.
+
+## Colours
+
+shadcn names, so shadcn-vue components work unchanged. Light / dark:
+
+| Token | Light | Dark | Use |
+|---|---|---|---|
+| `--background` | `#ffffff` | `#0b0b0c` | page |
+| `--foreground` | `#18181b` | `#f4f4f5` | text (17.7:1 / 17.0:1) |
+| `--muted` | `#f4f4f5` | `#18181b` | footer, notice bar, image placeholders |
+| `--muted-foreground` | `#52525b` | `#a1a1aa` | secondary text (7.7:1 / 7.9:1) |
+| `--accent` | `#f4f4f5` | `#27272a` | hover of quiet controls |
+| `--border` | `#e4e4e7` | `#27272a` | dividers, never text |
+| `--input` | `#8a8a93` | `#71717a` | borders of controls (3:1 non-text) |
+| `--primary` | `--brand` | `--brand` | primary button, links in text, focus ring |
+| `--primary-foreground` | `--brand-foreground` | `--brand-foreground` | text on the accent |
+| `--ring` | = `--primary` | = `--primary` | focus |
+| `--success` / `--warning` / `--destructive` | `#15803d` / `#a16207` / `#b42318` | `#4ade80` / `#facc15` / `#f87171` | status text, always with an icon or a word |
+| `--scrim` | zinc-950 at 60 % | black at 72 % | behind the nav sheet and dialogs; the lightbox is opaque dark `--background`, so no page text shows behind a photo |
+
+**Your accent.** `--brand` and `--brand-foreground` in `main.css`, once in `:root` (light) and once in `.dark`. The
+values and their contrast are written next to them. Rules: text on the accent ≥ 4.5:1; the accent on the background
+≥ 4.5:1 in both modes, because links in text use it; in dark mode use a light tint of the accent. Set the light value
+as `seo.color` in `ginko.config.ts` too: it fills the share cards. The accents of the Ginko templates:
+
+| Template | Light | Text on it | Dark | Text on it | Headings |
+|---|---|---|---|---|---|
+| starter | `#18181b` | `#ffffff` | `#f4f4f5` | `#18181b` | Inter |
+| blog | `#4f46e5` | `#ffffff` | `#a5b4fc` | `#1e1b4b` | Inter |
+| portfolio | `#1c1917` | `#ffffff` | `#f5f5f4` | `#1c1917` | Instrument Serif, `text-h3` 22–28 px |
+| company | `#0369a1` | `#ffffff` | `#7dd3fc` | `#082f49` | Inter |
+| saas | `#6d28d9` | `#ffffff` | `#c4b5fd` | `#2e1065` | Inter |
+| restaurant | `#c2410c` | `#ffffff` | `#fdba74` | `#431407` | Fraunces |
+| local-business | `#0f766e` | `#ffffff` | `#5eead4` | `#042f2e` | Inter |
+| nonprofit | `#15803d` | `#ffffff` | `#86efac` | `#052e16` | Inter |
+| events | `#be123c` | `#ffffff` | `#fda4af` | `#4c0519` | Inter |
+
+`.surface-primary` turns a band into the accent colour and swaps text, buttons and the focus ring, so everything in
+it keeps its contrast (used by `BlockCta`). A template may give the band its own colour with `--brand-surface` and
+`--brand-surface-foreground` in `main.css` (text on it ≥ 4.5:1). Use it in `.dark` when the dark accent is a light
+tint: a full-width band of it is the loudest surface on a near-black page. nonprofit: `#14532d` with `#f0fdf4`
+(8.7:1) in dark mode; buttons and links keep `#86efac`.
+
+Dark mode: `@nuxtjs/color-mode` puts `.dark` on `<html>` (first visit: the system setting); `dark:` utilities and
+`color-scheme` follow it. Printing always uses the light neutrals (paper is white). The navigation, notices, controls and closing band are left
+out (`print:hidden`); the footer prints only the name, address, email and phone, so any page prints as its content
+with whose it is.
+
+## Type
+
+Inter (variable, latin and latin-ext) through `@nuxt/fonts`, served from the site itself. A display face for headings
+is optional (`--font-heading`); a narrow one may set `--text-h3` larger in an `@theme` block of `main.css`, so titles
+still lead the body text (the portfolio). Right-to-left languages add their own face on `:lang(…)`.
+
+| Utility | Size | Line height |
+|---|---|---|
+| `text-h1` | `clamp(2.25rem, 1.5rem + 3.2vw, 4rem)` | 1.05, tracking −0.025em; one per page |
+| `text-h2` | `clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem)` | 1.1, tracking −0.02em; sentences such as the `BlockCta` title |
+| `text-h3` | `clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem)` | 1.3; section labels and `##` in Markdown |
+| `text-lead` | `clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem)` | 1.5 |
+| `text-body` | `1.0625rem` | 1.6 |
+| `text-small` | `0.9375rem` | 1.5 |
+| `text-xs` | `0.8125rem` | 1.4; the smallest size |
+
+Headings balance their lines and hyphenate (the page sets `lang`). Prices, times and dates use `tabular-nums`
+(`<time>` gets it by default). Text runs at most `max-w-prose` (43.5rem, about 65 characters of body text; in rem so the line width does not
+change when the web font replaces its fallback).
+
+## Space, size, radius, shadow
+
+| Token | Value | Use |
+|---|---|---|
+| `pt-section` (`--spacing-section`) | `clamp(3.5rem, 2.25rem + 5.5vw, 7rem)` | space above each section |
+| `px-gutter` (`--spacing-gutter`) | `clamp(1rem, 0.5rem + 2.4vw, 2rem)` | page edges (16 px on phones) |
+| `max-w-page` | `76rem` | page width |
+| `max-w-prose` | `43.5rem` | text width (about 65 characters) |
+| `rounded-md` (`--radius`) | `0.625rem` | buttons, controls |
+| `rounded-block` | `1rem` | images, cards, the CTA band |
+| `shadow-overlay` | one soft shadow | nav sheet, dialog, menus; nothing else |
+
+Tailwind's spacing steps (`p-4`, `gap-6`) stay available.
+
+## Focus and motion
+
+Every interactive element shows a 2px ring in `--ring`, 3px away (`:focus-visible` in `tokens.css`); components do
+not draw their own. Motion only for a change of state: 150 ms for colours, 200–300 ms for the sheet, accordion and
+dialog, `ease-out`. With `prefers-reduced-motion`, transitions and animations are switched off.
+
+## Components
+
+`app/components/ui/`: shadcn-vue components, copied with the shadcn-vue CLI and trimmed to these:
+
+| Component | Variants |
+|---|---|
+| `Button` | shadcn-vue's names: `default` (the main action), `outline`, `secondary`, `destructive`, `ghost`, `link`; sizes `default` (44 px), `sm` (36 px with a mouse, 44 px on touch), `lg` (48 px), `icon` (44 px), `icon-sm`, `icon-lg` |
+| `Sheet` | `side="start"` (default) or `end`: logical sides, so it opens from the right in right-to-left languages |
+| `Accordion` | as in shadcn-vue, on these tokens; only in templates with questions and answers (`BlockFaq`) |
+
+Nothing else until a feature needs it. To add one: `npx shadcn-vue@latest add <name>`, then:
+
+1. Change `import { cn } from 'cn'` to `import { cn } from '@/lib/utils'` and remove the `cn` package the CLI adds.
+2. Replace Tailwind default classes (`text-sm`, `shadow-lg`, `rounded-lg`, `bg-black/80`) with the tokens above. In
+   the browser they give no error, they just do nothing.
+3. Run `npm run lint` and `npm run typecheck`, and look at the component in light and dark. Lint fails on every class
+   the theme does not have (`eslint.tailwind.mjs`, which reads `main.css`). A class that is on purpose not Tailwind
+   (a hook for plain CSS) goes into the explicit list at the top of that file, with a comment saying why.
+
+Icons come from `@lucide/vue` (what the CLI installs; `lucide-vue-next` is deprecated).
+
+`cn` (`app/lib/utils.ts`) joins classes and resolves conflicts with tailwind-merge, as in shadcn: a
+`class="text-small"` on a component that sets `text-h3` wins. tailwind-merge is configured for the theme of
+tokens.css (`text-small`, `p-gutter`, `max-w-page`, `rounded-block`…); a new token in `@theme` gets its line there too.
+
+`app/components/site/`: `SiteHeader` (name or logo, up to 6 links, language switch, theme toggle; the links move into
+`SiteNavSheet` below `md`, or below `xl` when there are more than 4), `SiteFooter`, `SiteSkipLink`, `SiteLogo`,
+`SiteNavLink`, `SiteThemeToggle`, `SiteLanguageSwitch` (the same page in each language), `SiteNotice` (up to two
+notices above the header).
+
+`app/components/block/` and two more:
+
+| Component | Use |
+|---|---|
+| `BlockHero` | home only: the page's h1, a lead, one primary and one secondary action, an optional photo (16:9) |
+| `BlockPageHeader` | every other page: h1, lead, optional meta line |
+| `BlockSection` | a short label as heading (`text-h3`, the size of a Markdown `##`), optional lead, content; from `lg` heading 4 and content 8 of 12 columns, or full width |
+| `BlockCards` | 2–4 per row; the whole card is one link; photos 3:2 |
+| `BlockFeatures` | 2–6 items divided by lines, no cards |
+| `BlockCta` | a closing band on the accent; one per page, not on legal, contact or error pages |
+| `BlockEmpty` | an empty list: what to add, and where (`content/…`) |
+| `ProseBody` | a Markdown body (headings start at `##`); with `@lupinum/ginko-components` installed, its components too |
+| `InitialsAvatar` | a person without a photo: initials, never a stock face |
+
+## Page patterns
+
+- Home starts with `BlockHero`; other pages with `BlockPageHeader`.
+- Section titles are short labels without a full stop; hero and CTA titles are sentences.
+- Lists show the date or status a visitor needs, in tabular numbers.
+- Every image has a real width, height and alt text, and a fixed ratio per block, so nothing jumps while loading.
+- Right-to-left: only logical utilities (`ms-`, `pe-`, `start-`, `text-start`); arrows get `rtl:-scale-x-100`.
+
+## Patterns of the features
+
+In templates that have these features (`templates/_features/` in the Ginko repository):
+
+- **Open now** (`hours`): `HoursToday` says open or closed in words, the dot only repeats it. It stands above the h1 on
+  the home page, under the call and email buttons on a page for getting in touch, and at the top of the footer's
+  contact column on every page (`app/components/site/FooterStatus.vue`). Opening times never break inside a span:
+  a narrow screen breaks between "11:30–14:00 and" and "17:30–22:00".
+- **Where** (home): one quiet line under the hero's actions: a pin icon, the address, and an "Open in maps" link
+  (`text-small`, muted, the link at least 44 px tall). No embedded map.
+- **Getting in touch** (a reservations page): right under `BlockPageHeader`, one primary button (call) and one
+  secondary (email), `size="lg"`, full width below `sm`; the open-now line under them; text and the opening hours
+  below.
+- **A long list** (the menu): under the header, a row of links to its sections (`text-small`, accent, at least 44 px
+  tall), so a phone reaches the desserts in one tap; each section has an `id`.
+- **Reading** (`blog`): a post's date and reading time in one muted line under the lead, the authors with their
+  initials under it; tags as quiet bordered links (at least 44 px tall) after the text; the older and the newer post
+  as two bordered links side by side (stacked on phones). In a Markdown text, a photo's caption is an emphasised line
+  right under the image (`![Alt text](./photo.jpg)`, then `*The caption*` on the next line); long lines in code
+  blocks wrap.
+- **Photos on phones** (`gallery`): one column at full width, each photo 3:2; justified rows from `sm`.
+
+## Do and don't
+
+| Do | Don't |
+|---|---|
+| `text-muted-foreground` for secondary text | pick a grey by hand |
+| add a token to the CSS and this file | arbitrary values (`p-[13px]`, `bg-[#…]`) |
+| one primary button per view, one CTA band per page | the accent behind body text |
+| status with a word or an icon, plus colour | colour alone |
+| initials for people without a photo | stock faces for named people |

package/templates/restaurant/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/restaurant/MEDIA.md

@@ -0,0 +1,37 @@
+# Media
+
+Photos in this template, with their source and license. The code is MIT (see LICENSE); media keep their own license.
+All photos are under the [Unsplash License](https://unsplash.com/license): free to use, also commercially, no
+attribution required; they are credited here anyway. Re-encoded, metadata removed. No photo shows a named person
+(T14); people appear only as unnamed hands or guests out of focus.
+
+Replace them with photos of your own house before you go live: guests should recognise the place. Each photo is
+used at most twice, and each file is at most 180 kB: phones with a sharp screen load the original file, so its size
+counts for how fast the first screen shows.
+
+| File | Size | Used in | Photo | By | License |
+|---|---|---|---|---|---|
+| public/media/gaststube.jpg | 1600 × 900 (16:9) | home page hero (`content/home.md`) | https://unsplash.com/photos/brown-wooden-table-and-chairs-iFyLBKmCrmQ | brandsandpeople ([@brandsandpeople](https://unsplash.com/@brandsandpeople)) | Unsplash License |
+| public/media/gastraum.jpg | 1600 × 1200 (4:3) | gallery | https://unsplash.com/photos/bRihwX_BU1E | Caramel | Unsplash License |
+| public/media/schnitzel.jpg | 1600 × 1067 (3:2) | gallery, cooking class event | https://unsplash.com/photos/fried-food-on-white-ceramic-plate-MyfbM2QYF4o | Mark König ([@markkoenig](https://unsplash.com/@markkoenig)) | Unsplash License |
+| public/media/garten.jpg | 1280 × 960 (4:3) | About page, gallery | https://unsplash.com/photos/an-outdoor-dining-area-with-tables-and-chairs-9S_9IVeEzrU | datingscout ([@datingscout](https://unsplash.com/@datingscout)) | Unsplash License |
+| public/media/kueche.jpg | 1200 × 1600 (3:4) | gallery | https://unsplash.com/photos/0sYLBZjgTTw | Louis Hansel ([@louishansel](https://unsplash.com/@louishansel)) | Unsplash License |
+| public/media/strudel.jpg | 1600 × 1067 (3:2) | gallery | https://unsplash.com/photos/a-piece-of-pie-and-whipped-cream-on-a-plate-bDeZFhF7OTw | thenowtime ([@thenowtime](https://unsplash.com/@thenowtime)) | Unsplash License |
+| public/media/weinabend.jpg | 1600 × 1067 (3:2) | wine evening event, gallery | https://unsplash.com/photos/cFhC7WId5l8 | Dan Edwards | Unsplash License |
+
+The share cards are generated by the site (nuxt-og-image) from the page title and, where a page has one, its photo.
+
+## Photo slots
+
+Every place where the template shows a photo, with the ratio the page crops it to (`object-cover`, so nothing jumps
+while it loads). A slot without a photo shows a complete layout, not an empty frame.
+
+| Slot | File | Ratio on the page |
+|---|---|---|
+| Home hero | `content/home.md` → `image` | 16:9 |
+| A free page (About) | `content/pages/<n>.<name>.md` → `image` | 16:9 |
+| An event (card and page) | `content/events/<n>.<name>.md` → `image` | 3:2 card, 16:9 page |
+| Gallery (page; the first three on the home page) | `content/gallery.md` → `images` | each photo keeps its own ratio (justified rows) |
+
+Every photo needs alt text in each language: the main file has `src` and `alt`, a translation (`gallery.de.md`) only
+`alt`, in the same order.