@clidey/dory 0.29.0 → 0.30.0

package/src/ui/layout.tsx

@@ -1,226 +0,0 @@
-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, preloadFrontmatter, ALL_ASYNCAPI } from '../components/store';
-import { OpenAPI } from '../mdx/open-api';
-import { AsyncAPI } from '../mdx/async-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';
-import { SparkleIcon } from 'lucide-react';
-
-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(() => {
-    // Try to preload frontmatter first (optimized approach)
-    preloadFrontmatter().then(() => {
-      // If preloading succeeds, we're done
-      setLoading(false);
-    }).catch(() => {
-      // Fallback to the original approach
-      loadMDXFrontMatterForPath(pathname).then(() => {
-        loadAllMDXFrontMatter(pathname).then(() => {
-          setLoading(false);
-        }).catch(() => {
-          setLoading(false);
-        });
-      }).catch(() => {
-        setLoading(false);
-      });
-    });
-  }, [pathname]);
-
-  const { title: group, group: title, page } = 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);
-
-    return { group: group[0]?.title, title: page?.title, page };
-  }, [pathname, loading]);
-
-  // Update document title and meta tags when page changes
-  useEffect(() => {
-    if (page?.title) {
-      document.title = page.title;
-
-      // Update Open Graph title
-      const ogTitle = document.querySelector('meta[property="og:title"]');
-      if (ogTitle) {
-        ogTitle.setAttribute('content', page.title);
-      }
-
-      // Update Twitter title
-      const twitterTitle = document.querySelector('meta[name="twitter:title"]');
-      if (twitterTitle) {
-        twitterTitle.setAttribute('content', page.title);
-      }
-    }
-
-    if (page?.description) {
-      // Update standard meta description
-      const metaDescription = document.querySelector('meta[name="description"]');
-      if (metaDescription) {
-        metaDescription.setAttribute('content', page.description);
-      }
-
-      // Update Open Graph description
-      const ogDescription = document.querySelector('meta[property="og:description"]');
-      if (ogDescription) {
-        ogDescription.setAttribute('content', page.description);
-      }
-
-      // Update Twitter description
-      const twitterDescription = document.querySelector('meta[name="twitter:description"]');
-      if (twitterDescription) {
-        twitterDescription.setAttribute('content', page.description);
-      }
-    }
-
-    // Update canonical URL
-    const ogUrl = document.querySelector('meta[property="og:url"]');
-    if (ogUrl) {
-      ogUrl.setAttribute('content', window.location.href);
-    }
-  }, [page]);
-
-  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]);
-
-  const asyncAPIJSON = useMemo(() => {
-    if (tab == null || tab.asyncapi == null) {
-      return null;
-    }
-    const firstDirectory = `/${tab.path.split('/')[1]}`;
-    return ALL_ASYNCAPI[`${firstDirectory}/asyncapi.json`].default;
-  }, [tab, loading]);
-  
-  const { operation, channel } = useMemo(() => {
-    if (tab == null || tab.asyncapi == null) {
-      return { operation: '', channel: '' };
-    }
-    return { operation: tab.asyncapi.split(' ')[0].toLowerCase(), channel: tab.asyncapi.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 flex w-full max-w-8xl sm:px-2 lg:px-8">
-        <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="min-w-0 w-full">
-            <article className="h-full flex flex-1 flex-col">
-              <div className="flex justify-between items-start">
-                <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 && asyncAPIJSON == null &&
-                  <Dropdown className="gap-0" buttonLabel={<SparkleIcon className="w-4 h-4" />} 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} />
-                 : asyncAPIJSON && tab && "asyncapi" in tab && operation && channel ?
-                  <AsyncAPI asyncAPIJson={JSON.parse(asyncAPIJSON)} operation={operation} channel={channel} />
-                 : children}
-              </div>
-              <PrevNextLinks />
-            </article>
-          </div>
-          {
-            openAPIJSON == null && asyncAPIJSON == null &&
-            <TableOfContents />
-          }
-        </main>
-      </div>
-    </div>
-  );
-}

package/src/ui/mobile-navigation.tsx

