@movk/nuxt-docs 1.1.0

package/app/components/header/HeaderBottom.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+import { mapContentNavigation } from '@nuxt/ui/utils/content'
+
+const route = useRoute()
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const items = computed(() => mapContentNavigation(navigation?.value.map(item => ({ ...item, children: undefined })) ?? [])?.map(item => ({
+  ...item,
+  active: route.path.startsWith(item.to as string)
+})))
+</script>
+
+<template>
+  <USeparator class="hidden lg:flex" />
+
+  <UContainer class="hidden lg:flex items-center justify-between">
+    <UNavigationMenu
+      :items="items"
+      variant="pill"
+      highlight
+      class="-mx-2.5 -mb-px"
+    />
+  </UContainer>
+</template>

package/app/components/header/HeaderLogo.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+const { header } = useAppConfig()
+</script>
+
+<template>
+  <NuxtLink
+    :to="header.to"
+    class="flex items-center gap-2 font-bold text-xl text-highlighted min-w-0 focus-visible:outline-primary shrink-0"
+    :aria-label="header.title"
+  >
+    <svg
+      width="256"
+      height="256"
+      viewBox="0 0 256 256"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="w-auto h-10 shrink-0"
+    >
+      <circle
+        cx="128"
+        cy="128"
+        r="120"
+        fill="var(--ui-primary)"
+      />
+      <g fill="white" opacity="0.95">
+        <path
+          d="M38.5 175.6 c-1.5 -1 -1.9 -2.7 -1.9 -7.7 0 -5.5 0.4 -7.1 3.1 -11.4 1.8 -2.7 4.8 -6.3 6.8 -7.8 1.9 -1.5 3.5 -3.2 3.5 -3.8 0 -1.2 -5.8 -0.4 -11.5 1.6 -11.7 4.1 -16.3 3.7 -19 -1.5 -2.6 -5 -1.2 -8.4 4.2 -11 6.6 -3.1 10.4 -3.5 14.3 -1.5 2.1 1.1 4.1 1.4 5.9 0.9 1.4 -0.4 3.5 -0.9 4.6 -1.1 4.9 -0.9 12.3 -3.8 16 -6.3 13.7 -9.4 18.6 -11.7 34 -16 6.6 -1.9 11.9 -2.4 31.3 -3.1 l23.4 -0.8 8.4 -8.5 c5.7 -5.8 9.5 -8.8 11.9 -9.5 1.9 -0.5 5.8 -2.4 8.7 -4.1 4.5 -2.8 5.4 -3 7.5 -1.9 2 1.1 2.9 0.9 6.2 -0.9 6.4 -3.6 7.6 -2.5 4.4 4.3 l-1.7 3.5 3.3 4.1 c2.8 3.5 3.2 4.6 2.7 7.7 -0.3 2 0 5.1 0.6 6.8 1.8 5 -0.4 8.9 -6.3 11.6 -2.9 1.4 -4.5 2.6 -4 3.3 0.4 0.5 1.6 3.5 2.6 6.5 2.8 8.8 1.9 8.2 13.5 8.5 10.2 0.2 21.7 1.9 25.3 3.7 2 1 2.3 5.1 0.3 6.7 -0.7 0.6 -5.1 1.5 -9.7 2.1 -4.6 0.5 -12.7 1.9 -17.9 3 -8.5 1.8 -12.8 2 -42 1.9 -17.9 -0.1 -35 -0.3 -38 -0.5 -3 -0.1 -10.7 -0.6 -17.1 -1 -9.7 -0.6 -12.4 -0.4 -17 1.1 -7.2 2.3 -7.3 2.4 -5.5 4.4 2.2 2.5 3.1 7.8 1.6 9.6 -2.7 3.3 -9.3 1.2 -17.4 -5.5 -5.6 -4.7 -8.8 -5 -15.6 -1.7 -4.4 2.2 -4.5 2.3 -4.8 7.6 -0.2 3.7 -0.9 5.9 -2 6.8 -2.3 1.7 -10.3 1.6 -12.7 -0.1z"
+        />
+      </g>
+      <g fill="white" opacity="0.98">
+        <path
+          d="M142 209.3 c-0.7 -1.6 -2.3 -5.7 -3.5 -9.3 -1.3 -3.6 -2.6 -7.2 -3 -8.1 -0.4 -1.1 0 -1.8 1.4 -2.2 1.7 -0.4 2.4 0.4 4.3 5.4 1.3 3.2 2.5 5.9 2.8 5.9 0.3 0 1.9 -2.6 3.5 -5.8 2.1 -4 3.7 -5.8 5.3 -6 1.2 -0.2 2.2 -0.1 2.2 0.3 0 0.5 -10.8 21.5 -11.5 22.3 -0.1 0.1 -0.8 -1 -1.5 -2.5z"
+        />
+        <path
+          d="M84.5 201.3 c1 -12.9 1.6 -13.8 4.8 -6.9 1.5 3.1 2.9 5.6 3.3 5.6 0.3 0 3.1 -2.2 6.2 -5 3 -2.7 5.7 -4.8 5.9 -4.7 0.3 0.4 3.1 19.1 2.9 19.4 -0.1 0.2 -1.3 0.4 -2.7 0.5 -2.2 0.3 -2.4 0 -2.7 -4.9 -0.2 -2.9 -0.6 -5.3 -0.9 -5.3 -0.3 0 -2.3 1.4 -4.4 3.1 -3.7 2.9 -4.1 3 -5.8 1.5 -1.7 -1.6 -1.9 -1.6 -2.5 -0.1 -0.3 0.9 -0.6 2.8 -0.6 4.1 0 1.8 -0.5 2.4 -2.1 2.4 -2 0 -2.1 -0.3 -1.4 -9.7z"
+        />
+        <path
+          d="M115.9 209.5 c-5.9 -3.2 -6.4 -12.8 -0.9 -17.7 3.4 -3.1 5.6 -3.4 10.3 -1.5 4.3 1.8 5.9 4 6 7.9 0.1 6.4 -1.2 10.4 -3.9 11.6 -3.3 1.6 -8.3 1.4 -11.5 -0.3z m9.6 -4.5 c2.1 -2.4 2.4 -7.2 0.5 -9.4 -2 -2.5 -7.7 -2.1 -9.1 0.6 -3.9 7.3 3.3 14.7 8.6 8.8z"
+        />
+        <path
+          d="M158 200 c0 -11 0 -11 2.4 -11 2.3 0 2.4 0.3 1.9 3.6 -0.6 3.5 -0.5 3.6 1.6 2.5 1.2 -0.7 2.7 -2 3.3 -3.1 0.9 -1.4 1.5 -1.6 2.6 -0.8 1 0.9 0.6 1.9 -2.5 5 l-3.8 3.9 2.5 1.9 c1.4 1.1 3.7 2.5 5.3 3.2 3 1.4 3.3 2.1 1.4 3.6 -0.9 0.8 -2.4 0.3 -5.7 -1.9 l-4.5 -3.1 -0.3 3.6 c-0.3 2.8 -0.8 3.6 -2.3 3.6 -1.8 0 -1.9 -0.8 -1.9 -11z"
+        />
+      </g>
+      <circle
+        cx="128"
+        cy="128"
+        r="118"
+        stroke="white"
+        stroke-width="1.5"
+        fill="none"
+        opacity="0.15"
+      />
+    </svg>
+
+    <p class="font-medium text-highlighted">{{ header.title }}</p>
+  </NuxtLink>
+</template>

