@kirchdev/duxt 0.3.4 → 0.3.5-dev-main.44-5337cc1

package/README.md

@@ -45,32 +45,38 @@ export default defineAppConfig({
     title: 'Acme',
     sources: [
       { path: 'docs', slug: 'acme' },                          // this repository
-      { repo: 'acme/api', path: 'docs', refs: ['main', 'v2.0.0', 'v1.4.0'] },
+      {
+        repo: 'acme/api',
+        path: 'docs',
+        releases: { select: 'minor' },                         // newest tag per minor line
+        refs: [{ branch: 'main', status: 'upcoming' }],
+      },
     ],
-    sourceOptions: { defaultRef: 'v2.0.0' },
   },
 })
 ```
 
-Two repositories and three refs become five collections, the URL prefixes that serve them, and a version switcher — none of which you write.
+The local folder and every selected release or branch become collections, the URL prefixes that serve them, and a version switcher — none of which you write. Prefer a fixed list? Tags are explicit: `{ tag: 'v2.0.0' }`; a bare string names a branch.
 
 ## ✨ Features
 
 - **📦 Extend, don't scaffold** — a Nuxt layer: theme, pages, components and `app.config` defaults arrive with `extends` and are overridden file by file where you disagree.
-- **🗂️ Sources as a list** — one compact entry per source instead of one Content collection per version × repository.
+- **🗂️ Sources and releases as a list** — one compact entry per source; select every release, or the newest per minor or major line, instead of maintaining one Content collection per version × repository.
 - **🧭 Version switcher and URL scheme** — `/[repo]/[version]/[...slug]`, collapsing cleanly when there is one source and no versions, with a lifecycle per version that decides the banner a reader gets.
 - **🌿 Git-native sourcing** — branches, tags, private repositories and hash-based caching come straight from Content v3's own `repository` support; `'latest'` resolves to the newest semver tag at build time.
-- **🤖 Machine-readable by default** — `llms.txt`, `llms-full.txt` and a real MCP server at `/mcp`, generated from the same collections the pages render from.
+- **📚 Generated reference** — publish OpenAPI documents, Bruno collections and tfplugindocs trees beside authored Markdown; OpenAPI and Bruno can power the built-in request client.
+- **🤖 Machine-readable by default** — `llms.txt`, the default-version corpus in `llms-full.txt`, every page as Markdown and a real MCP server at `/mcp`, all reading the same collections as the site.
 - **🎨 shadcn-vue theme, owned not vendored** — Tailwind 4 with the components in `app/components/ui/`, MDC components in `app/components/content/`.
-- **🔍 Search, TOC, breadcrumb, prev/next** — ⌘K fuzzy search across every source, active-heading tracking, section landing pages, feedback and "Edit this page" links.
+- **🔍 Search, TOC, breadcrumb, prev/next** — ⌘/Ctrl+K fuzzy search across every source, active-heading tracking, section landing pages, feedback and "Edit this page" links.
 - **🧯 A build that fails loudly** — a validator walks the parse cache for URL collisions, empty collections, broken links and missing titles, because every bug this layer actually had was a silent one.
+- **♻️ Cacheable build work** — remote Content downloads and rendered OG images expose stable cache keys and a warm-build report; see [Cache build work](docs/3.guides/12.cache-build-work.md).
 
 <details>
 <summary>Full feature list</summary>
 
 ### Sources & versions
 
-- **🗂️ Sources as a list** — one compact entry per source instead of one Content collection per version × repository. The single unversioned folder is the default and needs no config at all.
+- **🗂️ Sources as a list** — one compact entry per source instead of one Content collection per version × repository. The single unversioned folder is the default and needs no config at all; `releases` discovers all releases or the newest per minor or major line.
 - **🧭 Version switcher and URL scheme** — `/[repo]/[version]/[...slug]`, collapsing cleanly when there is one source and no versions, with a lifecycle per version (`upcoming`, `current`, `maintained`, `deprecated`, `eol`) that decides the banner a reader gets.
 - **🌿 Git-native sourcing** — branches, tags, private repositories and hash-based caching come straight from Content v3's own `repository` support; `'latest'` resolves to the newest semver tag at build time.
 - **🔁 Redirects from frontmatter** — `redirectFrom` on a moved page becomes route rules under every repository, version and locale prefix it is served at.
@@ -78,12 +84,20 @@ Two repositories and three refs become five collections, the URL prefixes that s
 ### Theme & reading experience
 
 - **🎨 shadcn-vue theme, owned not vendored** — Tailwind 4 with the components in `app/components/ui/`, MDC components (`::callout`, `::steps`, `::code-group`, file trees, Mermaid) in `app/components/content/`.
-- **🔍 Search, TOC, breadcrumb, prev/next** — ⌘K fuzzy search across every source, active-heading tracking, section landing pages, feedback and "Edit this page" links.
+- **🔍 Search, TOC, breadcrumb, prev/next** — ⌘/Ctrl+K fuzzy search across every source, active-heading tracking, section landing pages, feedback and "Edit this page" links.
 - **🌍 Seven locales out of the box** — `en-GB`, `en-US`, `de-DE`, `es-ES`, `fr-FR`, `pt-PT` and `pt-BR`; a site picks which of them it serves, and its own strings take a literal, a key or a per-locale record.
+- **🖼️ Responsive images** — Nuxt Image produces responsive sources and a persistent zoom affordance while SVG and GIF pass through unchanged.
+
+### Generated reference
+
+- **📄 OpenAPI** — turn a specification into navigable operation and schema pages, with an optional request client.
+- **🧰 Bruno** — publish a request collection as reference pages and a downloadable redacted collection, with opt-in try-it controls.
+- **🔌 tfplugindocs** — read a Terraform provider's generated documentation as a structured source with provider-aware navigation.
+- **📜 Changelogs** — render a global or version-aligned release history, including the contributors in each release.
 
 ### Machine-readable & SEO
 
-- **🤖 Machine-readable by default** — `llms.txt`, `llms-full.txt` and a real MCP server at `/mcp` (list pages, read a page, search), generated from the same collections the pages render from.
+- **🤖 Machine-readable by default** — `llms.txt`, the default-version corpus in `llms-full.txt`, every page as Markdown and a real MCP server at `/mcp` (`list_versions`, `list_pages`, `search_docs`, `read_page`), all reading the same collections as the site.
 - **📈 SEO and feeds included** — sitemap, robots, generated OG images, and an optional `/rss.xml` over a section you nominate.
 
 ### Layer & build
@@ -91,6 +105,7 @@ Two repositories and three refs become five collections, the URL prefixes that s
 - **📦 Extend, don't scaffold** — a Nuxt layer: theme, pages, components and `app.config` defaults arrive with `extends` and are overridden file by file where you disagree.
 - **🧯 A build that fails loudly** — a validator walks the parse cache for URL collisions, empty collections, broken links and missing titles, because every bug this layer actually had was a silent one.
 - **🔎 DevTools tab** — the resolved sources, collections, prefixes, message catalogues and download cache, in dev, where guessing used to be the only option.
+- **♻️ Cacheable build work** — `duxt-cache-key` identifies remote Content downloads and `duxt-og-cache` identifies reusable rendered cards; the [cache guide](docs/3.guides/12.cache-build-work.md) wires both into CI.
 
 </details>
 

package/app/app.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ConfigProvider } from 'reka-ui';
+
 /**
  * The locale's head tags.
  *
@@ -19,18 +21,11 @@
  */
 const { locale, locales } = useI18n();
 const duxt = useDuxtConfig();
+const direction = useDuxtDirection();
 
 const baseUrl = (useRuntimeConfig().public as { i18n?: { baseUrl?: string } })
   .i18n?.baseUrl;
 
-const direction = computed(() => {
-  const current = locales.value.find(
-    (entry) => (typeof entry === 'string' ? entry : entry.code) === locale.value
-  );
-
-  return (typeof current === 'object' && current?.dir) || 'ltr';
-});
-
 useHead(() => ({
   htmlAttrs: { lang: locale.value, dir: direction.value },
 
@@ -116,7 +111,18 @@ useSchemaOrg([
        navigation; the focus half of the same problem is useDuxtPageFocus. -->
   <NuxtRouteAnnouncer />
 
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <!-- reka-ui reads its direction from HERE and from nowhere else: its
+       `useDirection` injects this context and falls back to `ltr` without ever
+       consulting the document, so `<html dir>` alone leaves every menu, select,
+       tooltip and scroll area laid out left-to-right under a right-to-left
+       page. Renderless — it draws no element and changes no landmark. -->
+  <ConfigProvider :dir="direction">
+    <!-- One provider for every tooltip in the layer, including controls such as
+         DuxtLocale when a consumer renders them outside the stock header. -->
+    <UiTooltipProvider>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UiTooltipProvider>
+  </ConfigProvider>
 </template>

package/app/assets/css/duxt.css

@@ -15,6 +15,38 @@
    sets it with classSuffix: '' so the two agree. */
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * TECHNICAL CONTENT IS LEFT-TO-RIGHT, whichever way the interface runs.
+ *
+ * A right-to-left locale turns the chrome round — the sidebar, the table of
+ * contents, the nesting rules, every `ms-`/`ps-`/`border-s` in this theme. It
+ * must not turn round a shell command, a file path, a URL or a JSON body:
+ * those are syntax, not prose, and the bidirectional algorithm reorders their
+ * punctuation into something that no longer parses. `cd ../src` rendered
+ * right-to-left is not a translation of `cd ../src`.
+ *
+ * `unicode-bidi: isolate` rather than `direction: ltr` alone, because the run
+ * has to be sealed off from the sentence AROUND it as well: an inline `code`
+ * sitting mid-paragraph inherits the paragraph's ordering otherwise, and a
+ * trailing bracket migrates to the wrong end of the word.
+ *
+ * NOT THE `[dir=rtl]` OVERRIDE SHEET THIS PROJECT REJECTED. That idea was a
+ * second, invisible layout system running beside the utility classes — every
+ * component having to remember it exists. This is the opposite: four element
+ * selectors saying what kind of content they hold, changing nothing in a
+ * left-to-right page, and needing no component to know about it at all.
+ *
+ * `:where()` throughout, so the whole thing carries no specificity and a
+ * consumer overrides it with a bare `code { … }`. The `[dir]` guard is the
+ * narrower escape hatch: a block that genuinely holds right-to-left text — a
+ * transliteration, a string literal in Arabic — says so on the element and is
+ * left alone.
+ */
+:where(code, pre, kbd, samp):where(:not([dir])) {
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
 /*
  * The neutral base palette, in oklch. A consumer overrides a token by
  * redefining it in its own stylesheet — no fork of this file needed.
@@ -246,7 +278,7 @@
 }
 
 .typeset :where(.duxt-anchor) {
-  @apply absolute -left-5 font-normal text-muted-foreground opacity-0 transition-opacity;
+  @apply absolute -start-5 font-normal text-muted-foreground opacity-0 transition-opacity;
 }
 
 /* THE MARKER AS THE LINK ITSELF, where the heading already contains one and
@@ -256,7 +288,7 @@
    while the words beside it are the same link and not at all once they are
    somebody else's. */
 .typeset :where(.duxt-anchor-only) {
-  @apply relative left-auto mr-2 inline no-underline opacity-60 transition-opacity;
+  @apply relative start-auto me-2 inline no-underline opacity-60 transition-opacity;
 }
 
 .typeset :where(.duxt-anchor-only:hover, .duxt-anchor-only:focus-visible) {
@@ -354,14 +386,14 @@ details[open] > .duxt-schema-row .duxt-schema-tile .duxt-schema-minus {
    because there the indent is what says it is nested. */
 .typeset :where(.duxt-release > ul) {
   margin: 0;
-  padding-left: 0;
+  padding-inline-start: 0;
   list-style: none;
 }
 
 .typeset :where(.duxt-release > ul > li) {
   position: relative;
   margin: 0;
-  padding-left: 1.05rem;
+  padding-inline-start: 1.05rem;
   line-height: 1.55;
 }
 
@@ -373,7 +405,7 @@ details[open] > .duxt-schema-row .duxt-schema-tile .duxt-schema-minus {
   content: '';
   position: absolute;
   top: 0.6em;
-  left: 0;
+  inset-inline-start: 0;
   height: 0.3125rem;
   width: 0.3125rem;
   border-radius: 999px;
@@ -524,7 +556,16 @@ pre.shiki,
 
 /* Line numbers, opt-in per fence with ```ts line-numbers.
    A CSS counter rather than markup: the numbers are decoration, and a reader
