@gentleduck/docs 0.0.11 → 0.0.13

package/src/components/mdx/mdx.tsx

@@ -11,12 +11,20 @@ import Image from 'next/image'
 import type * as React from 'react'
 import runtime from 'react/jsx-runtime'
 import { Callout } from './mdx-components/callout'
-import { CodeBlock, CodeBlockWrapper, ComponentPreview, ComponentSource, PreBlock } from './mdx-components/code'
+import {
+  CodeBlock,
+  CodeBlockWrapper,
+  ComponentPreview,
+  ComponentSource,
+  MermaidBlock,
+  PreBlock,
+} from './mdx-components/code'
 import { FigcaptionBlock } from './mdx-components/code/figcaption-block'
 import { ComponentsList } from './mdx-components/components-list'
 import { Table, TableCell, TableHeader, TableRow } from './mdx-components/table'
 import { Tab, TabContent, TabList, TabTrigger } from './mdx-components/tabs'
 import { A, H1, H2, H3, H4, H5, H6, Hr, LinkBlock, LinkedCard, P } from './mdx-components/typepography'
+import { mdxIcons } from './mdx-icons'
 
 const useMDXComponent = (code: string) => {
   const fn = new Function(code)
@@ -24,6 +32,7 @@ const useMDXComponent = (code: string) => {
 }
 
 const components = {
+  ...mdxIcons,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -64,10 +73,16 @@ const components = {
     <li className={cn('mt-2', className)} {...props} />
   ),
   ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
-    <ol className={cn('my-6 ml-6 list-decimal', className)} {...props} />
+    <ol className={cn('my-6 ml-7 list-decimal', className)} {...props} />
   ),
   p: P,
-  pre: PreBlock,
+  MermaidDiagram: MermaidBlock,
+  pre: (props: any) => {
+    if (props.__isMermaid__) {
+      return <MermaidBlock {...props} className="my-0 border-none [&_*]:border-none" />
+    }
+    return <PreBlock {...props} />
+  },
   Step: ({ className, ...props }: React.ComponentProps<'h3'>) => (
     <h3 className={cn('step scroll-m-20 font-heading font-semibold text-xl tracking-tight', className)} {...props} />
   ),

package/src/components/mobile-nav.tsx

@@ -7,7 +7,6 @@ import { Drawer, DrawerContent, DrawerTrigger } from '@gentleduck/registry-ui-du
 import { ScrollArea } from '@gentleduck/registry-ui-duckui/scroll-area'
 import { PanelsTopLeft } from 'lucide-react'
 import Link, { type LinkProps } from 'next/link'
-import { useRouter } from 'next/navigation'
 import * as React from 'react'
 
 export function MobileNav() {
@@ -75,13 +74,12 @@ interface MobileLinkProps extends LinkProps {
 }
 
 function MobileLink({ href, onOpenChange, className, children, ...props }: MobileLinkProps) {
-  const router = useRouter()
   return (
     <Link
       className={cn(className)}
       href={href}
+      scroll
       onClick={() => {
-        router.push(href.toString())
         onOpenChange?.(false)
       }}
       {...props}>

package/src/styles/base.css

@@ -1,7 +1,4 @@
 :root {
-  --font-sans-geist: "Geist", "Adjusted Arial Fallback";
-  --font-mono-geist: "Geist Mono", monospace, "Adjusted Lucida Sans Typewriter Fallback";
-
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -100,8 +97,8 @@
 @theme inline {
   --breakpoint-3xl: 1600px;
   --breakpoint-4xl: 2000px;
-  --font-sans: "Geist", "Adjusted Arial Fallback";
-  --font-mono: "Geist Mono", "JetBrains Mono", monospace, "Adjusted Lucida Sans Typewriter Fallback";
+  --font-sans: var(--font-geist-sans, "Montserrat"), sans-serif;
+  --font-mono: var(--font-geist-mono, "Geist Mono"), monospace;
   --radius: 0.5rem;
 
   --color-background: var(--background);

package/src/styles/docs.css

@@ -4,38 +4,6 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@font-face {
-  font-family: "Adjusted Lucida Sans Typewriter Fallback";
-  src: local("Lucida Sans Typewriter");
-  size-adjust: 119%;
-  ascent-override: 86%;
-  descent-override: 16%;
-  line-gap-override: 30%;
-}
-
-@font-face {
-  font-family: "Adjusted Arial Fallback";
-  src: local("Arial");
-  size-adjust: 99%;
-  ascent-override: 101%;
-  descent-override: 26%;
-  line-gap-override: 0%;
-}
-
-@font-face {
-  font-family: "Geist";
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(/fonts/Geist-VF.woff2) format("woff2");
-}
-
-@font-face {
-  font-family: "Geist Mono";
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(/fonts/GeistMono-VF.woff2) format("woff2");
-}
-
 @theme {
   --animate-shine: shine 8s ease-in-out infinite;
 
@@ -63,11 +31,11 @@
   }
 
   .font-sans {
-    font-family: var(--font-sans-geist) !important;
+    font-family: var(--font-geist-sans, "Montserrat"), sans-serif !important;
   }
 
   .font-mono {
-    font-family: var(--font-mono-geist) !important;
+    font-family: var(--font-geist-mono, "Geist Mono"), monospace !important;
   }
 
   ::-webkit-scrollbar {

package/src/styles/mdx.css

@@ -1,10 +1,3 @@
-@font-face {
-  font-family: "JetBrains Mono";
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(/fonts/JetBrainsMono-VF.woff2) format("woff2");
-}
-
 @layer components {
   code,
   code > * > *,
@@ -13,7 +6,6 @@
   pre {
     font-family: var(--font-mono);
     font-style: normal;
-    font-weight: 600;
     font-optical-sizing: auto;
   }
 
@@ -61,7 +53,7 @@
     text-align: right;
     content: counter(line);
     counter-increment: line;
-    @apply text-zinc-50/40 text-xs;
+    @apply text-accent-foreground text-xs;
   }
 
   [data-rehype-pretty-code-fragment] .line--highlighted,

package/src/types/unist.ts

@@ -17,6 +17,10 @@ export interface UnistNode extends Node {
     __title__?: string
     __marks__?: string[]
     __event__?: string
+    __isMermaid__?: boolean
+    __mermaidLightSvg__?: string
+    __mermaidDarkSvg__?: string
+    className?: string[]
     [key: string]: unknown
   } & NpmCommands
   attributes?: {

package/src/velite/config.ts

@@ -8,8 +8,7 @@ import { codeImport } from 'remark-code-import'
 import remarkGfm from 'remark-gfm'
 import type { Pluggable } from 'unified'
 import { defineConfig, s, type ZodMeta } from 'velite'
-import { rehypePreBlockSource, rehypeTitle, rhypeMetadataPlugin } from './plugins'
-import { rehypeNpmCommand } from './rehype-npm-command'
+import { rehypeMermaid, rehypeNpmCommand, rehypePreBlockSource, rehypeTitle, rhypeMetadataPlugin } from './plugins'
 import { cleanTocItems } from './utils'
 
 export type DocsVeliteConfigOptions = {
@@ -105,6 +104,7 @@ export function createDocsVeliteConfig({
         ],
         rehypeTitle,
         rehypePreBlockSource,
+        rehypeMermaid,
         rehypeNpmCommand,
         // @ts-ignore
         [rehypeAutolinkHeadings, { properties: { ariaLabel: 'Link to section', className: ['subheading-anchor'] } }],

package/src/velite/index.ts

@@ -1,5 +1,4 @@
 export type { DocsVeliteConfigOptions } from './config'
 export { createDocsVeliteConfig, docsVeliteConfig } from './config'
 export * from './plugins'
-export { rehypeNpmCommand } from './rehype-npm-command'
 export { cleanTocItems } from './utils'

package/src/velite/plugins/index.ts

@@ -1,3 +1,5 @@
 export * from './metadata-plugin'
+export * from './rehype-mermaid'
+export * from './rehype-npm-command'
 export * from './rehype-pre-block-source'
 export * from './rehype-title'

package/src/velite/plugins/rehype-mermaid.ts

@@ -0,0 +1,227 @@
+import { execSync } from 'node:child_process'
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import type { UnistNode, UnistTree } from '@duck-docs/types'
+import type { Nodes } from 'hast'
+import { toString } from 'hast-util-to-string'
+import { visit } from 'unist-util-visit'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function isMermaidCode(node: UnistNode): boolean {
+  const codeChild = node.children?.[0]
+  if (!codeChild || codeChild.type !== 'element' || codeChild.tagName !== 'code') return false
+  const dataLang = codeChild.properties?.['data-language']
+  const classes = codeChild.properties?.className
+  return dataLang === 'mermaid' || (Array.isArray(classes) && classes.includes('language-mermaid'))
+}
+
+/** Safely extract a string value from an mdxJsxAttribute. */
+function extractAttrValue(attr: any): string | null {
+  if (!attr?.value) return null
+  if (typeof attr.value === 'string') return attr.value
+  if (attr.value?.type === 'mdxJsxAttributeValueExpression') {
+    try {
+      // eslint-disable-next-line no-new-func
+      return new Function('return ' + attr.value.value)()
+    } catch {
+      return null
+    }
+  }
+  return null
+}
+
+/** Create an mdxJsxAttribute with an expression value (properly escaped). */
+function makeJsxStringAttr(name: string, value: string) {
+  return {
+    type: 'mdxJsxAttribute',
+    name,
+    value: {
+      type: 'mdxJsxAttributeValueExpression',
+      value: JSON.stringify(value),
+      data: {
+        estree: {
+          type: 'Program',
+          sourceType: 'module',
+          body: [
+            {
+              type: 'ExpressionStatement',
+              expression: { type: 'Literal', value, raw: JSON.stringify(value) },
+            },
+          ],
+          comments: [],
+        },
+      },
+    },
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Headless Chromium renderer - produces pixel-perfect SVGs using a real browser
+// ---------------------------------------------------------------------------
+
+/** Find the system Chromium / Chrome binary. */
+function findChromium(): string {
+  for (const bin of ['chromium', 'google-chrome-stable', 'google-chrome', 'chromium-browser']) {
+    try {
+      const p = execSync(`which ${bin}`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim()
+      if (p) return p
+    } catch {
+      /* next */
+    }
+  }
+  throw new Error('[rehype-mermaid] No Chromium/Chrome binary found. Install chromium or google-chrome.')
+}
+
+let chromiumPath: string | null = null
+
+function buildRenderHtml(diagrams: { source: string; id: string; theme: 'default' | 'dark' }[]): string {
+  return `<!DOCTYPE html><html><head>
+<script type="module">
+import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+const diagrams = ${JSON.stringify(diagrams)};
+const results = {};
+for (const d of diagrams) {
+  try {
+    mermaid.initialize({ startOnLoad: false, theme: d.theme, fontFamily: 'sans-serif', securityLevel: 'loose' });
+    const { svg } = await mermaid.render(d.id, d.source);
+    results[d.id] = svg;
+  } catch (e) {
+    results[d.id] = '';
+  }
+}
+document.title = 'DONE:' + btoa(unescape(encodeURIComponent(JSON.stringify(results))));
+</script></head><body></body></html>`
+}
+
+async function renderSvgBatch(
+  diagrams: { source: string; id: string; theme: 'default' | 'dark' }[],
+): Promise<Record<string, string>> {
+  if (!chromiumPath) chromiumPath = findChromium()
+
+  const dir = mkdtempSync(join(tmpdir(), 'mermaid-'))
+  try {
+    const htmlFile = join(dir, 'render.html')
+    writeFileSync(htmlFile, buildRenderHtml(diagrams))
+
+    const output = execSync(
+      `"${chromiumPath}" --headless --disable-gpu --no-sandbox --virtual-time-budget=15000 --dump-dom "file://${htmlFile}"`,
+      { timeout: 60000, encoding: 'utf-8', maxBuffer: 50 * 1024 * 1024, stdio: ['pipe', 'pipe', 'pipe'] },
+    )
+
+    const titleMatch = output.match(/<title>DONE:([\s\S]*?)<\/title>/)
+    if (!titleMatch) throw new Error('Chromium did not produce output')
+
+    const json = decodeURIComponent(escape(Buffer.from(titleMatch[1]!, 'base64').toString('binary')))
+    const results: Record<string, string> = JSON.parse(json)
+
+    // Make SVGs responsive
+    for (const [id, svg] of Object.entries(results)) {
+      if (svg) {
+        results[id] = svg.replace(/\bwidth="[\d.]+"/, 'width="100%"')
+      }
+    }
+
+    return results
+  } finally {
+    rmSync(dir, { recursive: true, force: true })
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Plugin
+// ---------------------------------------------------------------------------
+
+export function rehypeMermaid() {
+  return async (tree: UnistTree) => {
+    // Two kinds of entries: code-fence <pre> blocks and <MermaidDiagram> JSX elements
+    type CodeFenceEntry = { kind: 'fence'; node: UnistNode; pre: UnistNode; source: string }
+    type JsxEntry = { kind: 'jsx'; node: UnistNode; source: string }
+    type Entry = CodeFenceEntry | JsxEntry
+
+    const entries: Entry[] = []
+
+    visit(tree, (node: UnistNode) => {
+      // 1. <MermaidDiagram chart={`...`} /> JSX elements
+      if ((node as any).type === 'mdxJsxFlowElement' && (node as any).name === 'MermaidDiagram') {
+        const attrs = (node as any).attributes || []
+        const chartAttr = attrs.find((a: any) => a.type === 'mdxJsxAttribute' && a.name === 'chart')
+        const chart = extractAttrValue(chartAttr)
+        if (chart) {
+          entries.push({ kind: 'jsx', node, source: chart.trim() })
+        }
+        return
+      }
+
+      // 2. rehypePrettyCode wrapper div (dual themes, two pre elements)
+      if (
+        node.type === 'element' &&
+        node.tagName === 'div' &&
+        node.properties &&
+        'data-rehype-pretty-code-fragment' in node.properties
+      ) {
+        const pres = (node.children || []).filter((c: UnistNode) => c.type === 'element' && c.tagName === 'pre')
+        const mPre = pres.find((c: UnistNode) => isMermaidCode(c))
+        if (!mPre) return
+        const src = (mPre.properties?.__rawString__ as string) || toString(mPre as Nodes)
+        if (src) entries.push({ kind: 'fence', node, pre: mPre, source: src.trim() })
+        return
+      }
+
+      // 3. Standalone <pre>
+      if (node.type === 'element' && node.tagName === 'pre' && isMermaidCode(node)) {
+        const src = (node.properties?.__rawString__ as string) || toString(node as Nodes)
+        if (src) entries.push({ kind: 'fence', node, pre: node, source: src.trim() })
+      }
+    })
+
+    if (entries.length === 0) return
+
+    // Build all diagrams in a single Chromium invocation (both themes)
+    const diagrams: { source: string; id: string; theme: 'default' | 'dark' }[] = []
+    for (let i = 0; i < entries.length; i++) {
+      const src = entries[i]!.source
+      diagrams.push({ source: src, id: `ml${i}`, theme: 'default' })
+      diagrams.push({ source: src, id: `md${i}`, theme: 'dark' })
+    }
+
+    let results: Record<string, string> = {}
+    try {
+      results = await renderSvgBatch(diagrams)
+    } catch (err) {
+      console.warn(`[rehype-mermaid] Build-time render failed:`, (err as Error).message)
+      return
+    }
+
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i]!
+      const lightSvg = results[`ml${i}`] || ''
+      const darkSvg = results[`md${i}`] || ''
+
+      if (!lightSvg && !darkSvg) {
+        console.warn(`[rehype-mermaid] No SVG produced for diagram ${i}`)
+        continue
+      }
+
+      if (entry.kind === 'jsx') {
+        const attrs = (entry.node as any).attributes || []
+        if (lightSvg) attrs.push(makeJsxStringAttr('lightSvg', lightSvg))
+        if (darkSvg) attrs.push(makeJsxStringAttr('darkSvg', darkSvg))
+        ;(entry.node as any).attributes = attrs
+      } else {
+        if (entry.node !== entry.pre) {
+          entry.node.children = [entry.pre]
+        }
+        entry.pre.properties = {
+          ...entry.pre.properties,
+          __isMermaid__: true,
+          __mermaidLightSvg__: lightSvg,
+          __mermaidDarkSvg__: darkSvg,
+        }
+      }
+    }
+  }
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 @gentleduck 
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/callout-BtMq2tJx.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"callout-BtMq2tJx.d.ts","names":[],"sources":["../src/components/mdx/mdx-components/callout.tsx"],"sourcesContent":[],"mappings":";;;UAEU,YAAA;;;EAAA,QAAA,CAAA,EAGG,KAAA,CAAM,SAHG;AAMtB;AAA0B,iBAAV,OAAA,CAAU;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAAmC,YAAnC,CAAA,EAA+C,mBAAA,CAAA,GAAA,CAAA,OAA/C"}

package/dist/charts-CELN6vzr.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"charts-CELN6vzr.d.ts","names":[],"sources":["../src/lib/charts.ts"],"sourcesContent":[],"mappings":";iBAAgB,yBAAA,SAAkC,yBAAyB;AAA3D,iBAoBA,2BAAA,CApB2D,IAAA,EAAM,MAAA,CAAA,EAAA,MAAA"}

package/dist/code-block-DRKzpa_7.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-block-DRKzpa_7.d.ts","names":[],"sources":["../src/components/mdx/mdx-components/code/code-block.tsx"],"sourcesContent":[],"mappings":";;;UAEU,SAAA,SAAkB,KAAA,CAAM,eAAe;;;AAAvC,iBAIM,SAAA,CAJiC;EAAA,SAArB;EAAM,aAAA;EAAc,GAAA;AAAA,CAAA,EAIkB,SAJlB,CAAA,EAI2B,mBAAA,CAAA,GAAA,CAAA,OAJ3B"}