feat: basic search feature

Author: antfu

app.vue

@@ -4,19 +4,6 @@ import 'splitpanes/dist/splitpanes.css'
 import './styles/base.css'
 import './styles/prose.css'
 import './styles/overrides.css'
-
-addCommands(
-  {
-    title: 'Home',
-    to: '/',
-    icon: 'i-ph-house-duotone',
-  },
-  {
-    title: 'Vue Basic',
-    to: '/vue/intro',
-    icon: 'i-ph-file-duotone',
-  },
-)
 </script>
 
 <template>

components/CommandPalette.vue

@@ -6,6 +6,7 @@ const commands = useCommandsStore()
 const router = useRouter()
 
 const selected = ref(0)
+const input = ref<HTMLInputElement>()
 
 function move(delta: number) {
   selected.value += delta
@@ -23,6 +24,35 @@ function runCommand(command: Command) {
   commands.isShown = false
 }
 
+function scrollIntoView(elOrComponent?: any) {
+  const el = elOrComponent?.$el || elOrComponent
+  el?.scrollIntoView?.({
+    block: 'nearest',
+    inline: 'nearest',
+  })
+}
+
+// Reset selected when search changes
+watch(
+  () => commands.search,
+  () => {
+    selected.value = 0
+  },
+)
+
+watch(
+  () => commands.isShown,
+  () => {
+    if (commands.isShown) {
+      commands.search = ''
+      // Auto-focus on input open
+      nextTick(() => {
+        input.value?.focus()
+      })
+    }
+  },
+)
+
 useEventListener('keydown', (e) => {
   if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
     commands.isShown = !commands.isShown
@@ -59,23 +89,28 @@ useEventListener('keydown', (e) => {
     fixed inset-0 z-index-command-palette flex="~ items-center justify-center"
   >
     <div absolute inset-0 z--1 bg-black:75 />
-    <div border="~ base rounded" h-100 w-200 bg-base>
+    <div
+      border="~ base rounded" h-100 w-200 of-hidden bg-base
+      grid="~ rows-[max-content_1fr]"
+    >
       <div flex="~ items-center">
         <div class="i-ph-magnifying-glass-duotone" m4 text-xl />
         <input
+          ref="input"
           v-model="commands.search"
           h-full w-full rounded border-none p4 pl0 outline-none bg-base
           placeholder="Search..."
         >
       </div>
 
-      <div border="t base" flex="~ col">
+      <div border="t base" flex="~ col" of-y-auto py2>
         <component
           :is="c.to ? NuxtLink : 'button'"
           v-for="c, idx in commands.commandsResult"
           :key="c.id || c.title"
-          :to="c.to"
-          flex="~ gap-2 items-center" mx1 rounded p2 px3
+          :ref="(el: Element) => selected === idx && scrollIntoView(el)"
+          :to="c.to" flex="~ gap-2 items-center" mx1 rounded p2
+          px3
           :class="selected === idx ? 'bg-active' : ''"
           @click="runCommand(c)"
         >

nuxt.config.ts

@@ -121,6 +121,9 @@ export default defineNuxtConfig({
         'remark-external-links',
       ],
     },
+    experimental: {
+      // @ts-expect-error awaits https://github.com/nuxt/content/pull/2506
+      search: {},
+    },
   },
-
 })

stores/commands.ts

@@ -1,3 +1,4 @@
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 import Fuse from 'fuse.js'
 
 export interface Command {
@@ -14,16 +15,39 @@ export const useCommandsStore = defineStore('commands', () => {
   const search = ref('')
   const isShown = ref(false)
   const commandsAll = reactive<Set<Command>>(new Set())
+  const guidesResult = ref<Command[]>([])
 
   const fuse = computed(() => new Fuse(Array.from(commandsAll), {
     keys: ['title', 'description'],
     threshold: 0.3,
   }))
 
+  const debouncedSearch = refDebounced(search, 100)
+
+  watch(debouncedSearch, async (v) => {
+    if (v) {
+      // TODO: send a PR to nuxt/content to default generic type
+      // TODO: move it out if it's reactive
+      const result = await searchContent(v, {}) as ComputedRef<ParsedContent[]>
+      guidesResult.value = result.value.map((i): Command => ({
+        id: i.id,
+        title: i.title || 'Untitled',
+        to: i.id,
+        icon: 'i-ph-file-duotone',
+      }))
+    }
+    else {
+      guidesResult.value = []
+    }
+  })
+
   const commandsResult = computed(() => {
     if (!search.value)
       return Array.from(commandsAll)
-    return fuse.value.search(search.value).map(i => i.item)
+    return [
+      ...fuse.value.search(search.value).map(i => i.item),
+      ...guidesResult.value,
+    ]
   })
 
   return {