@kirchdev/duxt 0.1.0

package/app/components/DuxtCodeBlock.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /** Raw source, used for the copy button and as the body when no slot is given. */
+    code?: string;
+    language?: string;
+    filename?: string;
+    /**
+     * The block's own controls — the header bar AND the copy button.
+     *
+     * `false` says a CONTAINER draws them instead: `CodeGroup` puts the file
+     * names in a tab bar and the copy button beside them, the way
+     * `PackageManagers` does, and a block that kept its own would print the
+     * language under the file name and offer a second button for the same
+     * text.
+     *
+     * Both together, deliberately. Switching off only the bar left the copy
+     * button in its floating position, where it appears on hover — so a group
+     * of fences lost the visible control the same block outside a group has.
+     */
+    header?: boolean;
+  }>(),
+  { header: true }
+);
+
+const slots = useSlots();
+
+// Content hands ProsePre the highlighted markup in the slot and the raw source
+// in `code`. Rendering `code` when a slot exists throws the highlighting away —
+// which is exactly what happened, and looked like Shiki being switched off.
+const hasBody = computed(() => Boolean(slots.default));
+
+/**
+ * The other half of that: a block with NO slot never passed through Content at
+ * all — it is code this site derived at runtime, an example body off a schema
+ * or a response the client just received — and it used to render as flat text
+ * beside fences that were coloured, which reads as the highlighter being off
+ * for that one box. Highlighted here instead, with the same themes.
+ *
+ * Skipped where there is a slot, because Content already did it, and where the
+ * language is not one this site generates — see `duxtCodeLang`.
+ */
+const { data: highlighted } = await useAsyncData(
+  () => `duxt-code-${props.language ?? 'text'}-${props.code ?? ''}`,
+  () => {
+    const lang = duxtCodeLang(props.language);
+
+    return !hasBody.value && props.code && lang
+      ? highlightCode(props.code, lang)
+      : // `null`, not `undefined`: Nuxt reads a handler that resolves to
+        // nothing as one that failed to return, warns, and repeats the request
+        // on the client. Here nothing to highlight is a real answer.
+        Promise.resolve(null);
+  },
+  { watch: [() => props.code, () => props.language] }
+);
+
+const icon = computed(() =>
+  fileIcon(
+    props.filename ?? props.language,
+    props.language ? 'lucide:terminal' : 'lucide:file'
+  )
+);
+
+const label = computed(() => props.filename ?? props.language);
+
+const copied = ref(false);
+const notify = useDuxtToast();
+const { t } = useI18n();
+const root = useTemplateRef<HTMLElement>('root');
+
+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.
+  }
+}
+</script>
+
+<template>
+  <div
+    class="duxt-code group relative my-6 overflow-hidden rounded-lg border bg-card"
+  >
+    <div
+      v-if="header && label"
+      class="duxt-code-header flex min-h-11 items-center gap-2 border-b bg-muted/40 px-3 py-2 text-xs text-muted-foreground"
+    >
+      <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>
+    </div>
+
+    <UiButton
+      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"
+      :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" />
+      <!-- eslint-disable-next-line vue/no-v-html -- Shiki's own output, from
+           this site's own string; nothing a reader typed reaches it. -->
+      <div
+        v-else-if="highlighted"
+        class="duxt-code-body"
+        v-html="highlighted"
+      />
+      <pre
+        v-else
+        class="overflow-x-auto p-4 text-sm"
+      ><code>{{ code }}</code></pre>
+    </div>
+  </div>
+</template>

