create-ginko 0.4.0 → 0.6.0

package/templates/company/app/components/site/Header.vue

@@ -0,0 +1,52 @@
+<!-- Synced from templates/_features/site/app/components/site/Header.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// Name or logo, the navigation (at most 6 links), the language switch and the theme toggle. Below `md` the links and
+// the language switch move into a sheet, so the sheet opens for a site with languages but no links too. From `md` the
+// header has the language codes. A longer navigation stays in the sheet for longer, so labels never squeeze the
+// header: more than 4 links until `xl` (five German labels and the name did not fit at 1024 px); until `lg` when more
+// than 6 links and codes come together (5 links and 4 codes do not fit at 768 px in German or French) or when the
+// name, the labels and the codes are longer than 768 px holds: 70 characters of the page's language (about 7 px each
+// at the size of the links; the German events header with 78 did not fit, the English one with 61 does). More than
+// 6 links, or 150 characters, never fit inline, not even at `xl` (the 1280 px header holds about 150 characters at
+// that size; kept from the 7 px estimate, not measured in a build), so the sheet stays the only menu.
+const config = useSiteAppConfig()
+const { name } = useGinkoSite()
+const links = useSiteLinks(() => config.nav, 6)
+const more = useSiteLinks(() => config.footer)
+const { t, alternates } = useI18n('site')
+const path = useGinkoPath()
+const codes = computed(() => (alternates.value.length > 1 ? alternates.value.length : 0))
+/** The header's length in characters: the name (or the logo's width), each label with its padding, each code. */
+const length = computed(() => links.value.reduce((sum, link) => sum + link.label.length + 3, config.logo ? config.logo.width / 7 : name.length) + codes.value * 5)
+const until = computed(() => (links.value.length > 6 || length.value > 150 ? 'always' : links.value.length > 4 ? 'xl' : links.value.length + codes.value > 6 || length.value > 70 ? 'lg' : 'md'))
+// Whole class names, so Tailwind finds them in the source.
+const navHidden = { md: 'max-md:hidden', lg: 'max-lg:hidden', xl: 'max-xl:hidden', always: 'hidden' } as const
+</script>
+
+<template>
+  <header class="sticky top-0 z-40 border-b bg-background print:static">
+    <div class="mx-auto flex h-16 max-w-page items-center gap-4 px-gutter md:h-18">
+      <NuxtLink :to="path('home')" class="-m-1 me-auto inline-flex min-h-11 shrink-0 items-center rounded-md p-1 whitespace-nowrap">
+        <SiteLogo />
+        <span class="sr-only">, {{ t('home') }}</span>
+      </NuxtLink>
+      <nav v-if="links.length" :aria-label="t('nav.label')" class="print:hidden" :class="navHidden[until]">
+        <ul class="flex items-center gap-1">
+          <li v-for="link in links" :key="link.key">
+            <SiteNavLink
+              :to="link.to"
+              class="inline-flex min-h-11 items-center rounded-md px-3 text-small font-medium whitespace-nowrap text-muted-foreground transition-[color,background-color,border-color] duration-150 hover:text-foreground aria-[current=page]:text-foreground underline-offset-4 aria-[current=page]:underline"
+            >
+              {{ link.label }}
+            </SiteNavLink>
+          </li>
+        </ul>
+      </nav>
+      <div class="flex items-center gap-1">
+        <SiteLanguageSwitch class="max-md:hidden print:hidden" />
+        <SiteThemeToggle />
+        <SiteNavSheet v-if="links.length || alternates.length > 1" :links="links" :more="more" :until="until" />
+      </div>
+    </div>
+  </header>
+</template>

package/templates/company/app/components/site/LanguageSwitch.vue

