@clidey/dory 0.21.4 → 0.23.0

package/src/ui/header.tsx

@@ -3,10 +3,13 @@ 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 type { DoryConfig } from '../types/config';
 import { MobileSearch, Search } from '../components/search';
 import { ALL_NAVIGATION } from '../components/store';
 import { MobileNavigation } from './mobile-navigation';
+import { ModeToggle } from '@clidey/ux';
+
+const config = docsConfig as DoryConfig;
 
 function TopLevelNavItem({ href, children, isActive }: { href: string; children: string; isActive?: boolean }) {
   return (
@@ -14,10 +17,10 @@ function TopLevelNavItem({ href, children, isActive }: { href: string; children:
       <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"
+          "text-xs transition hover:opacity-80",
+          {
+            "text-brand-foreground": isActive,
+          },
         )}
       >
         {children}
@@ -31,7 +34,7 @@ export function Header({ className }: { className?: string }) {
   const pathname = usePathname();
 
   const { light, dark } = useMemo(() => {
-    return { light: docsConfig.logo.light, dark: docsConfig.logo.dark };
+    return { light: config.logo.light, dark: config.logo.dark };
   }, []);
 
   useEffect(() => {
@@ -60,7 +63,7 @@ export function Header({ className }: { className?: string }) {
         <div className="flex items-center grow gap-2">
           <img src={`/${light}`} alt="logo" className="w-8 hidden dark:block" />
           <img src={`/${dark}`} alt="logo" className="w-8 block dark:hidden" />
-          <h1 className="text-base lg:text-2xl font-bold">{docsConfig.name}</h1>
+          <h1 className="text-base lg:text-2xl font-bold">{config.name}</h1>
         </div>
         <nav className="hidden md:block">
           <ul role="list" className="flex items-center gap-8">
@@ -76,10 +79,10 @@ export function Header({ className }: { className?: string }) {
           </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">
+        <div className="flex items-center gap-3" data-testid="header-actions">
           <MobileSearch />
           <Search />
-          <DarkModeToggle />
+          <ModeToggle data-testid="mode-toggle" />
           <MobileNavigation />
         </div>
       </div>

package/src/ui/layout.tsx

@@ -11,6 +11,7 @@ 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;
@@ -144,16 +145,16 @@ export default function Layout({ children }: LayoutProps) {
   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 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="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">
+          <div className="min-w-0 w-full">
             <article className="h-full flex flex-1 flex-col">
-              <div className="flex justify-between items-center">
+              <div className="flex justify-between items-start">
                 <header className="mb-8">
                   {title && (
                     <h1 className="font-display text-lg tracking-tight">
@@ -168,7 +169,7 @@ export default function Layout({ children }: LayoutProps) {
                 </header>
                 {
                   openAPIJSON == null && asyncAPIJSON == null &&
-                  <Dropdown className='min-w-[120px]' buttonLabel="AI Actions" items={dropdownItems} />
+                  <Dropdown className="gap-0" buttonLabel={<SparkleIcon className="w-4 h-4" />} items={dropdownItems} />
                 }
               </div>
               <div className="flex-1 min-h-[calc(100vh-2rem)]">

package/src/ui/mobile-navigation.tsx

@@ -1,91 +1,64 @@
 'use client'
 
-import {
-  Dialog,
-  DialogBackdrop,
-  DialogPanel,
-  TransitionChild,
-} from '@headlessui/react'
-import { motion } from 'motion/react'
-import { createContext, Suspense, useContext, useState } from 'react'
+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)
 
-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)
-  
+  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,
-    open: () => setIsOpen(true),
-    close: () => setIsOpen(false),
-    toggle: () => setIsOpen(prev => !prev)
+    isOpenRef,
+    open,
+    close,
+    toggle,
   }
 }
 
 export function MobileNavigation() {
   const isInsideMobileNavigation = useIsInsideMobileNavigation()
-  const { isOpen, toggle, close } = useMobileNavigation()
+  const { isOpen, open, 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>
-      )}
+      <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/table-of-content.tsx

@@ -114,7 +114,7 @@ export function TableOfContents() {
   }
 
   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">
+    <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-4">
       <nav aria-labelledby="on-this-page-title" className="w-56">
         {sections.length > 0 && (
           <>
@@ -131,7 +131,7 @@ export function TableOfContents() {
                     <a
                       href={`#${section.id}`}
                       className={classNames({
-                        "text-sky-500": isActive(section),
+                        "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}
@@ -145,7 +145,7 @@ export function TableOfContents() {
                             href={`#${subSection.id}`}
                             className={
                               isActive(subSection)
-                                ? 'text-sky-500'
+                                ? 'text-brand-foreground'
                                 : 'hover:text-slate-600 dark:hover:text-slate-300'
                             }
                           >

package/src/utils/colors.ts

@@ -0,0 +1,54 @@
+import docsConfig from '../../docs/dory.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,7 +1,10 @@
 import docsConfig from '../../docs/dory.json';
+import type { DoryConfig } from '../types/config';
+
+const config = docsConfig as DoryConfig;
 
 export function loadFonts() {
-  const { fonts } = docsConfig;
+  const { fonts } = config;
   if (!fonts) return;
 
   // Create a style element for the font face

package/vite.config.ts

@@ -30,5 +30,7 @@ export default defineConfig(({ command }) => ({
   publicDir: "docs",
   server: {
     allowedHosts: true,
+    port: 3000,
+    strictPort: false,
   },
 }));

package/.claude/settings.json

@@ -1,29 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(find:*)",
-      "Bash(grep:*)",
-      "Bash(rg:*)",
-      "Bash(npm run generate:*)",
-      "Bash(ls:*)",
-      "Bash(rm:*)",
-      "Bash(npm run build:*)",
-      "Bash(npx tsc:*)",
-      "Bash(npx typescript:*)",
-      "Bash(npm install:*)",
-      "Bash(pnpm install:*)",
-      "Bash(pnpm run:*)",
-      "Bash(node*)",
-      "Bash(git config*)",
-      "Bash(git checkout -b*)",
-      "Bash(git add*)",
-      "Bash(git commit -m*)",
-      "Bash(git push*)",
-      "Bash(gh pr create*)",
-      "Bash(git status*)", 
-      "Bash(git diff*)",
-      "Bash(git log*)"
-    ]
-  },
-  "enableAllProjectMcpServers": false
-}

package/.claude/settings.local.json

@@ -1,12 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(pnpm add:*)",
-      "Bash(mv:*)",
-      "Bash(pnpm exec tsx:*)",
-      "Bash(npx tsx:*)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}

package/.github/ISSUE_TEMPLATE/anything-else.md

@@ -1,10 +0,0 @@
----
-name: Anything else
-about: Use this for anything that doesn't fall under the categories above.
-title: "[QUESTION/MISC] - {your title here}"
-labels: question
-assignees: ''
-
----
-
-

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,39 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve Dory.
-title: "[BUG] - {your title here}"
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS that Dory is running on: [e.g. Ubuntu]
- - How you're running Dory: [e.g, Docker, exe, manually]
- - Browser: [e.g. chrome, safari]
- - Version: [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser: [e.g. stock browser, safari]
- - Version: [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project.
-title: "[FR] - {your title here}"
-labels: enhancement
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

package/.github/dependabot.yml

@@ -1,11 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "daily"

package/.github/workflows/claude.yml

@@ -1,37 +0,0 @@
-name: Claude Code
-
-on:
-  issue_comment:
-    types: [created]
-  pull_request_review_comment:
-    types: [created]
-  issues:
-    types: [opened, assigned]
-  pull_request_review:
-    types: [submitted]
-
-jobs:
-  claude:
-    if: |
-      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
-      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: read
-      issues: read
-      id-token: write
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 1
-
-      - name: Run Claude Code
-        id: claude
-        uses: anthropics/claude-code-action@beta
-        with:
-          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-

package/k8s/Dockerfile

@@ -1,14 +0,0 @@
-FROM node:22.16-alpine
-
-WORKDIR /app
-
-# Install git
-RUN apk add --no-cache git
-
-COPY ./docs/logo/logo.svg /app/docs/logo/logo.svg
-COPY ./k8s/config/nginx-default.conf /app/k8s/config/nginx-default.conf
-
-RUN npm install -g @clidey/dory@0.21.1
-EXPOSE 3000
-
-CMD ["dory", "preview"]

package/k8s/config/nginx-default.conf

@@ -1,22 +0,0 @@
-server {
-    listen       80;
-    listen  [::]:80;
-    server_name  localhost;
-
-    location ^~ /docs {
-        alias   /usr/share/docs;
-        index   index.html index.htm;
-        try_files $uri $uri/ /index.html;
-    }
-
-    location / {
-        root   /usr/share/nginx/html;
-        index  index.html index.htm;
-        try_files $uri /index.html;                 
-    }
-
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
-    }
-}

package/k8s/dev.Dockerfile

@@ -1,16 +0,0 @@
-FROM node:22.16-alpine
-
-WORKDIR /app
-RUN corepack enable && corepack prepare pnpm@latest --activate
-RUN apk add --no-cache git
-
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm i
-
-COPY . .
-
-RUN rm -rf /app/src/data
-
-EXPOSE 3000
-
-CMD ["pnpm", "dev", "--host", "0.0.0.0", "--port", "3000"]

package/k8s/docs.Dockerfile

@@ -1,15 +0,0 @@
-FROM node:20-alpine AS builder
-
-RUN corepack enable && corepack prepare pnpm@10.10.0 --activate
-WORKDIR /app
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm install --frozen-lockfile
-COPY . .
-RUN pnpm build
-
-FROM nginx:alpine
-COPY --from=builder /app/dist /usr/share/nginx/html
-COPY --from=builder /app/k8s/config/nginx-default.conf /etc/nginx/conf.d/default.conf
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"] 

package/src/components/dark-mode-toggle.tsx

@@ -1,25 +0,0 @@
-import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
-import { useDarkMode } from '../utils/hooks';
-import classNames from 'classnames';
-
-export function DarkModeToggle() {
-  const { isDark, toggleDarkMode } = useDarkMode();
-
-  return (
-    <button
-      onClick={toggleDarkMode}
-      className={classNames(
-        'rounded-lg p-2 transition-colors duration-200',
-        'hover:bg-gray-100 dark:hover:bg-gray-800',
-        'focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
-      )}
-      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-      title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
-      {isDark ? (
-        <SunIcon className="h-5 w-5 text-yellow-500" />
-      ) : (
-        <MoonIcon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-      )}
-    </button>
-  );
-}

package/src/index.css

@@ -1,24 +0,0 @@
-: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;
-}