@clidey/dory 0.1.0

package/src/components/search.tsx

@@ -0,0 +1,508 @@
+import {
+  createAutocomplete,
+  type AutocompleteApi,
+  type AutocompleteCollection,
+  type AutocompleteState,
+} from '@algolia/autocomplete-core'
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
+import {
+  forwardRef,
+  Fragment,
+  Suspense,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type JSX,
+} from 'react'
+import Highlighter from 'react-highlight-words'
+
+import { useMobileNavigation } from '../ui/mobile-navigation'
+import { useLocation } from 'wouter-preact'
+import classNames from 'classnames'
+import { usePathname, useSearchParams } from './hooks'
+import { ALL_NAVIGATION } from './store'
+import { search } from './search-index'
+
+type EmptyObject = Record<string, never>
+type Result = any;
+
+type Autocomplete = AutocompleteApi<
+  Result,
+  JSX.TargetedEvent,
+  JSX.TargetedMouseEvent<HTMLElement>,
+  JSX.TargetedKeyboardEvent<HTMLElement>
+>
+
+function useAutocomplete({ onNavigate }: { onNavigate: () => void }) {
+  const id = useId()
+  const [, nav] = useLocation()
+  const [autocompleteState, setAutocompleteState] = useState<
+    AutocompleteState<Result> | EmptyObject
+  >({})
+
+  function navigate({ itemUrl }: { itemUrl?: string }) {
+    if (itemUrl) {
+      nav(itemUrl);
+    }
+
+    onNavigate()
+  }
+
+  const [autocomplete] = useState<Autocomplete>(() =>
+    createAutocomplete<
+      Result,
+      JSX.TargetedEvent,
+      JSX.TargetedMouseEvent<HTMLElement>,
+      JSX.TargetedKeyboardEvent<HTMLElement>
+    >({
+      id,
+      placeholder: 'Find something...',
+      defaultActiveItemId: 0,
+      onStateChange({ state }) {
+        setAutocompleteState(state)
+      },
+      shouldPanelOpen({ state }) {
+        return state.query !== ''
+      },
+      navigator: {
+        navigate,
+      },
+      getSources({ query }) {
+        return [
+            {
+              sourceId: 'documentation',
+              getItems() {
+                return search(query, { limit: 5 })
+              },
+              getItemUrl({ item }) {
+                return item.url
+              },
+              onSelect: navigate,
+            },
+          ]
+      },
+    }),
+  )
+
+  return { autocomplete, autocompleteState }
+}
+
+function SearchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
+      />
+    </svg>
+  )
+}
+
+function NoResultsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12.01 12a4.237 4.237 0 0 0 1.24-3c0-.62-.132-1.207-.37-1.738M12.01 12A4.237 4.237 0 0 1 9 13.25c-.635 0-1.237-.14-1.777-.388M12.01 12l3.24 3.25m-3.715-9.661a4.25 4.25 0 0 0-5.975 5.908M4.5 15.5l11-11"
+      />
+    </svg>
+  )
+}
+
+function LoadingIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  const id = useId()
+
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <circle cx="10" cy="10" r="5.5" strokeLinejoin="round" />
+      <path
+        stroke={`url(#${id})`}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.5 10a5.5 5.5 0 1 0-5.5 5.5"
+      />
+      <defs>
+        <linearGradient
+          id={id}
+          x1="13"
+          x2="9.5"
+          y1="9"
+          y2="15"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="currentColor" />
+          <stop offset="1" stopColor="currentColor" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+function HighlightQuery({ text, query }: { text: string; query: string }) {
+  return (
+    <Highlighter
+      highlightClassName="underline bg-transparent text-emerald-500"
+      searchWords={[query]}
+      autoEscape={true}
+      textToHighlight={text}
+    />
+  )
+}
+
+function SearchResult({
+  result,
+  resultIndex,
+  autocomplete,
+  collection,
+  query,
+}: {
+  result: Result
+  resultIndex: number
+  autocomplete: Autocomplete
+  collection: AutocompleteCollection<Result>
+  query: string
+}) {
+  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)
+    )
+  );
+
+  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',
+  );
+
+  return (
+    <li
+      className={classNames(
+        'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
+        {
+            'border-t border-zinc-100 dark:border-zinc-800': resultIndex > 0,
+        }
+      )}
+      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-zinc-900 group-aria-selected:text-emerald-500 dark:text-white"
+      >
+        <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-zinc-500"
+        >
+          {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>
+          ))}
+        </div>
+      )}
+    </li>
+  )
+}
+
+function SearchResults({
+  autocomplete,
+  query,
+  collection,
+}: {
+  autocomplete: Autocomplete
+  query: string
+  collection: AutocompleteCollection<Result>
+}) {
+  if (collection.items.length === 0) {
+    return (
+      <div className="p-6 text-center">
+        <NoResultsIcon className="mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" />
+        <p className="mt-2 text-xs text-zinc-700 dark:text-zinc-400">
+          Nothing found for{' '}
+          <strong className="font-semibold break-words text-zinc-900 dark:text-white">
+            &lsquo;{query}&rsquo;
+          </strong>
+          . Please try again.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <ul {...autocomplete.getListProps()}>
+      {collection.items.map((result, resultIndex) => (
+        <SearchResult
+          key={result.url}
+          result={result}
+          resultIndex={resultIndex}
+          autocomplete={autocomplete}
+          collection={collection}
+          query={query}
+        />
+      ))}
+    </ul>
+  )
+}
+
+const SearchInput = forwardRef<
+  React.ElementRef<'input'>,
+  {
+    autocomplete: Autocomplete
+    autocompleteState: AutocompleteState<Result> | EmptyObject
+    onClose: () => void
+  }
+>(function SearchInput({ autocomplete, autocompleteState, onClose }, inputRef) {
+  const inputProps = autocomplete.getInputProps({ inputElement: null })
+
+  return (
+    <div className="group relative flex h-12">
+      <SearchIcon className="pointer-events-none absolute top-0 left-3 h-full w-5 stroke-zinc-500" />
+      <input
+        ref={inputRef}
+        data-autofocus
+        className={classNames(
+          'flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-hidden placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',
+          {
+            'pr-11': autocompleteState.status === 'stalled',
+            'pr-4': autocompleteState.status !== 'stalled',
+          }
+        )}
+        {...inputProps}
+        onKeyDown={(event) => {
+          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
+            // bottom of the page. This is a workaround for that until we can figure out a proper fix in Headless UI.
+            if (document.activeElement instanceof HTMLElement) {
+              document.activeElement.blur()
+            }
+
+            onClose()
+          } else {
+            inputProps.onKeyDown(event)
+          }
+        }}
+      />
+      {autocompleteState.status === 'stalled' && (
+        <div className="absolute inset-y-0 right-3 flex items-center">
+          <LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-emerald-400" />
+        </div>
+      )}
+    </div>
+  )
+})
+
+function SearchDialog({
+  open,
+  setOpen,
+  className,
+  onNavigate = () => {},
+}: {
+  open: boolean
+  setOpen: (open: boolean) => void
+  className?: string
+  onNavigate?: () => void
+}) {
+  const formRef = useRef<React.ElementRef<'form'>>(null)
+  const panelRef = useRef<React.ElementRef<'div'>>(null)
+  const inputRef = useRef<React.ElementRef<typeof SearchInput>>(null)
+  const { autocomplete, autocompleteState } = useAutocomplete({
+    onNavigate() {
+      onNavigate()
+      setOpen(false)
+    },
+  })
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    setOpen(false)
+  }, [pathname, searchParams, setOpen])
+
+  useEffect(() => {
+    if (open) {
+      return
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        setOpen(true)
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open, setOpen])
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => {
+        setOpen(false)
+        autocomplete.setQuery('')
+      }}
+      className={classNames('fixed inset-0 z-50', className)}
+    >
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-zinc-400/25 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-black/40"
+      />
+
+      <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"
+        >
+          <div {...autocomplete.getRootProps({})}>
+            <form
+              ref={formRef}
+              {...autocomplete.getFormProps({
+                inputElement: inputRef.current,
+              })}
+            >
+              <SearchInput
+                ref={inputRef}
+                autocomplete={autocomplete}
+                autocompleteState={autocompleteState}
+                onClose={() => setOpen(false)}
+              />
+              <div
+                ref={panelRef}
+                className="border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5"
+                {...autocomplete.getPanelProps({})}
+              >
+                {autocompleteState.isOpen && (
+                  <SearchResults
+                    autocomplete={autocomplete}
+                    query={autocompleteState.query}
+                    collection={autocompleteState.collections[0]}
+                  />
+                )}
+              </div>
+            </form>
+          </div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}
+
+function useSearchProps() {
+  const buttonRef = useRef<React.ElementRef<'button'>>(null)
+  const [open, setOpen] = useState(false)
+
+  return {
+    buttonProps: {
+      ref: buttonRef,
+      onClick() {
+        setOpen(true)
+      },
+    },
+    dialogProps: {
+      open,
+      setOpen: useCallback(
+        (open: boolean) => {
+          const { width = 0, height = 0 } =
+            buttonRef.current?.getBoundingClientRect() ?? {}
+          if (!open || (width !== 0 && height !== 0)) {
+            setOpen(open)
+          }
+        },
+        [setOpen],
+      ),
+    },
+  }
+}
+
+export function Search() {
+  const [modifierKey, setModifierKey] = useState<string>()
+  const { buttonProps, dialogProps } = useSearchProps()
+
+  useEffect(() => {
+    setModifierKey(
+      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl ',
+    )
+  }, [])
+
+  return (
+    <div className="hidden lg:block lg:max-w-md lg:flex-auto">
+      <button
+        type="button"
+        className="hidden h-8 w-full items-center gap-2 rounded-full bg-white pr-3 pl-2 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-white/10 dark:ring-inset dark:hover:ring-white/20"
+        {...buttonProps}
+      >
+        <SearchIcon className="h-5 w-5 stroke-current" />
+        Can I help you find something?
+        <kbd className="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
+          <kbd className="font-sans">{modifierKey}</kbd>
+          <kbd className="font-sans">K</kbd>
+        </kbd>
+      </button>
+      <Suspense fallback={null}>
+        <SearchDialog className="hidden lg:block" {...dialogProps} />
+      </Suspense>
+    </div>
+  )
+}
+
+export function MobileSearch() {
+  const { close } = useMobileNavigation()
+  const { buttonProps, dialogProps } = useSearchProps()
+
+  return (
+    <div className="contents lg:hidden">
+      <button
+        type="button"
+        className="relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 lg:hidden dark:hover:bg-white/5"
+        aria-label="Find something..."
+        {...buttonProps}
+      >
+        <span className="absolute size-12 [@media(pointer:fine)]:hidden" />
+        <SearchIcon className="h-8 w-8 stroke-zinc-900 dark:stroke-white" />
+      </button>
+      <Suspense fallback={null}>
+        <SearchDialog
+          className="lg:hidden"
+          onNavigate={close}
+          {...dialogProps}
+        />
+      </Suspense>
+    </div>
+  )
+}

