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

package/app/components/DuxtOpenApiSchema.vue

@@ -35,9 +35,12 @@ const props = withDefaults(
 );
 
 const DEPTH = 8;
+const duxt = useDuxtConfig();
 
 const schema = computed(() => props.schema);
-const deep = computed(() => props.depth >= DEPTH);
+const deep = computed(
+  () => props.depth >= (duxt.openapi?.schemaDepth ?? DEPTH)
+);
 
 const type = computed(() => openApiTypeLabel(schema.value));
 const constraints = computed(() => openApiConstraints(schema.value));
@@ -224,7 +227,7 @@ const open = computed(() => size.value < MANY);
              said. -->
         <span
           v-if="collapsible && size >= MANY"
-          class="ml-auto rounded-md bg-muted px-1.5 font-mono text-[0.6875rem] text-muted-foreground tabular-nums"
+          class="ms-auto rounded-md bg-muted px-1.5 font-mono text-[0.6875rem] text-muted-foreground tabular-nums"
           :aria-label="$t('duxt.openapi.fields', { count: size })"
         >
           {{ size }}
@@ -268,7 +271,7 @@ const open = computed(() => size.value < MANY);
     <template v-else-if="!schema?.circular">
       <ul
         v-if="schema?.properties?.length"
-        class="mt-3 space-y-3 border-l pl-4"
+        class="mt-3 space-y-3 border-s ps-4"
       >
         <li v-for="property in schema.properties" :key="property.name">
           <DuxtOpenApiSchema
@@ -281,7 +284,7 @@ const open = computed(() => size.value < MANY);
         </li>
       </ul>
 
-      <div v-if="items" class="mt-3 border-l pl-4">
+      <div v-if="items" class="mt-3 border-s ps-4">
         <p class="mb-1 text-xs font-medium text-muted-foreground">
           {{ $t('duxt.openapi.items') }}
         </p>
@@ -292,7 +295,7 @@ const open = computed(() => size.value < MANY);
         />
       </div>
 
-      <div v-if="additional" class="mt-3 border-l pl-4">
+      <div v-if="additional" class="mt-3 border-s ps-4">
         <p class="mb-1 text-xs font-medium text-muted-foreground">
           {{ $t('duxt.openapi.additionalProperties') }}
         </p>
@@ -313,7 +316,7 @@ const open = computed(() => size.value < MANY);
       <div
         v-for="[kind, list] in branches"
         :key="kind"
-        class="mt-3 border-l pl-4"
+        class="mt-3 border-s ps-4"
       >
         <p class="mb-1 text-xs font-medium text-muted-foreground">
           {{ $t(`duxt.openapi.composition.${kind}`) }}
@@ -329,7 +332,7 @@ const open = computed(() => size.value < MANY);
         </ul>
       </div>
 
-      <div v-if="schema?.not" class="mt-3 border-l pl-4">
+      <div v-if="schema?.not" class="mt-3 border-s ps-4">
         <p class="mb-1 text-xs font-medium text-muted-foreground">
           {{ $t('duxt.openapi.composition.not') }}
         </p>

package/app/components/DuxtPageFeedback.vue

@@ -11,9 +11,15 @@
  * A consumer that wants the answer kept listens for it:
  *
  *     <DuxtPageFeedback @feedback="(helpful) => track(helpful)" />
+ *
+ * A site that has wired `duxt.analytics.track` gets the same answer as a
+ * `feedback` event without wrapping anything — and the event above stays, so
+ * this component is usable either way and neither route needs the other.
  */
 const emit = defineEmits<{ feedback: [helpful: boolean] }>();
 
+const analytics = useDuxtAnalytics();
+
 const answered = ref<boolean | undefined>();
 
 // A new page is a new question. Without this the answer given on one page
