create-ginko 0.4.0 → 0.5.0

package/templates/blog/app/assets/css/tokens.css

@@ -0,0 +1,400 @@
+/* Synced from templates/_features/ui/app/assets/css/tokens.css by `pnpm templates sync`. Edit the source, not this copy. */
+/* The design tokens every template shares (DESIGN.md). Neutral system values only: the template's accent and fonts
+   live in its own app/assets/css/main.css, which imports this file after Tailwind.
+   Tailwind's default palette, type scale, radii and shadows are removed, so only these utilities exist. A new value
+   is a new token here (or in main.css) and a row in DESIGN.md, in the same change. */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-*: initial;
+  --font-*: initial;
+
+  /* Type scale. Headings use h1–h3; body text is 17px. */
+  --text-*: initial;
+  --text-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
+  --text-h1--line-height: 1.05;
+  --text-h1--letter-spacing: -0.025em;
+  --text-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
+  --text-h2--line-height: 1.1;
+  --text-h2--letter-spacing: -0.02em;
+  --text-h3: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
+  --text-h3--line-height: 1.3;
+  --text-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
+  --text-lead--line-height: 1.5;
+  --text-body: 1.0625rem;
+  --text-body--line-height: 1.6;
+  --text-small: 0.9375rem;
+  --text-small--line-height: 1.5;
+  --text-xs: 0.8125rem;
+  --text-xs--line-height: 1.4;
+
+  --radius-*: initial;
+  --radius-full: 9999px;
+  /* Images, cards and the CTA band. Buttons and fields use --radius (rounded-md). */
+  --radius-block: 1rem;
+
+  --shadow-*: initial;
+  --inset-shadow-*: initial;
+  --drop-shadow-*: initial;
+  --text-shadow-*: initial;
+  /* The one elevation: panels above the page (nav sheet, dialog, lightbox, menus). */
+  --shadow-overlay: 0 12px 32px -8px rgb(9 9 11 / 0.28);
+
+  --spacing-section: clamp(3.5rem, 2.25rem + 5.5vw, 7rem);
+  --spacing-gutter: clamp(1rem, 0.5rem + 2.4vw, 2rem);
+  --container-page: 76rem;
+  /* About 65 characters of body text in Inter. In rem, not ch: ch follows the font, so text re-wrapped (a layout
+     shift) when Inter replaced its fallback. */
+  --container-prose: 43.5rem;
+
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Neutral colours (zinc). Contrast on --background: foreground 17.7:1 / 17.0:1, muted-foreground 7.7:1 / 7.9:1.
+   --brand and --brand-foreground (the accent and the text on it) come from main.css, light and dark. */
+:root {
+  color-scheme: light;
+  --primary: var(--brand);
+  --primary-foreground: var(--brand-foreground);
+  --background: #ffffff;
+  --foreground: #18181b;
+  --card: var(--background);
+  --card-foreground: var(--foreground);
+  --popover: var(--background);
+  --popover-foreground: var(--foreground);
+  --secondary: #f4f4f5;
+  --secondary-foreground: var(--foreground);
+  --muted: #f4f4f5;
+  --muted-foreground: #52525b;
+  --accent: #f4f4f5;
+  --accent-foreground: var(--foreground);
+  --border: #e4e4e7;
+  /* Borders of controls: 3:1 or more on the background (WCAG non-text contrast). */
+  --input: #8a8a93;
+  --ring: var(--primary);
+  --success: #15803d;
+  --warning: #a16207;
+  --destructive: #b42318;
+  /* Behind a dialog, the nav sheet or the lightbox. */
+  --scrim: rgb(9 9 11 / 0.6);
+  --radius: 0.625rem;
+}
+
+.dark {
+  color-scheme: dark;
+  --background: #0b0b0c;
+  --foreground: #f4f4f5;
+  --secondary: #18181b;
+  --muted: #18181b;
+  --muted-foreground: #a1a1aa;
+  --accent: #27272a;
+  --border: #27272a;
+  --input: #71717a;
+  --success: #4ade80;
+  --warning: #facc15;
+  --destructive: #f87171;
+  --scrim: rgb(0 0 0 / 0.72);
+}
+
+/* Paper is white and browsers leave out backgrounds when printing: a page printed in dark mode uses the light
+   neutrals, so its text stays dark. */
+@media print {
+  .dark {
+    color-scheme: light;
+    --background: #ffffff;
+    --foreground: #18181b;
+    --secondary: #f4f4f5;
+    --muted: #f4f4f5;
+    --muted-foreground: #52525b;
+    --accent: #f4f4f5;
+    --border: #e4e4e7;
+    --input: #8a8a93;
+    --success: #15803d;
+    --warning: #a16207;
+    --destructive: #b42318;
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-destructive: var(--destructive);
+  --color-scrim: var(--scrim);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: var(--radius);
+  /* main.css sets --font-body and, optionally, --font-heading (headings; utility font-display). */
+  --font-sans: var(--font-body);
+  --font-display: var(--font-heading, var(--font-body));
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+/* A band on the accent colour (BlockCta). Text, secondary text, buttons and the focus ring switch, so every part
+   inside keeps its contrast. main.css may give the band its own colour with `--brand-surface` and
+   `--brand-surface-foreground` (for example a deep shade in `.dark`, where a full band of the light accent would be
+   the loudest thing on the page); without them the band is `--brand`. */
+.surface-primary {
+  --band: var(--brand-surface, var(--brand));
+  --band-foreground: var(--brand-surface-foreground, var(--brand-foreground));
+  --background: var(--band);
+  --foreground: var(--band-foreground);
+  --muted-foreground: var(--band-foreground);
+  --border: color-mix(in oklab, var(--band-foreground) 30%, transparent);
+  --input: var(--band-foreground);
+  --accent: color-mix(in oklab, var(--band-foreground) 12%, transparent);
+  --ring: var(--band-foreground);
+  --primary: var(--band-foreground);
+  --primary-foreground: var(--band);
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--border);
+  }
+
+  html {
+    font-family: var(--font-body);
+    background-color: var(--background);
+    color: var(--foreground);
+    accent-color: var(--primary);
+    scroll-padding-top: 6rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-size-adjust: 100%;
+  }
+
+  body {
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+    /* "anywhere", not "break-word": only "anywhere" lowers min-content width. Flex and grid items have
+       min-width: auto, so with break-word one long word still widens the item and then the page. The cost:
+       a short label next to long text in a flex row that does not wrap needs shrink-0 (or whitespace-nowrap),
+       or it breaks mid-word. */
+    overflow-wrap: anywhere;
+  }
+
+  /* Dates and row labels stay whole words. */
+  time,
+  th {
+    overflow-wrap: normal;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-heading, var(--font-body));
+    font-weight: 600;
+    text-wrap: balance;
+    hyphens: auto;
+    /* Only words of 10+ letters break, with at least 5 on each side: no "mu-nicipal". */
+    hyphenate-limit-chars: 10 5 5;
+  }
+
+  p,
+  li {
+    text-wrap: pretty;
+  }
+
+  time,
+  .tabular-nums {
+    font-variant-numeric: tabular-nums;
+  }
+
+  ::selection {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  /* One focus style for every interactive element: 2px ring in --ring, 3px away. */
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 3px;
+  }
+
+  a {
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+@layer components {
+  /* Rendered Markdown (ProseBody). Bodies start at h2. Only direct children are styled, so ginko-components keep
+     their own look. */
+  .prose {
+    max-width: var(--container-prose);
+  }
+
+  .prose :not(pre) > code {
+    border-radius: calc(var(--radius) - 4px);
+    background-color: var(--muted);
+    padding: 0.1em 0.3em;
+    font-size: 0.9em;
+  }
+
+  .prose > * + * {
+    margin-top: 1.1em;
+  }
+
+  .prose > h2 {
+    margin-top: 2.2em;
+    font-size: var(--text-h3);
+    line-height: var(--text-h3--line-height);
+  }
+
+  .prose > h3 {
+    margin-top: 1.8em;
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+  }
+
+  .prose > :is(h2, h3) + * {
+    margin-top: 0.6em;
+  }
+
+  .prose > :first-child {
+    margin-top: 0;
+  }
+
+  .prose > :is(p, ul, ol, blockquote) a {
+    color: var(--primary);
+    text-decoration-line: underline;
+  }
+
+  .prose > :is(p, ul, ol, blockquote) a:hover {
+    text-decoration-thickness: 2px;
+  }
+
+  .prose > :is(ul, ol) {
+    padding-inline-start: 1.25em;
+  }
+
+  .prose > ul {
+    list-style-type: disc;
+  }
+
+  .prose > ol {
+    list-style-type: decimal;
+  }
+
+  .prose > :is(ul, ol) > li + li {
+    margin-top: 0.4em;
+  }
+
+  .prose > :is(ul, ol) > li::marker {
+    color: var(--muted-foreground);
+  }
+
+  .prose strong {
+    font-weight: 600;
+  }
+
+  .prose > blockquote {
+    border-inline-start: 2px solid var(--border);
+    padding-inline-start: 1.25em;
+    color: var(--muted-foreground);
+  }
+
+  .prose > hr {
+    margin-block: 2.5em;
+  }
+
+  .prose > :is(figure, section, div) {
+    margin-block: 2.5em;
+  }
+
+  .prose img {
+    border-radius: var(--radius-block);
+  }
+
+  /* A photo in a text with its caption: the image, and on the next line of the same paragraph `*The caption*`. The
+     photo takes the text's width (its width and height attributes keep the space while it loads); the caption sits
+     small and muted under it. */
+  .prose > p:has(> img) > img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .prose > p:has(> img) > em:last-child {
+    display: block;
+    margin-top: 0.75em;
+    font-size: var(--text-small);
+    line-height: var(--text-small--line-height);
+    font-style: normal;
+    color: var(--muted-foreground);
+  }
+
+  /* Code blocks: a line around them, and long lines wrap instead of widening the page (a block that scrolled sideways
+     would need to take keyboard focus, which Markdown cannot give it). A highlighted block (Shiki, in files) colours
+     its words for light and dark (github-light, catppuccin-mocha: 4.5:1 or more on the page); its own background is
+     left out, so the block sits on the page like the text around it. */
+  .prose > pre {
+    white-space: pre-wrap;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem 1.25rem;
+    font-size: var(--text-small);
+    line-height: var(--text-small--line-height);
+  }
+
+  .prose > pre.shiki {
+    background-color: transparent !important;
+  }
+
+  .dark .prose .shiki,
+  .dark .prose .shiki span {
+    color: var(--shiki-dark, var(--foreground)) !important;
+  }
+}
+
+/* Print: the page's content with its address. Navigation, language and theme controls, the notices, the skip link and
+   the closing band carry `print:hidden` in their components; the header stays at the top of the first page only, and
+   the footer keeps the name and contact. A
+   link to another site prints its address after the text, and list items and figures do not break across pages. */
+@media print {
+  .prose a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    color: var(--muted-foreground);
+  }
+
+  .prose :is(li, figure, blockquote, pre) {
+    break-inside: avoid;
+  }
+
+  .prose :is(h2, h3) {
+    break-after: avoid;
+  }
+}