package/app/components/theme-picker/ThemePicker.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { omit } from '@movk/core'
+import colors from 'tailwindcss/colors'
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+const site = useSiteConfig()
+
+const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone']
+const neutral = computed({
+  get() {
+    return appConfig.ui.colors.neutral
+  },
+  set(option) {
+    appConfig.ui.colors.neutral = option
+    window.localStorage.setItem(`${site.name}-ui-neutral`, appConfig.ui.colors.neutral)
+  }
+})
+
+const colorsToOmit = ['inherit', 'current', 'transparent', 'black', 'white', ...neutralColors]
+const primaryColors = Object.keys(omit(colors, colorsToOmit as any))
+const primary = computed({
+  get() {
+    return appConfig.ui.colors.primary
+  },
+  set(option) {
+    appConfig.ui.colors.primary = option
+    window.localStorage.setItem(`${site.name}-ui-primary`, appConfig.ui.colors.primary)
+    setBlackAsPrimary(false)
+  }
+})
+
+const radiuses = [0, 0.125, 0.25, 0.375, 0.5]
+const radius = computed({
+  get() {
+    return appConfig.theme.radius
+  },
+  set(option) {
+    appConfig.theme.radius = option
+    window.localStorage.setItem(`${site.name}-ui-radius`, String(appConfig.theme.radius))
+  }
+})
+
+const modes = [
+  { label: 'light', icon: 'i-lucide-sun' },
+  { label: 'dark', icon: 'i-lucide-moon' },
+  { label: 'system', icon: 'i-lucide-monitor' }
+]
+const mode = computed({
+  get() {
+    return colorMode.value
+  },
+  set(option) {
+    colorMode.preference = option
+  }
+})
+
+function setBlackAsPrimary(value: boolean) {
+  appConfig.theme.blackAsPrimary = value
+  window.localStorage.setItem(`${site.name}-ui-black-as-primary`, String(value))
+}
+</script>
+
+<template>
+  <UPopover :ui="{ content: 'w-72 px-6 py-4 flex flex-col gap-4' }">
+    <template #default="{ open }">
+      <UButton
+        icon="i-lucide-swatch-book"
+        color="neutral"
+        :variant="open ? 'soft' : 'ghost'"
+        square
+        aria-label="Color picker"
+        :ui="{ leadingIcon: 'text-primary' }"
+      />
+    </template>
+
+    <template #content>
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2">
+          Primary
+        </legend>
+
+        <div class="grid grid-cols-3 gap-1 -mx-2">
+          <ThemePickerButton label="Black" :selected="appConfig.theme.blackAsPrimary" @click="setBlackAsPrimary(true)">
+            <template #leading>
+              <span class="inline-block w-2 h-2 rounded-full bg-black dark:bg-white" />
+            </template>
+          </ThemePickerButton>
+
+          <ThemePickerButton
+            v-for="color in primaryColors"
+            :key="color"
+            :label="color"
+            :chip="color"
+            :selected="!appConfig.theme.blackAsPrimary && primary === color"
+            @click="primary = color"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2">
+          Neutral
+        </legend>
+
+        <div class="grid grid-cols-3 gap-1 -mx-2">
+          <ThemePickerButton
+            v-for="color in neutralColors"
+            :key="color"
+            :label="color"
+            :chip="color === 'neutral' ? 'old-neutral' : color"
+            :selected="neutral === color"
+            @click="neutral = color"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2">
+          Radius
+        </legend>
+
+        <div class="grid grid-cols-5 gap-1 -mx-2">
+          <ThemePickerButton
+            v-for="r in radiuses"
+            :key="r"
+            :label="String(r)"
+            class="justify-center px-0"
+            :selected="radius === r"
+            @click="radius = r"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2">
+          Theme
+        </legend>
+
+        <div class="grid grid-cols-3 gap-1 -mx-2">
+          <ThemePickerButton
+            v-for="m in modes"
+            :key="m.label"
+            v-bind="m"
+            :selected="colorMode.preference === m.label"
+            @click="mode = m.label"
+          />
+        </div>
+      </fieldset>
+    </template>
+  </UPopover>
+</template>