@@ -0,0 +1,34 @@
+<!-- Synced from templates/_features/site/app/components/site/LanguageSwitch.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// The same page in each language of the site (ginko-i18n alternates). A page without a translation links to that
+// language's home page and says so. Hidden when the site has one language. Two forms: codes in the header from `md`
+// up, full names in their own language in the phone nav sheet and the footer (`names`). The accessible name starts
+// with the visible text ("de Deutsch", "Deutsch"), so voice control users can say what they see (WCAG 2.5.3).
+defineProps<{ names?: boolean }>()
+const { t, alternates, language } = useI18n('site')
+</script>
+
+<template>
+  <ul v-if="alternates.length > 1" :class="names ? 'flex flex-wrap gap-x-5' : 'flex items-center'" :aria-label="t('language.label')">
+    <li v-for="alt in alternates" :key="alt.code">
+      <NuxtLink
+        :to="alt.path"
+        :hreflang="alt.language"
+        :lang="alt.language"
+        :aria-current="alt.current ? 'true' : undefined"
+        :class="names
+          ? 'inline-flex min-h-11 min-w-11 items-center text-muted-foreground underline-offset-4 hover:text-foreground hover:underline aria-[current]:text-foreground aria-[current]:underline'
+          : 'inline-flex size-11 items-center justify-center rounded-md text-small font-medium text-muted-foreground uppercase transition-[color,background-color,border-color] duration-150 hover:bg-accent hover:text-foreground aria-[current]:text-foreground aria-[current]:underline aria-[current]:underline-offset-4'"
+      >
+        <template v-if="names">
+          <template v-if="alt.translated">{{ alt.name }}</template>
+          <!-- The spoken name starts with the visible one: "Deutsch: Diese Seite ist nicht übersetzt, zur Startseite". -->
+          <template v-else><span aria-hidden="true">{{ alt.name }}</span><span class="sr-only" :lang="language">{{ t('language.untranslated', { language: alt.name }) }}</span></template>
+        </template>
+        <template v-else>
+          {{ alt.code }}<span class="sr-only normal-case">&nbsp;<template v-if="alt.translated">{{ alt.name }}</template><span v-else :lang="language">{{ t('language.untranslated', { language: alt.name }) }}</span></span>
+        </template>
+      </NuxtLink>
+    </li>
+  </ul>
+</template>

package/templates/company/app/components/site/Logo.vue

@@ -0,0 +1,17 @@
+<!-- Synced from templates/_features/site/app/components/site/Logo.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// The logo from app.config.ts, or the site name as text. On phones the short name, when there is one.
+const config = useSiteAppConfig()
+const { name } = useGinkoSite()
+</script>
+
+<template>
+  <img v-if="config.logo" :src="config.logo.src" :width="config.logo.width" :height="config.logo.height" :alt="name" class="h-8 w-auto">
+  <span v-else class="font-display text-body font-semibold whitespace-nowrap">
+    <template v-if="config.shortName">
+      <span class="sm:hidden">{{ config.shortName }}</span>
+      <span class="max-sm:hidden">{{ name }}</span>
+    </template>
+    <template v-else>{{ name }}</template>
+  </span>
+</template>

package/templates/company/app/components/site/NavLink.vue