package/templates/blog/app/components/InitialsAvatar.vue

@@ -0,0 +1,18 @@
+<!-- Synced from templates/_features/site/app/components/InitialsAvatar.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** A person without a photo: their initials on --muted. Never a stock face for a named person. */
+const props = withDefaults(defineProps<{ name: string, size?: 'md' | 'lg' }>(), { size: 'md' })
+// First and last name: "Anna Maria Huber" → "AH".
+const initials = computed(() => {
+  const parts = props.name.split(/\s+/).filter(Boolean)
+  return [parts[0], parts.length > 1 ? parts.at(-1) : undefined].map((part) => (part ? [...part][0] : '')).join('').toLocaleUpperCase()
+})
+</script>
+
+<template>
+  <span
+    class="inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-foreground"
+    :class="size === 'lg' ? 'size-20 text-h3' : 'size-12 text-body'"
+    aria-hidden="true"
+  >{{ initials }}</span>
+</template>

package/templates/blog/app/components/ProseBody.vue

@@ -0,0 +1,13 @@
+<!-- Synced from templates/_features/site/app/components/ProseBody.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { MarkdownValue } from '@lupinum/ginko'
+
+/** A Markdown body (headings start at h2); with @lupinum/ginko-components installed, also its components. */
+defineProps<{ value: MarkdownValue | undefined }>()
+</script>
+
+<template>
+  <div class="mx-auto max-w-page px-gutter">
+    <GinkoMarkdown :value="value" class="prose" />
+  </div>
+</template>

