@clidey/dory 0.1.0

package/src/theme.scss

@@ -0,0 +1,124 @@
+html {
+  background-color: #ffffff !important;
+}
+
+h1, h2, h3, h4, h5, h6, p, li {
+  color: #000000 !important;
+}
+
+.mermaid {
+  background-color: #ffffff !important;
+  color: #000000 !important;
+  font-size: 12px !important;
+}
+
+.mermaid rect {
+  fill: #f8f8f8 !important;
+  stroke: #333333 !important;
+}
+
+.mermaid p {
+  color: #000000 !important;
+}
+
+.mermaid path {
+  stroke: #555555 !important;
+}
+
+.mermaid p {
+  background-color: #f8f8f8 !important;
+  color: #000000 !important;
+}
+
+.mermaid p, .mermaid text, .mermaid text > tspan {
+  color: #000000 !important;
+  fill: #000000 !important;
+}
+
+.mermaid line {
+  stroke: #333333 !important;
+}
+
+.mermaid .note {
+  fill: #ffffcc !important;
+  stroke: #999999 !important;
+  color: #000000 !important;
+}
+
+.docucod-mdx-code {
+  background-color: #f8f8f8 !important;
+}
+
+body.dark {
+  background-color: #1e1e1e !important;
+
+  #container {
+    background-color: #1e1e1e !important;
+  }
+
+  h1, h2, h3, h4, h5, h6, p, li, th, td {
+    color: #ffffff !important;
+  }
+
+  .mermaid {
+    background-color: #1e1e1e !important; 
+    color: #ffffff !important;
+  }
+  
+  .mermaid rect {
+    fill: #2a2a2a !important;
+    stroke: #aaaaaa !important;
+  }
+  
+  .mermaid p {
+    color: #ffffff !important;
+  }
+  
+  .mermaid path {
+    stroke: #cccccc !important;
+  }
+  
+  .mermaid p {
+    background-color: #2a2a2a !important;
+    color: #ffffff !important;
+  }
+  
+  .mermaid rect,
+  .mermaid polygon,
+  .mermaid circle,
+  .mermaid ellipse {
+    fill: #2a2a2a !important;
+    stroke: #444444 !important;
+  }
+
+  .mermaid p, .mermaid text, .mermaid text > tspan {
+    color: #ffffff !important;
+    fill: #ffffff !important;
+  }
+
+  .mermaid line {
+    stroke: #444444 !important;
+  }
+
+  .mermaid .note {
+    fill: #2a2a2a !important;
+    stroke: #444444 !important;
+    color: #ffffff !important;
+  }
+  
+  .docucod-mdx-code {
+    background-color: #2a2a2a !important;
+  }
+
+  .docucod-mdx-code-group {
+    background-color: #2a2a2a !important;
+  }
+
+  .docucod-mdx-code-group-header {
+    background-color: #2a2a2a !important;
+  }
+
+  .prism-code {
+    background-color: transparent !important;
+  }
+}

package/src/ui/header.tsx