-   copying the block must not get them in the clipboard. */
+   copying the block must not get them in the clipboard.
+
+   PHYSICAL ON PURPOSE, and the only two declarations in this file that are.
+   `margin-right` and `text-align: right` sit inside `pre`/`code`, which the
+   `unicode-bidi: isolate` rule at the top of this file pins left-to-right —
+   a shell command is syntax, not prose. A gutter that followed the reader
+   would land on the opposite side of the run it numbers, and the digits
+   right-align towards that run for the same reason they do in an editor.
+   Declared with this reason in `tests/direction-utilities.test.ts`; every
+   other side-naming rule here is logical. */
 .duxt-line-numbers code {
   counter-reset: duxt-line;
 }

package/app/components/DuxtAnnouncements.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+/**
+ * The site's own notices — a release, a migration window, an outage.
+ *
+ * NOT the version and translation banners beside it: those describe the page a
+ * reader is on and the layer decides when to draw them. This one says nothing
+ * until a consumer writes `duxt.announcements`, and then says exactly what they
+ * wrote.
+ *
+ * CLIENT-ONLY, and it has to be. Two of the three things this draws depend on
+ * the reader rather than on the build: whether they have already closed the
+ * notice, which lives in their browser, and whether the notice is inside its
+ * window, which is their clock. Every page here is prerendered, so a banner
+ * rendered at build time would carry a decision taken hours or weeks earlier —
+ * an announcement that expired overnight would still be in the HTML, and one a
+ * reader dismissed would flash back on every navigation before the script
+ * caught up.
+ */
+const props = defineProps<{ placement: DuxtAnnouncementPlacement }>();
+
+const { visible, dismiss } = useDuxtAnnouncements(props.placement);
+const localeLink = useDuxtLink();
+
+/**
+ * The two full-width placements belong to the header; the third to the page.
+ *
+ * `above-header` and `below-header` run to the browser edge and align their
+ * contents with the header above or below them, so the sentence starts where
+ * the site's name does. `above-content` sits in the document column with the
+ * version and translation banners, and takes their shape — a reader learns what
+ * a bordered notice over a page means once.
+ */
+const edge = computed(() => props.placement !== 'above-content');
+
+const strip = useTemplateRef<HTMLElement>('strip');
+
+/**
+ * Dismiss, and then put focus somewhere a keyboard reader can carry on from.
+ *
+ * The button that was just activated leaves the DOM with the row it sat in, and
+ * a focused element that disappears drops focus onto `<body>` — which sends a
+ * screen reader back to the top of the document, several notices above where
+ * the reader actually was. So focus moves to whatever is left: the strip itself
+ * while it still holds an announcement, and the page's own main region once the
+ * last one is closed.
+ */
+async function close(key: string) {
+  dismiss(key);
+  await nextTick();
+  (strip.value ?? document.getElementById('duxt-main'))?.focus();
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <!-- `role="status"` because the strip ARRIVES: it is drawn after hydration,
+         so a reader already reading the page is told once, politely, rather
+         than having a banner appear silently above them. -->
+    <div
+      v-if="visible.length"
+      ref="strip"
+      role="status"
+      tabindex="-1"
+      class="outline-none"
+      :class="
+        edge
+          ? 'w-full divide-y border-b bg-muted/40'
+          : 'mb-6 divide-y rounded-md border bg-muted/30'
+      "
+    >
+      <div
+        v-for="entry in visible"
+        :key="entry.key"
+        :class="
+          edge
+            ? 'mx-auto flex max-w-[90rem] items-start gap-3 px-4 py-2.5 lg:px-8'
+            : 'flex items-start gap-3 px-3 py-2.5'
+        "
+      >
+        <Icon
+          name="lucide:megaphone"
+          class="mt-0.5 size-4 shrink-0 text-muted-foreground"
+        />
+
+        <!-- `min-w-0` and `flex-wrap`, because the sentence is the part that
+             grows: a German or Portuguese translation of an English notice runs
+             half as long again, and on a phone it has to wrap under itself
+             rather than push the close button off the row. -->
+        <p
+          class="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2 gap-y-1 text-sm text-foreground text-pretty"
+        >
+          <span>{{ entry.text }}</span>
+
+          <NuxtLink
+            v-if="entry.link?.to"
+            :to="localeLink(entry.link.to)"
+            :target="entry.link.external ? '_blank' : undefined"
+            :rel="entry.link.external ? 'noopener' : undefined"
+            class="font-medium underline underline-offset-4"
+          >
+            {{ entry.link.label }}
+          </NuxtLink>
+        </p>
+
+        <UiButton
+          variant="ghost"
+          size="icon"
+          class="-my-1 -me-2 size-8 shrink-0 text-muted-foreground hover:text-foreground"
+          :aria-label="$t('duxt.announcement.dismiss')"
+          @click="close(entry.key)"
+        >
+          <Icon name="lucide:x" class="size-4" />
+        </UiButton>
+      </div>
+    </div>
+  </ClientOnly>
+</template>

package/app/components/DuxtBrunoEntries.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { DuxtBrunoEntry } from '../../bruno-model';
+
+/**
+ * A dictionary block — headers, query parameters, a form body — as a table.
+ *
+ * Two columns and no third, because a Bruno collection has no third to give: it
+ * carries a name and a value, and no type, no description and no statement of
+ * whether the field is required. A table with an empty "Description" column
+ * would be this type pretending to be `openapi`, which is the pretence the
+ * issue behind it rejected conversion for.
+ *
+ * TWO THINGS ARE MARKED. A `~` entry is switched off in the collection and is
+ * shown struck through rather than dropped — a reference that hid it would
+ * describe a request the file does not make. A withheld value shows the badge
+ * instead of the value: the name is the useful half (the endpoint wants an
+ * `Authorization` header) and the value was a live credential.
+ */
+defineProps<{ entries?: DuxtBrunoEntry[] }>();
+</script>
+
+<template>
+  <table v-if="entries?.length" class="w-full text-start text-sm">
+    <thead>
+      <tr class="border-b border-border/60">
+        <th scope="col" class="py-2 pe-4 font-medium">
+          {{ $t('duxt.bruno.name') }}
+        </th>
+        <th scope="col" class="py-2 font-medium">
+          {{ $t('duxt.bruno.value') }}
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr
+        v-for="entry in entries"
+        :key="`${entry.name}-${entry.value}`"
+        class="border-b border-border/40 last:border-b-0"
+      >
+        <td class="py-2 pe-4 align-top font-mono text-xs break-all">
+          <span :class="entry.disabled && 'text-muted-foreground line-through'">
+            {{ entry.name }}
+          </span>
+        </td>
+
+        <td class="py-2 align-top font-mono text-xs break-all">
+          <UiBadge v-if="entry.redacted" variant="secondary">
+            {{ $t('duxt.bruno.withheld') }}
+          </UiBadge>
+
+          <span
+            v-else
+            :class="entry.disabled && 'text-muted-foreground line-through'"
+          >
+            {{ entry.value }}
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

package/app/components/DuxtCodeBlock.vue

@@ -64,32 +64,31 @@ const icon = computed(() =>
 
 const label = computed(() => props.filename ?? props.language);
 
-const copied = ref(false);
-const notify = useDuxtToast();
-const { t } = useI18n();
 const root = useTemplateRef<HTMLElement>('root');
+const analytics = useDuxtAnalytics();
+const { copied, copy: copyText } = useDuxtCopy();
 
 async function copy() {
   const text =
     props.code ?? root.value?.querySelector('code')?.textContent ?? '';
 
-  try {
-    await navigator.clipboard.writeText(text);
-    copied.value = true;
-    notify.success(t('duxt.code.copiedToast'));
-    setTimeout(() => (copied.value = false), 2000);
-  } catch {
-    notify.error(
-      'Could not copy',
-      'The clipboard is unavailable in this context.'
-    );
-    // Clipboard is unavailable over plain HTTP; a failed copy stays silent.
+  // After the write, so a copy the clipboard refused is not reported as one —
+  // and the language only: the copied TEXT never travels.
+  if (await copyText(text)) {
+    analytics.track({ name: 'copy', kind: 'code', language: props.language });
   }
 }
 </script>
 
 <template>
+  <!-- `dir="ltr"` on the block, not on the `pre` alone: the header carries a
+       file name and the floating button sits over the code, and all three are
+       one technical surface. Inside the island the logical utilities below
+       resolve left-to-right, so they stay logical rather than turning physical
+       — the direction is declared once, in one place, instead of being spelled
+       out again in every class. -->
   <div
+    dir="ltr"
     class="duxt-code group relative my-6 overflow-hidden rounded-lg border bg-card"
   >
     <div
@@ -99,31 +98,16 @@ async function copy() {
       <Icon :name="icon" class="size-4 shrink-0" />
       <span class="truncate font-mono">{{ label }}</span>
 
-      <UiButton
-        variant="ghost"
-        size="icon"
-        class="ml-auto size-7 hover:bg-accent hover:text-foreground"
-        :aria-label="copied ? $t('duxt.code.copied') : $t('duxt.code.copy')"
-        @click="copy"
-      >
-        <Icon
-          :name="copied ? 'lucide:check' : 'lucide:copy'"
-          class="size-3.5"
-        />
-      </UiButton>
+      <DuxtCopyButton :copied="copied" class="ms-auto" @click="copy" />
     </div>
 
-    <UiButton
+    <DuxtCopyButton
       v-else-if="header"
-      variant="ghost"
-      size="icon"
-      class="duxt-code-copy absolute top-2 right-2 size-7 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-accent focus-visible:opacity-100"
+      :copied="copied"
+      class="duxt-code-copy absolute top-2 end-2 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
       :class="{ 'opacity-100': copied }"
-      :aria-label="copied ? $t('duxt.code.copied') : $t('duxt.code.copy')"
       @click="copy"
-    >
-      <Icon :name="copied ? 'lucide:check' : 'lucide:copy'" class="size-3.5" />
-    </UiButton>
+    />
 
     <div ref="root">
       <slot v-if="hasBody" />

package/app/components/DuxtCodeToolbar.vue

@@ -0,0 +1,14 @@
+<template>
+  <!-- The bar across the top of a code card: tabs or pills on one side, the
+       copy button on the other. Four cards draw it — the code group, the
+       preview, the package managers and the request samples — and a reader
+       learns what that bar does once only if it is the same bar each time.
+
+       A plain box, never the tablist itself: `role="tablist"` may only contain
+       tabs, and the copy button beside them is not one. -->
+  <div
+    class="flex min-h-11 items-center gap-1 border-b bg-muted/40 px-2 py-1.5"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/DuxtCopyButton.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@duxt/lib/utils';
+
+/**
+ * The icon button beside a block of code: a copy mark that turns into a check.
+ *
+ * Its state comes from `useDuxtCopy` in the component that owns the text —
+ * this only draws it, because what gets copied is the owner's to know (a fence's
+ * source, the tab that is showing, the manager that is picked).
+ */
+const props = defineProps<{
+  copied: boolean;
+  /** The accessible name before copying. Defaults to "Copy code". */
+  label?: string;
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <UiButton
+    variant="ghost"
+    size="icon"
+    :class="
+      cn('size-7 shrink-0 hover:bg-accent hover:text-foreground', props.class)
+    "
+    :aria-label="
+      copied ? $t('duxt.code.copied') : (label ?? $t('duxt.code.copy'))
+    "
+  >
+    <Icon :name="copied ? 'lucide:check' : 'lucide:copy'" class="size-3.5" />
+  </UiButton>
+</template>

package/app/components/DuxtCopyPage.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { stripFrontmatter } from '../../frontmatter';
+
 /**
  * The top action: hand this page to a model, or read its source.
  *
@@ -20,14 +22,19 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
-const notify = useDuxtToast();
 const localeLink = useDuxtLink();
+const duxt = useDuxtConfig();
 
-const copied = ref(false);
+const { copied, copy: copyText } = useDuxtCopy({
+  // The button's own label turns into "Copied"; a toast would say it twice.
+  toast: false,
+  failureKey: 'duxt.page.copyFailed'
+});
 
 const markdownPath = computed(
   () => `${localeLink(props.path) ?? props.path}.md`
 );
+const models = computed(() => duxt.copy?.models ?? []);
 
 /** The prompt both models get: fetch the source, then answer about it. */
 function prompt() {
@@ -36,21 +43,10 @@ function prompt() {
   return t('duxt.page.copy.prompt', { url, title: props.title ?? '' });
 }
 
-async function copy() {
-  const raw = props.rawbody;
-  if (!raw) return;
-
+function copy() {
   // Without the frontmatter: what is copied should read as the page, not as
   // the file. Same call `llms-full.txt` makes over the same field.
-  const text = raw.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n?/, '');
-
-  try {
-    await navigator.clipboard.writeText(text);
-    copied.value = true;
-    setTimeout(() => (copied.value = false), 2000);
-  } catch {
-    notify.error(t('duxt.page.copyFailed'));
-  }
+  return copyText(props.rawbody && stripFrontmatter(props.rawbody));
 }
 
 function open(base: string) {
@@ -63,11 +59,18 @@ function open(base: string) {
 </script>
 
 <template>
-  <div v-if="rawbody" class="flex shrink-0 items-stretch">
+  <!-- `data-duxt-copy-page` is how `check:overflow` finds this control on a
+       built page. It is not styling and not behaviour: matching on the utility
+       classes instead would make any restyle silently stop checking anything,
+       and matching on the button's own words would tie a gate to a translation
+       string. `shrink-0` is deliberate — this holds a dropdown trigger and a
+       link, and a squeezed control is worse than a wrapped one — so the row
+       that carries it is the thing that has to give (see `[...slug].vue`). -->
+  <div v-if="rawbody" data-duxt-copy-page class="flex shrink-0 items-stretch">
     <UiButton
       variant="outline"
       size="sm"
-      class="gap-1.5 rounded-r-none border-r-0"
+      class="gap-1.5 rounded-e-none border-e-0"
       @click="copy"
     >
       <Icon :name="copied ? 'lucide:check' : 'lucide:copy'" class="size-3.5" />
@@ -79,7 +82,7 @@ function open(base: string) {
         <UiButton
           variant="outline"
           size="sm"
-          class="rounded-l-none px-1.5"
+          class="rounded-s-none px-1.5"
           :aria-label="$t('duxt.page.copy.more')"
         >
           <Icon name="lucide:chevron-down" class="size-3.5 opacity-60" />
@@ -94,22 +97,21 @@ function open(base: string) {
           </a>
         </UiDropdownMenuItem>
 
-        <UiDropdownMenuSeparator />
-
-        <UiDropdownMenuItem
-          class="gap-2"
-          @select="open('https://chatgpt.com/?q=')"
-        >
-          <Icon name="simple-icons:openai" class="size-4" />
-          {{ $t('duxt.page.copy.chatgpt') }}
-        </UiDropdownMenuItem>
+        <!--
+          Only when there is a second group to divide: `copy.models` is a
+          consumer-owned list, and an empty one would otherwise leave a rule
+          drawn under the last item with nothing beneath it.
+        -->
+        <UiDropdownMenuSeparator v-if="models.length" />
 
         <UiDropdownMenuItem
+          v-for="model in models"
+          :key="model.url"
           class="gap-2"
-          @select="open('https://claude.ai/new?q=')"
+          @select="open(model.url)"
         >
-          <Icon name="simple-icons:claude" class="size-4" />
-          {{ $t('duxt.page.copy.claude') }}
+          <Icon :name="model.icon" class="size-4" />
+          {{ model.label }}
         </UiDropdownMenuItem>
       </UiDropdownMenuContent>
     </UiDropdownMenu>