package/templates/blog/app/components/block/Cards.vue

@@ -0,0 +1,54 @@
+<!-- Synced from templates/_features/site/app/components/block/Cards.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { ImageValue } from '@lupinum/ginko'
+import { ArrowRight } from '@lucide/vue'
+
+export interface Card {
+  key: string
+  title: string
+  to: string
+  text?: string
+  /** A date, price or status line above the title, in tabular numbers. */
+  meta?: string
+  image?: ImageValue
+}
+
+/** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
+ *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
+ *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+// Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
+const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
+const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
+</script>
+
+<template>
+  <ul
+    class="grid gap-6 sm:grid-cols-2"
+    :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
+  >
+    <li
+      v-for="item in items"
+      :key="item.key"
+      class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
+      :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
+    >
+      <GinkoImage
+        v-if="item.image"
+        :image="item.image"
+        :sizes="sizes"
+        class="aspect-3/2 w-full bg-muted object-cover"
+        :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
+      />
+      <div class="flex flex-1 flex-col gap-2 p-6" :class="{ 'max-sm:gap-1 max-sm:p-4': compact }">
+        <p v-if="item.meta" class="text-small text-muted-foreground tabular-nums">{{ item.meta }}</p>
+        <component :is="headingLevel" class="text-h3">
+          <NuxtLink :to="item.to" class="outline-none after:absolute after:inset-0">{{ item.title }}</NuxtLink>
+        </component>
+        <p v-if="item.text" class="text-muted-foreground" :class="{ 'max-sm:hidden': compact }">{{ item.text }}</p>
+        <ArrowRight class="mt-auto size-5 text-muted-foreground rtl:-scale-x-100" :class="{ 'max-sm:hidden': compact }" aria-hidden="true" />
+      </div>
+    </li>
+  </ul>
+</template>

package/templates/blog/app/components/block/Cta.vue

@@ -0,0 +1,26 @@
+<!-- Synced from templates/_features/site/app/components/block/Cta.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** The closing band of a page, on the accent colour: one sentence and one action. At most one per page; never on
+ *  legal, contact or error pages. The slot takes one more line below the text, such as the next date. */
+defineProps<{
+  title: string
+  text?: string
+  action: { label: string, to: string }
+}>()
+const titleId = useId()
+</script>
+
+<template>
+  <section :aria-labelledby="titleId" class="mx-auto max-w-page px-gutter pt-section print:hidden">
+    <div class="surface-primary flex flex-col gap-8 rounded-block px-6 py-12 sm:px-12 md:flex-row md:items-end md:justify-between md:py-16">
+      <div class="flex max-w-2xl flex-col gap-4">
+        <h2 :id="titleId" class="text-h2">{{ title }}</h2>
+        <p v-if="text" class="text-lead text-muted-foreground">{{ text }}</p>
+        <slot />
+      </div>
+      <Button as-child size="lg" class="shrink-0 max-sm:w-full">
+        <NuxtLink :to="action.to">{{ action.label }}</NuxtLink>
+      </Button>
+    </div>
+  </section>
+</template>

