vocs 2.1.12 → 2.2.3

package/src/internal/vite-plugins.ts

@@ -636,7 +636,7 @@ export function search(config: Config.Config): PluginOption {
   async function buildIndex(): Promise<SearchIndex.SearchIndex> {
     logger.info('Building search index...', { timestamp: true })
     const docs = await SearchDocuments.fromConfig(config)
-    const index = SearchIndex.fromSearchDocuments(docs)
+    const index = SearchIndex.fromSearchDocuments(docs, config)
 
     // Populate fileIds map for HMR
     for (const doc of docs) {

package/src/react/Link.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { useRouter, Link as WakuLink } from 'waku'
+import { useContext, useEffect, useState } from 'react'
+import { Link as WakuLink } from 'waku'
+import { unstable_RouterContext as WakuRouterContext } from 'waku/router/client'
 import * as Path from '../internal/path.js'
 
 const viewportPrefetchDelayMs = 2_000
@@ -57,14 +58,18 @@ function useViewportPrefetchReady(enabled: boolean) {
 
 export function Link(props: Link.Props) {
   const { to, unstable_prefetchOnEnter = true, unstable_prefetchOnView = true, ...rest } = props
-  const { path } = useRouter()
-  const prefetchOnView = useViewportPrefetchReady(Boolean(unstable_prefetchOnView))
+  const router = useContext(WakuRouterContext)
+  const routerPath = router?.route.path
+  const isExternal = Path.isExternal(props.to)
+  const prefetchOnView = useViewportPrefetchReady(
+    Boolean(unstable_prefetchOnView) && !isExternal && routerPath !== undefined,
+  )
 
-  if (Path.isExternal(props.to))
-    return <a {...rest} href={props.to} rel="noopener noreferrer" target="_blank" />
+  if (isExternal) return <a {...rest} href={props.to} rel="noopener noreferrer" target="_blank" />
 
   const [before, after] = (props.to || '').split('#')
-  const resolvedTo = `${before ? before : path}${after ? `#${after}` : ''}`
+  const resolvedTo = `${before ? before : (routerPath ?? '')}${after ? `#${after}` : ''}`
+  if (routerPath === undefined) return <a {...rest} href={resolvedTo || props.to} />
   return (
     <WakuLink
       {...rest}

package/src/react/internal/Outline.tsx

@@ -26,7 +26,10 @@ function useOutlineItems(options: { minLevel: number; maxLevel: number }) {
     const scanHeadings = () => {
       const headingElements = Array.from(
         document.querySelectorAll('article[data-v-content] :is(h2, h3, h4, h5, h6)[id]'),
-      )
+        // Changelog release bodies render as nested `[data-v-content]` inside the
+        // main article; their headings have their own `Versions` outline, so keep
+        // them out of the page outline (otherwise they flood/leak into it).
+      ).filter((element) => !element.closest('[data-v-changelog]'))
       const newItems = headingElements
         .map((element) => {
           const level = Number.parseInt(element.tagName[1] ?? '0', 10)

package/src/react/internal/Search.tsx

@@ -11,7 +11,7 @@ import LucideFile from '~icons/lucide/file'
 import LucideHash from '~icons/lucide/hash'
 import LucideSearch from '~icons/lucide/search'
 import * as Path from '../../internal/path.js'
-import { searchFields, storeFields, tokenize } from '../../internal/search.client.js'
+import { SearchConfig } from '../../internal/search.client.js'
 import { Link } from '../Link.js'
 import { useConfig } from '../useConfig.js'
 import { DialogTrigger } from './DialogTrigger.js'
@@ -86,14 +86,12 @@ export function Search(props: Search.Props) {
         const json = await getSearchIndex()
         setIndex(
           MiniSearch.loadJSON<SearchResult>(json, {
-            fields: [...searchFields],
-            storeFields: [...storeFields],
-            tokenize,
+            ...SearchConfig.getIndexOptions(config),
           }),
         )
       })
       .catch((error) => console.error('Failed to load search index:', error))
-  }, [open, index])
+  }, [open, index, config])
 
   React.useEffect(() => {
     try {
@@ -108,12 +106,11 @@ export function Search(props: Search.Props) {
       return
     }
 
-    const results = (index.search(query, { ...config.search, tokenize }) as SearchResult[]).slice(
-      0,
-      20,
-    )
+    const results = (
+      index.search(query, SearchConfig.getQueryOptions(config)) as SearchResult[]
+    ).slice(0, 20)
     setSearch((s) => ({ ...s, results, selectedIndex: 0 }))
-  }, [query, index, config.search])
+  }, [query, index, config])
 
   React.useEffect(() => {
     if (disableKeyboardShortcut) return

package/src/react/internal/Sidebar.tsx

@@ -86,7 +86,12 @@ function useActiveAnchor(enabled: boolean, path: string): string | null {
 
     const observeAll = () => {
       observer.disconnect()
-      for (const element of document.querySelectorAll(selector)) observer.observe(element)
+      for (const element of document.querySelectorAll(selector)) {
+        // Skip changelog release-body headings — they have no sidebar entry and
+        // would hijack the active section as you scroll through the changelog.
+        if (element.closest('[data-v-changelog]')) continue
+        observer.observe(element)
+      }
     }
     observeAll()
 
@@ -169,13 +174,23 @@ export declare namespace Sidebar {
 
 /** @internal */
 function ItemBadge(props: { badge: Sidebar_core.SidebarItemBadge }) {
-  const badge = typeof props.badge === 'string' ? { text: props.badge } : props.badge
+  const badge =
+    typeof props.badge === 'string' ? { text: props.badge, icon: undefined } : props.badge
   return (
     <Badge
       className="vocs:shrink-0 vocs:ml-2"
       data-v-sidebar-item-badge
+      data-v-icon={badge.icon ? '' : undefined}
       variant={badge.variant ?? 'info'}
     >
+      {badge.icon && (
+        <span
+          aria-hidden
+          data-v-sidebar-item-badge-icon
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: server-resolved SVG markup
+          dangerouslySetInnerHTML={{ __html: badge.icon }}
+        />
+      )}
       {badge.text}
     </Badge>
   )

package/src/react/internal/TwoslashHover.client.tsx

@@ -69,6 +69,9 @@ export function TwoslashHover(props: TwoslashHover.Props) {
           side="bottom"
           sideOffset={4}
           collisionAvoidance={{ side: 'none' }}
+          // Portaled to `body`; needs z-index or `minimal`/`blank` `[data-v-main]`
+          // (z-index: 10) covers it. The popup class `z-50` is inert here.
+          style={{ zIndex: 50 }}
         >
           <Popover.Popup className={className} initialFocus={false}>
             <Popover.Arrow className="vocs:data-[side=bottom]:top-[-8px] vocs:data-[side=left]:right-[-13px] vocs:data-[side=left]:rotate-90 vocs:data-[side=right]:left-[-13px] vocs:data-[side=right]:-rotate-90 vocs:data-[side=top]:bottom-[-8px] vocs:data-[side=top]:rotate-180">

package/src/react/internal/openapi/Operation.tsx

@@ -48,7 +48,9 @@ export function Operation(props: Operation.Props) {
   const title = operation.summary || `${operation.method} ${operation.path}`
   const Heading = `h${headingLevel}` as 'h2' | 'h3'
 
-  const samples = codeSamples(operation, server, { hideQueryParams })
+  // Webhooks are inbound deliveries to the consumer's URL, not callable
+  // endpoints — so skip the "Try" client and the request code samples.
+  const samples = operation.isWebhook ? [] : codeSamples(operation, server, { hideQueryParams })
   const responses = responseSamples(operation)
 
   return (
@@ -65,6 +67,7 @@ export function Operation(props: Operation.Props) {
           <HeadingAnchor id={operation.id} />
         </Heading>
         <div data-v-openapi-endpoint>
+          {operation.isWebhook && <Badge variant="note">Webhook</Badge>}
           <Badge variant={methodVariant(operation.method)}>{operation.method}</Badge>
           <code data-v-openapi-endpoint-path>{operation.path}</code>
         </div>