create-ginko 0.4.0 → 0.6.0

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

@@ -0,0 +1,32 @@
+# Media
+
+Photos and other media in this template, with their source and license. The code is MIT (see LICENSE); media keep
+their own license. People are shown with their initials, never with stock photos of faces.
+
+## Photos
+
+The [Unsplash License](https://unsplash.com/license) allows free use, also commercial, without asking; it does not
+allow selling the photos as they are or building a similar photo service.
+
+| File | Used in | What | Source | License |
+|---|---|---|---|---|
+| `public/media/works-hall.jpg` | page "About us", service "Repair and overhaul" | a long factory hall with a steel roof frame and skylights | [fonsheijnsbroek_amsterdam_photos on Unsplash](https://unsplash.com/photos/green-and-brown-industrial-machine-LyGporh-V5E) | Unsplash License |
+| `public/media/process-pumps.jpg` | product "HK centrifugal pumps" and its sheet | stainless steel pumps with blue motors along a process line | [spacexuan on Unsplash](https://unsplash.com/photos/grey-industrial-equipment-mhUsz2ezlXQ) | Unsplash License |
+| `public/media/pipework.jpg` | product "Pumping stations" and its sheet | grey pipes with flanges and bends along a wall | [samthewam24 on Unsplash](https://unsplash.com/photos/grayscale-photography-of-metal-pipes-scUBcasSvbE) | Unsplash License |
+| `public/media/pump-check.jpg` | service "Pump check on site" | two hands set a measuring gauge on a metal part | [shaikhulud on Unsplash](https://unsplash.com/photos/hands-manipulate-a-metal-device-on-a-table-GU4xHrV0P_o) | Unsplash License |
+| `public/media/treatment-works.jpg` | post "Six new pumps for the Rodenau treatment works", product "TS submersible pumps" and its sheet | aerial view of a treatment works with round clarifier tanks | [federi on Unsplash](https://unsplash.com/photos/aerial-view-of-green-and-brown-basketball-court-_mZrKqrZaTc) | Unsplash License |
+
+## Made for this template
+
+| File | What | License |
+|---|---|---|
+| `public/logos/customer-one.svg`, `customer-two.svg`, `customer-three.svg`, `customer-four.svg` | wordmarks of fictional customers in fictional towns (Eschenfeld, Emsquell, Hollenbach, Rodenau), no real organisations | MIT, like the code |
+| `public/sheets/hk-centrifugal-pumps.pdf`, `ts-submersible-pumps.pdf`, `pumping-stations.pdf` | one-page sample product sheets (A4) with the product name, a sample photo from above, key facts, the sample address | MIT, like the code |
+| `.github/screenshots/home-light.png`, `home-dark.png` | screenshots of this template | MIT, like the code |
+
+The share cards (1200 × 630) are generated by the site (nuxt-og-image). Inter is under the
+[SIL Open Font License](https://openfontlicense.org).
+
+When you add a photo, put it in `public/media/`, give it alt text in every language file that shows it, and add a
+row here. The sample photos show other places and machines. Replace them with photos of your own works, products and
+team (with their permission): buyers trust a maker they can see.

package/templates/company/NOTES.md

@@ -0,0 +1,19 @@
+# Notes before release
+
+- Sample data that must change before going live: `content/site.md` (address in "Bielefeld", VAT and the
+  phone numbers, which start their local part with 0 so nobody can be reached), the email addresses (`.example`), the people in `content/people/`, the quotes (invented people), the customer logos (fictional organisations), the product sheet PDFs (sample address), the
+  trade fairs (fictional fairs in fictional towns), the prices (`€390` for the pump check) and the legal texts
+  (marked placeholders).
+- `content/jobs/summer-internship-assembly.md` is an ad whose last day has passed. It is never shown; it proves that
+  an expired job leaves the list, its page, the sitemap and the JSON-LD (gate 3, `_features/jobs/e2e/jobs.spec.ts`).
+  The README tells owners to delete it.
+- JobPosting `datePosted` is the day the job's file last changed (`updatedAt`, in the site's time zone), else today:
+  basics `jobs()` has no posting date, so fixing a typo moves it. If Ginko adds one, use it in `useJobJsonLd`
+  (`_features/jobs`).
+- Script weight (gate 6, gzip): home 147.7 kB, contact 147.3, product list and pages 152.1, jobs and trade fairs
+  150.3, news 151.2. `scriptBudget` is 155 kB (the cap for feature templates is 170); the product pages are the
+  heaviest because they load the services and downloads code on top of the shared shell.
+- German says "Sie" on every page. Job titles carry "(m/f/d)" / "(m/w/d)", as German job ads do.
+- The trade fair pages reuse the events feature; this template renames "Events" to "Trade fairs", its address
+  (`/trade-fairs`, `/de/messen` in `app/routes.ts`) and its texts (stand meeting instead of booking a place) in
+  `i18n/en.json` and `i18n/de.json`.

package/templates/company/README.md

@@ -0,0 +1,254 @@
+# Company
+
+A complete website for a manufacturer or a technical business: what you make in one sentence on the home page,
+products and services with key facts, a price or "on request" and a product sheet, open jobs that leave the site after
+their last day, news with an RSS feed, sales and service contacts, customer logos and a quote, the trade fairs where
+you show, documents to download, and legal texts. In English and German, with light and dark mode. Built with
+[Nuxt](https://nuxt.com) and [Ginko](https://github.com/lupinum-dev/ginko). All content is Markdown in `content/`; the
+site needs no account and no database. The sample is "Halden Pumps", a fictional German maker of industrial pumps and
+pumping stations.
+
+| Light | Dark |
+|---|---|
+| ![The company template's home page in light mode](.github/screenshots/home-light.png) | ![The company template's home page in dark mode](.github/screenshots/home-dark.png) |
+
+## Quick start
+
+```bash
+npm create ginko@latest my-site -- --template company
+```
+
+This copies the template into `my-site`, keeps the languages you choose (`--locales en` for English only,
+`--locales de,en` for German first), moves the sample dates (jobs, trade fairs, notices) to this week, sets the site
+id and writes a `.env` with a new `NUXT_APP_SECRET`. Then:
+
+```bash
+cd my-site
+npm install
+npm run dev
+```
+
+Or copy the folder as it is, with both languages, through Nuxt's own command:
+
+```bash
+npm create nuxt@latest my-site -- -t github:lupinum-dev/ginko/templates/company#release
+```
+
+Copy `.env.example` to `.env` and fill in `NUXT_APP_SECRET` (see below). The `#release` branch follows the latest
+Ginko release, so both commands give you the same files. With this route the sample dates stay as they are: a sample
+job or trade fair whose day has passed is simply not shown.
+
+## Deploy
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flupinum-dev%2Fginko%2Ftree%2Frelease%2Ftemplates%2Fcompany&env=NUXT_APP_SECRET&envDescription=Signs%20the%20share%20card%20URLs.%20Any%2032%20or%20more%20random%20characters.)
+
+Any host that runs Node works: `npm run build` writes a server to `.output/`, started with
+`node .output/server/index.mjs`. Set these variables where the site runs:
+
+| Variable | What |
+|---|---|
+| `NUXT_APP_SECRET` | Signs the URLs of the share cards. 32 or more random characters (`openssl rand -hex 32`). |
+| `NUXT_PUBLIC_SITE_URL` | The address of the live site, for example `https://www.halden-pumps.com`. On Vercel the production address is used when this is not set. |
+
+A build on Vercel stops with a message while the address is still `example.com`, so search engines never see wrong
+links. Other builds (CI, your computer) only print a warning.
+
+The site runs as a server, not as static files: a job leaves the list, its page, the sitemap and search engines the
+day after its `validUntil`, a trade fair the day after it ends and a notice the day after its last day, with no new
+build. Static files (`npm run generate`) would keep them until the next build, so an expired job ad would stay online.
+
+## Develop, build, preview
+
+| Command | What |
+|---|---|
+| `npm run dev` | the site with live reload on http://localhost:3000; drafts show here |
+| `npm run build` | the production build in `.output/`; drafts are left out |
+| `npm run preview` | runs that build locally |
+| `npm run check` | Checks the content files in a few seconds: missing or wrong fields, dates, prices, links between pages and files in `public/`. Each problem names the file and the field. |
+| `npm run lint` | ESLint |
+| `npm run typecheck` | TypeScript and Vue types |
+
+`.github/workflows/ci.yml` runs lint, typecheck and build on every push. It needs no settings.
+
+## Edit content
+
+Every text is a Markdown file. After each change, run `npm run check`. The main language has no suffix (`about.md`); a
+translation adds the language code (`about.de.md`) and repeats only what it translates: dates, prices, files and images
+come from the main file. A page (a product, job, post, trade fair, legal text or free page) shows in a language only
+when its translation has every required text (for a job: `title`, `slug`, `description`, `location` and the text). The
+number at the start of a file name sets the order.
+
+Files point to other entries by id: the folder and the file name without number and language, so
+`content/people/1.katrin-albers.md` is `people/katrin-albers`. The `slug` is only the address on the site: renaming a
+file breaks the references to it, changing the `slug` does not. A translation lists the `specs` rows of a product in
+the same order as the main file: when you add, remove or move a row in the main file, do the same at the same place in
+each translation (write `- {}` for a row with nothing to translate). `npm run check` reports a translation with a
+different number of rows. Write dates as `2026-10-24`, times as `'09:30'`, prices as a plain number in euros (`95` or
+`12.50`).
+
+| On the site | File |
+|---|---|
+| Home page: what you make, lead, photo (optional) | `content/home.md` (and `home.de.md`) |
+| Service line: who answers it (an entry of `content/people/`, with phone and email) and when | `content/serviceLine.md` (`contact`, `hours`; `serviceLine.de.md` translates `hours`) |
+| Products and services | `content/services/<n>.<name>.md`: `title`, `summary`, `pricing` (`price` or `onRequest`, always one of the two), `price` (in euros, `390` or `12.50`, required with `pricing: price`), `duration` (minutes), `specs` (rows of `label` and `value`), `image` (3:2; give every entry one, or none), `contact` (who gets the enquiries, an entry of `content/people/`: `people/<name>`; else the email and phone of `content/site.md`), `sheet` (the product sheet, an entry of `content/downloads/`: `downloads/<name>`), the text |
+| Jobs | `content/jobs/<name>.md`: `title`, `description` (the short text in the list), `location`, `employmentType` (`fullTime`, `partTime`, `freelance`, `internship`, `apprenticeship`), `remote` (`onsite`, `hybrid`, `remote`), `applyEmail` (else the email of `content/site.md`) or `applyUrl` (an application page elsewhere), `validUntil` (required: the last day to apply), the text |
+| News | `content/posts/<name>.md`: `title`, `description` (the summary), `date`, `authors` (people by id, `[people/katrin-albers]`), `tags`, `image` (the cover, 3:2); `draft: true` keeps a post off the site |
+| Contacts (sales, service, human resources) | `content/people/<n>.<name>.md`: `name`, `role`, `bio`, `email`, `phone`; no photo needed, the site shows initials |
+| Trade fairs | `content/events/<n>.<name>.md`: `title`, `when` (`from`, `to`), `start`, `end`, `location` (venue, hall and stand), `booking` (optional: a ticket link), the text |
+| Product sheets and other documents | `content/downloads/<name>.md`: `title`, `summary`, `date`, `file` (a PDF in `public/sheets/`; when you replace a sheet, delete the old PDF, or it stays online at its old address), `language` (`en`, when the file is not in the page's language) |
+| Customer logos | `content/logos/<n>.<name>.md`: `name`, `image` (an SVG or PNG in `public/logos/`), `url` |
+| Quotes on the home page | `content/quotes/<n>.<name>.md`: `text`, `name`, `role`; the home page shows the first |
+| About us and other pages | `content/pages/<n>.<name>.md`; each translation sets its own address with `slug:` |
+| Notices above the header | `content/notices/<n>.<name>.md`: `text` (at most 140 characters; in quotes when it contains a colon), `until` (the last day it shows, like `2026-12-31`; without it the notice stays until you delete the file); a translation has only `text` |
+| Name, address, register entry, VAT number, email, phone | `content/site.md` (footer, imprint, enquiry and application emails, search engines) |
+| Privacy policy, terms of sale, imprint | `content/legal/` (placeholders for Germany: replace them before you go live) |
+| Site name, description for search engines, currency | `ginko.config.ts` (`name`, `seo.description`, `currency`) |
+| Menu, footer links, the line under the name in the footer | `app/app.config.ts` |
+| The home page's title in search results and tabs, section titles, the texts of the lists | `i18n/<language>.json` (`home.title` is "Industrial pumps and pumping stations"); the features' own texts are in `i18n/<feature>/<language>.json`, and a key set in `i18n/<language>.json` wins (this template renames "Team" to "Contact" and "Events" to "Trade fairs" that way) |
+
+**Prices.** Every product or service says how it is priced: `pricing: price` with a `price`, or `pricing: onRequest`.
+The page shows the price in the visitor's language with tabular numbers ("€390", "390 €"), and search engines get the
+same price; an entry on request shows "On request" and gives search engines no price. A fixed price without an amount
+is a mistake: the build stops on it and names the entry, and the Studio does not save it. An entry with a fixed price
+offers "Ask for a date"; one on request "Request a quote". The labels say "plus VAT" (`vat: 'excluded'` in
+`app/app.config.ts`, which also tells search engines); set `vat: 'included'` if your prices include it, and change
+`services.lead` in `i18n/<language>.json`.
+
+**Jobs.** Each job needs `validUntil`. The day after it, the job leaves the list, its page answers "not found", and it
+is gone from the sitemap and the JobPosting data for search engines. `content/jobs/summer-internship-assembly.md`
+shows this: its last day has passed, so it is nowhere on the site. Delete it for your site. With no open job, the jobs
+page invites an open application by email. Applications are emails with the job title in the subject; the site has no
+form.
+
+**Contacts.** The contact page shows the service line (`content/serviceLine.md`) and the office (address, main number
+and email from `content/site.md`) first, then `content/people/` in their order. The home page shows the service line
+under its actions, for a visitor whose pump has stopped; the office's number is in the footer of every page and in
+the home page's closing band.
+
+Each language has a news feed at `<news page>/rss.xml` (`/news/rss.xml`, `/de/aktuelles/rss.xml`).
+
+Notices show newest first: give a new notice a smaller number than the others (`0.` works and numbers may have gaps, so
+older notices keep theirs). At most two show at once.
+
+## Make it yours
+
+- **Name.** `name` in `ginko.config.ts` (header, footer, page titles, the jobs card of the home page, share cards, search
+  engines). The sample name also appears as text in `seo.description` there, `legalName` in `content/site.md`, the
+  `lead` in `content/home*.md` and the `summary` in `content/pages/1.about*.md`. Search `content/` and `i18n/` for it
+  and replace what is left. On phones the header shows `shortName` in `app/app.config.ts` instead, when you set one.
+- **Menu.** `nav` in `app/app.config.ts` holds at most six items: a page of `ginko.config.ts` (`{ page: 'news', label: {
+  … } }`, label per language, the same words as the page's title) or a page of `content/pages/` by id (`{ entry:
+  'pages/about' }` is `content/pages/1.about.md`).
+- **Logo.** Put the file in `public/` and set `logo: { src: '/logo.svg', width: 140, height: 32 }` in
+  `app/app.config.ts`. Without it, the header shows the name. Search engines get it as the employer's logo of your
+  jobs too.
+- **Country, time zone and languages.** `country` in `ginko.config.ts` (ISO code: the public holidays, and the
+  country search engines get for your address and every job), `timeZone` (dates and times of fairs and posts) and
+  `languages` (the language and region of each locale, for example `de: 'de-AT'` for Austria); `currency` for prices.
+  In `content/site.md`, write your own register entry and VAT number in the form of your country, or leave them out.
+- **Colour.** `--brand` and `--brand-foreground` in `app/assets/css/main.css`, once for light and once for dark
+  (`.dark`), and the light value as `seo.color` in `ginko.config.ts` (the background of the share cards). In dark mode,
+  `--brand-surface` and `--brand-surface-foreground` colour the home page's closing band. This template uses sky blue
+  (`#0369a1`, dark `#7dd3fc`, and a deep blue `#0c4a6e` for the closing band in dark mode). Text on the colour needs a
+  contrast of at least 4.5:1 in both modes; check each pair with a contrast checker (for example
+  webaim.org/resources/contrastchecker). `DESIGN.md` has the rules.
+- **Fonts.** `--font-body` in `main.css`. `@nuxt/fonts` downloads the fonts at build time and serves them from your
+  site.
+- **Organisation type.** `organization: 'Organization'` in `app/app.config.ts` tells search engines what you are;
+  address and contact come from `content/site.md`, the country from `country` in `ginko.config.ts`.
+- **Addresses.** The words of the addresses per language (`services` → `products`, `produkte`; `jobs` → `karriere`)
+  are in `app/routes.ts`. Change a word there; the pages, the menu and the links follow.
+
+`DESIGN.md` explains the tokens and components. The parts in `app/components/ui/` are
+[shadcn-vue](https://www.shadcn-vue.com) components.
+
+## Add a page
+
+**A text page:** add `content/pages/2.quality.md` with a `title`, an optional `summary` and the text below the
+frontmatter. It appears at `/quality`; each translation sets its own address with `slug:` (`slug: qualitaet` in
+`2.quality.de.md` gives `/de/qualitaet`). Add `{ entry: 'pages/quality' }` to `nav` or `footer` in `app/app.config.ts`
+to link it.
+
+**A page with its own layout:** add a Vue file in `app/pages/`, for example `app/pages/references.vue`. Start it with
+`<BlockPageHeader>` and call `usePageSeo()`, like `app/pages/downloads.vue`. Register it in `ginko.config.ts` under
+`pages` (`references: localized('/references')`) and add the words of its address per language to `segments` in
+`app/routes.ts` (`references: { en: 'references', de: 'referenzen' }`). It then answers at `/references` and
+`/de/referenzen`, and `useGinkoPath()('references')` links to it.
+
+## Add or remove a language
+
+The languages are the `locales` list in `app/routes.ts`; the first is the main language, whose addresses have no
+prefix.
+
+- **Remove one:** start fresh with `npm create ginko@latest my-site -- --template company --locales en`, or delete it
+  from `locales` and from the maps in `app/routes.ts` and `languages` in `ginko.config.ts`, then delete its files
+  (`*.de.md`, `i18n/de.json`, `i18n/*/de.json`).
+- **Add one** (for example French): add `'fr'` to `locales` and a word per address in `app/routes.ts`, its tag to
+  `languages` in `ginko.config.ts` (`fr: 'fr-FR'`), and the French labels of `nav`, `footer` and `tagline` in
+  `app/app.config.ts` (without them they show in the main language). Add `i18n/fr.json` and the texts of every
+  `i18n/<feature>/en.json` translated as `i18n/<feature>/fr.json`.
+- **Translate the content** as `content/**/*.fr.md`. A page shows in the new language only once it has its
+  translation file: without one it is not on the French site, the menu leaves it out, and links to it lead to its page
+  in the main language. Translate at least the legal texts (`content/legal/`) before the language goes live.
+
+## Add an enquiry or application form
+
+The site sends no data to other companies, so it has no forms: "Request a quote" and "Apply by email" open an email
+with the product or job in the subject. To use an application portal instead, give a job an `applyUrl`; for an
+enquiry form, link to a form service of your choice. Name the service in your privacy policy.
+
+## Remove a feature
+
+Links in the content name pages by their key (`[contact]($page.team)`). After you remove a page, search `content/` for
+`$page.<key>` and remove or change those links: the build stops on a link that leads nowhere.
+
+| Feature | Delete |
+|---|---|
+| Products and services | `content/services/`, the `services` brick and `pages.services` in `ginko.config.ts`, its `nav` item, the "Products and services" section and the hero's second button in `app/pages/index.vue`, `app/pages/services/`, `app/bricks/services.ts`, `app/composables/useServices.ts`, `i18n/services/`, the `services` keys in `i18n/<language>.json`, and `"services"` in `package.json` → `ginko.features` |
+| Jobs | `content/jobs/`, the `jobs` brick and `pages.jobs`, its `nav` item, the jobs card in `app/pages/index.vue` (`next`), `app/pages/jobs/`, `app/components/jobs/`, `app/composables/useJobs.ts`, `i18n/jobs/`, `"jobs"` in `ginko.features`, the `jobs` and `home.jobs` keys in `i18n/<language>.json`, and rename `home.next` ("Jobs and trade fairs") to "Trade fairs" (the section leaves the home page by itself when no fair is coming up); the links to `$page.jobs` in `content/posts/apprentices-start*.md` and `content/pages/1.about*.md` |
+| News | `content/posts/`, the `posts` brick and `pages.news`, its `nav` item, the "News" section on the home page, `app/pages/news/`, `app/components/blog/`, `app/composables/useBlog.ts`, `server/middleware/news-feed.ts`, `i18n/blog/`, `"blog"` in `ginko.features` |
+| Contact page | `pages.team`, its `nav` item, the hero's "Contact sales" button and the closing `<BlockCta>` band (its `action` is required, so delete the whole band, then the unused `site` and `contact` lines of its script) in `app/pages/index.vue`, `app/pages/team.vue`, `app/components/people/`, `i18n/people/`, `"people"` in `ginko.features`; the `$page.team` links in `content/posts/saturday-service*.md` and `content/pages/1.about*.md` (drop the link or the sentence around it); keep the `people` brick while posts, products or the service line name people |
+| Trade fairs | `content/events/`, the `events` brick and `pages.events`, its `nav` item, the fair card in `app/pages/index.vue` (`next`, `useEventText`), `app/pages/events/`, `app/components/event/`, `app/composables/useEvents.ts`, `i18n/events/`, `"events"` in `ginko.features`, the notice about the fair in `content/notices/` |
+| Downloads | `content/downloads/`, `public/sheets/`, the `downloads` brick and `pages.downloads`, its `footer` item, `downloads: 'downloads'` of the `services` brick and the `sheet` lines in `content/services/`, `app/pages/downloads.vue`, `app/components/downloads/`, `i18n/downloads/`, `"downloads"` in `ginko.features`; the links to `$page.downloads` in `content/posts/ts-pumps-atex*.md` |
+| Logos and quotes | `content/logos/`, `content/quotes/`, `public/logos/`, the `logos` and `quotes` bricks, the "References" section on the home page, `app/bricks/logos-quotes.ts`, `app/components/block/Logos.vue`, `Quote.vue`, `"logos-quotes"` in `ginko.features` |
+| Notices | `content/notices/`, the `notices` brick, `<SiteNotice />` in `app/layouts/default.vue`, `app/components/site/Notice.vue` |
+| A language | see "Add or remove a language" |
+| Dark mode | `<SiteThemeToggle />` in `app/components/site/Header.vue`, `app/components/site/ThemeToggle.vue`, and `@nuxtjs/color-mode` with its `colorMode` options in `nuxt.config.ts` and `package.json` |
+| Share cards | `nuxt-og-image` and `@takumi-rs/core` in `nuxt.config.ts` and `package.json`; then `NUXT_APP_SECRET` is not needed |
+
+## Before you deploy
+
+- [ ] `NUXT_PUBLIC_SITE_URL` (or `url` in `ginko.config.ts`) is your real address.
+- [ ] `NUXT_APP_SECRET` is set where the site runs.
+- [ ] `content/site.md` shows your real legal name, address, register entry, VAT number and contact details.
+- [ ] Every product and service has your price or `pricing: onRequest`, and the "plus VAT" labels fit your prices.
+- [ ] Every job has the right `validUntil` and application address; the sample jobs and the ended sample
+      (`content/jobs/summer-internship-assembly.md`) are deleted or replaced.
+- [ ] The sample phone numbers and emails are replaced: they reach nobody (the numbers start their local part
+      with 0, the emails end in .example), so a forgotten one fails quietly.
+- [ ] The placeholders in `content/legal/` are replaced by your own texts, and the ones you do not need are deleted.
+- [ ] The sample quotes, customer logos, product sheets (`public/sheets/`) and photos are replaced or deleted; quotes
+      and logos only with the customer's permission.
+- [ ] Every photo you added has alt text in each language file that shows it and a source in `MEDIA.md`.
+
+## Move to the Studio
+
+Ginko Studio is Lupinum's hosted editor: your team posts a job ad or a news post from the browser, changes a price or
+uploads a new product sheet, and the Today page lists the jobs that end within 7 days (also by email on Sundays) and
+how old the newest post is. It is open by invitation, and Lupinum moves your content with you. The site stays the same
+code: each brick in `ginko.config.ts` loses its `source: 'files'`, and its content then comes from the Studio. Until
+then, everything here works without it. Ask at [lupinum.com](https://lupinum.com).
+
+## Updating
+
+Move all Ginko packages to the same version in one step:
+
+```bash
+npm install @lupinum/ginko@latest @lupinum/ginko-content@latest @lupinum/ginko-i18n@latest
+```
+
+The release notes list "Template files changed": compare those files with yours if you want the changes.
+
+## License
+
+Code: MIT (see `LICENSE`). Media: see `MEDIA.md`.

package/templates/company/app/app.config.ts

@@ -0,0 +1,33 @@
+import type { SiteAppConfig } from './composables/useSiteAppConfig'
+
+// The brand and navigation of the site. The name (header, footer, page titles) is `name` in ginko.config.ts; colours and fonts are in
+// app/assets/css/main.css; address and contact are in content/site.md.
+export default defineAppConfig({
+  site: {
+    // shortName: 'Halden', // the name on phones, when the full name is long
+    // logo: { src: '/logo.svg', width: 140, height: 32 },
+    // One line under the name in the footer, per language.
+    tagline: {
+      en: 'Pumps and pumping stations for water, wastewater and industry.',
+      de: 'Pumpen und Pumpstationen für Wasser, Abwasser und Industrie.',
+    },
+    organization: 'Organization',
+    // At most 6. A page of ginko.config.ts (`page`, with its label per language; keep it the same as the page's
+    // title) or an entry of content/pages/ by id (`pages/<file name without number>`).
+    nav: [
+      { page: 'services', label: { en: 'Products and services', de: 'Produkte und Leistungen' } },
+      { entry: 'pages/about' },
+      { page: 'news', label: { en: 'News', de: 'Aktuelles' } },
+      { page: 'events', label: { en: 'Trade fairs', de: 'Messen' } },
+      { page: 'jobs', label: { en: 'Jobs', de: 'Karriere' } },
+      { page: 'team', label: { en: 'Contact', de: 'Kontakt' } },
+    ],
+    footer: [
+      { page: 'downloads', label: { en: 'Downloads', de: 'Downloads' } },
+    ],
+    // For example { label: 'LinkedIn', url: 'https://www.linkedin.com/company/halden-pumps' }.
+    socials: [],
+    // Prices to businesses, plus VAT: the price label says so, and so does the price's JSON-LD.
+    vat: 'excluded',
+  } satisfies SiteAppConfig,
+})

package/templates/company/app/app.vue

@@ -0,0 +1,7 @@
+<!-- Synced from templates/_features/site/app/app.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<template>
+  <NuxtRouteAnnouncer />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

package/templates/company/app/assets/css/main.css

@@ -0,0 +1,22 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./tokens.css";
+
+/* This template's accent and fonts (DESIGN.md "Your accent"). Everything else comes from tokens.css.
+   company: sky. White on the accent 5.9:1 light; the accent on the page 5.9:1 light; #082f49 on the dark accent
+   8.3:1; the dark accent on the page 11.8:1. The focus ring and links in text use the accent. */
+:root {
+  --brand: #0369a1;
+  --brand-foreground: #ffffff;
+  /* @nuxt/fonts serves Inter from the site and adds size-matched fallbacks. */
+  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+
+.dark {
+  --brand: #7dd3fc;
+  --brand-foreground: #082f49;
+  /* The closing band in dark mode: a deep blue instead of the light accent, so it does not outshine the page.
+     #f0f9ff on #0c4a6e 8.9:1. */
+  --brand-surface: #0c4a6e;
+  --brand-surface-foreground: #f0f9ff;
+}