@@ -1,64 +0,0 @@
-'use client'
-
-import { Sheet, SheetContent, Button } from '@clidey/ux'
-import { createContext, Suspense, useCallback, useContext, useRef, useState } from 'react'
-
-import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
-import { Navigation } from '../components/navigation'
-
-const IsInsideMobileNavigationContext = createContext(false)
-
-export function useIsInsideMobileNavigation() {
-  return useContext(IsInsideMobileNavigationContext)
-}
-
-export function useMobileNavigation() {
-  const [isOpen, setIsOpen] = useState(false)
-  const isOpenRef = useRef(isOpen)
-  isOpenRef.current = isOpen
-
-  const open = useCallback(() => setIsOpen(true), [])
-  const close = useCallback(() => setIsOpen(false), [])
-  const toggle = useCallback(() => setIsOpen(prev => !prev), [])
-
-  return {
-    isOpen,
-    isOpenRef,
-    open,
-    close,
-    toggle,
-  }
-}
-
-export function MobileNavigation() {
-  const isInsideMobileNavigation = useIsInsideMobileNavigation()
-  const { isOpen, open, close } = useMobileNavigation()
-  const ToggleIcon = isOpen ? XMarkIcon : Bars3Icon;
-
-  return (
-    <IsInsideMobileNavigationContext.Provider value={true}>
-      <Sheet open={isOpen} onOpenChange={(status) => {
-        if (!status) {
-          close();
-        }
-      }}>
-        <Button
-          variant="outline"
-          size="icon"
-          className="relative flex size-6 lg:hidden p-4"
-          aria-label="Toggle navigation"
-          onClick={open}
-        >
-          <ToggleIcon className="w-8 stroke-zinc-900 dark:stroke-white" />
-        </Button>
-        {!isInsideMobileNavigation && (
-          <Suspense fallback={null}>
-            <SheetContent side="left" className="w-full sm:max-w-sm p-8 overflow-y-auto flex flex-col justify-between">
-              <Navigation />
-            </SheetContent>
-          </Suspense>
-        )}
-      </Sheet>
-    </IsInsideMobileNavigationContext.Provider>
-  )
-}

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

@@ -1,74 +0,0 @@
-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>
-  )
-}

package/src/ui/table-of-content.tsx