@@ -0,0 +1,19 @@
+<!-- Synced from templates/_features/site/app/components/site/NavLink.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { safeHref } from '@lupinum/ginko'
+
+/** A navigation link that marks the current page with aria-current, so it can be styled and announced. An address on
+ *  another site (`https://…`, a nav item with `url`) is a plain link: it is never the current page. */
+defineOptions({ inheritAttrs: false })
+const props = defineProps<{ to: string }>()
+const external = computed(() => /^https?:\/\//.test(props.to))
+</script>
+
+<template>
+  <a v-if="external" :href="safeHref(to)" v-bind="$attrs"><slot /></a>
+  <NuxtLink v-else v-slot="{ href, navigate, isExactActive }" :to="to" custom>
+    <a :href="href ?? undefined" :aria-current="isExactActive ? 'page' : undefined" v-bind="$attrs" @click="navigate">
+      <slot />
+    </a>
+  </NuxtLink>
+</template>

package/templates/company/app/components/site/NavSheet.vue

@@ -0,0 +1,63 @@
+<!-- Synced from templates/_features/site/app/components/site/NavSheet.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { ArrowRight, Menu } from '@lucide/vue'
+
+// The navigation on phones: a sheet from the inline start (the right in right-to-left languages). reka-ui keeps the
+// focus inside while open and returns it to the button on close. After a navigation the sheet closes and the focus
+// moves to the new page's content instead, so keyboard and screen reader users start there, not in the header.
+// The language switch sits at the top, with full names, since the header has no room for it on phones; from `md` the
+// header has the language codes, so the sheet leaves them out. The footer links (`more`: team, reports) follow the
+// menu as a second, quieter list, so they are one tap away on a phone too. `until`: the header shows its own links
+// from this breakpoint up, so the menu button hides there; `always`: the links never fit inline, so the button shows
+// at every width.
+type Link = { key: string, label: string, to: string }
+withDefaults(defineProps<{ links: Link[], more?: Link[], until?: 'md' | 'lg' | 'xl' | 'always' }>(), { more: () => [], until: 'md' })
+// Whole class names, so Tailwind finds them in the source.
+const buttonHidden = { md: 'md:hidden', lg: 'lg:hidden', xl: 'xl:hidden', always: '' } as const
+const { t } = useI18n('site')
+const open = ref(false)
+const route = useRoute()
+let navigated = false
+watch(() => route.fullPath, () => {
+  navigated = open.value
+  open.value = false
+})
+function returnFocus(event: Event) {
+  if (!navigated) return
+  navigated = false
+  event.preventDefault()
+  document.getElementById('main')?.focus({ preventScroll: true })
+}
+</script>
+
+<template>
+  <Sheet v-model:open="open">
+    <SheetTrigger as-child>
+      <Button variant="ghost" size="icon" class="print:hidden" :class="buttonHidden[until]">
+        <Menu aria-hidden="true" />
+        <span class="sr-only">{{ t('nav.open') }}</span>
+      </Button>
+    </SheetTrigger>
+    <SheetContent side="start" :close-label="t('close')" :aria-describedby="undefined" class="px-6 pt-5 pb-8" @close-auto-focus="returnFocus">
+      <SheetTitle class="flex h-11 items-center text-small text-muted-foreground">{{ t('nav.title') }}</SheetTitle>
+      <SiteLanguageSwitch names class="mb-4 text-small md:hidden" />
+      <nav v-if="links.length" :aria-label="t('nav.label')">
+        <ul class="flex flex-col border-t">
+          <li v-for="link in links" :key="link.key" class="border-b">
+            <SiteNavLink :to="link.to" class="flex min-h-14 items-center justify-between gap-4 py-3 text-h3 font-medium underline-offset-4 aria-[current=page]:underline">
+              {{ link.label }}
+              <ArrowRight class="size-5 shrink-0 text-muted-foreground rtl:-scale-x-100" aria-hidden="true" />
+            </SiteNavLink>
+          </li>
+        </ul>
+      </nav>
+      <ul v-if="more.length" class="mt-4 flex flex-col">
+        <li v-for="link in more" :key="link.key">
+          <SiteNavLink :to="link.to" class="flex min-h-11 items-center text-small text-muted-foreground underline-offset-4 hover:text-foreground hover:underline aria-[current=page]:text-foreground aria-[current=page]:underline">
+            {{ link.label }}
+          </SiteNavLink>
+        </li>
+      </ul>
+    </SheetContent>
+  </Sheet>
+</template>

package/templates/company/app/components/site/Notice.vue

@@ -0,0 +1,21 @@
+<!-- Synced from templates/_features/site/app/components/site/Notice.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Info } from '@lucide/vue'
+
+// The owner's notices (content/notices/): every active one (the notices brick allows 5), in the owner's order, so
+// the newest goes first. A notice with "Shown until" leaves the site after that day by itself. There is no dismiss
+// button: owners end notices by date.
+const notices = useGinko('notices')
+const { t } = useI18n('site')
+</script>
+
+<template>
+  <section v-if="notices.items.length" :aria-label="t('notice')" class="bg-muted print:hidden">
+    <ul class="mx-auto flex max-w-page flex-col gap-1 px-gutter py-2.5">
+      <li v-for="notice in notices.items" :key="notice.id" class="flex items-start gap-2.5 text-small">
+        <Info class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+        <p>{{ notice.data.text }}</p>
+      </li>
+    </ul>
+  </section>
+</template>

