@clidey/dory 1.0.3 → 1.0.6

package/src/embed/widget-iframe.ts

@@ -81,12 +81,19 @@ export class DoryWidget {
     }
 
     const url = new URL(baseUrl);
-    url.pathname = path;
+    url.pathname = this.resolveDocsPath(path);
     url.search = params.toString();
 
     return url.toString();
   }
 
+  // The docs may live under a path prefix (baseUrl is derived from the
+  // embed.js script URL), so routes are resolved beneath that prefix.
+  private resolveDocsPath(path: string): string {
+    const basePath = new URL(this.config.baseUrl).pathname.replace(/\/+$/, '');
+    return `${basePath}${path.startsWith('/') ? path : `/${path}`}`;
+  }
+
   private setupIframeMessaging() {
     window.addEventListener('message', (event) => {
       // Verify origin
@@ -190,7 +197,7 @@ export class DoryWidget {
     // Update iframe URL if path is specified
     if (path && this.iframe) {
       const url = new URL(this.iframe.src);
-      url.pathname = path;
+      url.pathname = this.resolveDocsPath(path);
       this.iframe.src = url.toString();
     }
 
@@ -240,7 +247,7 @@ export class DoryWidget {
   navigate(path: string) {
     if (this.iframe) {
       const url = new URL(this.iframe.src);
-      url.pathname = path;
+      url.pathname = this.resolveDocsPath(path);
       this.iframe.src = url.toString();
       this.emit('navigate', path);
     }

package/src/entry-server.tsx

@@ -6,6 +6,8 @@ import { ThemeProvider } from '@clidey/ux';
 import * as mdxComponents from './mdx/mdx';
 import docsConfig from '../docs/dory.json' with { type: 'json' };
 import type { DoryConfig } from './types/config';
+import { PageMeta } from './ui/page-meta';
+import { BASE_PATH, assetUrl, withBase } from './utils/base-path';
 
 const config = docsConfig as DoryConfig;
 
@@ -95,7 +97,7 @@ export async function render(routePath: string, frontmatter?: Record<string, any
 
     return renderToString(
       <ThemeProvider>
-        <Router ssrPath={routePath}>
+        <Router base={BASE_PATH} ssrPath={withBase(routePath)}>
           <MDXProvider components={mdxComponents}>
                 <div class="flex w-full flex-col">
                   {/* SYNC NOTE: the static shell below (header chrome, sidebar nav skeleton,
@@ -111,8 +113,8 @@ export async function render(routePath: string, frontmatter?: Record<string, any
                       <div class="flex items-center grow gap-2">
                         {config.logo && (
                           <>
-                            <img src={`/${config.logo.light}`} alt="logo" class="w-8 hidden dark:block" />
-                            <img src={`/${config.logo.dark}`} alt="logo" class="w-8 block dark:hidden" />
+                            <img src={assetUrl(config.logo.light)} alt="logo" class="w-8 hidden dark:block" />
+                            <img src={assetUrl(config.logo.dark)} alt="logo" class="w-8 block dark:hidden" />
                           </>
                         )}
                         <h1 class="text-base lg:text-2xl font-bold">{config.name}</h1>
@@ -124,7 +126,7 @@ export async function render(routePath: string, frontmatter?: Record<string, any
                             return (
                               <li key={tab.title}>
                                 <a
-                                  href={tab.groups[0].pages[0].href}
+                                  href={withBase(tab.groups[0].pages[0].href)}
                                   class={`text-xs transition hover:opacity-80${isActive ? ' text-brand-foreground' : ''}`}
                                 >
                                   {tab.title}
@@ -157,7 +159,7 @@ export async function render(routePath: string, frontmatter?: Record<string, any
                                       {group.pages.map(page => (
                                         <li key={page.href} class="relative">
                                           <a
-                                            href={page.href}
+                                            href={withBase(page.href)}
                                             class={routePath === page.href
                                               ? 'block w-full pl-3.5 font-semibold text-brand-foreground before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full'
                                               : 'block w-full pl-3.5 text-muted-foreground before:hidden before:bg-slate-300 hover:text-muted-foreground hover:before:block dark:text-muted-foreground dark:before:bg-slate-700 dark:hover:text-slate-300 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full'}
@@ -183,8 +185,10 @@ export async function render(routePath: string, frontmatter?: Record<string, any
                             <header class="mb-8">
                               {groupTitle && <h1 class="font-display text-lg tracking-tight">{groupTitle}</h1>}
                               {pageFm?.title && <p class="text-4xl tracking-tight">{pageFm.title}</p>}
+                              {pageFm?.lead && <p class="dory-lead">{pageFm.lead}</p>}
                             </header>
                           </div>
+                          <PageMeta meta={pageFm?.meta} />
                           <div class="flex-1 min-h-[calc(100vh-2rem)]">
                             {/* Matches App > div.antialiased > div.flex > Routes > Content */}
                             <div class="h-full antialiased">
@@ -199,7 +203,7 @@ export async function render(routePath: string, frontmatter?: Record<string, any
                                 <div>
                                   <p class="font-display text-sm font-medium">Previous</p>
                                   <div class="mt-1">
-                                    <a href={prevPage.href} class="text-base font-semibold hover:opacity-80">{prevPage.title}</a>
+                                    <a href={withBase(prevPage.href)} class="text-base font-semibold hover:opacity-80">{prevPage.title}</a>
                                   </div>
                                 </div>
                               )}
@@ -207,7 +211,7 @@ export async function render(routePath: string, frontmatter?: Record<string, any
                                 <div class="ml-auto text-right">
                                   <p class="font-display text-sm font-medium">Next</p>
                                   <div class="mt-1">
-                                    <a href={nextPage.href} class="text-base font-semibold hover:opacity-80">{nextPage.title}</a>
+                                    <a href={withBase(nextPage.href)} class="text-base font-semibold hover:opacity-80">{nextPage.title}</a>
                                   </div>
                                 </div>
                               )}

package/src/main.tsx

@@ -1,4 +1,5 @@
 import { render, hydrate } from 'preact'
+import { Router } from 'wouter-preact'
 import '@clidey/ux/styles.css';
 import '@clidey/ux/brand.css';
 import { App } from './app.tsx'
@@ -12,6 +13,7 @@ import { ThemeProvider } from '@clidey/ux'
 import { preloadFrontmatter } from './components/store'
 import docsConfig from '../docs/dory.json' with { type: 'json' };
 import type { DoryConfig } from './types/config';
+import { BASE_PATH } from './utils/base-path';
 
 const config = docsConfig as DoryConfig;
 
@@ -34,7 +36,9 @@ const tree = (
     <ThemeProvider defaultTheme={defaultTheme} storageKey="@clidey/dory/theme">
         <Toaster />
         <ErrorBoundary>
-            <AppWithMDX />
+            <Router base={BASE_PATH}>
+                <AppWithMDX />
+            </Router>
         </ErrorBoundary>
     </ThemeProvider>
 )

package/src/mdx/accordion.tsx

@@ -4,11 +4,13 @@ import {
   AccordionTrigger,
   AccordionContent
 } from '@clidey/ux'
+import classNames from 'classnames'
+import { Plus } from 'lucide-react'
 import { Icon } from './icon'
 
-export function AccordionGroup({ children }: { children: React.ReactNode }) {
+export function AccordionGroup({ children, numbered = false }: { children: React.ReactNode; numbered?: boolean }) {
   return (
-    <UXAccordion type="single" collapsible className="my-6">
+    <UXAccordion type="single" collapsible className={classNames('dory-accordion my-5 overflow-hidden rounded-lg border border-[var(--border)] bg-muted/40', { 'dory-accordion-numbered': numbered })}>
       {children}
     </UXAccordion>
   )
@@ -24,15 +26,16 @@ export function Accordion({
   icon?: React.ComponentProps<typeof Icon>['icon']
 }) {
   return (
-    <AccordionItem value={title}>
-      <AccordionTrigger className="text-left">
-        <div className="flex items-center gap-2">
-          {icon && <Icon icon={icon} className="h-5 w-5" />}
-          <span className="text-base font-semibold">{title}</span>
+    <AccordionItem value={title} className="border-b border-[var(--border)] last:border-b-0">
+      <AccordionTrigger className="group items-center px-4 py-3 text-left hover:no-underline [&>svg:last-child]:hidden">
+        <div className="flex items-center gap-3">
+          {icon && <Icon icon={icon} className="h-3.5 w-3.5 !stroke-[var(--primary)] text-[var(--primary)]" />}
+          <span className="text-sm font-semibold">{title}</span>
         </div>
+        <Plus aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-45" />
       </AccordionTrigger>
       <AccordionContent>
-        <div className="text-base leading-relaxed">
+        <div className="px-4 pb-3 leading-relaxed text-muted-foreground">
           {children}
         </div>
       </AccordionContent>

package/src/mdx/api.tsx

@@ -1,354 +1,4 @@
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
-import classNames from 'classnames'
-import {
-  Children,
-  createContext,
-  isValidElement,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import { Tag } from './tag'
-import { CheckIcon } from 'lucide-react'
-import { Button, Card } from '@clidey/ux'
-
-const languageNames: Record<string, string> = {
-  js: 'JavaScript',
-  ts: 'TypeScript',
-  javascript: 'JavaScript',
-  typescript: 'TypeScript',
-  php: 'PHP',
-  python: 'Python',
-  ruby: 'Ruby',
-  go: 'Go',
-}
-
-function getPanelTitle({
-  title,
-  language,
-}: {
-  title?: string
-  language?: string
-}) {
-  if (title) {
-    return title
-  }
-  if (language && language in languageNames) {
-    return languageNames[language]
-  }
-  return 'API'
-}
-
-function ClipboardIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path
-        strokeWidth="0"
-        d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
-      />
-      <path
-        fill="none"
-        strokeLinejoin="round"
-        d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
-      />
-    </svg>
-  )
-}
-
-function CopyButton({ code }: { code: string }) {
-  const [copyCount, setCopyCount] = useState(0)
-  const copied = copyCount > 0
-
-  useEffect(() => {
-    if (copyCount > 0) {
-      const timeout = setTimeout(() => setCopyCount(0), 1000)
-      return () => {
-        clearTimeout(timeout)
-      }
-    }
-  }, [copyCount])
-
-  return (
-    <Button
-      className={classNames(
-        'group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100',
-        copied
-          ? 'bg-sky-400/10 ring-1 ring-sky-400/20 ring-inset'
-          : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5',
-      )}
-      onClick={() => {
-        window.navigator.clipboard.writeText(code).then(() => {
-          setCopyCount((count) => count + 1)
-        })
-      }}
-    >
-      <span
-        aria-hidden={copied}
-        className={classNames(
-          'pointer-events-none flex items-center gap-0.5 text-muted-foreground transition duration-300',
-          copied && '-translate-y-1.5 opacity-0',
-        )}
-      >
-        <ClipboardIcon className="h-4 w-4 fill-zinc-500/20 stroke-muted-foreground transition-colors group-hover/button:stroke-muted-foreground" />
-      </span>
-      <span
-        aria-hidden={!copied}
-        className={classNames(
-          'pointer-events-none absolute inset-0 flex items-center justify-center text-sky-400 transition duration-300',
-          !copied && 'translate-y-1.5 opacity-0',
-        )}
-      >
-        <CheckIcon className="h-4 w-4" />
-      </span>
-    </Button>
-  )
-}
-
-function APIPanelHeader({ tag, label }: { tag?: string; label?: string }) {
-  if (!tag && !label) {
-    return null
-  }
-
-  return (
-    <div className="flex h-9 items-center gap-2 px-4">
-      {tag && (
-        <div className="dark flex">
-          <Tag variant="small">{tag}</Tag>
-        </div>
-      )}
-      {tag && label && (
-        <span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />
-      )}
-      {label && (
-        <span className="font-mono text-xs text-muted-foreground">{label}</span>
-      )}
-    </div>
-  )
-}
-
-function APIPanel({
-  children,
-  tag,
-  label,
-  code,
-}: {
-  children: React.ReactNode
-  tag?: string
-  label?: string
-  code?: string
-}) {
-  const child = Children.only(children)
-
-  if (isValidElement(child)) {
-    // @ts-expect-error child.props is not typed
-    tag = child.props.tag ?? tag
-    // @ts-expect-error child.props is not typed
-    label = child.props.label ?? label
-    // @ts-expect-error child.props is not typed
-    code = child.props.code ?? code
-  }
-
-  return (
-    <div className="group dark:bg-white/2.5">
-      <APIPanelHeader tag={tag} label={label} />
-      <div className="relative">
-        <pre className="overflow-x-auto p-4 text-xs">{children}</pre>
-        {/* @ts-expect-error code is not typed */}
-        <CopyButton code={code} />
-      </div>
-    </div>
-  )
-}
-
-function APIGroupHeader({
-  title,
-  children,
-  selectedIndex,
-}: {
-  title: string
-  children: React.ReactNode
-  selectedIndex: number
-}) {
-  const hasTabs = Children.count(children) > 1
-
-  if (!title && !hasTabs) {
-    return null
-  }
-
-  return (
-    <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 px-4 pt-2">
-      {title && (
-        <h3 className="mr-auto pt-3 text-xs font-semibold">
-          {title}
-        </h3>
-      )}
-      {hasTabs && (
-        <TabList className="-mb-px flex gap-4 text-xs font-medium">
-          {Children.map(children, (child, childIndex) => (
-            <Tab
-              className={classNames(
-                'pt-2 transition data-selected:not-data-focus:outline-hidden',
-                childIndex === selectedIndex
-                  ? 'border-sky-500 text-sky-400'
-                  : 'border-transparent text-muted-foreground hover:text-zinc-300',
-              )}
-            >
-              {/* @ts-expect-error child.props is not typed */}
-              {getPanelTitle(isValidElement(child) ? child.props : {})}
-            </Tab>
-          ))}
-        </TabList>
-      )}
-    </div>
-  )
-}
-
-function APIGroupPanels({
-  children,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof APIPanel>) {
-  const hasTabs = Children.count(children) > 1
-
-  if (hasTabs) {
-    return (
-      <TabPanels>
-        {Children.map(children, (child) => (
-          <TabPanel>
-            <APIPanel {...props}>{child}</APIPanel>
-          </TabPanel>
-        ))}
-      </TabPanels>
-    )
-  }
-
-  return <APIPanel {...props}>{children}</APIPanel>
-}
-function usePreventLayoutShift() {
-  const positionRef = useRef<HTMLElement>(null)
-  const rafRef = useRef<number>()
-
-  useEffect(() => {
-    return () => {
-      if (typeof rafRef.current !== 'undefined') {
-        window.cancelAnimationFrame(rafRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    positionRef,
-    preventLayoutShift(callback: () => void) {
-      if (!positionRef.current) {
-        return
-      }
-
-      const initialTop = positionRef.current.getBoundingClientRect().top
-
-      callback()
-
-      rafRef.current = window.requestAnimationFrame(() => {
-        const newTop =
-          positionRef.current?.getBoundingClientRect().top ?? initialTop
-        window.scrollBy(0, newTop - initialTop)
-      })
-    },
-  }
-}
-
-function useTabGroupProps(availableLanguages: Array<string>) {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const [preferredLanguages, setPreferredLanguages] = useState<string[]>([])
-  
-  const activeLanguage = [...availableLanguages].sort(
-    (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a),
-  )[0]
-  const languageIndex = availableLanguages.indexOf(activeLanguage)
-  const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
-  
-  if (newSelectedIndex !== selectedIndex) {
-    setSelectedIndex(newSelectedIndex)
-  }
-
-  const { positionRef, preventLayoutShift } = usePreventLayoutShift()
-
-  return {
-    as: 'div' as const,
-    ref: positionRef,
-    selectedIndex,
-    onChange: (newSelectedIndex: number) => {
-      preventLayoutShift(() => {
-        const newLanguage = availableLanguages[newSelectedIndex]
-        setPreferredLanguages(prev => [
-          ...prev.filter(lang => lang !== newLanguage),
-          newLanguage
-        ])
-      })
-    },
-  }
-}
-
-const APIGroupContext = createContext(false)
-
-export function APIGroup({
-  children,
-  title,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof APIGroupPanels> & { title: string }) {
-  const languages =
-    Children.map(children, (child) =>
-      // @ts-expect-error child.props is not typed
-      getPanelTitle(isValidElement(child) ? child.props : {}),
-    ) ?? []
-  const tabGroupProps = useTabGroupProps(languages)
-  const hasTabs = Children.count(children) > 1
-
-  const header = (
-    <APIGroupHeader title={title} selectedIndex={tabGroupProps.selectedIndex}>
-      {children}
-    </APIGroupHeader>
-  )
-  const panels = <APIGroupPanels {...props}>{children}</APIGroupPanels>
-
-  return (
-    <APIGroupContext.Provider value={true}>
-      {hasTabs ? (
-        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
-          <TabGroup {...tabGroupProps}>
-            <div className="not-prose">
-              {header}
-              {panels}
-            </div>
-          </TabGroup>
-        </Card>
-      ) : (
-        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
-          <div className="not-prose">
-            {header}
-            {panels}
-          </div>
-        </Card>
-      )}
-    </APIGroupContext.Provider>
-  )
-}
-
-export function API({
-  children,
-  ...props
-}: React.ComponentPropsWithoutRef<'code'>) {
-  const isGrouped = useContext(APIGroupContext)
-
-  if (isGrouped) {
-    if (typeof children !== 'string') {
-      throw new Error(
-        '`API` children must be a string when nested inside a `APIGroup`.',
-      )
-    }
-    return <code {...props}>
-      {children}
-    </code>
-  }
-
+/** Inline code element kept for MDX content that uses <API>. */
+export function API({ children, ...props }: React.ComponentPropsWithoutRef<'code'>) {
   return <code {...props}>{children}</code>
 }