package/app/components/theme-picker/ThemePickerButton.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+  icon?: string
+  chip?: string
+  selected?: boolean
+}>()
+
+const slots = defineSlots<{
+  leading: () => any
+}>()
+</script>
+
+<template>
+  <UButton
+    size="sm"
+    color="neutral"
+    variant="outline"
+    :icon="icon"
+    :label="label"
+    class="capitalize ring-default rounded-sm text-[11px]"
+    :class="[selected ? 'bg-elevated' : 'hover:bg-elevated/50']"
+  >
+    <template v-if="chip || !!slots.leading" #leading>
+      <slot name="leading">
+        <span
+          class="inline-block size-2 rounded-full bg-(--color-light) dark:bg-(--color-dark)"
+
+          :style="{
+            '--color-light': `var(--color-${chip}-500)`,
+            '--color-dark': `var(--color-${chip}-400)`
+          }"
+        />
+      </slot>
+    </template>
+  </UButton>
+</template>

package/app/composables/fetchComponentExample.ts

@@ -0,0 +1,32 @@
+const useComponentExampleState = () => useState<Record<string, any>>('component-example-state', () => ({}))
+
+export async function fetchComponentExample(name: string) {
+  const state = useComponentExampleState()
+
+  if (state.value[name]?.then) {
+    await state.value[name]
+    return state.value[name]
+  }
+  if (state.value[name]) {
+    return state.value[name]
+  }
+
+  // Add to nitro prerender
+  if (import.meta.server) {
+    const event = useRequestEvent()
+    event?.node.res.setHeader(
+      'x-nitro-prerender',
+      [event?.node.res.getHeader('x-nitro-prerender'), `/api/component-example/${name}.json`].filter(Boolean).join(',')
+    )
+  }
+
+  // Store promise to avoid multiple calls
+  state.value[name] = $fetch(`/api/component-example/${name}.json`).then((data) => {
+    state.value[name] = data
+  }).catch(() => {
+    state.value[name] = {}
+  })
+
+  await state.value[name]
+  return state.value[name]
+}

