feat(content): client-side search, build-time snapshots, and per-commit artifact caching

app/app.config.ts

@@ -185,7 +185,7 @@ export default defineAppConfig({
       // info: 'i-tabler-info-square-rounded-filled',
     },
   },
-  // `seo.siteName`, `header.title` and `github.*` are deliberately NOT defaulted here: modules/config.ts seeds
+  // `seo.siteName`, `header.title` and `github.*` are deliberately NOT defaulted here: modules/config/ seeds
   // them into `nuxt.options.appConfig`, and app.config values — even empty strings — would win over those.
   header: {
     to: '/',

app/app.vue

@@ -1,44 +1,34 @@
 <script setup lang="ts">
 import type { NavigationItem } from 'comark-content'
-import type { SearchSection } from './utils/search-sections'
+import { useRoute } from 'vue-router'
 
 const { seo, docs } = useAppConfig()
 
 const content = useDocsContent()
 const route = useRoute()
 
-const { data: navigation } = await useAsyncData('navigation', () => content.value.client.navigation(), {
-  watch: [() => content.value.base],
-})
-const {
-  data: files,
-  status,
-  execute: loadSearchSections,
-} = useLazyAsyncData('search-sections', () => content.value.client.searchSections(), {
-  server: false,
-  watch: [() => content.value.base],
-  immediate: false,
-})
-
-onNuxtReady(() => loadSearchSections())
+const [{ data: navigation }, { data: sha }] = await Promise.all([
+  useAsyncData('navigation', () => content.value.client.navigation(), {
+    watch: [() => content.value.routeBase],
+  }),
+  useAsyncData(
+    () => `content-head:${content.value.apiBase}`,
+    () => $fetch<{ sha: string | null }>(`${content.value.apiBase}/head`).then(({ sha }) => sha),
+    { default: () => null, watch: [() => content.value.apiBase] }
+  ),
+])
 
 const nuxtApp = useNuxtApp()
-const navTree = computed<NavigationItem[]>(() => prefixNavigation(navigation.value ?? [], content.value.base))
+const navTree = computed<NavigationItem[]>(() => prefixNavigation(navigation.value ?? [], content.value.routeBase))
 const resolveNavigationLayout = () => {
-  return resolveRouteLayout(navigation.value, route, content.value.base ? content.value.path : route.path)
+  return resolveRouteLayout(navigation.value, route, content.value.routeBase ? content.value.path : route.path)
 }
 const navigationLayout = ref(resolveNavigationLayout())
 onNuxtReady(() => {
   nuxtApp.hook('page:finish', () => {
     navigationLayout.value = resolveNavigationLayout()
   })
 })
-const searchFiles = computed<SearchSection[]>(() =>
-  (files.value ?? []).map((section) => {
-    const [path, hash] = section.id.split('#')
-    return { ...section, id: prefixLink(path!, content.value.base) + (hash ? `#${hash}` : '') }
-  })
-)
 
 useHead({
   meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
@@ -64,8 +54,8 @@ useSeoMeta({
 
 provide('navigation', navTree)
 provide('layout', navigationLayout)
+provide('sha', sha)
 
-// const colorMode = useColorMode()
 const historyOpen = useVersionHistory()
 
 const { assistant } = useAppConfig()
@@ -108,13 +98,7 @@ defineShortcuts({
     <AppFooter />
 
     <ClientOnly>
-      <LazyUContentSearch
-        :files="searchFiles"
-        :navigation="navTree"
-        :transition="false"
-        :loading="status !== 'success'"
-        :placeholder="status !== 'success' ? 'Loading...' : undefined"
-      />
+      <AppSearch :navigation="navTree" />
       <LazyVersionHistory />
       <LazyAssistantChat v-if="assistant?.enabled && assistantMounted" />
     </ClientOnly>

app/components/AppHeader.vue

@@ -4,10 +4,11 @@ const content = useDocsContent()
 const historyOpen = useVersionHistory()
 const assistantOpen = useAssistant()
 const navigation = useMainNavigation()
+const { available: searchAvailable } = useSearch()
 </script>
 
 <template>
-  <UHeader :to="prefixLink(header?.to || '/', content.base)">
+  <UHeader :to="prefixLink(header?.to || '/', content.routeBase)">
     <template #left>
       <AppHeaderBrand />
     </template>
@@ -16,7 +17,7 @@ const navigation = useMainNavigation()
 
     <template #right>
       <UContentSearchButton
-        v-if="header?.search"
+        v-if="header?.search && searchAvailable"
         :collapsed="false"
         :icon="false"
         class="text-muted font-normal hidden lg:inline-flex min-w-[150px]"
@@ -61,7 +62,7 @@ const navigation = useMainNavigation()
       <div class="flex flex-col justify-between h-full">
         <div class="flex flex-col gap-4">
           <UContentSearchButton
-            v-if="header?.search"
+            v-if="header?.search && searchAvailable"
             :collapsed="false"
             size="xl"
             class="w-full font-normal"

app/components/AppHeaderBrand.vue

@@ -72,7 +72,7 @@ onMounted(() => {
     </div>
 
     <NuxtLink
-      :to="prefixLink(header?.to || '/', cms.base)"
+      :to="prefixLink(header?.to || '/', cms.routeBase)"
       :aria-label="header?.logo?.alt || header?.title"
       class="text-highlighted!"
     >

app/components/AppSearch.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { NavigationItem } from 'comark-content'
+
+const props = defineProps<{
+  navigation: NavigationItem[]
+}>()
+
+const { search, status, available } = useSearch()
+
+const appConfig = useAppConfig()
+
+interface PageItem {
+  label: string
+  prefix?: string
+  suffix?: string
+  to: string
+  icon: string
+}
+
+/** Leaf pages, flattened; ancestor titles become the `Section > Page` prefix the palette renders. */
+function pageItems(items: NavigationItem[], ancestors: string[] = []): PageItem[] {
+  return items.flatMap((item) => {
+    if (item.children?.length) return pageItems(item.children, [...ancestors, item.title])
+    if (!item.path || item.page === false) return []
+    return [{
+      label: item.title,
+      prefix: ancestors.length ? `${ancestors.join(' > ')} >` : undefined,
+      suffix: item.description,
+      to: item.path,
+      icon: (item.icon as string | undefined) || appConfig.ui.icons.file,
+    }]
+  })
+}
+
+function browseOnly(query: string, items?: PageItem[]): PageItem[] {
+  return query ? [] : (items ?? [])
+}
+
+// One group per top-level section, mirroring how `UContentSearch` groups navigation when it can.
+const groups = computed(() => {
+  if (props.navigation.some((item) => item.children?.length)) {
+    return props.navigation
+      .filter((section) => section.children?.length)
+      .map((section) => ({
+        id: section.path,
+        label: section.title,
+        items: pageItems(section.children ?? []),
+        postFilter: browseOnly,
+      }))
+      .filter((group) => group.items.length > 0)
+  }
+  return [{ id: 'docs', items: pageItems(props.navigation), postFilter: browseOnly }]
+})
+</script>
+
+<template>
+  <LazyUContentSearch
+    v-if="available"
+    :search="search"
+    :search-status="status"
+    :navigation="navigation"
+    :groups="groups"
+    :transition="false"
+    :loading="status === 'loading'"
+  />
+</template>

app/components/AssistantChat.vue

@@ -3,7 +3,7 @@ import { DefaultChatTransport, isReasoningUIPart, isTextUIPart, isToolUIPart, ge
 import { useChat } from '@ai-sdk/vue'
 import { isPartStreaming, isToolStreaming } from '@nuxt/ui/utils/ai'
 import rangi from 'comark/plugins/rangi'
-import { geistTheme } from '../../utils/geist-theme'
+import { geistTheme } from '../../utils/geist'
 
 const MAX_INPUT = 1000