package/templates/company/app/components/site/SkipLink.vue

@@ -0,0 +1,15 @@
+<!-- Synced from templates/_features/site/app/components/site/SkipLink.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+// The first tab stop of every page. Parked above the viewport until focused (not sr-only: Tailwind's not-sr-only
+// would reset its padding on focus).
+const { t } = useI18n('site')
+</script>
+
+<template>
+  <a
+    href="#main"
+    class="fixed start-3 top-3 z-60 -translate-y-24 rounded-md bg-primary px-4 py-3 font-medium text-primary-foreground focus:translate-y-0 print:hidden"
+  >
+    {{ t('skip') }}
+  </a>
+</template>

package/templates/company/app/components/site/ThemeToggle.vue

@@ -0,0 +1,28 @@
+<!-- Synced from templates/_features/site/app/components/site/ThemeToggle.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import { Moon, Sun } from '@lucide/vue'
+
+// Switches between light and dark (@nuxtjs/color-mode; the first visit follows the system). A toggle button: the name
+// stays "Dark mode" and aria-pressed says whether the page is dark now, also when that comes from the system, so a
+// screen reader says "Dark mode, pressed". The icon shows what a click gives (moon in light, sun in dark). The server
+// cannot know the visitor's choice, so the icons switch by CSS and aria-pressed is set only after hydration.
+const { t } = useI18n('site')
+const colorMode = useColorMode()
+const mounted = ref(false)
+onMounted(() => { mounted.value = true })
+const dark = computed(() => colorMode.value === 'dark')
+// Toggling back to the system's own scheme stores `system` again, so the site follows the system from then on.
+function toggle() {
+  const next = dark.value ? 'light' : 'dark'
+  const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  colorMode.preference = next === system ? 'system' : next
+}
+</script>
+
+<template>
+  <Button variant="ghost" size="icon" class="print:hidden" :aria-pressed="mounted ? dark : undefined" @click="toggle">
+    <Moon class="dark:hidden" aria-hidden="true" />
+    <Sun class="hidden dark:block" aria-hidden="true" />
+    <span class="sr-only">{{ t('theme') }}</span>
+  </Button>
+</template>

package/templates/company/app/components/ui/button/Button.vue

@@ -0,0 +1,30 @@
+<!-- Synced from templates/_features/ui/app/components/ui/button/Button.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/templates/company/app/components/ui/button/index.ts