package/templates/blog/app/components/block/Empty.vue

@@ -0,0 +1,26 @@
+<!-- Synced from templates/_features/site/app/components/block/Empty.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { FilePlus } from '@lucide/vue'
+
+/** An empty list: what to add, and in files mode where (`path`, for example `content/pages/`). The path is for the
+ *  owner: it shows in development only (`npm run dev`), never to visitors of the built site. */
+defineProps<{
+  title: string
+  text?: string
+  path?: string
+}>()
+const dev = import.meta.dev
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-3 rounded-block border border-dashed p-8">
+    <FilePlus class="size-6 text-muted-foreground" aria-hidden="true" />
+    <p class="text-body font-medium">{{ title }}</p>
+    <p v-if="text" class="text-muted-foreground">{{ text }}</p>
+    <p v-if="path && dev" class="text-small text-muted-foreground">
+      <I18nT k="site.empty" :params="{ path }">
+        <template #code="{ text: file }"><code>{{ file }}</code></template>
+      </I18nT>
+    </p>
+  </div>
+</template>

package/templates/blog/app/components/block/Features.vue

@@ -0,0 +1,24 @@
+<!-- Synced from templates/_features/site/app/components/block/Features.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+export interface Feature {
+  title: string
+  text: string
+  /** A lucide icon component, for example `Leaf` from '@lucide/vue'. */
+  icon?: Component
+}
+
+/** Two to six short items divided by lines, no cards. Use inside BlockSection. */
+defineProps<{ items: Feature[] }>()
+</script>
+
+<template>
+  <ul class="grid gap-x-10 sm:grid-cols-2">
+    <li v-for="item in items" :key="item.title" class="flex flex-col gap-3 border-t py-8">
+      <component :is="item.icon" v-if="item.icon" class="size-6 text-primary" aria-hidden="true" />
+      <h3 class="text-h3">{{ item.title }}</h3>
+      <p class="text-muted-foreground">{{ item.text }}</p>
+    </li>
+  </ul>
+</template>

package/templates/blog/app/components/block/Hero.vue