package/app/composables/fetchComponentMeta.ts

@@ -0,0 +1,34 @@
+import type { ComponentMeta } from 'vue-component-meta'
+
+const useComponentsMetaState = () => useState<Record<string, any>>('component-meta-state', () => ({}))
+
+export async function fetchComponentMeta(name: string): Promise<{ meta: ComponentMeta }> {
+  const state = useComponentsMetaState()
+
+  if (state.value[name]?.then) {
+    await state.value[name]
+    return state.value[name]
+  }
+  if (state.value[name]) {
+    return state.value[name]
+  }
+
+  // Add to nitro prerender
+  if (import.meta.server) {
+    const event = useRequestEvent()
+    event?.node.res.setHeader(
+      'x-nitro-prerender',
+      [event?.node.res.getHeader('x-nitro-prerender'), `/api/component-meta/${name}.json`].filter(Boolean).join(',')
+    )
+  }
+
+  // Store promise to avoid multiple calls
+  state.value[name] = $fetch(`/api/component-meta/${name}.json`).then((meta) => {
+    state.value[name] = meta
+  }).catch(() => {
+    state.value[name] = {}
+  })
+
+  await state.value[name]
+  return state.value[name]
+}

package/app/composables/useCategory.ts

@@ -0,0 +1,5 @@
+export function useCategory() {
+  return {
+    categories: {} as Record<string, { id: string, title: string, icon: string }[]>
+  }
+}

package/app/composables/useHeader.ts

@@ -0,0 +1,6 @@
+export function useHeader() {
+  return {
+    desktopLinks: computed(() => []),
+    mobileLinks: computed(() => [])
+  }
+}

package/app/composables/useNavigation.ts