@@ -0,0 +1,44 @@
+// Synced from templates/_features/ui/app/components/ui/button/index.ts by `pnpm templates sync`. Edit the source, not this copy.
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+// shadcn-vue's variant and size names, so shadcn examples and blocks work as written; the look comes from the tokens
+// (tokens.css). Focus is the global :focus-visible ring. Sizes are at least 44px high on touch screens, the touch
+// target of the design rules; `sm` and `icon-sm` are smaller only with a mouse (`pointer-coarse`).
+export const buttonVariants = cva(
+  'inline-flex shrink-0 items-center justify-center gap-2 rounded-md font-medium whitespace-nowrap transition-[color,background-color,border-color] duration-150 ease-out select-none disabled:pointer-events-none disabled:opacity-60 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-5',
+  {
+    variants: {
+      variant: {
+        /** The main action. One per view. On paper an outline, as printers leave out backgrounds. */
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 print:border print:bg-transparent print:text-foreground',
+        /** A second action next to the main one. */
+        outline: 'border border-input text-foreground hover:bg-accent',
+        /** A quiet filled action, for example in a toolbar. */
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        /** An action that deletes or cannot be undone. `text-background` keeps the contrast in both schemes. */
+        destructive: 'bg-destructive text-background hover:bg-destructive/90',
+        /** Icon buttons and quiet actions, for example in the header. */
+        ghost: 'text-foreground hover:bg-accent',
+        /** An action that reads as a link. */
+        link: 'text-primary underline underline-offset-4 hover:decoration-2',
+      },
+      size: {
+        default: 'h-11 px-5 text-small',
+        sm: 'h-9 px-3 text-small pointer-coarse:h-11',
+        lg: 'h-12 px-6 text-body',
+        icon: 'size-11',
+        'icon-sm': 'size-9 pointer-coarse:size-11',
+        'icon-lg': 'size-12',
+      },
+    },
+    compoundVariants: [{ variant: 'link', class: 'h-auto px-0' }],
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/templates/company/app/components/ui/sheet/Sheet.vue

@@ -0,0 +1,16 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/Sheet.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

package/templates/company/app/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,13 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetClose.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose data-slot="sheet-close" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

package/templates/company/app/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,54 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetContent.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { X } from '@lucide/vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import SheetOverlay from './SheetOverlay.vue'
+
+// Trimmed from shadcn-vue: a panel from the inline start or end, so it opens from the right in right-to-left
+// languages. Focus trap, Escape and focus return come from reka-ui. The close button's label is a prop, because
+// this component has no texts of its own.
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: 'start' | 'end'
+  closeLabel?: string
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: 'start',
+  closeLabel: 'Close',
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'side', 'closeLabel')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="cn(
+        'fixed inset-y-0 z-50 flex h-full w-11/12 max-w-sm flex-col gap-6 bg-background shadow-overlay data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=open]:duration-300 data-[state=open]:ease-out',
+        side === 'start' && 'start-0 border-e data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start',
+        side === 'end' && 'end-0 border-s data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end',
+        props.class)"
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute end-3 top-3 inline-flex size-11 items-center justify-center rounded-md text-foreground transition-[color,background-color,border-color] duration-150 hover:bg-accent"
+      >
+        <X class="size-5" aria-hidden="true" />
+        <span class="sr-only">{{ closeLabel }}</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/templates/company/app/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,23 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetDescription.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    v-bind="forwardedProps"
+    :class="cn('text-small text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

package/templates/company/app/components/ui/sheet/SheetOverlay.vue

@@ -0,0 +1,22 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetOverlay.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogOverlayProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogOverlay } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    v-bind="delegatedProps"
+    :class="cn('fixed inset-0 z-50 bg-scrim data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

package/templates/company/app/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,23 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetTitle.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="sheet-title"
+    v-bind="forwardedProps"
+    :class="cn('font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

package/templates/company/app/components/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,13 @@
+<!-- Synced from templates/_features/ui/app/components/ui/sheet/SheetTrigger.vue by `pnpm templates sync`. Edit the source, not this copy. -->
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger data-slot="sheet-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

package/templates/company/app/components/ui/sheet/index.ts

@@ -0,0 +1,7 @@
+// Synced from templates/_features/ui/app/components/ui/sheet/index.ts by `pnpm templates sync`. Edit the source, not this copy.
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'

package/templates/company/app/composables/useBlog.ts

