doc: nuxt content v3

Author: harlan-zw

docs/app.vue

@@ -1,18 +1,51 @@
 <script setup lang="ts">
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
+  transform(data) {
+    return data?.[0]?.children.map((nav) => {
+      return {
+        ...nav,
+        children: nav.children.map((item) => {
+          return {
+            ...item,
+            to: item.path,
+          }
+        }),
+      }
+    })
+  },
+})
+const { data: scriptsNavigation } = await useAsyncData('script-navigation', () => queryCollectionNavigation('scripts'), {
+  transform(data) {
+    return data?.[0]?.children.map((nav) => {
+      return {
+        ...nav,
+        children: nav.children.map((item) => {
+          return {
+            ...item,
+            to: item.path,
+          }
+        }),
+      }
+    })
+  },
+})
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
-const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
-  default: () => [],
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false,
+})
+const { data: scriptFiles } = useLazyAsyncData('search-scripts', () => queryCollectionSearchSections('scripts'), {
   server: false,
 })
 
-const route = useRoute()
 provide('navigation', computed(() => {
-  return route.path.startsWith('/docs') ? navigation.value?.[0]?.children : navigation.value?.[1]?.children || []
+  return navigation.value || []
 }))
 provide('topGuides', computed(() => {
-  return navigation.value?.[0]?.children.find(nav => nav.title === 'Guides')?.children || []
+  return (navigation.value || []).find(nav => nav.title === 'Guides')?.children || []
+}))
+
+provide('scripts-navigation', computed(() => {
+  return scriptsNavigation.value || []
 }))
 </script>
 
@@ -29,7 +62,11 @@ provide('topGuides', computed(() => {
     <Footer />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation" />
+      <LazyUContentSearch
+        :files="[files, scriptFiles].flat()"
+        :navigation="[navigation, scriptsNavigation].flat()"
+        :fuse="{ resultLimit: 42 }"
+      />
     </ClientOnly>
 
     <UNotifications />

docs/components/Header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { NavItem } from '@nuxt/contents'
 
 const navigation = inject<NavItem[]>('navigation', [])
 const { metaSymbol } = useShortcuts()

docs/components/content/CodeGroup.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps({
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: undefined,
+  },
+})
+
+const ui = {
+  wrapper: 'relative [&>div:last-child]:!my-0 [&>div:last-child]:!static my-5',
+  header: 'flex items-center gap-1 border border-gray-200 dark:border-gray-700 border-b-0 rounded-t-md overflow-hidden p-2',
+  tab: {
+    base: 'px-2 py-1.5 focus:outline-none text-gray-700 dark:text-gray-200 text-sm rounded-md flex items-center gap-1.5',
+    active: 'bg-gray-100 dark:bg-gray-800',
+    inactive: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
+    icon: {
+      base: '',
+    },
+  },
+}
+
+const slots = useSlots()
+
+const selectedIndex = ref(0)
+defineExpose({ selectedIndex })
+
+const rerenderCounter = ref(1)
+
+function transformSlot(slot: any, index: number) {
+  if (typeof slot.type === 'symbol') {
+    return slot.children?.map(transformSlot)
+  }
+
+  return {
+    label: slot.props?.filename || slot.props?.label || `${index}`,
+    icon: slot.props?.icon,
+    component: slot,
+  }
+}
+
+// Computed
+
+const tabs = computed(() => slots.default?.()?.flatMap(transformSlot).filter(Boolean) || [])
+
+const selectedTab = computed(() => tabs.value.find((_, index) => index === selectedIndex.value))
+
+onBeforeUpdate(() => {
+  rerenderCounter.value += 1
+})
+</script>
+
+<template>
+  <div :class="ui.wrapper">
+    <div :class="ui.header">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="index"
+        tabindex="-1"
+        :class="[ui.tab.base, selectedIndex === index ? ui.tab.active : ui.tab.inactive]"
+        @click="selectedIndex = index"
+      >
+        <ProseCodeIcon :icon="tab.icon" :filename="tab.label" :class="ui.tab.icon.base" />
+        <span>{{ tab.label }}</span>
+      </button>
+    </div>
+
+    <component :is="selectedTab?.component" :key="selectedIndex" hide-header />
+  </div>
+</template>

docs/components/content/FigureImage.vue

@@ -0,0 +1,53 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  alt: string
+  src: string
+  lazy?: boolean | 'false' | 'true'
+  width?: number
+  figureClass?: string
+}>(), {
+  lazy: true,
+})
+
+const loadingType = computed(() => {
+  return props.lazy ? 'lazy' : 'eager'
+})
+</script>
+
+<template>
+  <figure class="figure-image flex flex-col items-center justify-center mx-auto max-w-full my-2">
+    <img
+      v-bind="$attrs"
+      height="700"
+      :alt="alt"
+      :width="width"
+      :src="src"
+      :loading="loadingType"
+    >
+    <figcaption v-if="alt" class="text-center">
+      {{ alt }}
+    </figcaption>
+  </figure>
+</template>
+
+<style>
+@media(max-width: 1024px) {
+  .figure-image {
+    transform: translateX(0) !important;
+  }
+}
+
+.figure-image :deep(img:not([src$=".svg"])) {
+  width: auto;
+  border-radius: 0.5em;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 10px 0 rgba(0, 0, 0, 0.05);
+  max-height: min(65vh, 700px);
+  margin: 0 auto;
+}
+</style>

