@clidey/dory 1.0.8 → 1.9.0

package/src/components/hooks.tsx

@@ -2,6 +2,9 @@ import { useEffect, useState } from 'preact/hooks';
 import { useLocation } from 'wouter-preact';
 import { withBase } from '../utils/base-path';
 
+const initialEmbedParams = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('embedded') === 'true'
+  ? new URLSearchParams(window.location.search) : null;
+
 /**
  * Strips trailing slash from a pathname (except root "/").
  */
@@ -53,5 +56,21 @@ export const useSearchParams = () => {
  */
 export const useIsEmbedded = () => {
   const searchParams = useSearchParams();
-  return searchParams.get('embedded') === 'true';
+  const [pathname] = useLocation();
+
+  useEffect(() => {
+    if (!initialEmbedParams) return;
+    const params = new URLSearchParams(window.location.search);
+    let changed = false;
+    for (const key of ['embedded', 'parentOrigin', 'theme']) {
+      const value = initialEmbedParams.get(key);
+      if (value !== null && params.get(key) !== value) {
+        params.set(key, value);
+        changed = true;
+      }
+    }
+    if (changed) window.history.replaceState(window.history.state, '', `${window.location.pathname}?${params}${window.location.hash}`);
+  }, [pathname]);
+
+  return searchParams.get('embedded') === 'true' || initialEmbedParams !== null;
 };

package/src/components/navigation.tsx

@@ -1,58 +1,89 @@
-import classNames from 'classnames';
-import { useMemo } from 'preact/hooks';
+import { CatalogIcon } from '@clidey/ux'
+import type { ComponentChildren } from 'preact';
+
 import { Link } from 'wouter-preact';
+import docsConfig from '../../docs/dory.json' with { type: 'json' };
+import type { DoryConfig } from '../types/config';
+import { DocsNavigationView, type NavigationPage } from '../ui/docs-navigation-view';
 import { usePathname } from './hooks';
-import { ALL_NAVIGATION } from './store';
+import { ALL_PAGES, completeFrontMatter, getNavigationForPath } from './store';
+import { contentScope, scopedPath } from '../utils/content-scope';
+import { withBase } from '../utils/base-path';
+
+const config = docsConfig as DoryConfig;
 
-export function Navigation() {
-    const pathname = usePathname();
+type Frontmatter = Record<string, any>;
 
-    const effectivePath = pathname === '/' 
-        ? ALL_NAVIGATION[0]?.groups[0]?.pages[0]?.href ?? '/' 
-        : pathname;
+/** Sidebar label for a page. API pages show a method tag and their path or message name. */
+function pageLabel(href: string, title: string, frontmatter: Frontmatter[]): { method?: string; title: string } {
+  const fm = frontmatter.find((entry) => entry.path === href);
+  if (typeof fm?.openapi === 'string') {
+    const [verb, path] = fm.openapi.split(' ');
+    const method = verb.toUpperCase() === 'DELETE' ? 'DEL' : verb.toUpperCase();
+    return { method, title: path ?? title };
+  }
+  if (typeof fm?.asyncapi === 'string') {
+    const [operation] = fm.asyncapi.split(' ');
+    return { method: operation.toLowerCase() === 'publish' ? 'PUB' : 'SUB', title };
+  }
+  return { title };
+}
 
-    const currentTab = useMemo(() => {
-        return ALL_NAVIGATION.find(tab => 
-            tab.groups.some(group => 
-                group.pages.some(page => page.href === effectivePath)
-            )
-        );
-    }, [effectivePath]);
+/** Static-site adapter for Dory's shared documentation navigation. */
+export function Navigation({ frontmatter = completeFrontMatter }: { frontmatter?: Frontmatter[] }) {
+  const pathname = usePathname();
+  const scope = contentScope(config, pathname);
+  const navigation = getNavigationForPath(pathname);
+  const switchTo = (locale: string, version: string) => {
+    const candidate = scopedPath(config, pathname, locale, version);
+    if (ALL_PAGES[candidate]) return candidate;
+    return getNavigationForPath(candidate)[0]?.groups[0]?.pages[0]?.href ?? '/';
+  };
+  const effectivePath = pathname === '/'
+    ? navigation[0]?.groups[0]?.pages[0]?.href ?? '/'
+    : pathname;
+  const groups = navigation.flatMap(tab => tab.groups).map(group => ({
+    title: group.title,
+    pages: group.pages.map(page => {
+      const translatedTitle = frontmatter.find(entry => entry.path === page.href)?.title ?? page.title;
+      return { ...page, ...pageLabel(page.href, translatedTitle, frontmatter) };
+    }),
+  }));
+  const currentVersion = config.versions?.find(version => version.id === scope.version);
+  const versionLabel = currentVersion?.label ?? config.version;
+  const versionSelect = config.versions && config.versions.length > 0 ? <>
+    <CatalogIcon name="up-down" aria-hidden="true" className="h-3.5 w-3.5 text-white/50" />
+    {/* Transparent native select over the card: keyboard and screen-reader friendly. */}
+    <select
+      aria-label="Version"
+      value={scope.version}
+      onChange={event => {
+        const id = (event.target as HTMLSelectElement).value;
+        const version = config.versions?.find(entry => entry.id === id || entry.url === id);
+        const target = version?.url ?? withBase(switchTo(scope.locale, id));
+        window.location.href = target;
+      }}
+      className="absolute inset-0 cursor-pointer opacity-0"
+    >
+      <option value="">{config.version}</option>
+      {config.versions.map(version => <option key={version.id ?? version.url} value={version.id ?? version.url}>{version.label}</option>)}
+    </select>
+  </> : undefined;
+  const languageSelect = config.i18n && config.i18n.locales.length > 1 ?
+    <label className="flex items-center justify-between gap-3 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-white">
+      <span className="dory-mono-label">Language</span>
+      <select
+        aria-label="Language"
+        value={scope.locale}
+        onChange={event => { window.location.href = withBase(switchTo((event.target as HTMLSelectElement).value, scope.version)); }}
+        className="min-w-0 max-w-32 bg-transparent text-right text-sm text-white"
+      >
+        {config.i18n.locales.map(locale => <option key={locale.code} value={locale.code} className="text-black">{locale.label}</option>)}
+      </select>
+    </label> : undefined;
+  const renderPageLink = (page: NavigationPage, className: string, active: boolean, children: ComponentChildren) =>
+    <Link href={page.href} aria-current={active ? 'page' : undefined} className={className}>{children}</Link>;
 
-    return (
-        <nav className="dory-navigation text-base lg:text-sm">
-            <ul role="list" className="space-y-9">
-                {currentTab && (
-                <li key={currentTab.title}>
-                    <h2 className="font-display font-medium text-xs">{currentTab.title}</h2>
-                    {currentTab.groups.map(group => (
-                        <div key={group.title}>
-                            <h3 className="mt-4 text-sm font-semibold">{group.title}</h3>
-                            <ul role="list" className="mt-2 space-y-2 border-l-2 border-border lg:mt-4 lg:space-y-4 lg:border-border">
-                                {group.pages.map((page) => {
-                                    const isActive = effectivePath === page.href;
-                                    return (
-                                        <li key={page.href} className="relative">
-                                            <Link
-                                                href={page.href}
-                                                className={classNames(
-                                                'block w-full pl-3.5 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',
-                                                {
-                                                    'font-semibold text-brand-foreground': isActive,
-                                                    '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': !isActive
-                                                },
-                                            )}>
-                                                {page.title}
-                                            </Link>
-                                        </li>
-                                    );
-                                })}
-                            </ul>
-                        </div>
-                    ))}
-                </li>
-                )}
-            </ul>
-        </nav>
-    );
+  return <DocsNavigationView groups={groups} activeHref={effectivePath} renderPageLink={renderPageLink}
+    versionLabel={versionLabel} versionSelect={versionSelect} languageSelect={languageSelect} />;
 }

package/src/components/notification.tsx

@@ -1,11 +1,10 @@
-import { toast } from '@clidey/ux';
-import { InfoIcon } from 'lucide-react';
+import { CatalogIcon, toast } from '@clidey/ux';
 
 export function useNotification() {
   return {
     showNotification: (message: string, description?: string) => {
       toast(message, {
-        icon: <InfoIcon className="h-4 w-4" />,
+        icon: <CatalogIcon name="info" className="h-4 w-4" />,
         description: description,
       });
     }

package/src/components/routes.tsx

@@ -1,26 +1,32 @@
 import { useEffect, useMemo } from 'preact/hooks';
 import { Route, Router, useLocation } from 'wouter-preact';
 import { usePathname } from './hooks';
-import { ALL_NAVIGATION, ALL_PAGES, pathFromFilename } from './store';
+import { ALL_PAGES, getNavigationForPath, pathFromFilename } from './store';
+import docsConfig from '../../docs/dory.json' with { type: 'json' };
+import type { DoryConfig } from '../types/config';
+import { contentScope } from '../utils/content-scope';
+import { NotFoundPage } from '@clidey/ux';
 
 
 export default function Routes() {
   const pathname = usePathname();
   const [, navigate] = useLocation();
+  const scope = contentScope(docsConfig as DoryConfig, pathname);
+  const isScopeRoot = pathname === '/' || (Boolean(scope.prefix) && pathname === scope.prefix);
 
   // Redirect root to the first page so the URL reflects the actual content
   useEffect(() => {
-    if (pathname === '/') {
-      const firstPage = ALL_NAVIGATION[0]?.groups[0]?.pages[0]?.href;
+    if (isScopeRoot) {
+      const firstPage = getNavigationForPath(pathname)[0]?.groups[0]?.pages[0]?.href;
       if (firstPage) navigate(firstPage, { replace: true });
     }
   }, [pathname]);
 
   const route = useMemo(() => {
     let targetPath = pathname;
-    if (pathname === '/') {
+    if (isScopeRoot) {
       const ssrRoute = typeof window !== 'undefined' ? window.__DORY_ROUTE__ : undefined;
-      targetPath = ssrRoute || ALL_NAVIGATION[0]?.groups[0]?.pages[0]?.href || pathname;
+      targetPath = (pathname === '/' ? ssrRoute : undefined) || getNavigationForPath(pathname)[0]?.groups[0]?.pages[0]?.href || pathname;
     }
 
     const entry = Object.entries(ALL_PAGES).find(([path]) => path === targetPath);
@@ -28,7 +34,7 @@ export default function Routes() {
 
     const [path, mod] = entry;
     return {
-      path: pathname === '/' ? '/' : pathFromFilename(path),
+      path: isScopeRoot ? pathname : pathFromFilename(path),
       component: (mod as any).default,
     };
   }, [pathname]);
@@ -36,19 +42,11 @@ export default function Routes() {
   // 404 — no MDX module for this path (even if it appears in navigation)
   if (!route && pathname !== '/') {
     return (
-      <div className="flex flex-col items-center justify-center min-h-[50vh] p-8">
-        <h1 className="text-6xl font-bold text-gray-300 dark:text-gray-700 mb-4">404</h1>
-        <h2 className="text-2xl font-semibold mb-4">Page Not Found</h2>
-        <p className="text-gray-600 dark:text-muted-foreground mb-6 text-center max-w-md">
-          The page <code className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm">{pathname}</code> doesn't exist.
-        </p>
-        <button
-          onClick={() => navigate(ALL_NAVIGATION[0]?.groups[0]?.pages[0]?.href ?? '/')}
-          className="px-4 py-2 text-sm font-medium rounded-md bg-[var(--brand-primary)] text-white hover:opacity-90 transition-opacity"
-        >
-          Go to Home
-        </button>
-      </div>
+      <NotFoundPage
+        description={`The page ${pathname} does not exist.`}
+        onHome={() => navigate(getNavigationForPath(pathname)[0]?.groups[0]?.pages[0]?.href ?? '/')}
+        homeLabel="Go to home"
+      />
     );
   }
 

package/src/components/search-index.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { createSearchIndex } from './search-index';
+
+describe('createSearchIndex', () => {
+  it('keeps runtime locale indexes separate', async () => {
+    const english = createSearchIndex();
+    const french = createSearchIndex();
+    await english.add('docs/index.mdx', { title: 'Inventory' }, 'publish the app');
+    await french.add('docs/fr/index.mdx', { title: 'Inventaire' }, 'publier l’application');
+
+    expect(english.search('publish').map(item => item.url)).toEqual(['docs/index.mdx']);
+    expect(french.search('publish')).toEqual([]);
+    expect(french.search('publier').map(item => item.url)).toEqual(['docs/fr/index.mdx']);
+  });
+});

package/src/components/search-index.ts

@@ -1,54 +1,55 @@
-let searchIndex: any = null;
+/** A separate index lets the embedded viewer search only its authorized docs. */
+export function createSearchIndex() {
+    let searchIndex: any = null;
 
-async function getSearchIndex() {
-    if (!searchIndex) {
-        const { Document } = await import('flexsearch');
-        searchIndex = new Document({
-            tokenize: 'full',
-            document: {
-                id: 'url',
-                index: 'content',
-                store: ['title', 'pageTitle'],
-            },
-            context: {
-                resolution: 9,
-                depth: 2,
-                bidirectional: true
-            }
-        });
+    async function getSearchIndex() {
+        if (!searchIndex) {
+            const { Document } = await import('flexsearch');
+            searchIndex = new Document({
+                tokenize: 'full',
+                document: {
+                    id: 'url',
+                    index: 'content',
+                    store: ['title', 'pageTitle'],
+                },
+                context: {
+                    resolution: 9,
+                    depth: 2,
+                    bidirectional: true
+                }
+            });
+        }
+        return searchIndex;
     }
-    return searchIndex;
-}
 
-export async function addToSearchIndex(filename: string, data: any, content: string) {
-    try {
-        const index = await getSearchIndex();
-        index.add({
-            url: filename,
-            title: data.title || '',
-            content: content,
-            pageTitle: data.title
-        });
-    } catch (error) {
-        console.warn(`Failed to index ${filename}:`, error);
-    }
+    return {
+        async add(filename: string, data: { title?: string }, content: string) {
+            try {
+                const index = await getSearchIndex();
+                index.add({
+                    url: filename,
+                    title: data.title || '',
+                    content,
+                    pageTitle: data.title,
+                });
+            } catch (error) {
+                console.warn(`Failed to index ${filename}:`, error);
+            }
+        },
+        search(query: string, options = {}): Array<{ url: string; title: string; pageTitle: string }> {
+            if (!searchIndex) return [];
+            const result = searchIndex.search(query, { ...options, enrich: true }) as any[];
+            if (result.length === 0) return [];
+            return result[0].result.map((item: any) => ({
+                url: item.id as string,
+                title: item.doc?.title || '',
+                pageTitle: item.doc?.pageTitle || '',
+            }));
+        },
+    };
 }
 
-export function search(query: string, options = {}) {
-    if (!searchIndex) return [];
+const defaultIndex = createSearchIndex();
 
-    const result = searchIndex.search(query, {
-        ...options,
-        enrich: true,
-    }) as any[];
-
-    if (result.length === 0) {
-        return [];
-    }
-
-    return result[0].result.map((item: any) => ({
-        url: item.id,
-        title: item.doc?.title || '',
-        pageTitle: item.doc?.pageTitle || '',
-    }));
-}
+export const addToSearchIndex = defaultIndex.add;
+export const search = defaultIndex.search;