@clidey/dory 0.1.0

package/src/mdx/code.tsx

@@ -0,0 +1,289 @@
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import { ClipboardIcon } from '@heroicons/react/24/outline'
+import classNames from 'classnames'
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useEffect,
+  useState
+} from 'react'
+import { Tag } from './tag'
+import { toTitleCase } from '../utils/functions'
+
+export const supportedLanguages = {
+  'python': 'Python',
+  'py': 'Python',
+  'javascript': 'JavaScript',
+  'js': 'JavaScript',
+  'typescript': 'TypeScript',
+  'ts': 'TypeScript',
+  'java': 'Java',
+  'c': 'C',
+  'cpp': 'C++',
+  'csharp': 'C#',
+  'cs': 'C#',
+  'rust': 'Rust',
+  'go': 'Go',
+  'ruby': 'Ruby',
+  'php': 'PHP',
+  'swift': 'Swift',
+  'kotlin': 'Kotlin',
+  'scala': 'Scala',
+  'haskell': 'Haskell',
+  'erlang': 'Erlang',
+  'elixir': 'Elixir',
+  'markdown': 'Markdown',
+  'md': 'Markdown',
+  'html': 'HTML',
+  'css': 'CSS',
+  'json': 'JSON',
+  'yaml': 'YAML',
+  'yml': 'YAML',
+  'toml': 'TOML',
+  'bash': 'Bash',
+  'markup': 'Markup',
+  'xml': 'XML',
+  'jsx': 'JSX',
+  'tsx': 'TSX',
+  'objectivec': 'Objective-C',
+  'js-extras': 'JavaScript Extras',
+  'reason': 'Reason',
+  'graphql': 'GraphQL',
+}
+
+function getPanelTitle(props: { className?: string }) {
+  const { className } = props
+  if (className) {
+    const language = className.replace('language-', '') as keyof typeof supportedLanguages;
+    return supportedLanguages[language] || toTitleCase(language)
+  }
+  return 'Code'
+}
+
+function CopyButton({ code }: { code: string }) {
+  const [copyCount, setCopyCount] = useState(0)
+  const copied = copyCount > 0
+
+  useEffect(() => {
+    if (copied) {
+      const timeout = setTimeout(() => setCopyCount(0), 1000)
+      return () => clearTimeout(timeout)
+    }
+  }, [copied])
+
+  return (
+    <button
+      type="button"
+      className={classNames(
+        'group/button absolute top-2 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',
+        {
+          'bg-emerald-400/10 ring-1 ring-emerald-400/20 ring-inset': copied,
+          'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5': !copied,
+        }
+      )}
+      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-zinc-400 transition duration-300 text-sm',
+          copied && '-translate-y-1.5 opacity-0',
+        )}
+      >
+        <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
+        Copy
+      </span>
+      <span
+        aria-hidden={!copied}
+        className={classNames(
+          'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300 text-sm',
+          !copied && 'translate-y-1.5 opacity-0',
+        )}
+      >
+        Copied!
+      </span>
+    </button>
+  )
+}
+
+function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
+  if (!tag && !label) return null
+
+  return (
+    <div className="flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-white/2.5 px-4 dark:border-b-white/5 dark:bg-white/1">
+      {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-zinc-400">{label}</span>}
+    </div>
+  )
+}
+
+function CodePanel({
+  children,
+  tag,
+  label,
+  code,
+}: {
+  children: React.ReactNode
+  tag?: string
+  label?: string
+  code?: string
+}) {
+  const child = Children.only(children)
+
+  if (isValidElement(child)) {
+    // @ts-expect-error
+    tag = child.props.tag ?? tag
+    // @ts-expect-error
+    label = child.props.label ?? label
+    // @ts-expect-error
+    code = child.props.code ?? code
+  }
+
+  if (!code) {
+    // @ts-expect-error
+    code = child.props.children
+  }
+
+  return (
+    <div className="group dark:bg-white/2.5">
+      <CodePanelHeader tag={tag} label={label} />
+      <div className="relative">
+        <pre className="overflow-x-auto p-4 text-xs text-white">{children}</pre>
+        <CopyButton code={code ?? ''} />
+      </div>
+    </div>
+  )
+}
+
+function CodeGroupHeader({
+  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 bg-black/5 px-4 dark:border-zinc-800 dark:bg-transparent">
+      {title && (
+        <p className="mr-auto pt-3 text-xs font-semibold text-white">
+          {title}
+        </p>
+      )}
+      {hasTabs && (
+        <TabList className="-mb-px flex gap-4 text-xs font-medium">
+          {Children.map(children, (child, index) => {
+            if (!isValidElement(child)) return null
+
+            const childProps = (child as preact.JSX.Element).props?.children?.props ?? {}
+            const panelTitle = getPanelTitle(childProps)
+
+            return (
+              <Tab
+                key={index}
+                className={classNames(
+                  'border-b py-3 transition data-selected:not-data-focus:outline-hidden',
+                  index === selectedIndex
+                    ? 'border-emerald-500 text-emerald-400'
+                    : 'border-transparent text-zinc-400 hover:text-zinc-300',
+                )}
+              >
+                {panelTitle}
+              </Tab>
+            )
+          })}
+        </TabList>
+      )}
+    </div>
+  )
+}
+
+function CodeGroupPanels({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CodePanel>) {
+  const hasTabs = Children.count(children) > 1
+
+  if (hasTabs) {
+    return (
+      <TabPanels>
+        {Children.map(children, (child, index) => (
+          <TabPanel key={index}>
+            <CodePanel {...props}>{child}</CodePanel>
+          </TabPanel>
+        ))}
+      </TabPanels>
+    )
+  }
+
+  return <CodePanel {...props}>{children}</CodePanel>
+}
+
+export const CodeGroupContext = createContext(false)
+
+export function CodeGroup({
+  children,
+  title,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const childrenArray = Children.toArray(children)
+
+  const hasTabs = childrenArray.length > 1
+
+  const containerClassName = 'docucod-mdx-code-group my-6 overflow-hidden rounded-2xl shadow-md dark:ring-1 dark:ring-white/10'
+  const header = (
+    <CodeGroupHeader title={title} selectedIndex={selectedIndex}>
+      {children}
+    </CodeGroupHeader>
+  )
+  const panels = <CodeGroupPanels {...props}>{children}</CodeGroupPanels>
+
+  return (
+    <CodeGroupContext.Provider value={true}>
+      {hasTabs ? (
+        <TabGroup
+          as="div"
+          selectedIndex={selectedIndex}
+          onChange={setSelectedIndex}
+          className={containerClassName}
+        >
+          <div className="not-prose">
+            {header}
+            {panels}
+          </div>
+        </TabGroup>
+      ) : (
+        <div className={containerClassName}>
+          <div className="not-prose">
+            {header}
+            {panels}
+          </div>
+        </div>
+      )}
+    </CodeGroupContext.Provider>
+  )
+}
+
+export function Code({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'code'>) {
+  return <code className={classNames('docucod-mdx-code rounded-md py-1 text-sm px-2', props.className)} {...props}>{children}</code>
+}

package/src/mdx/expandable.tsx

@@ -0,0 +1,40 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
+import { Icon } from './icon'
+
+export function Expandable({
+  title,
+  children,
+  icon,
+}: {
+  title: string
+  children: React.ReactNode
+  icon?: React.ComponentProps<typeof Icon>['icon']
+}) {
+  return (
+    <Disclosure as="div" className="my-6 rounded-xl border border-slate-200 dark:border-slate-700">
+      {({ open }) => (
+        <>
+          <DisclosureButton className="group flex w-full items-start justify-between text-left text-slate-900 dark:text-white p-6">
+            <div className="flex items-center gap-2">
+              {icon && <Icon icon={icon} className="h-8 w-8" />}
+              <span className="text-base font-display text-slate-900 dark:text-white">{title}</span>
+            </div>
+            <span className="ml-6 flex h-7 items-center">
+              {open ? (
+                <MinusIcon className="h-6 w-6 text-slate-700 dark:text-slate-400" />
+              ) : (
+                <PlusIcon className="h-6 w-6 text-slate-700 dark:text-slate-400" />
+              )}
+            </span>
+          </DisclosureButton>
+          <DisclosurePanel as="dd" className="px-6 pb-6">
+            <div className="text-sm text-slate-700 dark:text-slate-400 leading-tight [&>p]:mb-0">
+              {children}
+            </div>
+          </DisclosurePanel>
+        </>
+      )}
+    </Disclosure>
+  )
+}

package/src/mdx/fence.tsx

@@ -0,0 +1,73 @@
+import { Fragment, Suspense, useContext } from 'preact/compat'
+import { Highlight, themes } from 'prism-react-renderer'
+import { Code, CodeGroup, CodeGroupContext, supportedLanguages } from './code'
+import { MermaidRenderer } from './mermaid'
+import { Loading } from '../components/loading'
+import { useDarkMode } from '../utils/hooks'
+
+
+export function Fence({
+  children,
+  language,
+}: {
+  children: string
+  language: string
+}) {
+  const { isDark } = useDarkMode();
+
+  if (language === 'mermaid') {
+    return (
+      <div className="mermaid-container">
+        <Suspense fallback={<Loading />}>
+          <MermaidRenderer content={children} />
+        </Suspense>
+      </div>
+    )
+  }
+
+  const supportedLanguage = supportedLanguages[language as keyof typeof supportedLanguages] ?? language
+
+  return (
+    <Highlight
+      code={children.trimEnd()}
+      language={supportedLanguage}
+      theme={isDark ? themes.vsDark : themes.vsLight}>
+      {({ className, style, tokens, getTokenProps }) => (
+        <pre>
+          <Code className={className} style={style} title={supportedLanguage}>
+            {tokens.map((line, lineIndex) => (
+              <Fragment key={lineIndex}>
+                {line
+                  .filter((token) => !token.empty)
+                  .map((token, tokenIndex) => (
+                    <span key={tokenIndex} {...getTokenProps({ token })} />
+                  ))}
+                {'\n'}
+              </Fragment>
+            ))}
+          </Code>
+        </pre>
+      )}
+    </Highlight>
+  )
+}
+export function Pre(props: { children: { props: { className?: string; children?: string } } }) {
+  const child = props.children?.props
+  
+  // Safely handle className that might not be a string
+  const className = child?.className || ''
+  const language = supportedLanguages[className.replace('language-', '') as keyof typeof supportedLanguages] ?? className.replace('language-', '')
+  const code = child?.children || ''
+
+  // Check if we're inside a CodeGroup context
+  const isInCodeGroup = useContext(CodeGroupContext);
+
+  const fence = <Fence language={language}>{code}</Fence>
+
+  // If we're not in a CodeGroup, wrap the Fence in one
+  if (!isInCodeGroup && language !== 'mermaid') {
+    return <CodeGroup title={language}>{fence}</CodeGroup>
+  }
+
+  return fence
+}

package/src/mdx/icon.tsx

@@ -0,0 +1,73 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import * as solidIcons from '@fortawesome/free-solid-svg-icons'
+import * as regularIcons from '@fortawesome/free-regular-svg-icons'
+import * as brandIcons from '@fortawesome/free-brands-svg-icons'
+import classNames from 'classnames'
+import * as LucideIcons from 'lucide-react'
+
+// Map types to icon sets and FontAwesome prefixes
+const iconSets = {
+  solid: solidIcons,
+  regular: regularIcons,
+  brands: brandIcons,
+}
+
+const prefixes = {
+  solid: 'fas',
+  regular: 'far',
+  brands: 'fab',
+} as const
+
+export function Icon({
+  icon,
+  iconType = 'solid',
+  color = '',
+  size = 24,
+  className,
+  ...rest
+}: {
+  icon: string
+  iconType?: keyof typeof iconSets
+  color?: string
+  size?: number
+} & Omit<React.ComponentPropsWithoutRef<'svg'>, 'color'>) {
+  // Convert kebab-case or snake_case to PascalCase (for Lucide and FA variable names)
+  const pascalCase = icon
+    .replace(/[-_](.)/g, (_, group1) => group1.toUpperCase())
+    .replace(/^(.)/, (_, group1) => group1.toUpperCase())
+
+  // --- Try Lucide First ---
+  const LucideComponent = LucideIcons[pascalCase as keyof typeof LucideIcons] as any
+  if (LucideComponent) {
+    return (
+      <LucideComponent
+        className={classNames("stroke-black dark:stroke-white", className)}
+        color={color}
+        size={size}
+        {...rest}
+      />
+    )
+  }
+
+  // --- Try Font Awesome ---
+  const faSet = iconSets[iconType] ?? solidIcons
+  const iconKey = `fa${pascalCase}` as keyof typeof faSet
+  const faIcon = faSet[iconKey]
+
+  if (faIcon && typeof faIcon === 'object' && 'iconName' in faIcon) {
+    library.add(faIcon)
+    return (
+      <FontAwesomeIcon
+        icon={[prefixes[iconType] || 'fas', faIcon.iconName] as any}
+        className={classNames("stroke-black dark:stroke-white", className)}
+        color={color as any}
+        size={size as any}
+        {...rest as any}
+      />
+    )
+  }
+
+  console.warn(`⚠️ Icon not found: "${icon}" (converted to ${iconKey}) in ${iconType}`)
+  return null // or return a default/fallback icon if preferred
+}

package/src/mdx/latex.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react'
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+
+interface LatexProps {
+  children: string
+}
+
+export function Latex({ children }: LatexProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (containerRef.current) {
+      try {
+        katex.render(children, containerRef.current, {
+          displayMode: true,
+          throwOnError: false,
+        })
+      } catch (error) {
+        console.error('Error rendering LaTeX:', error)
+      }
+    }
+  }, [children])
+
+  return <div ref={containerRef} className="my-4" />
+}

package/src/mdx/list.tsx

@@ -0,0 +1,7 @@
+import type { JSX } from 'preact/jsx-runtime';
+
+export const UnorderedList = (props: JSX.IntrinsicElements['ul']) => <ul className="list-disc list-inside" {...props} />;
+
+export const OrderedList = (props: JSX.IntrinsicElements['ol']) => <ol className="list-decimal list-inside" {...props} />;
+
+export const ListItem = (props: JSX.IntrinsicElements['li']) => <li className="ml-4 mt-2" {...props} />;

package/src/mdx/mdx.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { usePathname } from 'wouter-preact/use-browser-location';
+import { completeFrontMatter } from '../components/store';
+
+export { h1, h2, h3, h4, h5, h6, p, Row, Col, Anchor as a, Image as img } from './text';
+export { Code as code, CodeGroup } from './code';
+export * from './tag';
+export { Pre as pre } from './fence';
+export { Accordion, AccordionGroup } from './accordion';
+export { Icon } from './icon';
+export { Card, CardGroup } from './card';
+export { Callout, Note, Warning, Info, Tip, Check } from './callout';
+export { Latex } from './latex';
+export { API } from './api';
+export { Expandable } from './expandable';
+export { ResponseField, Properties, Property } from './open-api';
+export { Steps, Step } from './step';
+export { Table as table, Th as th, Td as td } from './table';
+export { UnorderedList as ul, OrderedList as ol, ListItem as li } from './list';
+export { APIPlayground } from './api-playground';
+export { Source } from './source';
+
+export const wrapper = ({ children }: { children: preact.ComponentChildren }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (ref.current) {
+      // Hide the first h1 if it matches the title
+      // This is to avoid having the same title twice in the navigation
+      const title = completeFrontMatter.find(fm => fm.path === pathname)?.title;
+      const h1 = ref.current.querySelector('h1') as HTMLHeadingElement;
+      if (h1) {
+        h1.hidden = title === h1.innerText;
+      }
+    }
+  }, [pathname]);
+
+  return <div className="flex flex-col w-full" ref={ref}>{children}</div>;
+};
+
+
+export const hr = () => <hr className="my-4 text-gray-500/25 dark:text-gray-200/25" />;