package/app/components/DuxtCopyPage.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+/**
+ * The top action: hand this page to a model, or read its source.
+ *
+ * A split control rather than four buttons — the common case is "copy it", and
+ * the other three are the same intention through a different door. What all of
+ * them hand over is the MARKDOWN, not the rendered page: a model given HTML has
+ * to undo a layout to find a heading, and one given the source reads what the
+ * author wrote.
+ *
+ * The external links need an absolute URL, and the origin is read from the
+ * browser at click time rather than from config. That is not laziness — it is
+ * the only value that is certainly right, including on a preview deployment
+ * whose domain nobody wrote down.
+ */
+const props = defineProps<{
+  path: string;
+  title?: string;
+  rawbody?: string;
+}>();
+
+const { t } = useI18n();
+const notify = useDuxtToast();
+const localeLink = useDuxtLink();
+
+const copied = ref(false);
+
+const markdownPath = computed(
+  () => `${localeLink(props.path) ?? props.path}.md`
+);
+
+/** The prompt both models get: fetch the source, then answer about it. */
+function prompt() {
+  const url = `${window.location.origin}${markdownPath.value}`;
+
+  return t('duxt.page.copy.prompt', { url, title: props.title ?? '' });
+}
+
+async function copy() {
+  const raw = props.rawbody;
+  if (!raw) return;
+
+  // 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'));
+  }
+}
+
+function open(base: string) {
+  window.open(
+    `${base}${encodeURIComponent(prompt())}`,
+    '_blank',
+    'noopener,noreferrer'
+  );
+}
+</script>
+
+<template>
+  <div v-if="rawbody" class="flex shrink-0 items-stretch">
+    <UiButton
+      variant="outline"
+      size="sm"
+      class="gap-1.5 rounded-r-none border-r-0"
+      @click="copy"
+    >
+      <Icon :name="copied ? 'lucide:check' : 'lucide:copy'" class="size-3.5" />
+      {{ copied ? $t('duxt.code.copied') : $t('duxt.page.copy.label') }}
+    </UiButton>
+
+    <UiDropdownMenu>
+      <UiDropdownMenuTrigger as-child>
+        <UiButton
+          variant="outline"
+          size="sm"
+          class="rounded-l-none px-1.5"
+          :aria-label="$t('duxt.page.copy.more')"
+        >
+          <Icon name="lucide:chevron-down" class="size-3.5 opacity-60" />
+        </UiButton>
+      </UiDropdownMenuTrigger>
+
+      <UiDropdownMenuContent align="end" class="w-56">
+        <UiDropdownMenuItem as-child>
+          <a :href="markdownPath" target="_blank" rel="noopener" class="gap-2">
+            <Icon name="lucide:file-code-2" class="size-4" />
+            {{ $t('duxt.page.copy.view') }}
+          </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>
+
+        <UiDropdownMenuItem
+          class="gap-2"
+          @select="open('https://claude.ai/new?q=')"
+        >
+          <Icon name="simple-icons:claude" class="size-4" />
+          {{ $t('duxt.page.copy.claude') }}
+        </UiDropdownMenuItem>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>
+  </div>
+</template>

package/app/components/DuxtFooter.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const duxt = useDuxtConfig();
+const localeLink = useDuxtLink();
+
+/**
+ * The layer's own line, in the middle.
+ *
+ * Version and repository come from duxt's `package.json`, read at build time —
+ * release-please bumps that file, and a second copy of the number is a copy
+ * that is wrong from the first release onwards.
+ *
+ * Switchable, because a layer that cannot be told to stop naming itself is
+ * adware. `poweredBy: false` drops it.
+ */
+const poweredBy = computed(() =>
+  duxt.poweredBy !== false && duxt.layerVersion
+    ? { version: duxt.layerVersion, to: duxt.layerRepository }
+    : undefined
+);
+</script>
+
+<template>
+  <!-- One line, and only what a page footer owes: whose site this is, and the
+       links the law asks for. Navigation lives in the header and the sidebar,
+       so repeating it down here buys nothing. -->
+  <footer class="mt-16 border-t">
+    <div
+      class="mx-auto flex max-w-[90rem] flex-col gap-3 px-4 py-5 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between lg:px-8"
+    >
+      <div
+        class="flex flex-wrap items-center gap-x-4 gap-y-1 sm:flex-1 sm:basis-0"
+      >
+        <NuxtLink
+          :to="localeLink('/')"
+          class="inline-flex items-center gap-2 font-medium text-foreground"
+        >
+          <DuxtBrand size="sm" />
+        </NuxtLink>
+        <span v-if="duxt.footer?.copyright">{{ duxt.footer.copyright }}</span>
+      </div>
+
+      <!-- The whole phrase is the link, not just the name. It is a bigger
+           target for one destination, and in a screen reader's link list
+           "Powered by duxt v0.0.0" reads as a sentence where a bare "Powered
+           by" beside it would read as nothing at all. -->
+      <p v-if="poweredBy" class="sm:flex-1 sm:basis-0 sm:text-center">
+        <a
+          :href="poweredBy.to"
+          target="_blank"
+          rel="noopener"
+          class="transition-colors hover:text-foreground"
+        >
+          {{ $t('duxt.footer.poweredBy') }}
+          <!-- A real non-breaking space, not a flex gap and not markup
+               whitespace. Vue's `condense` deletes a whitespace-only text node
+               that contains a newline, which is what left "duxtv0.0.0"; a CSS
+               gap puts the space back on screen and nowhere else, so the name
+               still copies and reads aloud as one word. Non-breaking because a
+               version belongs to the name it follows. -->
+          <span class="font-medium text-foreground">duxt</span>&nbsp;<span
+            class="font-mono"
+            >v{{ poweredBy.version }}</span
+          >
+        </a>
+      </p>
+
+      <!-- A consumer's legal links belong to the consumer: the layer offers the
+           row and ships nothing in it, because an imprint is never the
+           template's to claim. -->
+      <div
+        class="flex flex-wrap items-center gap-x-4 gap-y-1 sm:flex-1 sm:basis-0 sm:justify-end"
+      >
+        <NuxtLink
+          v-for="link in duxt.footer?.legal ?? []"
+          :key="link.to"
+          :to="localeLink(link.to)"
+          :target="link.external ? '_blank' : undefined"
+          :rel="link.external ? 'noopener' : undefined"
+          class="transition-colors hover:text-foreground"
+        >
+          {{ link.label }}
+        </NuxtLink>
+      </div>
+    </div>
+  </footer>
+</template>