@kirchdev/duxt 0.3.4-dev-main.41-23ded41 → 0.3.5-dev-main.43-3310f4b

package/app/components/content/PackageManagers.vue

@@ -95,23 +95,21 @@ const active = computed<DuxtPackageManager>({
     stored.value = value;
   }
 });
-const copied = ref(false);
-const notify = useDuxtToast();
-const { t } = useI18n();
+const { copied, copy: copyText } = useDuxtCopy();
+const analytics = useDuxtAnalytics();
 
 async function copy() {
-  try {
-    await navigator.clipboard.writeText(commands.value[active.value]!);
-    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.
-  }
+  if (!(await copyText(commands.value[active.value]))) return;
+
+  // The manager, not the command: which of the four a site's readers reach
+  // for is the question this block can answer, and the command itself is
+  // already on the page for anyone who wants to know what was copied.
+  analytics.track({
+    name: 'copy',
+    kind: 'package-manager',
+    manager: active.value,
+    language: 'bash'
+  });
 }
 </script>
 
@@ -124,53 +122,39 @@ async function copy() {
     v-if="managers.length"
     class="duxt-code my-6 overflow-hidden rounded-lg border bg-card"
   >
-    <div
-      class="flex min-h-11 items-center gap-1 border-b bg-muted/40 px-2 py-1.5"
-    >
-      <button
-        v-for="manager in managers"
-        :key="manager"
-        type="button"
-        class="flex cursor-pointer items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
-        :class="
-          active === manager
-            ? 'bg-background text-foreground shadow-sm'
-            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+    <DuxtCodeToolbar>
+      <DuxtSegmented
+        v-model="active"
+        :options="
+          managers.map((manager) => ({ value: manager, label: manager }))
         "
-        @click="active = manager"
       >
-        <Icon
-          :name="
-            managerIconsLight[manager] ??
-            managerIcons[manager] ??
-            'lucide:terminal'
-          "
-          class="size-3.5"
-          :class="managerIconsLight[manager] ? 'dark:hidden' : ''"
-        />
-        <Icon
-          v-if="managerIconsLight[manager]"
-          :name="managerIcons[manager]"
-          class="hidden size-3.5 dark:block"
-        />
-        {{ manager }}
-      </button>
+        <template #option="{ option }">
+          <Icon
+            :name="
+              managerIconsLight[option.value] ??
+              managerIcons[option.value] ??
+              'lucide:terminal'
+            "
+            class="size-3.5"
+            :class="managerIconsLight[option.value] ? 'dark:hidden' : ''"
+          />
+          <Icon
+            v-if="managerIconsLight[option.value]"
+            :name="managerIcons[option.value]"
+            class="hidden size-3.5 dark:block"
+          />
+          {{ option.label }}
+        </template>
+      </DuxtSegmented>
 
-      <UiButton
-        variant="ghost"
-        size="icon"
-        class="ml-auto size-7"
-        :aria-label="
-          copied ? $t('duxt.code.copied') : $t('duxt.code.copyCommand')
-        "
+      <DuxtCopyButton
+        :copied="copied"
+        :label="$t('duxt.code.copyCommand')"
+        class="ms-auto"
         @click="copy"
-      >
-        <Icon
-          :name="copied ? 'lucide:check' : 'lucide:copy'"
-          class="size-3.5"
-        />
-      </UiButton>
-    </div>
+      />
+    </DuxtCodeToolbar>
 
     <!-- eslint-disable-next-line vue/no-v-html -- Shiki output, built on the
          server from this component's own prop, never from page content. -->

package/app/components/content/PageCards.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content';
+import { navigationCardItems } from '../../utils/navigation-tree';
 // `::page-cards` on a section's index page: one card per child, taken from the
 // navigation, so a new page appears here without the index being edited.
 const props = defineProps<{ path?: string }>();
@@ -11,10 +12,12 @@ const { data: navigation } = await useDuxtNavigation();
 
 const base = computed(() => props.path ?? path.value);
 
-const items = computed(() => {
-  const branch = navigation.value?.find((item) => item.path === base.value);
-  return branch?.children?.filter((child) => child.path !== base.value) ?? [];
-});
+const items = computed(() =>
+  navigationCardItems(
+    navigation.value?.find((item) => item.path === base.value),
+    base.value
+  )
+);
 
 /** `icon` comes from frontmatter, which Content types as unknown. */
 const iconOf = (item: ContentNavigationItem) =>

package/app/components/content/Preview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui';
+import { TabsContent, TabsRoot } from 'reka-ui';
 
 /**
  * `::preview` — a component rendered as the page renders it, with the MDC that
@@ -68,22 +68,7 @@ const codeMeta = computed(() => {
  * the fence's header is hidden: it would say `mdc` directly under a tab that
  * already says `mdc`, and one card does not need naming twice.
  */
-const notify = useDuxtToast();
-const copied = ref(false);
-
-async function copy() {
-  const code = codeMeta.value.code;
-  if (!code) return;
-
-  try {
-    await navigator.clipboard.writeText(code);
-    copied.value = true;
-    notify.success(t('duxt.code.copiedToast'));
-    setTimeout(() => (copied.value = false), 2000);
-  } catch {
-    notify.error(t('duxt.page.copyFailed'));
-  }
-}
+const { copied, copy } = useDuxtCopy();
 
 const tabs = computed(() => [
   { value: 'preview', label: t('duxt.code.preview'), icon: 'lucide:eye' },
@@ -114,41 +99,32 @@ const tabs = computed(() => [
          it: a `tablist` may hold tabs and nothing else, and a button inside one
          is an `aria-required-children` failure — latent here only because it
          renders on the source tab, which is not the tab a page loads on. -->
-    <div
-      class="flex min-h-11 items-center gap-1 border-b bg-muted/40 px-2 py-1.5"
-    >
-      <TabsList
-        class="flex items-center gap-1"
+    <DuxtCodeToolbar>
+      <UiTabsList
+        variant="bare"
         :aria-label="$t('duxt.code.previewTabs') as string"
       >
-        <TabsTrigger
+        <UiTabsTrigger
           v-for="tab in tabs"
           :key="tab.value"
           :value="tab.value"
-          class="flex cursor-pointer items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+          variant="pill"
         >
           <Icon :name="tab.icon" class="size-3.5" />
           {{ tab.label }}
-        </TabsTrigger>
-      </TabsList>
+        </UiTabsTrigger>
+      </UiTabsList>
 
       <!-- Right of the tabs, where every other card on the site puts it. Only
            on the source tab: a copy button beside a rendered example copies
            something the reader cannot see. -->
-      <UiButton
+      <DuxtCopyButton
         v-if="active === 'code' && codeMeta.code"
-        variant="ghost"
-        size="icon"
-        class="ml-auto size-7"
-        :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>
+        :copied="copied"
+        class="ms-auto"
+        @click="copy(codeMeta.code)"
+      />
+    </DuxtCodeToolbar>
 
     <TabsContent value="preview" class="outline-none">
       <!-- The example on the card's own surface, its outer margins taken off: