@voidzero-dev/vitepress-theme 4.4.2 → 4.5.0

package/src/components/vitepress-default/VPNavBarSearch.vue

@@ -8,13 +8,16 @@
  */
 import { onKeyStroke } from '@vueuse/core'
 import type { DefaultTheme } from 'vitepress/theme'
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
 import { useData } from '@vp-composables/data'
+import { resolveMode, resolveOptionsForLanguage } from '@vp-support/docsearch'
+import { smartComputed } from '@vp-support/reactivity'
+import VPNavBarAskAiButton from './VPNavBarAskAiButton.vue'
 import VPNavBarSearchButton from './VPNavBarSearchButton.vue'
 import VPSearchError from './VPSearchError.vue'
 import { getSearchProvider, validateAlgoliaConfig } from '@vp-support/search-config'
 
-const { theme } = useData()
+const { theme, localeIndex, lang } = useData()
 
 // Runtime-only provider detection
 // NOTE: We intentionally do NOT fall back to compile-time constants (__VP_LOCAL_SEARCH__, __ALGOLIA__)
@@ -23,10 +26,18 @@ const provider = computed(() => getSearchProvider(theme.value))
 
 const isLocal = computed(() => provider.value === 'local')
 
+const algoliaOptions = smartComputed<DefaultTheme.AlgoliaSearchOptions>(() => {
+  return resolveOptionsForLanguage(
+    theme.value.search?.options || {},
+    localeIndex.value,
+    lang.value
+  )
+})
+
 // Validate Algolia config before attempting to render
 const algoliaValidation = computed(() => {
   if (provider.value !== 'algolia') return null
-  const options = theme.value.search?.options ?? (theme.value as any).algolia
+  const options = algoliaOptions.value
   return validateAlgoliaConfig(options)
 })
 
@@ -63,91 +74,101 @@ const VPAlgoliaSearchBox = defineAsyncComponent({
   }
 })
 
+// #region Algolia Search
+
+const resolvedMode = computed(() => resolveMode(algoliaOptions.value))
+
+const askAiSidePanelConfig = computed(() => {
+  if (!resolvedMode.value.useSidePanel) return null
+  const askAi = algoliaOptions.value.askAi
+  if (!askAi || typeof askAi === 'string') return null
+  if (!askAi.sidePanel) return null
+  return askAi.sidePanel === true ? {} : askAi.sidePanel
+})
+
+const askAiShortcutEnabled = computed(() => {
+  return askAiSidePanelConfig.value?.keyboardShortcuts?.['Ctrl/Cmd+I'] !== false
+})
+
+type OpenTarget = 'search' | 'askAi' | 'toggleAskAi'
+type OpenRequest = { target: OpenTarget; nonce: number }
+const openRequest = ref<OpenRequest | null>(null)
+let openNonce = 0
+
 // to avoid loading the docsearch js upfront (which is more than 1/3 of the
 // payload), we delay initializing it until the user has actually clicked or
 // hit the hotkey to invoke it.
 const loaded = ref(false)
+const actuallyLoaded = ref(false)
+
+onMounted(() => {
+  if (!isAlgolia.value) return
 
-const preconnect = () => {
   const id = 'VPAlgoliaPreconnect'
+  if (document.getElementById(id)) return
+
+  const appId =
+    algoliaOptions.value.appId ||
+    (typeof algoliaOptions.value.askAi === 'object'
+      ? algoliaOptions.value.askAi?.appId
+      : undefined)
+
+  if (!appId) return
 
   const rIC = window.requestIdleCallback || setTimeout
   rIC(() => {
     const preconnect = document.createElement('link')
     preconnect.id = id
     preconnect.rel = 'preconnect'
-    preconnect.href = `https://${
-      ((theme.value.search?.options as DefaultTheme.AlgoliaSearchOptions) ??
-        (theme.value as any).algolia)!.appId
-    }-dsn.algolia.net`
+    preconnect.href = `https://${appId}-dsn.algolia.net`
     preconnect.crossOrigin = ''
     document.head.appendChild(preconnect)
   })
-}
-
-onMounted(() => {
-  if (!isAlgolia.value) {
-    return
-  }
-
-  preconnect()
+})
 
-  const handleSearchHotKey = (event: KeyboardEvent) => {
+if (isAlgolia.value) {
+  onKeyStroke('k', (event) => {
     if (
-      (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) ||
-      (!isEditingContent(event) && event.key === '/')
+      resolvedMode.value.showKeywordSearch &&
+      (event.ctrlKey || event.metaKey)
     ) {
       event.preventDefault()
-      load()
-      remove()
+      loadAndOpen('search')
     }
-  }
-
-  const remove = () => {
-    window.removeEventListener('keydown', handleSearchHotKey)
-  }
+  })
 
-  window.addEventListener('keydown', handleSearchHotKey)
+  onKeyStroke('i', (event) => {
+    if (
+      askAiSidePanelConfig.value &&
+      askAiShortcutEnabled.value &&
+      (event.ctrlKey || event.metaKey)
+    ) {
+      event.preventDefault()
+      loadAndOpen('askAi')
+    }
+  })
 
-  onUnmounted(remove)
-})
+  onKeyStroke('/', (event) => {
+    if (resolvedMode.value.showKeywordSearch && !isEditingContent(event)) {
+      event.preventDefault()
+      loadAndOpen('search')
+    }
+  })
+}
 
-function load() {
+function loadAndOpen(target: OpenTarget) {
   if (!loaded.value) {
     loaded.value = true
-    setTimeout(poll, 16)
   }
-}
-
-function poll() {
-  // programmatically open the search box after initialize
-  const e = new Event('keydown') as any
-
-  e.key = 'k'
-  e.metaKey = true
 
-  window.dispatchEvent(e)
-
-  setTimeout(() => {
-    if (!document.querySelector('.DocSearch-Modal')) {
-      poll()
-    }
-  }, 16)
+  // This will either be handled immediately if DocSearch is ready,
+  // or queued by the AlgoliaSearchBox until its instances become ready.
+  openRequest.value = { target, nonce: ++openNonce }
 }
 
-function isEditingContent(event: KeyboardEvent): boolean {
-  const element = event.target as HTMLElement
-  const tagName = element.tagName
+// #endregion
 
-  return (
-    element.isContentEditable ||
-    tagName === 'INPUT' ||
-    tagName === 'SELECT' ||
-    tagName === 'TEXTAREA'
-  )
-}
-
-// Local search
+// #region Local Search
 
 const showSearch = ref(false)
 
@@ -172,31 +193,58 @@ onKeyStroke('/', (event) => {
     showSearch.value = true
   }
 })
+
+// #endregion
+
+function isEditingContent(event: KeyboardEvent): boolean {
+  const element = event.target as HTMLElement
+  const tagName = element.tagName
+
+  return (
+    element.isContentEditable ||
+    tagName === 'INPUT' ||
+    tagName === 'SELECT' ||
+    tagName === 'TEXTAREA'
+  )
+}
 </script>
 
 <template>
   <div class="VPNavBarSearch">
     <!-- Local Search -->
     <template v-if="provider === 'local'">
+      <VPNavBarSearchButton
+        :text="algoliaOptions.translations?.button?.buttonText || 'Search'"
+        :aria-label="algoliaOptions.translations?.button?.buttonAriaLabel || 'Search'"
+        :aria-keyshortcuts="'/ control+k meta+k'"
+        @click="showSearch = true"
+      />
       <VPLocalSearchBox
         v-if="showSearch"
         @close="showSearch = false"
       />
-
-      <div id="local-search">
-        <VPNavBarSearchButton @click="showSearch = true" />
-      </div>
     </template>
 
     <!-- Algolia Search - only render if config is valid -->
-    <template v-else-if="isAlgolia">
-      <!-- Show button until Algolia is loaded, then Algolia takes over the #docsearch container -->
-      <div v-if="!loaded" id="docsearch">
-        <VPNavBarSearchButton @click="load" />
-      </div>
+    <template v-if="isAlgolia">
+      <VPNavBarSearchButton
+        v-if="resolvedMode.showKeywordSearch"
+        :text="algoliaOptions.translations?.button?.buttonText || 'Search'"
+        :aria-label="algoliaOptions.translations?.button?.buttonAriaLabel || 'Search'"
+        :aria-keyshortcuts="'/ control+k meta+k'"
+        @click="loadAndOpen('search')"
+      />
+      <VPNavBarAskAiButton
+        v-if="askAiSidePanelConfig"
+        :aria-label="askAiSidePanelConfig.button?.translations?.buttonAriaLabel || 'Ask AI'"
+        :aria-keyshortcuts="askAiShortcutEnabled ? 'control+i meta+i' : undefined"
+        @click="actuallyLoaded ? loadAndOpen('toggleAskAi') : loadAndOpen('askAi')"
+      />
       <VPAlgoliaSearchBox
-        v-else
-        :algolia="algoliaValidation!.config!"
+        v-if="loaded"
+        :algolia-options
+        :open-request
+        @vue:beforeMount="actuallyLoaded = true"
       />
     </template>
 
