@clidey/dory 1.0.8 → 1.9.0

package/src/components/search.tsx

@@ -6,44 +6,83 @@ import {
 } from '@algolia/autocomplete-core'
 import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
 import {
-  forwardRef,
   Fragment,
+  forwardRef,
   Suspense,
   useCallback,
   useEffect,
   useId,
   useRef,
   useState,
-  type JSX,
 } from 'react'
+import type { TargetedEvent, TargetedKeyboardEvent, TargetedMouseEvent } from 'preact'
 import Highlighter from 'react-highlight-words'
-import { cn, Spinner, SearchInput as UxSearchInput } from '@clidey/ux'
+import { CatalogIcon, cn, Spinner, SearchInput as UxSearchInput } from '@clidey/ux'
+
 import classNames from 'classnames'
 import { useLocation } from 'wouter-preact'
 import { useMobileNavigation } from '../ui/mobile-navigation'
 import { useIsEmbedded, usePathname, useSearchParams } from './hooks'
 import { search } from './search-index'
-import { ALL_NAVIGATION } from './store'
+import { ensureSearchContent, getNavigationForPath } from './store'
+import { captureDocsEvent } from '../utils/analytics'
+import { ChatAssistant, useChatAssistant } from './chat-assistant'
 
 type EmptyObject = Record<string, never>
-type Result = any;
+type Result = { url: string; title: string; pageTitle?: string; kind?: 'ask' }
+const ASK_RESULT_URL = '__dory_ask__'
 
 type Autocomplete = AutocompleteApi<
   Result,
-  JSX.TargetedEvent,
-  JSX.TargetedMouseEvent<HTMLElement>,
-  JSX.TargetedKeyboardEvent<HTMLElement>
+  TargetedEvent,
+  TargetedMouseEvent<HTMLElement>,
+  TargetedKeyboardEvent<HTMLElement>
 >
 