@@ -0,0 +1,88 @@
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'preact/hooks';
+import { Link } from 'wouter-preact';
+import { usePathname } from 'wouter-preact/use-browser-location';
+import docsConfig from '../../docs/dory.json';
+import { DarkModeToggle } from '../components/dark-mode-toggle';
+import { MobileSearch, Search } from '../components/search';
+import { ALL_NAVIGATION } from '../components/store';
+import { MobileNavigation } from './mobile-navigation';
+
+function TopLevelNavItem({ href, children, isActive }: { href: string; children: string; isActive?: boolean }) {
+  return (
+    <li>
+      <Link
+        to={href}
+        className={classNames(
+          "text-sm/5 transition",
+          isActive 
+            ? "text-sky-500" 
+            : "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
+        )}
+      >
+        {children}
+      </Link>
+    </li>
+  );
+}
+
+export function Header({ className }: { className?: string }) {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const pathname = usePathname();
+
+  const { light, dark } = useMemo(() => {
+    return { light: docsConfig.logo.light, dark: docsConfig.logo.dark };
+  }, []);
+
+  useEffect(() => {
+    function onScroll() {
+      setIsScrolled(window.scrollY > 0);
+    }
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+    }
+  }, []);
+
+  return (
+    <header
+      className={classNames(
+        'sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-gray-900/5 sm:px-6 lg:px-8 dark:shadow-none',
+        className,
+        {
+          'dark:bg-gray-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-neutral-900/75': isScrolled,
+          'dark:bg-transparent': !isScrolled,
+        },
+      )}
+    >
+      <div className="relative flex justify-between gap-6 sm:gap-8 md:grow items-center w-full">
+        <div className="flex items-center grow gap-4 lg:gap-6">
+          <img src={`/${light}`} alt="logo" className="w-10 h-10 hidden dark:block rounded-full" />
+          <img src={`/${dark}`} alt="logo" className="w-10 h-10 block dark:hidden rounded-full" />
+          <h1 className="text-base lg:text-2xl font-bold">{docsConfig.name}</h1>
+        </div>
+        <nav className="hidden md:block">
+          <ul role="list" className="flex items-center gap-8">
+            {ALL_NAVIGATION.map((tab) => (
+              <TopLevelNavItem 
+                key={tab.title} 
+                href={tab.groups[0].pages[0].href}
+                isActive={pathname.startsWith(`/${tab.groups[0].pages[0].href.split('/')[1]}`)}
+              >
+                {tab.title}
+              </TopLevelNavItem>
+            ))}
+          </ul>
+        </nav>
+        <div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
+        <div className="flex items-center gap-3">
+          <MobileSearch />
+          <Search />
+          <DarkModeToggle />
+          <MobileNavigation />
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/ui/layout.tsx

@@ -0,0 +1,167 @@
+import type { ComponentChildren } from 'preact';
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { useLocation } from 'wouter-preact';
+import { Navigation } from '../components/navigation';
+import { ALL_NAVIGATION, ALL_OPENAPI, completeFrontMatter, loadMDXFrontMatterForPath, loadAllMDXFrontMatter, ALL_PAGES, pathFromFilename } from '../components/store';
+import { OpenAPI } from '../mdx/open-api';
+import { Header } from './header';
+import { PrevNextLinks } from './prev-next-link';
+import { TableOfContents } from './table-of-content';
+import { Loading } from '../components/loading';
+import Dropdown from '../components/dropdown';
+import { useNotification } from '../components/notification';
+
+interface LayoutProps {
+  children: ComponentChildren;
+}
+
+const prompt = (pathname: string) => `Please read and analyze the content from this documentation page: ${window.location.origin}${pathname}.mdx\n\n` +
+  `Then, help me understand and answer any questions I have about it. ` +
+  `Please provide clear, detailed explanations and examples where relevant.`;
+
+export default function Layout({ children }: LayoutProps) {
+  const [loading, setLoading] = useState(true);
+  const [pathname] = useLocation();
+  const { showNotification } = useNotification();
+
+  const handleOpenMDX = useCallback(() => {
+    window.open(`${window.location.origin}${pathname}.mdx`, '_blank');
+  }, [pathname]);
+
+  const handleCopyMDX = useCallback(() => {
+    ALL_PAGES[pathFromFilename(pathname)]().then((mdx) => {
+      navigator.clipboard.writeText(mdx.default.toString());
+    });
+    showNotification('Copied to clipboard');
+  }, []);
+  const handleOpenChatGPT = useCallback(() => {
+    const url = `https://chat.openai.com/?q=${encodeURIComponent(prompt(pathname))}`;
+    window.open(url, '_blank');
+  }, [pathname]);
+  const handleOpenAnthropic = useCallback(() => {
+    const url = `https://claude.ai/new?q=${encodeURIComponent(prompt(pathname))}`;
+    window.open(url, '_blank');
+  }, [pathname]);
+
+  const dropdownItems = useMemo(() => [
+    {
+      label: 'Open MDX',
+      onClick: handleOpenMDX,
+    },
+    {
+      label: 'Copy MDX',
+      onClick: handleCopyMDX
+    },
+    {
+      label: 'Open in ChatGPT',
+      onClick: handleOpenChatGPT
+    },
+    {
+      label: 'Open in Anthropic',
+      onClick: handleOpenAnthropic
+    }
+  ], [handleOpenMDX, handleCopyMDX, handleOpenChatGPT, handleOpenAnthropic]);
+
+  useEffect(() => {
+    loadMDXFrontMatterForPath(pathname).then(() => {
+      loadAllMDXFrontMatter(pathname).then(() => {
+        setLoading(false);
+      }).catch(() => {
+        setLoading(false);
+      });
+    }).catch(() => {
+      setLoading(false);
+    });
+  }, [pathname]);
+
+  const { title: group, group: title } = useMemo(() => {
+    const group = ALL_NAVIGATION.flatMap((tab) => 
+      tab.groups.find((group) => 
+        group.pages.some((page) => page.href === pathname)
+      )
+    );
+    const page = completeFrontMatter.find((page) => page.path === pathname);
+
+    useEffect(() => {
+      if (page?.title) {
+        document.title = page.title;
+      }
+      if (page?.description) {
+        const metaDescription = document.querySelector('meta[name="description"]');
+        if (metaDescription) {
+          metaDescription.setAttribute('content', page.description);
+        }
+      }
+    }, [page]);
+
+    return { group: group[0]?.title, title: page?.title,  };
+  }, [pathname, loading]);
+
+  const tab = useMemo(() => {
+    return completeFrontMatter.find((page) => page.path === pathname);
+  }, [pathname, loading]);
+
+  const openAPIJSON = useMemo(() => {
+    if (tab == null || tab.openapi == null) {
+      return null;
+    }
+    const firstDirectory = `/${tab.path.split('/')[1]}`;
+    return ALL_OPENAPI[`${firstDirectory}/openapi.json`].default;
+  }, [tab, loading]);
+
+  const { method, path } = useMemo(() => {
+    if (tab == null || tab.openapi == null) {
+      return { method: '', path: '' };
+    }
+    return { method: tab.openapi.split(' ')[0], path: tab.openapi.split(' ')[1] };
+  }, [tab, loading]);
+
+  if (loading) return <div className="h-[25vh] flex grow"><Loading /></div>;
+
+  return (
+    <div className="flex w-full flex-col">
+      <Header />
+      <div id="container" className="relative mx-auto flex w-full max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-32">
+        <div className="hidden lg:relative lg:block lg:flex-none">
+          <div className="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16">
+            <Navigation />
+          </div>
+        </div>
+        <main className="flex px-4 py-16 sm:px-6 lg:px-8 grow">
+          <div className="max-w-[calc(100vw-16px)] xl:max-w-[70vw] min-w-0 px-4 lg:pr-0 lg:pl-8 xl:px-16 w-full">
+            <article className="h-full flex flex-1 flex-col">
+              <div className="flex justify-between items-center">
+                <header className="mb-8">
+                  {title && (
+                    <h1 className="font-display text-lg tracking-tight">
+                      {title}
+                    </h1>
+                  )}
+                  {group && (
+                    <p className="text-4xl tracking-tight">
+                      {group}
+                    </p>
+                  )}
+                </header>
+                {
+                  openAPIJSON == null &&
+                  <Dropdown className='min-w-[120px]' buttonLabel="AI Actions" items={dropdownItems} />
+                }
+              </div>
+              <div className="flex-1 min-h-[calc(100vh-2rem)]">
+                {openAPIJSON && tab && "openapi" in tab && method && path ? 
+                  <OpenAPI openAPIJson={JSON.parse(openAPIJSON)} method={method} path={path} />
+                 : children}
+              </div>
+              <PrevNextLinks />
+            </article>
+          </div>
+          {
+            openAPIJSON == null &&
+            <TableOfContents />
+          }
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/ui/mobile-navigation.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  TransitionChild,
+} from '@headlessui/react'
+import { motion } from 'motion/react'
+import { createContext, Suspense, useContext, useState } from 'react'
+
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import { Navigation } from '../components/navigation'
+
+const IsInsideMobileNavigationContext = createContext(false)
+
+function MobileNavigationDialog({
+  isOpen,
+  close,
+}: {
+  isOpen: boolean
+  close: () => void
+}) {
+  return (
+    <Dialog
+      transition
+      open={isOpen}
+      onClose={close}
+      className="fixed inset-0 z-50 lg:hidden"
+    >
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 top-0 pt-8 bg-zinc-400/20 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"
+      />
+
+      <DialogPanel>
+        <TransitionChild>
+          <motion.div
+            layoutScroll
+            className="fixed top-0 bottom-0 left-0 w-full overflow-y-auto bg-white px-4 pt-8 pb-4 shadow-lg ring-1 shadow-zinc-900/10 ring-zinc-900/7.5 duration-500 ease-in-out data-closed:-translate-x-full min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 flex flex-col justify-between"
+          >
+            <Navigation />
+            <div class="flex flex-col justify-end items-end mb-4 mr-2" onClick={close}>
+              <XMarkIcon className="w-8 stroke-zinc-900 dark:stroke-white" />
+            </div>
+          </motion.div>
+        </TransitionChild>
+      </DialogPanel>
+    </Dialog>
+  )
+}
+
+export function useIsInsideMobileNavigation() {
+  return useContext(IsInsideMobileNavigationContext)
+}
+
+export function useMobileNavigation() {
+  const [isOpen, setIsOpen] = useState(false)
+  
+  return {
+    isOpen,
+    open: () => setIsOpen(true),
+    close: () => setIsOpen(false),
+    toggle: () => setIsOpen(prev => !prev)
+  }
+}
+
+export function MobileNavigation() {
+  const isInsideMobileNavigation = useIsInsideMobileNavigation()
+  const { isOpen, toggle, close } = useMobileNavigation()
+  const ToggleIcon = isOpen ? XMarkIcon : Bars3Icon;
+
+  return (
+    <IsInsideMobileNavigationContext.Provider value={true}>
+      <button
+        type="button"
+        className="relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5 lg:hidden"
+        aria-label="Toggle navigation"
+        onClick={toggle}
+      >
+        <span className="absolute size-12 [@media(pointer:fine)]:hidden" />
+        <ToggleIcon className="w-8 stroke-zinc-900 dark:stroke-white" />
+      </button>
+      {!isInsideMobileNavigation && (
+        <Suspense fallback={null}>
+          <MobileNavigationDialog isOpen={isOpen} close={close} />
+        </Suspense>
+      )}
+    </IsInsideMobileNavigationContext.Provider>
+  )
+}

package/src/ui/prev-next-link.tsx

@@ -0,0 +1,74 @@
+import { ArrowRightIcon } from "@heroicons/react/24/outline";
+import classNames from "classnames";
+import { ALL_NAVIGATION } from "../components/store";
+import { usePathname } from "../components/hooks";
+
+function PageLink({
+  title,
+  href,
+  dir = 'next',
+  ...props
+}: Omit<React.ComponentPropsWithoutRef<'div'>, 'dir' | 'title'> & {
+  title: string
+  href: string
+  dir?: 'previous' | 'next'
+}) {
+  return (
+    <div {...props}>
+      <p className="font-display text-sm font-medium">
+        {dir === 'next' ? 'Next' : 'Previous'}
+      </p>
+      <div className="mt-1">
+        <a href={href} className={classNames('flex items-center gap-x-1 text-base font-semibold hover:opacity-80', {
+            'flex-row-reverse': dir === 'previous',
+          },
+        )}>
+          <p className={classNames("flex items-center gap-x-1 text-base font-semibold hover:opacity-80", {
+            "flex-row-reverse": dir === "previous"
+          })}>
+            {title}
+            <ArrowRightIcon
+              className={classNames(
+                'h-4 w-4 flex-none fill-current',
+                {
+                  'rotate-180': dir === 'previous',
+                },
+              )}
+            />
+          </p>
+        </a>
+      </div>
+    </div>
+  )
+}
+export function PrevNextLinks() {
+  const pathname = usePathname();
+  const allLinks = ALL_NAVIGATION.flatMap(tab => 
+    tab.groups.flatMap(group => 
+      group.pages.map(page => page.href)
+    )
+  );
+  const linkIndex = allLinks.findIndex(link => link === pathname);
+  const previousPage = linkIndex > -1 ? allLinks[linkIndex - 1] : null;
+  const nextPage = linkIndex > -1 ? allLinks[linkIndex + 1] : null;
+
+  const previousPageTitle = previousPage ? ALL_NAVIGATION
+    .flatMap(tab => tab.groups)
+    .flatMap(group => group.pages)
+    .find(page => page.href === previousPage)?.title : null;
+  const nextPageTitle = nextPage ? ALL_NAVIGATION
+    .flatMap(tab => tab.groups)
+    .flatMap(group => group.pages)
+    .find(page => page.href === nextPage)?.title : null;
+
+  if (!nextPage && !previousPage) {
+    return null;
+  }
+
+  return (
+    <div className="mt-12 pt-6 flex border-t border-black/20 dark:border-white/20">
+      {previousPage && <PageLink dir="previous" title={previousPageTitle ?? ''} href={previousPage} />}
+      {nextPage && <PageLink className="ml-auto text-right" title={nextPageTitle ?? ''} href={nextPage} />}
+    </div>
+  )
+}