package/src/components/store.ts

@@ -0,0 +1,144 @@
+import type { ComponentType } from 'preact';
+import { type RouteComponentProps } from 'wouter-preact';
+import docsConfig from '../../docs/dory.json';
+import { searchIndex } from './search-index';
+
+export const ALL_PAGES = Object.fromEntries(
+  Object.entries(import.meta.glob<{ default: ComponentType; }>('../../docs/**/*.mdx'))
+    .map(([path, loader]) => [pathFromFilename(path), loader])
+);
+export const ALL_OPENAPI = Object.fromEntries(
+  Object.entries(import.meta.glob<{ default: string }>('../../docs/**/openapi.json', { query: 'raw', eager: true }))
+    .map(([path, loader]) => [pathFromFilename(path), loader])
+);
+
+export interface Route {
+    path: string;
+    component: ComponentType<RouteComponentProps<{ [param: number]: string | undefined; }>>;
+    title?: string;
+    description?: string;
+}
+
+export interface Navigation {
+    title: string;
+    groups: Array<{
+        title: string;
+        pages: Array<{
+            title: string;
+            href: string;
+        }>;
+    }>;
+}
+
+export const ALL_NAVIGATION: Navigation[] = docsConfig.navigation.tabs.map(tab => ({
+    title: tab.tab,
+    groups: tab.groups.map(group => ({
+      title: group.group,
+      pages: group.pages.map(page => {
+        const path = `/${page}`;
+        return {
+          title: page.charAt(0).toUpperCase() + page.slice(1).replace(/-/g, ' '),
+          href: path
+        };
+      })
+    }))
+}));
+
+export function pathFromFilename(filename: string): string {
+    return filename
+        .replace('../../docs', '')
+        .replace(/\/?index\.mdx$/, '/')
+        .replace(/\.mdx$/, '')
+        .toLowerCase();
+}
+
+function parseFrontMatter(content: string) {
+    const frontMatterMatch = content.match(/^---\n([\s\S]*?)\n---/);
+    if (!frontMatterMatch) return { data: {}, content };
+    
+    const frontMatter = frontMatterMatch[1];
+    const data: Record<string, any> = {};
+    
+    frontMatter.split('\n').forEach(line => {
+        const [key, ...valueParts] = line.split(':');
+        if (key && valueParts.length) {
+        const value = valueParts.join(':').trim();
+        data[key.trim()] = value.replace(/^["']|["']$/g, ''); // Remove quotes if present
+        }
+    });
+
+    return { data, content: content.slice(frontMatterMatch[0].length) };
+}
+
+export let completeFrontMatter: Record<string, any>[] = [];
+
+// Load frontmatter for a specific pathname
+export async function loadMDXFrontMatterForPath(pathname: string) {
+    if (completeFrontMatter.find(fm => fm.path === pathname)) return;
+
+    const mdxFiles = import.meta.glob<{ default: string }>('../../docs/**/*.mdx', { query: 'raw' });
+    const fileEntries = Object.entries(mdxFiles);
+
+    const fileEntry = fileEntries.find(([path]) => pathFromFilename(path) === pathname);
+    if (!fileEntry) return;
+
+    const [path, loader] = fileEntry;
+    const rawContent = (await loader()).default;
+    const { data, content } = parseFrontMatter(rawContent);
+    const filename = pathFromFilename(path);
+
+    updateNavigationTitle(filename, data.title);
+    searchIndex.add({
+        url: filename,
+        title: data.title || '',
+        content,
+        pageTitle: data.title || ''
+    });
+
+    const frontmatterItem = { ...data, path: filename };
+    completeFrontMatter = [...completeFrontMatter, frontmatterItem];
+}
+
+// Load all remaining frontmatter (after initial load)
+export async function loadAllMDXFrontMatter(pathname: string) {
+    const mdxFiles = import.meta.glob<{ default: string }>('../../docs/**/*.mdx', { query: 'raw' });
+    const fileEntries = Object.entries(mdxFiles);
+
+    const remainingEntries = fileEntries.filter(([path]) => pathFromFilename(path) !== pathname);
+    const newFrontmatter: Record<string, any>[] = [];
+
+    await Promise.all(
+        remainingEntries.map(async ([path, loader]) => {
+            const rawContent = (await loader()).default;
+            const { data, content } = parseFrontMatter(rawContent);
+            const filename = pathFromFilename(path);
+
+            updateNavigationTitle(filename, data.title);
+            searchIndex.add({
+                url: filename,
+                title: data.title || '',
+                content,
+                pageTitle: data.title || ''
+            });
+
+            newFrontmatter.push({ ...data, path: filename });
+        })
+    );
+
+    completeFrontMatter = [...completeFrontMatter, ...newFrontmatter];
+}
+
+// Shared helper
+function updateNavigationTitle(filename: string, title?: string) {
+    if (!title) return;
+
+    for (const tab of ALL_NAVIGATION) {
+        for (const group of tab.groups) {
+            for (const page of group.pages) {
+                if (page.href === filename) {
+                    page.title = title;
+                }
+            }
+        }
+    }
+}

package/src/index.css

@@ -0,0 +1,24 @@
+:root {
+  font-family: var(--font-family, system-ui, Avenir, Helvetica, Arial, sans-serif);
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+article h2:first-of-type {
+  display: none;
+}
+
+article hr:first-of-type {
+  display: none;
+}
+
+article img {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}

package/src/main.tsx

@@ -0,0 +1,18 @@
+import { render } from 'preact'
+import './index.css'
+import { App } from './app.tsx'
+import { withMDX } from './components/mdx-provider.tsx'
+import { loadFonts } from './utils/fonts'
+import { NotificationProvider } from './components/notification.tsx'
+
+// Load fonts before rendering the app
+loadFonts()
+
+const AppWithMDX = withMDX(App)
+
+render(
+    <NotificationProvider>
+        <AppWithMDX />
+    </NotificationProvider>,
+    document.getElementById('app')!
+)