@@ -0,0 +1,89 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+import { findPageBreadcrumb, findPageChildren } from '@nuxt/content/utils'
+import { mapContentNavigation } from '@nuxt/ui/utils/content'
+
+function groupChildrenByCategory(items: ContentNavigationItem[], slug: string): ContentNavigationItem[] {
+  if (!items.length) return []
+
+  const { categories } = useCategory()
+  const groups: ContentNavigationItem[] = []
+
+  const categorizedMap = new Map<string, ContentNavigationItem[]>()
+  const withChildren: ContentNavigationItem[] = []
+  const withoutChildren: ContentNavigationItem[] = []
+
+  for (const item of items) {
+    if (item.category) {
+      const key = item.category as string
+      if (!categorizedMap.has(key)) {
+        categorizedMap.set(key, [])
+      }
+      categorizedMap.get(key)!.push(item)
+    } else if (item.children?.length) {
+      withChildren.push(item)
+    } else {
+      withoutChildren.push(item)
+    }
+  }
+
+  if (withoutChildren.length) {
+    groups.push({
+      title: 'Overview',
+      path: `/docs/${slug}`,
+      icon: 'i-lucide-house',
+      children: withoutChildren
+    })
+  }
+
+  groups.push(...withChildren)
+
+  const categoryList = categories[slug as keyof typeof categories] ?? []
+  for (const category of categoryList) {
+    const children = categorizedMap.get(category.id)
+    if (children?.length) {
+      groups.push({
+        title: category.title,
+        path: `/docs/${slug}`,
+        icon: category.icon,
+        children
+      })
+    }
+  }
+
+  return groups
+}
+
+function processNavigationItem(item: ContentNavigationItem, parent?: ContentNavigationItem): ContentNavigationItem | ContentNavigationItem[] {
+  return {
+    ...item,
+    title: parent?.title ? parent.title : item.title,
+    children: item.children?.length ? item.children?.flatMap(child => processNavigationItem(child)) : undefined
+  }
+}
+
+export function useNavigation(navigation: Ref<ContentNavigationItem[] | undefined>) {
+  const rootNavigation = computed(() =>
+    navigation.value?.[0]?.children?.map(item => processNavigationItem(item)) as ContentNavigationItem[]
+  )
+
+  const navigationByCategory = computed(() => {
+    const route = useRoute()
+
+    const slug = route.params.slug?.[0] as string
+    const children = findPageChildren(navigation?.value, `/docs/${slug}`, { indexAsChild: true })
+
+    return groupChildrenByCategory(children, slug)
+  })
+
+  function findBreadcrumb(path: string) {
+    const breadcrumb = findPageBreadcrumb(navigation?.value, path, { indexAsChild: true })
+
+    return mapContentNavigation(breadcrumb).map(({ icon, ...link }) => link)
+  }
+
+  return {
+    rootNavigation,
+    navigationByCategory,
+    findBreadcrumb
+  }
+}

package/app/error.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+import colors from 'tailwindcss/colors'
+
+defineProps<{
+  error: NuxtError
+}>()
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+const route = useRoute()
+
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false
+})
+
+const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
+const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
+const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { key: 'theme-color', name: 'theme-color', content: color }
+  ],
+  style: [
+    { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
+    { innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 }
+  ]
+})
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.'
+})
+
+const { rootNavigation } = useNavigation(navigation)
+
+provide('navigation', rootNavigation)
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
+
+    <div :class="[route.path.startsWith('/docs/') && 'root']">
+      <Header />
+
+      <UError :error="error" />
+
+      <Footer />
+
+      <ClientOnly>
+        <LazyUContentSearch :files="files" :navigation="navigation" />
+      </ClientOnly>
+    </div>
+  </UApp>
+</template>

package/app/layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>

package/app/layouts/docs.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const route = useRoute()
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const { navigationByCategory } = useNavigation(navigation!)
+</script>
+
+<template>
+  <UMain class="relative">
+    <HeroBackground />
+
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UPageAside>
+            <UContentNavigation
+              :key="route.path"
+              :navigation="navigationByCategory"
+              highlight
+            />
+          </UPageAside>
+        </template>
+
+        <slot />
+      </UPage>
+    </UContainer>
+  </UMain>
+</template>