@clidey/dory 0.1.0

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

@@ -0,0 +1,166 @@
+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">
+      <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-sky-500": 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-sky-500'
+                                : 'hover:text-slate-600 dark:hover:text-slate-300'
+                            }
+                          >
+                            {subSection.title}
+                          </a>
+                        </li>
+                      ))}
+                    </ol>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </>
+        )}
+      </nav>
+    </div>
+  )
+}

package/src/utils/fonts.ts

@@ -0,0 +1,20 @@
+import docsConfig from '../../docs/dory.json';
+
+export function loadFonts() {
+  const { fonts } = docsConfig;
+  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

@@ -0,0 +1,12 @@
+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/utils/hooks.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'preact/hooks';
+
+export function useDarkMode() {
+  // Check localStorage and system preference on initial load
+  const [isDark, setIsDark] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    
+    const stored = localStorage.getItem('darkMode');
+    if (stored !== null) {
+      return JSON.parse(stored);
+    }
+    
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+
+  // Update the HTML class and localStorage when isDark changes
+  useEffect(() => {
+    const body = document.querySelector('body');
+    if (!body) return;
+    if (isDark) {
+      body.classList.add('dark');
+    } else {
+      body.classList.remove('dark');
+    }
+    localStorage.setItem('darkMode', JSON.stringify(isDark));
+  }, [isDark]);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      // Only update if user hasn't manually set a preference
+      const stored = localStorage.getItem('darkMode');
+      if (stored === null) {
+        setIsDark(e.matches);
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  const toggleDarkMode = () => setIsDark(!isDark);
+
+  return { isDark, toggleDarkMode };
+}

package/src/vite-env.d.ts

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

package/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "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"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import preact from '@preact/preset-vite';
+import mdx from '@mdx-js/rollup';
+import tailwindcss from '@tailwindcss/vite'
+import remarkGfm from 'remark-gfm';
+import { remarkSafeVars } from './src/plugins/sanitize';
+
+export default defineConfig({
+  plugins: [
+    preact(),
+    mdx({
+      providerImportSource: '@mdx-js/preact',
+      remarkPlugins: [remarkGfm, remarkSafeVars],
+    }),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      react: 'preact/compat',
+      'react-dom': 'preact/compat'
+    }
+  },
+  publicDir: "docs",
+  server: {
+    allowedHosts: true,
+  },
+});