@@ -204,7 +252,7 @@ onKeyStroke('/', (event) => {
   </div>
 </template>
 
-<style>
+<style scoped>
 .VPNavBarSearch {
   display: flex;
   align-items: center;
@@ -212,6 +260,7 @@ onKeyStroke('/', (event) => {
 
 @media (min-width: 768px) {
   .VPNavBarSearch {
+    gap: 8px;
     flex-grow: 1;
     padding-left: 8px;
   }

package/src/components/vitepress-default/VPNavBarSearchButton.vue

@@ -1,176 +1,67 @@
 <script lang="ts" setup>
-import { createSearchTranslate } from '@vp-support/translation'
-
-// Button translations
-interface ButtonTranslations {
-  buttonText?: string
-  buttonAriaLabel?: string
-}
-
-const defaultTranslations: { button: ButtonTranslations } = {
-  button: {
-    buttonText: 'Search',
-    buttonAriaLabel: 'Search'
-  }
-}
-
-const translate = createSearchTranslate(defaultTranslations)
+defineProps<{
+  text: string
+}>()
 </script>
 
 <template>
-  <button
-    type="button"
-    :aria-label="translate('button.buttonAriaLabel')"
-    aria-keyshortcuts="/ control+k meta+k"
-    class="DocSearch DocSearch-Button VPSearchButton"
-  >
-    <span class="DocSearch-Button-Container">
-      <span class="vpi-search DocSearch-Search-Icon"></span>
-      <span class="DocSearch-Button-Placeholder">{{ translate('button.buttonText') }}</span>
-    </span>
-    <span class="DocSearch-Button-Keys">
-      <kbd class="DocSearch-Button-Key"></kbd>
-      <kbd class="DocSearch-Button-Key"></kbd>
+  <button type="button" class="VPNavBarSearchButton">
+    <span class="vpi-search" aria-hidden="true"></span>
+    <span class="text">{{ text }}</span>
+    <span class="keys" aria-hidden="true">
+      <kbd class="key-cmd">&#x2318;</kbd>
+      <kbd class="key-ctrl">Ctrl</kbd>
+      <kbd>K</kbd>
     </span>
   </button>
 </template>
 
-<style>
-[class*='DocSearch'] {
-  --docsearch-actions-height: auto;
-  --docsearch-actions-width: auto;
-  --docsearch-background-color: var(--vp-c-bg-soft);
-  --docsearch-container-background: var(--vp-backdrop-bg-color);
-  --docsearch-focus-color: var(--vp-c-brand-1);
-  --docsearch-footer-background: var(--vp-c-bg);
-  --docsearch-highlight-color: var(--vp-c-brand-1);
-  --docsearch-hit-background: var(--vp-c-default-soft);
-  --docsearch-hit-color: var(--vp-c-text-1);
-  --docsearch-hit-highlight-color: var(--vp-c-brand-soft);
-  --docsearch-icon-color: var(--vp-c-text-2);
-  --docsearch-key-background: transparent;
-  --docsearch-key-color: var(--vp-c-text-2);
-  --docsearch-modal-background: var(--vp-c-bg-soft);
-  --docsearch-muted-color: var(--vp-c-text-2);
-  --docsearch-primary-color: var(--vp-c-brand-1);
-  --docsearch-searchbox-focus-background: transparent;
-  --docsearch-secondary-text-color: var(--vp-c-text-2);
-  --docsearch-soft-primary-color: var(--vp-c-brand-soft);
-  --docsearch-subtle-color: var(--vp-c-divider);
-  --docsearch-success-color: var(--vp-c-brand-soft);
-  --docsearch-text-color: var(--vp-c-text-1);
-}
-
-.dark [class*='DocSearch'] {
-  --docsearch-modal-shadow: none;
-}
-
-.DocSearch-Clear {
-  padding: 0 8px;
-}
-
-.DocSearch-Commands-Key {
-  padding: 4px;
-  border: 1px solid var(--docsearch-subtle-color);
-  border-radius: 4px;
-}
-
-.DocSearch-Hit a:focus-visible {
-  outline: 2px solid var(--docsearch-focus-color);
-}
-
-.DocSearch-Logo [class^='cls-'] {
-  fill: currentColor;
-}
-
-.DocSearch-SearchBar + .DocSearch-Footer {
-  border-top-color: transparent;
-}
-
-.DocSearch-Title {
-  font-size: revert;
-  line-height: revert;
-}
-
-.DocSearch-Button {
-  --docsearch-muted-color: var(--docsearch-text-color);
-  --docsearch-searchbox-background: transparent;
+<style scoped>
+.VPNavBarSearchButton {
   display: flex;
   align-items: center;
-  gap: 4px;
-  width: auto;
-  height: 40px;
-  padding: 0 12px;
-  margin: 0;
-  border: none;
-  border-radius: 8px;
-  background: var(--docsearch-searchbox-background);
-  color: var(--docsearch-muted-color);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.DocSearch-Button:hover {
-  background: var(--vp-c-default-soft);
+  gap: 8px;
+  height: var(--vp-nav-height);
+  padding: 8px 14px;
+  font-size: 20px;
 }
 
-.DocSearch-Button-Container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.text,
+.keys,
+:root.mac .key-ctrl,
+:root:not(.mac) .key-cmd {
+  display: none;
 }
 
-.DocSearch-Search-Icon {
-  color: inherit !important;
-  width: 20px;
-  height: 20px;
+kbd {
+  font-family: inherit;
+  font-weight: 500;
 }
 
 @media (min-width: 768px) {
-  .DocSearch-Button {
-    --docsearch-muted-color: var(--docsearch-secondary-text-color);
-    --docsearch-searchbox-background: var(--vp-c-bg-alt);
+  .VPNavBarSearchButton {
+    height: auto;
+    padding: 8px 12px;
+    background-color: var(--vp-c-bg-alt);
+    border-radius: 8px;
+    font-size: 14px;
+    line-height: 1;
+    color: var(--vp-c-text-2);
   }
 
-  .DocSearch-Search-Icon {
-    width: 15px;
-    height: 15px;
-  }
-
-  .DocSearch-Button-Placeholder {
+  .text {
+    display: inline;
     font-size: 13px;
   }
-}
-
-/*
- * Placeholder button keyboard shortcut styles.
- * Scoped to .VPSearchButton so they don't conflict with DocSearch's real button.
- */
-.VPSearchButton .DocSearch-Button-Keys {
-  min-width: auto;
-  margin: 0;
-  padding: 4px 6px;
-  background-color: var(--docsearch-key-background);
-  border: 1px solid var(--docsearch-subtle-color);
-  border-radius: 4px;
-  font-size: 12px;
-  line-height: 1;
-  color: var(--docsearch-key-color);
-}
-
-.VPSearchButton .DocSearch-Button-Keys > * {
-  display: none;
-}
 
-.VPSearchButton .DocSearch-Button-Keys:after {
-  /*rtl:ignore*/
-  direction: ltr;
-  content: 'Ctrl K';
-}
-
-.mac .VPSearchButton .DocSearch-Button-Keys:after {
-  content: '\2318  K';
+  .keys {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 6px;
+    border: 1px solid var(--vp-c-divider);
+    border-radius: 4px;
+    font-size: 12px;
+  }
 }
 </style>

package/src/components/vitepress-default/VPNavBarTranslations.vue

@@ -19,7 +19,13 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
       <p class="title">{{ currentLang.label }}</p>
 
       <template v-for="locale in localeLinks" :key="locale.link">
-        <VPMenuLink :item="locale" :lang="locale.lang" :dir="locale.dir" />
+        <VPMenuLink
+          :item="locale"
+          :lang="locale.lang"
+          :hreflang="locale.lang"
+          rel="alternate"
+          :dir="locale.dir"
+        />
       </template>
     </div>
   </VPFlyout>

package/src/components/vitepress-default/VPNavScreen.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useScrollLock } from '@vueuse/core'
 import { inBrowser } from 'vitepress'
-import { ref } from 'vue'
 import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
 import VPNavScreenMenu from './VPNavScreenMenu.vue'
 import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
@@ -11,7 +10,6 @@ defineProps<{
   open: boolean
 }>()
 
-const screen = ref<HTMLElement | null>(null)
 const isLocked = useScrollLock(inBrowser ? document.body : null)
 </script>
 
@@ -21,7 +19,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
     @enter="isLocked = true"
     @after-leave="isLocked = false"
   >
-    <div v-if="open" class="VPNavScreen" ref="screen" id="VPNavScreen">
+    <div v-if="open" class="VPNavScreen" id="VPNavScreen">
       <div class="container">
         <slot name="nav-screen-content-before" />
         <VPNavScreenMenu class="menu" />

package/src/shims.d.ts

@@ -0,0 +1,10 @@
+declare module '@localSearchIndex' {
+  const data: Record<string, () => Promise<{ default: string }>>
+  export default data
+}
+
+declare module 'mark.js/src/vanilla.js' {
+  import type Mark from 'mark.js'
+  const mark: typeof Mark
+  export default mark
+}

package/src/styles/base.css

@@ -55,6 +55,8 @@ body {
   image-rendering: high-quality;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-autospace: normal;
+  text-spacing-trim: normal;
   background-color: var(--vp-c-bg);
 }
 

package/src/styles/vitepress-default/base-scoped.css

@@ -49,6 +49,8 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-autospace: normal;
+  text-spacing-trim: normal;
 }
 
 .vp-doc main {

package/src/styles/vitepress-default/base.css

@@ -44,6 +44,8 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-autospace: normal;
+  text-spacing-trim: normal;
 }
 
 main {