vitepress 2.0.0-alpha.14 → 2.0.0-alpha.16

package/dist/client/app/index.js

@@ -103,7 +103,9 @@ function newRouter() {
                 pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js');
             }
             if (import.meta.env.DEV) {
-                pageModule = import(/*@vite-ignore*/ pageFilePath).catch(() => {
+                pageModule = import(/*@vite-ignore*/ pageFilePath).catch((e) => {
+                    // page load could fail for other reasons, don't swallow
+                    console.error(e);
                     // try with/without trailing slash
                     // in prod this is handled in src/client/app/utils.ts#pathToFile
                     const url = new URL(pageFilePath, 'http://a.com');

package/dist/client/theme-default/components/VPAlgoliaSearchBox.vue

@@ -1,84 +1,238 @@
 <script setup lang="ts">
-import docsearch from '@docsearch/js'
-import { useRouter } from 'vitepress'
+import type { DocSearchInstance, DocSearchProps } from '@docsearch/js'
+import type { SidepanelInstance, SidepanelProps } from '@docsearch/sidepanel-js'
+import { inBrowser, useRouter } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
-import { nextTick, onMounted, watch } from 'vue'
+import { nextTick, onUnmounted, watch } from 'vue'
+import type { DocSearchAskAi } from '../../../../types/docsearch'
 import { useData } from '../composables/data'
+import { resolveMode, validateCredentials } from '../support/docsearch'
+
+import '../styles/docsearch.css'
 
 const props = defineProps<{
-  algolia: DefaultTheme.AlgoliaSearchOptions
+  algoliaOptions: DefaultTheme.AlgoliaSearchOptions
+  openRequest?: {
+    target: 'search' | 'askAi' | 'toggleAskAi'
+    nonce: number
+  } | null
 }>()
 
 const router = useRouter()
-const { site, localeIndex, lang } = useData()
+const { site } = useData()
 
-onMounted(update)
-watch(localeIndex, update)
+let cleanup = () => {}
+let docsearchInstance: DocSearchInstance | undefined
+let sidepanelInstance: SidepanelInstance | undefined
+let openOnReady: 'search' | 'askAi' | null = null
+let initializeCount = 0
+let docsearchLoader: Promise<typeof import('@docsearch/js')> | undefined
+let sidepanelLoader: Promise<typeof import('@docsearch/sidepanel-js')> | undefined
+let lastFocusedElement: HTMLElement | null = null
+let skipEventDocsearch = false
+let skipEventSidepanel = false
 
-async function update() {
-  await nextTick()
-  const options = {
-    ...props.algolia,
-    ...props.algolia.locales?.[localeIndex.value]
-  }
-  const rawFacetFilters = options.searchParameters?.facetFilters ?? []
-  const facetFilters = [
-    ...(Array.isArray(rawFacetFilters)
-      ? rawFacetFilters
-      : [rawFacetFilters]
-    ).filter((f) => !f.startsWith('lang:')),
-    `lang:${lang.value}`
-  ]
-
-  // Rebuild the askAi prop as an object:
-  // If the askAi prop is a string, treat it as the assistantId and use
-  // the default indexName, apiKey and appId from the main options.
-  // If the askAi prop is an object, spread its explicit values.
-  const askAiProp = options.askAi
-  const isAskAiString = typeof askAiProp === 'string'
-
-  const askAi = askAiProp
-    ? {
-        indexName: isAskAiString ? options.indexName : askAiProp.indexName,
-        apiKey: isAskAiString ? options.apiKey : askAiProp.apiKey,
-        appId: isAskAiString ? options.appId : askAiProp.appId,
-        assistantId: isAskAiString ? askAiProp : askAiProp.assistantId,
-        // Re-use the merged facetFilters from the search parameters so that
-        // Ask AI uses the same language filtering as the regular search.
-        searchParameters: facetFilters.length ? { facetFilters } : undefined
+watch(() => props.algoliaOptions, update, { immediate: true })
+onUnmounted(cleanup)
+
+watch(
+  () => props.openRequest?.nonce,
+  () => {
+    const req = props.openRequest
+    if (!req) return
+    if (req.target === 'search') {
+      if (docsearchInstance?.isReady) {
+        onBeforeOpen('docsearch', () => docsearchInstance?.open())
+      } else {
+        openOnReady = 'search'
+      }
+    } else if (req.target === 'toggleAskAi') {
+      if (sidepanelInstance?.isOpen) {
+        sidepanelInstance.close()
+      } else {
+        onBeforeOpen('sidepanel', () => sidepanelInstance?.open())
+      }
+    } else {
+      // askAi - open sidepanel or fallback to docsearch modal
+      if (sidepanelInstance?.isReady) {
+        onBeforeOpen('sidepanel', () => sidepanelInstance?.open())
+      } else if (sidepanelInstance) {
+        openOnReady = 'askAi'
+      } else if (docsearchInstance?.isReady) {
+        onBeforeOpen('docsearch', () => docsearchInstance?.openAskAi())
+      } else {
+        openOnReady = 'askAi'
       }
-    : undefined
+    }
+  },
+  { immediate: true }
+)
 
-  initialize({
-    ...options,
-    searchParameters: {
-      ...options.searchParameters,
-      facetFilters
-    },
-    askAi
+async function update(options: DefaultTheme.AlgoliaSearchOptions) {
+  if (!inBrowser) return
+  await nextTick()
+
+  const askAi = options.askAi as DocSearchAskAi | undefined
+
+  const { valid, ...credentials } = validateCredentials({
+    appId: options.appId ?? askAi?.appId,
+    apiKey: options.apiKey ?? askAi?.apiKey,
+    indexName: options.indexName ?? askAi?.indexName
   })
+
+  if (!valid) {
+    console.warn('[vitepress] Algolia search cannot be initialized: missing appId/apiKey/indexName.')
+    return
+  }
+
+  await initialize({ ...options, ...credentials })
 }
 
-function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
-  const options = Object.assign({}, userOptions, {
-    container: '#docsearch',
+async function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
+  const currentInitialize = ++initializeCount
+
+  // Always tear down previous instances first (e.g. on locale changes)
+  cleanup()
+
+  const { useSidePanel } = resolveMode(userOptions)
+  const askAi = userOptions.askAi as DocSearchAskAi | undefined
+
+  const { default: docsearch } = await loadDocsearch()
+  if (currentInitialize !== initializeCount) return
+
+  if (useSidePanel && askAi?.sidePanel) {
+    const { default: sidepanel } = await loadSidepanel()
+    if (currentInitialize !== initializeCount) return
 
+    sidepanelInstance = sidepanel({
+      ...(askAi.sidePanel === true ? {} : askAi.sidePanel),
+      container: '#vp-docsearch-sidepanel',
+      indexName: askAi.indexName ?? userOptions.indexName,
+      appId: askAi.appId ?? userOptions.appId,
+      apiKey: askAi.apiKey ?? userOptions.apiKey,
+      assistantId: askAi.assistantId,
+      onOpen: focusInput,
+      onClose: onClose.bind(null, 'sidepanel'),
+      onReady: () => {
+        if (openOnReady === 'askAi') {
+          openOnReady = null
+          onBeforeOpen('sidepanel', () => sidepanelInstance?.open())
+        }
+      },
+      keyboardShortcuts: {
+        'Ctrl/Cmd+I': false
+      }
+    } as SidepanelProps)
+  }
+
+  const options = {
+    ...userOptions,
+    container: '#vp-docsearch',
     navigator: {
-      navigate(item: { itemUrl: string }) {
+      navigate(item) {
         router.go(item.itemUrl)
       }
     },
-
-    transformItems(items: { url: string }[]) {
-      return items.map((item) => {
-        return Object.assign({}, item, {
-          url: getRelativePath(item.url)
-        })
-      })
+    transformItems: (items) => items.map((item) => ({ ...item, url: getRelativePath(item.url) })),
+    // When sidepanel is enabled, intercept Ask AI events to open it instead (hybrid mode)
+    ...(useSidePanel && sidepanelInstance && {
+      interceptAskAiEvent: (initialMessage) => {
+        onBeforeOpen('sidepanel', () => sidepanelInstance?.open(initialMessage))
+        return true
+      }
+    }),
+    onOpen: focusInput,
+    onClose: onClose.bind(null, 'docsearch'),
+    onReady: () => {
+      if (openOnReady === 'search') {
+        openOnReady = null
+        onBeforeOpen('docsearch', () => docsearchInstance?.open())
+      } else if (openOnReady === 'askAi' && !sidepanelInstance) {
+        // No sidepanel configured, use docsearch modal for askAi
+        openOnReady = null
+        onBeforeOpen('docsearch', () => docsearchInstance?.openAskAi())
+      }
+    },
+    keyboardShortcuts: {
+      '/': false,
+      'Ctrl/Cmd+K': false
     }
+  } as DocSearchProps
+
+  docsearchInstance = docsearch(options)
+
+  cleanup = () => {
+    docsearchInstance?.destroy()
+    sidepanelInstance?.destroy()
+    docsearchInstance = undefined
+    sidepanelInstance = undefined
+    openOnReady = null
+    lastFocusedElement = null
+  }
+}
+
+function focusInput() {
+  requestAnimationFrame(() => {
+    const input =
+      document.querySelector<HTMLInputElement>('#docsearch-input') ||
+      document.querySelector<HTMLInputElement>('#docsearch-sidepanel textarea')
+    input?.focus()
   })
+}
 
-  docsearch(options as any)
+function onBeforeOpen(target: 'docsearch' | 'sidepanel', cb: () => void) {
+  if (target === 'docsearch') {
+    if (sidepanelInstance?.isOpen) {
+      skipEventSidepanel = true
+      sidepanelInstance.close()
+    } else if (!docsearchInstance?.isOpen) {
+      if (document.activeElement instanceof HTMLElement) {
+        lastFocusedElement = document.activeElement
+      }
+    }
+  } else if (target === 'sidepanel') {
+    if (docsearchInstance?.isOpen) {
+      skipEventDocsearch = true
+      docsearchInstance.close()
+    } else if (!sidepanelInstance?.isOpen) {
+      if (document.activeElement instanceof HTMLElement) {
+        lastFocusedElement = document.activeElement
+      }
+    }
+  }
+  setTimeout(cb, 0)
+}
+
+function onClose(target: 'docsearch' | 'sidepanel') {
+  if (target === 'docsearch') {
+    if (skipEventDocsearch) {
+      skipEventDocsearch = false
+      return
+    }
+  } else if (target === 'sidepanel') {
+    if (skipEventSidepanel) {
+      skipEventSidepanel = false
+      return
+    }
+  }
+  if (lastFocusedElement) {
+    lastFocusedElement.focus()
+    lastFocusedElement = null
+  }
+}
+
+function loadDocsearch() {
+  if (!docsearchLoader) {
+    docsearchLoader = import('@docsearch/js')
+  }
+  return docsearchLoader
+}
+
+function loadSidepanel() {
+  if (!sidepanelLoader) {
+    sidepanelLoader = import('@docsearch/sidepanel-js')
+  }
+  return sidepanelLoader
 }
 
 function getRelativePath(url: string) {
@@ -88,5 +242,6 @@ function getRelativePath(url: string) {
 </script>
 
 <template>
-  <div id="docsearch" />
+  <div id="vp-docsearch" />
+  <div id="vp-docsearch-sidepanel" />
 </template>

package/dist/client/theme-default/components/VPBadge.vue

@@ -39,15 +39,14 @@ withDefaults(defineProps<Props>(), {
   display: none;
 }
 
-.vp-doc h1 > .VPBadge {
-  margin-top: 4px;
-  vertical-align: top;
+.vp-doc h1 > .VPBadge,
+.vp-doc h2 > .VPBadge {
+  margin: 0 0 0 2px;
+  vertical-align: middle;
 }
 
 .vp-doc h2 > .VPBadge {
-  margin-top: 3px;
   padding: 0 8px;
-  vertical-align: top;
 }
 
 .vp-doc h3 > .VPBadge {

package/dist/client/theme-default/components/VPHero.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DefaultTheme } from 'vitepress/theme'
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 import { layoutInfoInjectionKey } from '../composables/layout'
 import VPButton from './VPButton.vue'
 import VPImage from './VPImage.vue'
@@ -21,7 +21,10 @@ defineProps<{
   actions?: HeroAction[]
 }>()
 
-const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
+const { heroImageSlotExists } = inject(
+  layoutInfoInjectionKey,
+  { heroImageSlotExists: computed(() => false) }
+)
 </script>
 
 <template>

package/dist/client/theme-default/components/VPLocalSearchBox.vue

@@ -2,7 +2,7 @@
 import localSearchIndex from '@localSearchIndex'
 import {
   computedAsync,
-  debouncedWatch,
+  watchDebounced,
   onKeyStroke,
   useEventListener,
   useLocalStorage,
@@ -26,7 +26,7 @@ import {
   watchEffect,
   type Ref
 } from 'vue'
-import type { ModalTranslations } from '../../../../types/local-search'
+import type { LocalSearchTranslations } from '../../../../types/local-search'
 import { pathToFile } from '../../app/utils'
 import { escapeRegExp } from '../../shared'
 import { useData } from '../composables/data'
@@ -113,16 +113,6 @@ const disableDetailedView = computed(() => {
   )
 })
 
-const buttonText = computed(() => {
-  const options = theme.value.search?.options ?? theme.value.algolia
-
-  return (
-    options?.locales?.[localeIndex.value]?.translations?.button?.buttonText ||
-    options?.translations?.button?.buttonText ||
-    'Search'
-  )
-})
-
 watchEffect(() => {
   if (disableDetailedView.value) {
     showDetailedList.value = false
@@ -144,7 +134,7 @@ const mark = computedAsync(async () => {
 
 const cache = new LRUCache<string, Map<string, string>>(16) // 16 files
 
-debouncedWatch(
+watchDebounced(
   () => [searchIndex.value, filterText.value, showDetailedList.value] as const,
   async ([index, filterTextValue, showDetailedListValue], old, onCleanup) => {
     if (old?.[0] !== index) {
@@ -339,8 +329,12 @@ onKeyStroke('Escape', () => {
   emit('close')
 })
 
-// Translations
-const defaultTranslations: { modal: ModalTranslations } = {
+/* Translations */
+
+const defaultTranslations: LocalSearchTranslations = {
+  button: {
+    buttonText: 'Search'
+  },
   modal: {
     displayDetails: 'Display detailed list',
     resetButtonTitle: 'Reset search',
@@ -360,7 +354,7 @@ const defaultTranslations: { modal: ModalTranslations } = {
 
 const translate = createSearchTranslate(defaultTranslations)
 
-// Back
+/* Back */
 
 onMounted(() => {
   // Prevents going to previous site
@@ -373,6 +367,7 @@ useEventListener('popstate', (event) => {
 })
 
 /** Lock body */
+
 const isLocked = useScrollLock(inBrowser ? document.body : null)
 
 onMounted(() => {
@@ -432,7 +427,7 @@ function onMouseMove(e: MouseEvent) {
           @submit.prevent=""
         >
           <label
-            :title="buttonText"
+            :title="translate('button.buttonText')"
             id="localsearch-label"
             for="localsearch-input"
           >
@@ -461,7 +456,7 @@ function onMouseMove(e: MouseEvent) {
             id="localsearch-input"
             enterkeyhint="go"
             maxlength="64"
-            :placeholder="buttonText"
+            :placeholder="translate('button.buttonText')"
             spellcheck="false"
             type="search"
           />

package/dist/client/theme-default/components/VPNavBar.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
-import { ref, watchPostEffect } from 'vue'
 import { useLayout } from '../composables/layout'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
@@ -21,21 +20,18 @@ defineEmits<{
 
 const { y } = useWindowScroll()
 const { isHome, hasSidebar } = useLayout()
-
-const classes = ref<Record<string, boolean>>({})
-
-watchPostEffect(() => {
-  classes.value = {
-    'has-sidebar': hasSidebar.value,
-    'home': isHome.value,
-    'top': y.value === 0,
-    'screen-open': props.isScreenOpen
-  }
-})
 </script>
 
 <template>
-  <div class="VPNavBar" :class="classes">
+  <div
+    class="VPNavBar"
+    :class="{
+      'has-sidebar': hasSidebar,
+      'home': isHome,
+      'top': y === 0,
+      'screen-open': isScreenOpen
+    }"
+  >
     <div class="wrapper">
       <div class="container">
         <div class="title">
@@ -55,7 +51,11 @@ watchPostEffect(() => {
             <VPNavBarSocialLinks class="social-links" />
             <VPNavBarExtra class="extra" />
             <slot name="nav-bar-content-after" />
-            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+            <VPNavBarHamburger
+              class="hamburger"
+              :active="isScreenOpen"
+              @click="$emit('toggle-screen')"
+            />
           </div>
         </div>
       </div>
@@ -187,8 +187,6 @@ watchPostEffect(() => {
   justify-content: flex-end;
   align-items: center;
   height: var(--vp-nav-height);
-  margin-right: -100vw;
-  padding-right: 100vw;
   transition: background-color 0.5s;
 }
 
@@ -201,11 +199,10 @@ watchPostEffect(() => {
   .VPNavBar:not(.has-sidebar):not(.home.top) .content-body {
     background-color: transparent;
   }
-}
 
-@media (max-width: 767px) {
   .content-body {
-    column-gap: 0.5rem;
+    margin-right: -100vw;
+    padding-right: 100vw;
   }
 }
 

package/dist/client/theme-default/components/VPNavBarAskAiButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <button type="button" class="VPNavBarAskAiButton">
+    <span class="vpi-sparkles" aria-hidden="true"></span>
+  </button>
+</template>
+
+<style scoped>
+.VPNavBarAskAiButton {
+  display: flex;
+  align-items: center;
+  height: var(--vp-nav-height);
+  padding: 8px 14px;
+  font-size: 20px;
+}
+
+@media (min-width: 768px) {
+  .VPNavBarAskAiButton {
+    height: auto;
+    padding: 11.5px;
+    transition: color 0.3s ease;
+    background-color: var(--vp-c-bg-alt);
+    border-radius: 8px;
+    font-size: 15px;
+    color: var(--vp-c-text-2);
+  }
+
+  .VPNavBarAskAiButton:hover {
+    color: var(--vp-c-brand-1);
+  }
+}
+</style>