-function useAutocomplete({ onNavigate }: { onNavigate: () => void }) {
+const SUGGESTED_PAGES = 3
+
+/**
+ * Results shown before the reader types: the current page, its sections, and
+ * the next few pages in navigation order.
+ */
+function suggestions(pathname: string): Result[] {
+  const pages = getNavigationForPath(pathname).flatMap(tab => tab.groups.flatMap(group => group.pages))
+  const index = Math.max(0, pages.findIndex(page => page.href === pathname))
+  const current = pages[index]
+  if (!current) return []
+  const sections = Array.from(document.querySelectorAll('.dory-article h2[id]'))
+    .filter(heading => !heading.closest('.dory-specimen'))
+    .map(heading => ({
+      url: `${current.href}#${heading.id}`,
+      title: Array.from(heading.childNodes)
+        .filter(node => !(node instanceof Element && node.classList.contains('dory-anchor')))
+        .map(node => node.textContent ?? '')
+        .join('')
+        .trim(),
+    }))
+  const next = pages.slice(index + 1, index + 1 + SUGGESTED_PAGES)
+  return [current, ...sections, ...next].map(item => ({ url: 'href' in item ? item.href : item.url, title: item.title }))
+}
+
+function useAutocomplete({ onNavigate, onAsk, chatEnabled }: { onNavigate: () => void; onAsk: (query: string) => void; chatEnabled: boolean }) {
   const id = useId()
   const [, nav] = useLocation()
+  // getSources is created once, so read the current page through a ref.
+  const pathnameRef = useRef('')
+  pathnameRef.current = usePathname()
+  const queryRef = useRef('')
+  const onAskRef = useRef(onAsk)
+  onAskRef.current = onAsk
+  const chatEnabledRef = useRef(chatEnabled)
+  chatEnabledRef.current = chatEnabled
   const [autocompleteState, setAutocompleteState] = useState<
     AutocompleteState<Result> | EmptyObject
   >({})
 
   function navigate({ itemUrl }: { itemUrl?: string }) {
     if (itemUrl) {
+      const query = queryRef.current.trim()
+      if (query) captureDocsEvent('docs_search_result_clicked', { query, result: itemUrl, path: pathnameRef.current })
       nav(itemUrl);
     }
 
@@ -53,18 +92,20 @@ function useAutocomplete({ onNavigate }: { onNavigate: () => void }) {
   const [autocomplete] = useState<Autocomplete>(() =>
     createAutocomplete<
       Result,
-      JSX.TargetedEvent,
-      JSX.TargetedMouseEvent<HTMLElement>,
-      JSX.TargetedKeyboardEvent<HTMLElement>
+      TargetedEvent,
+      TargetedMouseEvent<HTMLElement>,
+      TargetedKeyboardEvent<HTMLElement>
     >({
       id,
-      placeholder: 'Find something...',
+      placeholder: 'Search documentation',
       defaultActiveItemId: 0,
       onStateChange({ state }) {
+        queryRef.current = state.query
         setAutocompleteState(state)
       },
-      shouldPanelOpen({ state }) {
-        return state.query !== ''
+      openOnFocus: true,
+      shouldPanelOpen() {
+        return true
       },
       navigator: {
         navigate,
@@ -73,13 +114,21 @@ function useAutocomplete({ onNavigate }: { onNavigate: () => void }) {
         return [
             {
               sourceId: 'documentation',
-              getItems() {
-                return search(query, { limit: 5 })
+              async getItems() {
+                if (!query) return suggestions(pathnameRef.current)
+                await ensureSearchContent()
+                const pages = search(query, { limit: 8 })
+                return chatEnabledRef.current
+                  ? [{ url: ASK_RESULT_URL, title: query, kind: 'ask' as const }, ...pages]
+                  : pages
               },
               getItemUrl({ item }) {
-                return item.url
+                return item.kind === 'ask' ? undefined : item.url
+              },
+              onSelect({ item }) {
+                if (item.kind === 'ask') onAskRef.current(item.title)
+                else navigate({ itemUrl: item.url })
               },
-              onSelect: navigate,
             },
           ]
       },
@@ -89,11 +138,10 @@ function useAutocomplete({ onNavigate }: { onNavigate: () => void }) {
   return { autocomplete, autocompleteState }
 }
 
-
 function HighlightQuery({ text, query }: { text: string; query: string }) {
   return (
     <Highlighter
-      highlightClassName="underline bg-transparent text-brand-foreground"
+      highlightClassName="dory-search-highlight"
       searchWords={[query]}
       autoEscape={true}
       textToHighlight={text}
@@ -114,64 +162,46 @@ function SearchResult({
 }) {
   const id = useId()
 
-  const currentPage = result.url.split('#')[0];
-  
-  // Get the group containing the current page
-  const group = ALL_NAVIGATION.find(group => 
-    group.groups.some(group => 
-      group.pages.some(page => page.href === currentPage)
+  if (result.kind === 'ask') {
+    return (
+      <li className="dory-search-result dory-search-ask-result flex cursor-default items-center gap-4 px-5 py-3" {...autocomplete.getItemProps({ item: result, source: collection.source })}>
+        <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)]" aria-hidden="true"><CatalogIcon name="ai" className="h-4 w-4" /></span>
+        <span className="min-w-0 flex-1">
+          <span className="block truncate text-sm font-semibold text-foreground">{result.title}</span>
+          <span className="block text-xs text-muted-foreground">Ask Dory · answers cite these docs</span>
+        </span>
+        <span className="hidden gap-1 text-xs text-muted-foreground sm:flex" aria-hidden="true"><kbd className="dory-search-key">Tab</kbd><kbd className="dory-search-key">↵</kbd></span>
+      </li>
     )
-  );
-
-  const page = group?.groups.find(group => group.pages.find(page => page.href === currentPage));
+  }
 
-  const sectionTitle = group?.title;
-  const pageTitle = page?.title;
-  
-  const hierarchy: any[] = [sectionTitle, pageTitle].filter(
-    (x): x is string => typeof x === 'string',
-  );
+  const [currentPage, hash] = result.url.split('#')
+  const group = getNavigationForPath(currentPage).flatMap(tab => tab.groups)
+    .find(group => group.pages.some(page => page.href === currentPage))
+  const pageTitle = group?.pages.find(page => page.href === currentPage)?.title
+  // Sections show "Group · Page" above their title; pages show only their group.
+  const eyebrow = [group?.title, hash ? pageTitle : undefined].filter(Boolean).join(' · ')
 
   return (
     <li
-      className={classNames(
-        'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
-      )}
+      className="dory-search-result group flex cursor-default items-center gap-4 px-8 py-3"
       aria-labelledby={`${id}-hierarchy ${id}-title`}
       {...autocomplete.getItemProps({
         item: result,
         source: collection.source,
       })}
     >
-      <div
-        id={`${id}-title`}
-        aria-hidden="true"
-        className="text-sm font-medium text-brand-foreground group-aria-selected:text-brand-foreground"
-      >
-        <HighlightQuery text={result.title} query={query} />
-      </div>
-      {hierarchy.length > 0 && (
-        <div
-          id={`${id}-hierarchy`}
-          aria-hidden="true"
-          className="mt-1 truncate text-2xs whitespace-nowrap text-muted-foreground"
-        >
-          {hierarchy.map((item, itemIndex, items) => (
-            <Fragment key={itemIndex}>
-              <HighlightQuery text={item} query={query} />
-              <span
-                className={
-                  itemIndex === items.length - 1
-                    ? 'sr-only'
-                    : 'mx-2 text-zinc-300 dark:text-zinc-700'
-                }
-              >
-                /
-              </span>
-            </Fragment>
-          ))}
+      <span className="dory-search-result-icon flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-[var(--border)]" aria-hidden="true"><CatalogIcon name="file" className="h-4 w-4" /></span>
+      <div className="min-w-0 flex-1">
+        <div id={`${id}-title`} aria-hidden="true" className="dory-search-title">
+          <HighlightQuery text={result.title} query={query} />
         </div>
-      )}
+        {eyebrow && (
+          <div id={`${id}-hierarchy`} aria-hidden="true" className="dory-search-eyebrow truncate">
+            <HighlightQuery text={eyebrow} query={query} />
+          </div>
+        )}
+      </div>
     </li>
   )
 }
@@ -207,15 +237,17 @@ function SearchResults({
   }
 
   return (
-    <ul {...autocomplete.getListProps()}>
-      {collection.items.map((result) => (
-        <SearchResult
-          key={result.url}
-          result={result}
-          autocomplete={autocomplete}
-          collection={collection}
-          query={query}
-        />
+    <ul className="py-3" {...autocomplete.getListProps()}>
+      {collection.items.map((result, index) => (
+        <Fragment key={result.url}>
+          {index === 1 && collection.items[0]?.kind === 'ask' && <li className="px-8 pb-1 pt-4 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground" role="presentation">Pages</li>}
+          <SearchResult
+            result={result}
+            autocomplete={autocomplete}
+            collection={collection}
+            query={query}
+          />
+        </Fragment>
       ))}
     </ul>
   )
@@ -227,24 +259,26 @@ const SearchInput = forwardRef<
     autocomplete: Autocomplete
     autocompleteState: AutocompleteState<Result> | EmptyObject
     onClose: () => void
+    onAsk: () => void
+    chatEnabled: boolean
   }
->(function SearchInput({ autocomplete, autocompleteState, onClose }, inputRef) {
+>(function SearchInput({ autocomplete, autocompleteState, onClose, onAsk, chatEnabled }, inputRef) {
   const inputProps = autocomplete.getInputProps({ inputElement: null })
 
   return (
-    <div className="group relative flex">
-      <UxSearchInput
+    <div className="relative flex h-16 items-center gap-2 px-4 sm:gap-3 sm:px-7">
+      <CatalogIcon name="search" aria-hidden="true" className="h-5 w-5 shrink-0 text-muted-foreground" />
+      <input
         ref={inputRef}
         data-autofocus
-        className={cn({
-            'pr-11': autocompleteState.status === 'stalled',
-            'pr-4': autocompleteState.status !== 'stalled',
-        })}
+        className="dory-search-input h-full min-w-0 flex-1 bg-transparent outline-none"
         {...inputProps}
         onKeyDown={(event) => {
-          if (
+          if (event.key === 'Tab' && !event.shiftKey && chatEnabled) {
+            event.preventDefault()
+            onAsk()
+          } else if (
             event.key === 'Escape' &&
-            !autocompleteState.isOpen &&
             autocompleteState.query === ''
           ) {
             // In Safari, closing the dialog with the escape key can sometimes cause the scroll position to jump to the
@@ -259,11 +293,11 @@ const SearchInput = forwardRef<
           }
         }}
       />
-      {autocompleteState.status === 'stalled' && (
-        <div className="absolute inset-y-0 right-3 flex items-center">
-          <Spinner className="h-5 w-5 animate-spin text-brand-foreground" />
-        </div>
-      )}
+      {autocompleteState.status === 'stalled'
+        ? <Spinner className="h-5 w-5 animate-spin text-brand-foreground" />
+        : null}
+      <span className="dory-search-active" aria-current="page">Search</span>
+      {chatEnabled && <button type="button" className="dory-search-ask-button" onClick={onAsk}>Ask Dory</button>}
     </div>
   )
 })
@@ -282,19 +316,63 @@ function SearchDialog({
   const formRef = useRef<React.ElementRef<'form'>>(null)
   const panelRef = useRef<React.ElementRef<'div'>>(null)
   const inputRef = useRef<React.ElementRef<typeof SearchInput>>(null)
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const chat = useChatAssistant()
+  const [mode, setMode] = useState<'search' | 'chat'>('search')
   const { autocomplete, autocompleteState } = useAutocomplete({
     onNavigate() {
       onNavigate()
       setOpen(false)
     },
+    onAsk: askSearchQuery,
+    chatEnabled: chat.enabled,
   })
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
+
+  function askSearchQuery(query: string) {
+    if (!chat.enabled) return
+    captureDocsEvent('docs_chat_opened', { path: window.location.pathname })
+    setMode('chat')
+    if (query.trim().length >= 3) void chat.ask(query)
+    else chat.setDraft(query)
+  }
+
+  function showChat() {
+    if (!chat.enabled) return
+    const query = autocompleteState.query?.trim()
+    if (query) chat.setDraft(query)
+    captureDocsEvent('docs_chat_opened', { path: window.location.pathname })
+    setMode('chat')
+  }
+
+  function showSearch() {
+    if (chat.draft.trim() && !autocompleteState.query?.trim()) autocomplete.setQuery(chat.draft)
+    setMode('search')
+  }
+
+  useEffect(() => {
+    if (chat.enabled && autocompleteState.query) void autocomplete.refresh()
+  }, [chat.enabled])
+
+  useEffect(() => {
+    if (!open || !autocompleteState.isOpen || !autocompleteState.collections) return
+    const query = autocompleteState.query?.trim()
+    if (!query) return
+    const resultCount = autocompleteState.collections.reduce((count, collection) => count + collection.items.filter(item => item.kind !== 'ask').length, 0)
+    const timeout = window.setTimeout(() => {
+      captureDocsEvent('docs_search', { query, result_count: resultCount, path: pathname })
+    }, 600)
+    return () => window.clearTimeout(timeout)
+  }, [open, autocompleteState.query, autocompleteState.collections, autocompleteState.isOpen, pathname])
 
   useEffect(() => {
     setOpen(false)
   }, [pathname, searchParams, setOpen])
 
+  useEffect(() => {
+    if (!open) setMode('search')
+  }, [open])
+
   useEffect(() => {
     if (open) {
       return
@@ -331,9 +409,9 @@ function SearchDialog({
       <div className="fixed inset-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-20 md:py-32 lg:px-8 lg:py-[15vh] max-w-[calc(100vw-16px)]">
         <DialogPanel
           transition
-          className="max-sm:mt-[25vh] mx-auto transform-gpu overflow-hidden rounded-lg bg-zinc-50 shadow-xl ring-1 ring-zinc-900/7.5 data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800"
+          className="dory-search-panel max-sm:mt-[4vh] mx-auto transform-gpu overflow-hidden data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:max-w-5xl"
         >
-          <div {...autocomplete.getRootProps({})}>
+          {mode === 'search' ? <div {...autocomplete.getRootProps({})}>
             <form
               ref={formRef}
               {...autocomplete.getFormProps({
@@ -345,13 +423,15 @@ function SearchDialog({
                 autocomplete={autocomplete}
                 autocompleteState={autocompleteState}
                 onClose={() => setOpen(false)}
+                onAsk={showChat}
+                chatEnabled={chat.enabled}
               />
               <div
                 ref={panelRef}
-                className="border-t border-border bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5"
+                className="max-h-[60vh] overflow-y-auto border-t border-[var(--border)] empty:hidden"
                 {...autocomplete.getPanelProps({})}
               >
-                {autocompleteState.isOpen && (
+                {autocompleteState.isOpen && autocompleteState.collections[0] && (
                   <SearchResults
                     autocomplete={autocomplete}
                     query={autocompleteState.query}
@@ -360,7 +440,21 @@ function SearchDialog({
                 )}
               </div>
             </form>
-          </div>
+            <div className="dory-search-footer" aria-hidden="true">
+              <span>↑ ↓ Navigate</span><span>↵ Open</span>{chat.enabled && <span>Tab Ask Dory</span>}<span>Esc Close</span>
+            </div>
+          </div> : <>
+            <div className="dory-search-tabs flex items-center gap-2 border-b border-[var(--border)] px-5 py-4 sm:px-7">
+              <div className="min-w-0 flex-1">
+                <h2 className="text-base font-semibold text-foreground">Ask Dory</h2>
+                <p className="text-xs text-muted-foreground">Grounded in these docs</p>
+              </div>
+              {chat.messages.length > 0 && <button type="button" onClick={chat.reset} className="rounded-lg px-3 py-2 text-sm text-muted-foreground hover:bg-[var(--accent)]">+ New</button>}
+              <button type="button" onClick={showSearch} className="rounded-lg px-3 py-2 text-sm text-muted-foreground hover:bg-[var(--accent)]">Search</button>
+              <span className="rounded-lg bg-[var(--brand-primary)] px-3 py-2 text-sm font-semibold text-white">Ask Dory</span>
+            </div>
+            <ChatAssistant chat={chat} onNavigate={() => { onNavigate(); setOpen(false) }} onSearch={showSearch} />
+          </>}
         </DialogPanel>
       </div>
     </Dialog>
@@ -383,8 +477,9 @@ function useSearchProps() {
       open,
       setOpen: useCallback(
         (open: boolean) => {
+          const trigger = inputRef.current?.closest('[data-slot="search-input-wrapper"]') ?? inputRef.current
           const { width = 0, height = 0 } =
-            inputRef.current?.getBoundingClientRect?.() ?? {}
+            trigger?.getBoundingClientRect?.() ?? {}
           if (!open || (width !== 0 && height !== 0)) {
             setOpen(open)
           }
@@ -407,8 +502,8 @@ export function Search() {
       onClick={isEmbedded ? buttonProps.onClick : undefined}
     >
       <UxSearchInput
-        aria-label="Find something..."
-        placeholder="Find something..."
+        aria-label="Search documentation"
+        placeholder="Search documentation"
         {...buttonProps}
       />
       <Suspense fallback={null}>
@@ -426,16 +521,25 @@ export function MobileSearch() {
   return (
     <div
       className={cn({
-        "contents": !isEmbedded,
+        "inline-flex": !isEmbedded,
         "[&_input]:hidden [&_svg]:mr-0 cursor-pointer": isEmbedded,
       }, "lg:hidden")}
-      onClick={isEmbedded ? buttonProps.onClick : undefined}
+      role="button"
+      tabIndex={0}
+      aria-label="Search documentation"
+      onClick={buttonProps.onClick}
+      onKeyDown={event => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          buttonProps.onClick()
+        }
+      }}
     >
       <UxSearchInput
         className="text-sm"
-        aria-label="Find something..."
+        aria-label="Search documentation"
         {...buttonProps}
-        placeholder="Find something..."
+        placeholder="Search documentation"
       />
       <Suspense fallback={null}>
         <SearchDialog

package/src/components/store.ts

@@ -4,6 +4,7 @@ import docsConfig from '../../docs/dory.json' with { type: 'json' };
 import type { DoryConfig } from '../types/config';
 import { addToSearchIndex } from './search-index';
 import { withBase } from '../utils/base-path';
+import { contentScope } from '../utils/content-scope';
 
 const config = docsConfig as DoryConfig;
 
@@ -37,30 +38,39 @@ export interface Navigation {
         pages: Array<{
             title: string;
             href: string;
+            badge?: string;
         }>;
     }>;
 }
 
-export const ALL_NAVIGATION: Navigation[] = config.navigation.tabs.map(tab => ({
+export function getNavigationForPath(pathname: string): Navigation[] {
+  const scope = contentScope(config, pathname);
+  return scope.navigation.tabs.map(tab => ({
     title: tab.tab,
     groups: tab.groups.map(group => ({
       title: group.group,
-      pages: group.pages.map(page => {
-        const path = `/${page}`;
+      pages: group.pages.map(entry => {
+        const page = typeof entry === 'string' ? entry : entry.page;
+        const path = `${scope.prefix}/${page}`;
         return {
           title: page.charAt(0).toUpperCase() + page.slice(1).replace(/-/g, ' '),
-          href: path
+          href: path,
+          badge: typeof entry === 'string' ? undefined : entry.badge,
         };
-      })
+      }).filter(page => !scope.prefix || Boolean(ALL_PAGES[page.href]))
     }))
-}));
+  })).filter(tab => tab.groups.some(group => group.pages.length > 0));
+}
+
+export const ALL_NAVIGATION: Navigation[] = getNavigationForPath('/');
 
 export function pathFromFilename(filename: string): string {
-    return filename
+    const path = filename
         .replace('../../docs', '')
         .replace(/\/?index\.mdx$/, '/')
         .replace(/\.mdx$/, '')
         .toLowerCase();
+    return path.length > 1 ? path.replace(/\/$/, '') : path;
 }
 
 
@@ -77,7 +87,7 @@ if (typeof window !== 'undefined' && window.__DORY_FRONTMATTER__) {
     }
     delete window.__DORY_FRONTMATTER__;
     // Build search index in the background after the page has fully rendered
-    setTimeout(() => addPreloadedContentToSearch(), 2000);
+    setTimeout(() => void ensureSearchContent(), 2000);
 }
 
 // Preload frontmatter from JSON file (fallback when no inline data)
@@ -98,7 +108,7 @@ export async function preloadFrontmatter() {
 
                 // Build search index in the background after the page has fully rendered.
                 // Delay avoids competing with the route chunk for network connections.
-                setTimeout(() => addPreloadedContentToSearch(), 2000);
+                setTimeout(() => void ensureSearchContent(), 2000);
             }
         }
     } catch (error) {
@@ -106,6 +116,14 @@ export async function preloadFrontmatter() {
     }
 }
 
+let searchContentPromise: Promise<void> | undefined;
+
+// Start immediately when search is used; otherwise load in the background.
+export function ensureSearchContent(): Promise<void> {
+    searchContentPromise ??= addPreloadedContentToSearch();
+    return searchContentPromise;
+}
+
 // Add preloaded content to search index (runs in background, never blocks rendering).
 // Fetches pre-built search-content.json generated at build time — no ?raw glob needed.
 async function addPreloadedContentToSearch() {

package/src/config/mdx-common.ts

@@ -0,0 +1,11 @@
+import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
+import { remarkSafeVars } from '../plugins/sanitize.ts';
+import { rehypeCodeMeta } from '../plugins/code-meta.ts';
+
+/** MDX plugins that work in both the static builder and the sandboxed runtime. */
+export const getCommonMdxConfig = (development = false) => ({
+  remarkPlugins: [remarkGfm, remarkSafeVars],
+  rehypePlugins: [rehypeSlug, rehypeCodeMeta],
+  development,
+});

package/src/config/mdx.ts

@@ -1,8 +1,5 @@
-import remarkGfm from 'remark-gfm';
-import rehypeSlug from 'rehype-slug';
-import { remarkSafeVars } from '../plugins/sanitize';
-import { rehypeCodeMeta } from '../plugins/code-meta';
-import { remarkRelativeAssets } from '../plugins/relative-assets';
+import { getCommonMdxConfig } from './mdx-common.ts';
+import { remarkRelativeAssets } from '../plugins/relative-assets.ts';
 
 /**
  * Shared MDX configuration used by the main build (vite.config.ts),
@@ -13,9 +10,11 @@ import { remarkRelativeAssets } from '../plugins/relative-assets';
  * remark-relative-assets turns relative image paths into root paths so they
  * work on pages served with a trailing slash.
  */
-export const getMdxConfig = (isDevelopment: boolean = false) => ({
-  providerImportSource: '@mdx-js/preact',
-  remarkPlugins: [remarkGfm, remarkSafeVars, remarkRelativeAssets],
-  rehypePlugins: [rehypeSlug, rehypeCodeMeta],
-  development: isDevelopment,
-});
+export const getMdxConfig = (isDevelopment: boolean = false) => {
+  const common = getCommonMdxConfig(isDevelopment);
+  return {
+    providerImportSource: '@mdx-js/preact',
+    ...common,
+    remarkPlugins: [...common.remarkPlugins, remarkRelativeAssets],
+  };
+};

package/src/embed/loader.ts

@@ -171,9 +171,6 @@ if (typeof window !== 'undefined' && window.DoryDocs) {
     on(event: string, handler: Function) {
       const eventKey = `on${event.charAt(0).toUpperCase()}${event.slice(1)}` as keyof DoryEmbedConfig;
       (config as any)[eventKey] = handler;
-      if (widgetInstance) {
-        widgetInstance.on(event, handler);
-      }
       return this;
     },
   };

package/src/embed/types.ts

@@ -18,8 +18,6 @@ export interface DoryEmbedConfig {
   onClose?: () => void;
   onNavigate?: (path: string) => void;
   onReady?: () => void;
-  authToken?: string;
-  getAuthToken?: () => Promise<string>;
 }
 
 export interface EmbeddedAppConfig {