@@ -0,0 +1,103 @@
+// Synced from templates/_features/blog/app/composables/useBlog.ts by `pnpm templates sync`. Edit the source, not this copy.
+import { wordsOf } from '@lupinum/ginko'
+
+/** A post as the blog's lists and pages show it: the entry plus its authors' names and roles from `people`. */
+export interface BlogPost {
+  id: string
+  title: string
+  to: string
+  date: string
+  description?: string
+  image?: GinkoItem<'posts'>['data']['image']
+  tags: string[]
+  /** Reading time in whole minutes, at least 1; 0 when the text's length is unknown. */
+  minutes: number
+  /** `to` is the author's page when `people` has a route. */
+  authors: { id: string, name: string, role?: string, to?: string }[]
+}
+
+/** Words a reader reads in a minute, for the reading time. */
+const WORDS_PER_MINUTE = 200
+
+/**
+ * The visible posts in the current language, newest first, with their authors (entries of `people`, by id). A draft
+ * (`draft: true` in its file) and a post dated after the build day are never among them: they stay out of the build.
+ */
+export function useBlogPosts() {
+  const posts = useGinko('posts')
+  const people = useGinko('people')
+  const locale = useGinkoLocale()
+  return computed<BlogPost[]>(() => {
+    const byId = new Map(people.value.items.map((person) => [person.id, person]))
+    return posts.value.items.map((post) => {
+      // The bundle carries the text's word count next to its reference, so a list needs no text to show the time.
+      const words = wordsOf(post.data.body) ?? 0
+      return {
+        id: post.id,
+        title: post.data.title,
+        to: post.urls?.[locale.value] ?? '',
+        date: post.data.date,
+        description: post.data.description,
+        image: post.data.image,
+        // A tag without letters or digits has no address (empty slug), so it is left out instead of breaking the route.
+        tags: (post.data.tags ?? []).map((row) => row.tag).filter((tag) => tagSlug(tag)),
+        minutes: words ? Math.max(1, Math.round(words / WORDS_PER_MINUTE)) : 0,
+        authors: (post.data.authors ?? []).flatMap((id) => {
+          const person = byId.get(id)
+          return person ? [{ id, name: person.data.name, role: person.data.role, to: person.urls?.[locale.value] }] : []
+        }),
+      }
+    })
+  })
+}
+
+/** The address word of a tag: "Street trees" → "street-trees", "Vögel" → "voegel". Tags are free text per language. */
+export function tagSlug(tag: string) {
+  return tag
+    .replace(/[äöüÄÖÜß]/g, (c) => ({ ä: 'ae', ö: 'oe', ü: 'ue', Ä: 'ae', Ö: 'oe', Ü: 'ue', ß: 'ss' })[c] ?? c)
+    .normalize('NFKD')
+    .replace(/\p{M}/gu, '')
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}]+/gu, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+/** A tag as a visitor reads it: tags are free text and often lowercase in the files ("tips"), so the first letter is upper-cased. */
+export function tagLabel(tag: string) {
+  return tag.charAt(0).toLocaleUpperCase() + tag.slice(1)
+}
+
+/**
+ * The address of a tag's page (news/tags/[tag].vue) in the current language: `/news/tags/water`, or with the words
+ * of `segments` in app/routes.ts `/de/aktuelles/themen/wasser`. The page has no `pages` key, so the address comes from
+ * its route (ginko-i18n names the route of each language `<name>__<code>`).
+ */
+export function useTagPath() {
+  const router = useRouter()
+  const locale = useGinkoLocale()
+  return (tag: string) => router.resolve({ name: `news-tags-tag__${locale.value}`, params: { tag: tagSlug(tag) } }).path
+}
+
+/** Every tag of the visible posts, most used first, with the number of posts and its page. */
+export function useBlogTags() {
+  const posts = useBlogPosts()
+  const tagPath = useTagPath()
+  return computed(() => {
+    const tags = new Map<string, { name: string, slug: string, to: string, count: number }>()
+    for (const post of posts.value) {
+      for (const name of new Set(post.tags)) {
+        const slug = tagSlug(name)
+        const tag = tags.get(slug)
+        if (tag) tag.count++
+        else tags.set(slug, { name: tagLabel(name), slug, to: tagPath(name), count: 1 })
+      }
+    }
+    return [...tags.values()].sort((a, b) => b.count - a.count || a.name.localeCompare(b.name, undefined, { numeric: true }))
+  })
+}
+
+/** The path of the news feed of the current language: `<news page>/rss.xml`. */
+export function useFeedPath() {
+  const path = useGinkoPath()
+  return computed(() => `${path('news')}/rss.xml`)
+}