package/src/mdx/mermaid.tsx

@@ -0,0 +1,102 @@
+import classNames from 'classnames'
+import { useEffect, useMemo, useRef, useState } from 'preact/compat'
+
+export function MermaidRenderer({ content }: { content: string }) {
+    const mermaidRef = useRef<HTMLDivElement>(null)
+    const [isFullscreen, setIsFullscreen] = useState(false)
+    const [isLoaded, setIsLoaded] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    const diagramId = useMemo(() => `mermaid-${btoa(content).replace(/[^a-zA-Z0-9]/g, '').substring(0, 10)}`, [content])
+
+    useEffect(() => {
+        let mounted = true
+
+        const renderMermaid = async () => {
+            try {
+                const mermaid = (await import('mermaid')).default
+                mermaid.initialize({ startOnLoad: true });
+
+                if (!mounted || !mermaidRef.current) return
+
+                mermaid.initialize({
+                    startOnLoad: true,
+                    theme: 'base',
+                    themeVariables: {
+                        fontSize: '14px',
+                        nodePadding: 20,        // More padding inside nodes
+                        notePadding: 15,
+                        padding: 10,            // Diagram-wide padding
+                        nodeBorderRadius: 8,    // Rounded corners for nodes
+                    },
+                    flowchart: {
+                        nodeSpacing: 50,      // horizontal spacing between nodes
+                        rankSpacing: 80,      // vertical spacing between layers
+                        padding: 20,
+                        useMaxWidth: true,
+                    },
+                })
+
+                if (mermaidRef.current) {
+                    mermaidRef.current.innerHTML = ''
+                }
+
+                const contentWithoutStyle = content
+                    .replace(/^\s*style .*$/gm, '')
+                    .replace(/^\s*classDef .*$/gm, '')
+                    .replace(/^\s*class .*$/gm, '');
+              
+                const { svg } = await mermaid.render(diagramId, contentWithoutStyle);
+                
+
+                if (mounted && mermaidRef.current) {
+                    mermaidRef.current.innerHTML = svg
+                    setIsLoaded(true)
+                }
+            } catch (err) {
+                console.error('Mermaid rendering error:', err)
+                if (mounted) {
+                    setError(err instanceof Error ? err.message : 'Failed to render diagram')
+                }
+            }
+        }
+
+        renderMermaid()
+
+        return () => {
+            mounted = false
+        }
+    }, [content, diagramId])
+
+    const toggleFullscreen = () => {
+        setIsFullscreen(!isFullscreen)
+    }
+
+    if (error) {
+        return (
+            <div className="flex items-center justify-center py-8 text-red-400 bg-red-900/20 border border-red-800 rounded">
+                <span>Error rendering diagram: {error}</span>
+            </div>
+        )
+    }
+
+    return (
+        <div className="mermaid-wrapper my-8">
+            {!isLoaded && (
+                <div className="flex items-center justify-center py-8 text-gray-400">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+                    <span className="ml-2">Loading diagram...</span>
+                </div>
+            )}
+            <div
+                ref={mermaidRef}
+                className={classNames('mermaid cursor-pointer transition-all duration-300 rounded-lg p-4 bg-white', {
+                    'fixed inset-0 z-50 bg-black/90 flex items-center justify-center backdrop-blur-sm': isFullscreen,
+                    'opacity-0': !isLoaded,
+                    'opacity-100': isLoaded,
+                })}
+                onClick={toggleFullscreen}
+            />
+        </div>
+    )
+}