@@ -0,0 +1,47 @@
+<!-- Synced from templates/_features/site/app/components/block/Hero.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { ImageValue } from '@lupinum/ginko'
+
+/**
+ * The first section of the home page: the page's one h1, a lead, one primary and one secondary action, and an
+ * optional photo (16:9, 4:3 from lg). Without a photo the text takes the full width: a complete layout, not a missing image.
+ * Slots: `status`, one line above the title that answers the visitor's first question (open now, the next date);
+ * the default slot, a short line after the actions (another way to get in touch).
+ */
+defineProps<{
+  title: string
+  lead?: string
+  primary?: { label: string, to: string }
+  secondary?: { label: string, to: string }
+  image?: ImageValue
+}>()
+const titleId = useId()
+</script>
+
+<template>
+  <section :aria-labelledby="titleId" class="mx-auto max-w-page px-gutter pt-12 md:pt-20">
+    <div :class="image ? 'grid items-center gap-10 lg:grid-cols-12 lg:gap-16' : 'max-w-4xl'">
+      <div class="flex flex-col gap-6" :class="image && 'lg:col-span-6'">
+        <slot name="status" />
+        <h1 :id="titleId" class="text-h1">{{ title }}</h1>
+        <p v-if="lead" class="max-w-3xl text-lead text-muted-foreground">{{ lead }}</p>
+        <div v-if="primary || secondary" class="mt-2 flex flex-wrap gap-3">
+          <Button v-if="primary" as-child size="lg" class="h-auto min-h-12 max-w-full py-3 text-center whitespace-normal max-sm:w-full">
+            <NuxtLink :to="primary.to">{{ primary.label }}</NuxtLink>
+          </Button>
+          <Button v-if="secondary" as-child variant="outline" size="lg" class="h-auto min-h-12 max-w-full py-3 text-center whitespace-normal max-sm:w-full">
+            <NuxtLink :to="secondary.to">{{ secondary.label }}</NuxtLink>
+          </Button>
+        </div>
+        <slot />
+      </div>
+      <GinkoImage
+        v-if="image"
+        :image="image"
+        eager
+        sizes="(min-width: 1024px) 576px, 100vw"
+        class="aspect-video w-full rounded-block bg-muted object-cover lg:col-span-6 lg:aspect-4/3"
+      />
+    </div>
+  </section>
+</template>

package/templates/blog/app/components/block/PageHeader.vue

@@ -0,0 +1,21 @@
+<!-- Synced from templates/_features/site/app/components/block/PageHeader.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/** The first section of every page except home: the page's one h1, an optional lead and a meta line (a date). The
+ *  slot takes more below them, such as a post's authors. */
+defineProps<{
+  title: string
+  lead?: string
+  meta?: string
+}>()
+</script>
+
+<template>
+  <header class="mx-auto max-w-page px-gutter pt-12 pb-8 md:pt-20 md:pb-12">
+    <div class="flex max-w-3xl flex-col gap-5">
+      <h1 class="text-h1">{{ title }}</h1>
+      <p v-if="lead" class="text-lead text-muted-foreground">{{ lead }}</p>
+      <p v-if="meta" class="text-small text-muted-foreground tabular-nums">{{ meta }}</p>
+      <slot />
+    </div>
+  </header>
+</template>

package/templates/blog/app/components/block/Section.vue

@@ -0,0 +1,31 @@
+<!-- Synced from templates/_features/site/app/components/block/Section.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+/**
+ * A section with a short label as heading, an optional lead, and the content in the slot. `side`: from `lg` the
+ * heading takes 4 of 12 columns and the content 8; otherwise the content runs below the heading at full width.
+ * The label is `text-h3`, the size of a Markdown `##`, so every h2 of a page has one size (only BlockCta's sentence
+ * is larger). On paper a section that fits on one page starts on a new page rather than leave its heading alone at
+ * the bottom (Chrome ignores `break-after: avoid` on the heading here); a longer one still breaks inside.
+ */
+withDefaults(defineProps<{
+  title: string
+  lead?: string
+  id?: string
+  side?: boolean
+}>(), { side: true })
+const titleId = useId()
+</script>
+
+<template>
+  <section :id="id" :aria-labelledby="titleId" class="mx-auto max-w-page px-gutter pt-section print:break-inside-avoid">
+    <div :class="side ? 'grid gap-8 lg:grid-cols-12 lg:gap-16' : 'flex flex-col gap-10'">
+      <div class="flex max-w-2xl flex-col gap-4" :class="side && 'lg:col-span-4'">
+        <h2 :id="titleId" class="text-h3">{{ title }}</h2>
+        <p v-if="lead" class="text-muted-foreground">{{ lead }}</p>
+      </div>
+      <div class="min-w-0" :class="side && 'lg:col-span-8'">
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>