@@ -26,6 +32,7 @@ watch(
 
 function answer(helpful: boolean) {
   answered.value = helpful;
+  analytics.track({ name: 'feedback', helpful });
   emit('feedback', helpful);
 }
 </script>

package/app/components/DuxtPageInfo.vue

@@ -44,6 +44,7 @@ const page = computed(() => props.page);
 
 const { source } = useDuxtCollection();
 const { locale, t } = useI18n();
+const duxt = useDuxtConfig();
 
 const file = computed(() => {
   // A GENERATED SECTION has no file per page: every page in it was split out of
@@ -80,7 +81,9 @@ const link = computed(() =>
  * the browser, which is a hydration mismatch as well as a wrong date. The
  * commit date IS a moment and is left alone.
  */
-const released = computed(() => changelogDate(page.value?.date, locale.value));
+const released = computed(() =>
+  formatDate(page.value?.date, locale.value, { calendarDay: true })
+);
 
 const updated = computed(() => {
   // The page's own date wins. Both lines would be true and only one is useful:
@@ -89,18 +92,18 @@ const updated = computed(() => {
   // one's and at worst years off.
   if (page.value?.date) return undefined;
 
-  const value = page.value?.lastUpdated;
-  if (!value) return undefined;
-
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return undefined;
-
-  return new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium' }).format(
-    date
-  );
+  return formatDate(page.value?.lastUpdated, locale.value);
 });
 
 const contributors = computed(() => page.value?.contributors ?? []);
+// `DuxtText` also permits a record of strings, so the resolved-config mapped
+// type narrows this all-optional object too far. It remains an object at
+// runtime; only its template is configurable.
+const contributorConfig = duxt.contributors as unknown as
+  | { avatarUrl?: string }
+  | undefined;
+const avatar = (username: string) =>
+  contributorAvatar(contributorConfig?.avatarUrl, username);
 
 /**
  * What this page lets a reader DO with where it came from.
@@ -171,8 +174,8 @@ const notes = computed(() => {
           class="flex items-center gap-1.5"
         >
           <img
-            v-if="person.username"
-            :src="`https://github.com/${person.username}.png?size=40`"
+            v-if="person.username && avatar(person.username)"
+            :src="avatar(person.username)"
             alt=""
             width="18"
             height="18"

package/app/components/DuxtPageNav.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ContentNavigationItem } from '@nuxt/content';
+import { flattenedNavigationPages } from '../utils/navigation-tree';
 // Previous and next within the current section only. Content's own
 // surroundings query walks the whole collection in one flat order, so the last
 // page of one section would offer a "next" that lands in another — crossing a
@@ -12,19 +12,7 @@ const { items } = useDuxtSection(navigation);
 const localeLink = useDuxtLink();
 
 /** The section's pages in reading order, groups flattened into their children. */
-const pages = computed(() => {
-  const flat: ContentNavigationItem[] = [];
-
-  const walk = (entries: ContentNavigationItem[]) => {
-    for (const entry of entries) {
-      if (entry.page !== false) flat.push(entry);
-      if (entry.children?.length) walk(entry.children);
-    }
-  };
-
-  walk(items.value);
-  return flat;
-});
+const pages = computed(() => flattenedNavigationPages(items.value));
 
 const index = computed(() =>
   pages.value.findIndex((page) => page.path === props.path)
@@ -44,17 +32,29 @@ const next = computed(() =>
  * chance to disagree with what the links say.
  */
 const router = useRouter();
+const { hint, on } = useDuxtShortcuts();
 
-onDuxtShortcut(
-  (event) =>
-    (event.key === '[' || event.key === ']') &&
-    !event.metaKey &&
-    !event.ctrlKey,
-  (event) => {
-    const target = event.key === '[' ? previous.value : next.value;
-    if (target?.path) void router.push(localeLink(target.path)!);
-  }
-);
+/**
+ * And they say so, on the two links they move between.
+ *
+ * These were the least findable keys in the theme: the search button at least
+ * carried `⌘K`, while `[` and `]` appeared nowhere a reader would look — only
+ * in a sheet they had to already know `?` to open. The cap goes on the link that
+ * does the same thing, which is where a reader is already looking when they
+ * want it.
+ *
+ * Nothing is drawn where the policy unbound the keys, and nothing is read out:
+ * `aria-hidden` keeps the link's accessible name the page it leads to, since
+ * "Next page ] Collections" is a worse thing to hear than the title, and the
+ * sheet announces the binding properly.
+ */
+const previousHint = computed(() => hint('previous'));
+const nextHint = computed(() => hint('next'));
+
+on(['previous', 'next'], (action) => {
+  const target = action === 'previous' ? previous.value : next.value;
+  if (target?.path) void router.push(localeLink(target.path)!);
+});
 </script>
 
 <template>
@@ -69,8 +69,15 @@ onDuxtShortcut(
       class="flex flex-col gap-1 rounded-lg border p-4 transition-colors hover:bg-accent"
     >
       <span class="flex items-center gap-1 text-xs text-muted-foreground">
-        <Icon name="lucide:arrow-left" class="size-3.5" />
+        <Icon name="lucide:arrow-left" class="size-3.5 rtl:-scale-x-100" />
         {{ $t('duxt.nav.previous') }}
+        <kbd
+          v-if="previousHint"
+          aria-hidden="true"
+          class="ms-auto rounded border bg-muted px-1.5 font-mono text-[10px]"
+        >
+          {{ previousHint }}
+        </kbd>
       </span>
       <span class="font-medium">{{ previous.title }}</span>
     </NuxtLink>
@@ -79,13 +86,20 @@ onDuxtShortcut(
     <NuxtLink
       v-if="next"
       :to="localeLink(next.path)"
-      class="flex flex-col gap-1 rounded-lg border p-4 text-right transition-colors hover:bg-accent"
+      class="flex flex-col gap-1 rounded-lg border p-4 text-end transition-colors hover:bg-accent"
     >
       <span
         class="flex items-center justify-end gap-1 text-xs text-muted-foreground"
       >
+        <kbd
+          v-if="nextHint"
+          aria-hidden="true"
+          class="me-auto rounded border bg-muted px-1.5 font-mono text-[10px]"
+        >
+          {{ nextHint }}
+        </kbd>
         {{ $t('duxt.nav.next') }}
-        <Icon name="lucide:arrow-right" class="size-3.5" />
+        <Icon name="lucide:arrow-right" class="size-3.5 rtl:-scale-x-100" />
       </span>
       <span class="font-medium">{{ next.title }}</span>
     </NuxtLink>

package/app/components/DuxtPreviewSkeleton.vue

@@ -42,7 +42,7 @@ withDefaults(
     /**
      * `docs` — a Markdown page: two sidebars, prose, a code card.
      * `api` — an operation list: a run of method-and-path rows.
-     * `text` — a plain-text artefact such as `llms.txt`: no chrome at all,
+     * `text` — a plain-text artefact such as `llms.txt`: no layout at all,
      * because the browser renders one in a bare monospace document.
      */
     variant?: DuxtSkeletonVariant;
@@ -81,7 +81,7 @@ withDefaults(
       <!-- The navbar row, then a clear gap, then the version pill, the search
            box at its real `w-56` and the three icons. Measured off the page
            this stands in for, not sketched. -->
-      <div class="ml-auto hidden items-center gap-6 @2xl:flex">
+      <div class="ms-auto hidden items-center gap-6 @2xl:flex">
         <div
           v-for="width in [32, 62, 50, 42]"
           :key="width"
@@ -90,7 +90,7 @@ withDefaults(
         />
       </div>
 
-      <div class="ml-6 flex items-center gap-6">
+      <div class="ms-6 flex items-center gap-6">
         <div class="h-5 w-12 rounded-full bg-muted/60" />
         <div class="h-8 w-56 rounded-md border bg-muted/30 @max-2xl:w-24" />
         <div class="hidden gap-6 @2xl:flex">
@@ -181,7 +181,7 @@ withDefaults(
                 :style="{ width: `${row.path}px` }"
               />
               <div
-                class="ml-auto h-2.5 rounded bg-muted/40"
+                class="ms-auto h-2.5 rounded bg-muted/40"
                 :style="{ width: `${row.summary}px` }"
               />
             </div>

package/app/components/DuxtProgress.vue

@@ -8,27 +8,15 @@
  * reader cannot already ask the document.
  *
  * Measured against the document, not against a scroll container, so it is
- * correct on the docs layout and on the landing page alike. Passive listener:
- * this must never be the thing that makes scrolling stutter.
+ * correct on the docs layout and on the landing page alike.
  */
 const progress = ref(0);
 
-function measure() {
+useDuxtViewportMeasure(() => {
   const doc = document.documentElement;
   const scrollable = doc.scrollHeight - doc.clientHeight;
 
   progress.value = scrollable > 0 ? (doc.scrollTop / scrollable) * 100 : 0;
-}
-
-onMounted(() => {
-  measure();
-  window.addEventListener('scroll', measure, { passive: true });
-  window.addEventListener('resize', measure, { passive: true });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('scroll', measure);
-    window.removeEventListener('resize', measure);
-  });
 });
 </script>