docs/components/content/ProseCode.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import ProseCode from '@nuxtjs/mdc/runtime/components/prose/ProseCode.vue'
+</script>
+
+<template>
+  <ProseCode v-bind="$attrs">
+    <slot />
+  </ProseCode>
+</template>

docs/components/content/TabComparison.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps({
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: undefined,
+  },
+})
+
+const ui = {
+  wrapper: 'relative [&>div:last-child]:!my-0 [&>div:last-child]:!static my-5',
+  header: 'flex items-center gap-1 border border-gray-200 dark:border-gray-700 border-b-0 rounded-t-md overflow-hidden p-2',
+  tab: {
+    base: 'px-2 py-1.5 focus:outline-none text-gray-700 dark:text-gray-200 text-sm rounded-md flex items-center gap-1.5',
+    active: 'bg-gray-100 dark:bg-gray-800',
+    inactive: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
+    icon: {
+      base: '',
+    },
+  },
+}
+
+const slots = useSlots()
+
+const rerenderCounter = ref(1)
+
+function transformSlot(slot: any, index: number) {
+  if (typeof slot.type === 'symbol') {
+    return slot.children?.map(transformSlot)
+  }
+
+  return {
+    label: slot.props?.filename || slot.props?.label || `${index}`,
+    icon: slot.props?.icon,
+    component: slot,
+  }
+}
+
+// Computed
+
+const tabs = computed(() => slots.default?.()?.flatMap(transformSlot).filter(Boolean) || [])
+
+const { selectedFramework } = useFrameworkSelector()
+const selectedIndex = ref(tabs.value.findIndex(tab => tab.label.toLowerCase() === selectedFramework.value.slug))
+defineExpose({ selectedIndex })
+
+const selectedTab = computed(() => tabs.value.find((_, index) => index === selectedIndex.value))
+
+onBeforeUpdate(() => {
+  rerenderCounter.value += 1
+})
+</script>
+
+<template>
+  <div :class="ui.wrapper" class="relative group [&>.group]:rounded-t-none [&>pre]:my-0 my-5">
+    <div :class="ui.header">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="index"
+        tabindex="-1"
+        :class="[ui.tab.base, selectedIndex === index ? ui.tab.active : ui.tab.inactive]"
+        @click="selectedIndex = index"
+      >
+        <ProseCodeIcon :icon="tab.icon" :filename="tab.label" :class="ui.tab.icon.base" />
+        <span>{{ tab.label }}</span>
+      </button>
+    </div>
+
+    <div class="group text-sm/6 border border-[var(--ui-border-muted)] bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] px-4 py-3 overflow-x-auto focus:outline-none">
+      <component :is="selectedTab?.component" :key="selectedIndex" hide-header />
+    </div>
+  </div>
+</template>

docs/content.config.ts

@@ -0,0 +1,31 @@
+import { defineCollection, defineContentConfig } from '@nuxt/content'
+import { asSeoCollection } from '@nuxtjs/seo/content'
+import { resolve } from 'pathe'
+
+export default defineContentConfig({
+  collections: {
+    docs: defineCollection(asSeoCollection({
+      type: 'page', // partial
+      source: {
+        include: '**/*.md',
+        cwd: resolve('./content/docs'),
+        prefix: `/docs`,
+      },
+    })),
+    scripts: defineCollection(asSeoCollection({
+      type: 'page', // partial
+      source: {
+        include: '**/*.md',
+        cwd: resolve('./content/scripts'),
+        prefix: `/scripts`,
+      },
+    })),
+    snippets: defineCollection({
+      type: 'page', // partial
+      source: {
+        include: '**/*.md',
+        cwd: resolve('./content/snippets'),
+      },
+    }),
+  },
+})

docs/content/docs/1.getting-started/_dir.yml renamed to docs/content/docs/1.getting-started/.navigation.yml

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { NavItem } from '@nuxt/content'
 
 const navigation = inject<Ref<NavItem[]>>('navigation')
+const scriptsNavigation = inject<Ref<NavItem[]>>('scripts-navigation')
 </script>
 
 <template>
   <UContainer>
     <UPage>
       <template #left>
         <UAside>
-          <UNavigationTree :links="mapContentNavigation(navigation)" />
+          <UNavigationTree :links="mapContentNavigation(($route.path.startsWith('/docs') ? navigation : scriptsNavigation) || [])" />
         </UAside>
       </template>