@@ -1,166 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import classNames from 'classnames'
-
-export type Section = {
-  id: string
-  title: string
-  children: Array<Subsection>
-}
-
-export type Subsection = {
-  id: string
-  title: string
-}
-
-export function TableOfContents() {
-  const [currentSection, setCurrentSection] = useState<string>('')
-  const [sections, setSections] = useState<Section[]>([])
-  const [isContentLoaded, setIsContentLoaded] = useState(false)
-
-  const collectHeadings = useCallback(() => {
-    const article = document.querySelector('article')
-    if (!article) return
-
-    // Wait for content to be loaded
-    const observer = new MutationObserver(() => {
-      const headings = article.querySelectorAll('h2:not([style*="display: none"]), h3:not([style*="display: none"])')
-      const sections: Section[] = []
-      let currentSection: Section | null = null
-
-      headings.forEach((heading) => {
-        // Check if heading is visible
-        const style = window.getComputedStyle(heading)
-        if (style.display === 'none' || style.visibility === 'hidden') return
-
-        const id = heading.id || heading.textContent?.toLowerCase().replace(/\s+/g, '-') || ''
-        heading.id = id
-
-        if (heading.tagName === 'H2') {
-          currentSection = {
-            id,
-            title: heading.textContent || '',
-            children: []
-          }
-          sections.push(currentSection)
-        } else if (heading.tagName === 'H3' && currentSection) {
-          currentSection.children.push({
-            id,
-            title: heading.textContent || ''
-          })
-        }
-      })
-
-      setSections(sections)
-      setIsContentLoaded(true)
-    })
-
-    observer.observe(article, { 
-      childList: true, 
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['style', 'class']
-    })
-
-    return () => observer.disconnect()
-  }, [])
-
-  useEffect(() => {
-    const cleanup = collectHeadings()
-    return () => cleanup?.()
-  }, [collectHeadings])
-
-  const getHeadings = useCallback(() => {
-    return sections
-      .flatMap((section) => [section.id, ...section.children.map((child) => child.id)])
-      .map((id) => {
-        const el = document.getElementById(id)
-        if (!el) return null
-        const top = window.scrollY + el.getBoundingClientRect().top
-        return { id, top }
-      })
-      .filter((x): x is { id: string; top: number } => x !== null)
-  }, [sections])
-
-  useEffect(() => {
-    if (!isContentLoaded || sections.length === 0) return
-    const headings = getHeadings()
-    
-    function onScroll() {
-      const top = window.scrollY
-      let current = headings[0].id
-      for (const heading of headings) {
-        if (top >= heading.top - 10) {
-          current = heading.id
-        } else {
-          break
-        }
-      }
-      setCurrentSection(current)
-    }
-
-    window.addEventListener('scroll', onScroll, { passive: true })
-    onScroll()
-    return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [getHeadings, sections, isContentLoaded])
-
-  function isActive(section: Section | Subsection) {
-    return section.id === currentSection
-  }
-
-  if (!isContentLoaded) {
-    return null
-  }
-
-  return (
-    <div className="hidden xl:sticky xl:top-[4.75rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.75rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6 pl-8">
-      <nav aria-labelledby="on-this-page-title" className="w-56">
-        {sections.length > 0 && (
-          <>
-            <h2
-              id="on-this-page-title"
-              className="font-display text-sm font-medium text-slate-900 dark:text-white"
-            >
-              On this page
-            </h2>
-            <ol role="list" className="mt-4 space-y-3 text-sm">
-              {sections.map((section) => (
-                <li key={section.id}>
-                  <h3>
-                    <a
-                      href={`#${section.id}`}
-                      className={classNames({
-                        "text-brand-foreground": isActive(section),
-                        "font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300": !isActive(section),
-                      })}>
-                      {section.title}
-                    </a>
-                  </h3>
-                  {section.children.length > 0 && (
-                    <ol role="list" className="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400">
-                      {section.children.map((subSection) => (
-                        <li key={subSection.id}>
-                          <a
-                            href={`#${subSection.id}`}
-                            className={
-                              isActive(subSection)
-                                ? 'text-brand-foreground'
-                                : 'hover:text-slate-600 dark:hover:text-slate-300'
-                            }
-                          >
-                            {subSection.title}
-                          </a>
-                        </li>
-                      ))}
-                    </ol>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </>
-        )}
-      </nav>
-    </div>
-  )
-}

package/src/utils/colors.ts

@@ -1,54 +0,0 @@
-import docsConfig from '../../docs/dory.json' with { type: 'json' };
-import type { DoryConfig } from '../types/config';
-
-const config = docsConfig as DoryConfig;
-
-/**
- * Converts hex color to RGB values for CSS variable usage
- */
-function hexToRgb(hex: string): string {
-  // Remove # if present
-  const cleanHex = hex.replace('#', '');
-
-  // Parse hex values
-  const r = parseInt(cleanHex.substring(0, 2), 16);
-  const g = parseInt(cleanHex.substring(2, 4), 16);
-  const b = parseInt(cleanHex.substring(4, 6), 16);
-
-  return `${r} ${g} ${b}`;
-}
-
-/**
- * Load and apply brand colors from dory.json configuration
- * Sets CSS variables for use throughout the application
- */
-export function loadColors() {
-  const { colors } = config;
-  if (!colors) return;
-
-  // Set CSS variables on the root element for both light and dark modes
-  const root = document.documentElement;
-
-  // Set primary color (used in both light and dark mode)
-  if (colors.primary) {
-    root.style.setProperty('--brand-primary', colors.primary);
-    root.style.setProperty('--brand-primary-rgb', hexToRgb(colors.primary));
-  }
-
-  // Set light mode brand color
-  if (colors.light) {
-    root.style.setProperty('--brand-light', colors.light);
-    root.style.setProperty('--brand-light-rgb', hexToRgb(colors.light));
-  }
-
-  // Set dark mode brand color
-  if (colors.dark) {
-    root.style.setProperty('--brand-dark', colors.dark);
-    root.style.setProperty('--brand-dark-rgb', hexToRgb(colors.dark));
-  }
-
-  // Set the legacy variable for backward compatibility
-  if (colors.primary) {
-    root.style.setProperty('--brand-foreground', colors.primary);
-  }
-}

package/src/utils/fonts.ts

@@ -1,23 +0,0 @@
-import docsConfig from '../../docs/dory.json' with { type: 'json' };
-import type { DoryConfig } from '../types/config';
-
-const config = docsConfig as DoryConfig;
-
-export function loadFonts() {
-  const { fonts } = config;
-  if (!fonts) return;
-
-  // Create a style element for the font face
-  const style = document.createElement('style');
-  style.textContent = `
-    @font-face {
-      font-family: '${fonts.family}';
-      src: url('${fonts.source}') format('${fonts.format}');
-      font-display: swap;
-    }
-  `;
-  document.head.appendChild(style);
-
-  // Apply the font family to the root element
-  document.documentElement.style.fontFamily = fonts.family;
-} 

package/src/utils/functions.ts

@@ -1,12 +0,0 @@
-export function slugifyWithCounter() {
-  const counter = new Map<string, number>();
-  return (text: string) => {
-    const count = counter.get(text) ?? 0;
-    counter.set(text, count + 1);
-    return count === 0 ? text : `${text}-${count}`;
-  }
-}
-
-export function toTitleCase(text: string) {
-  return text.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "paths": {
-      "react": ["./node_modules/preact/compat/"],
-      "react-dom": ["./node_modules/preact/compat/"]
-    },
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"],
-  "exclude": ["src/plugins"]
-}

package/tsconfig.bin.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "noEmit": false,
-    "outDir": "./bin/dist",
-    "rootDir": "./bin",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
-  },
-  "include": [
-    "bin/**/*.ts"
-  ],
-  "exclude": [
-    "bin/dist"
-  ]
-}