@gentleduck/docs 0.0.13 → 0.0.14

package/src/components/{themes/style-switcher.tsx → style-switcher.tsx}

@@ -3,7 +3,7 @@
 import { useConfig } from '@duck-docs/hooks/use-config'
 import { type Style, styles } from '@duck-docs/lib/registry-styles'
 import { cn } from '@gentleduck/libs/cn'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@gentleduck/registry-ui-duckui/select'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@gentleduck/registry-ui/select'
 import type * as React from 'react'
 
 export function StyleSwitcher({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectTrigger>) {
@@ -19,7 +19,10 @@ export function StyleSwitcher({ className, ...props }: React.ComponentPropsWitho
           })) as never
       }
       value={config.style}>
-      <SelectTrigger className={cn('h-7 w-[145px] text-xs [&_svg]:h-4 [&_svg]:w-4', className)} {...props}>
+      <SelectTrigger
+        aria-label="Style"
+        className={cn('h-7 w-[145px] text-xs [&_svg]:h-4 [&_svg]:w-4', className)}
+        {...props}>
         <span className="text-muted-foreground">Style: </span>
         <SelectValue placeholder="Select style" />
       </SelectTrigger>

package/src/context/context.types.ts

@@ -17,8 +17,12 @@ export type DocsSiteConfig = {
   description?: string
   githubRepo?: string
   links?: {
+    community?: string
+    discord?: string
     email?: string
     github?: string
+    security?: string
+    sponsor?: string
     twitter?: string
   }
   metaThemeColors?: {

package/src/lib/utils.ts

@@ -8,7 +8,13 @@ export function formatDate(input: string | number): string {
 }
 
 export function absoluteUrl(path: string) {
-  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
+  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || ''
+  if (!baseUrl) return path
+
+  const normalizedBase = baseUrl.replace(/\/+$/, '')
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`
+
+  return `${normalizedBase}${normalizedPath}`
 }
 
 export const filteredObject = <T extends Record<string, any>>(keys: string[], obj: T): Partial<T> => {

package/src/styles/base.css

@@ -10,23 +10,23 @@
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
+  --muted-foreground: oklch(0.545 0.016 285.938);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
 
-  --destructive: oklch(0.61 0.24 26.05);
+  --destructive: oklch(0.58 0.24 26.05);
   --destructive-foreground: oklch(0.98 0 0);
   --warning: oklch(0.79 0.16 75.77);
-  --warning-foreground: oklch(0.98 0 0);
+  --warning-foreground: oklch(0.205 0 0);
 
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
+  --ring: oklch(0.67 0.015 286.067);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.666 0.189 84.429);
+  --chart-5: oklch(0.677 0.188 70.08);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.141 0.005 285.823);
   --sidebar-primary: oklch(0.21 0.006 285.885);
@@ -34,14 +34,14 @@
   --sidebar-accent: oklch(0.967 0.001 286.375);
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --sidebar-ring: oklch(0.67 0.015 286.067);
 
   --surface: oklch(0.98 0 0);
   --surface-foreground: var(--foreground);
   --code: var(--surface);
   --code-foreground: var(--surface-foreground);
   --code-highlight: oklch(0.96 0 0);
-  --code-number: oklch(0.56 0 0);
+  --code-number: oklch(0.546 0 0);
   --selection: oklch(0.145 0 0);
   --selection-foreground: oklch(1 0 0);
 }
@@ -65,12 +65,12 @@
   --destructive: oklch(0.57 0.2 26.43);
   --destructive-foreground: oklch(0.98 0 0);
   --warning: oklch(0.78 0.16 75.9);
-  --warning-foreground: oklch(0.98 0 0);
+  --warning-foreground: oklch(0.205 0 0);
 
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
+  --ring: oklch(0.478 0 0);
+  --chart-1: oklch(0.496 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
@@ -82,7 +82,7 @@
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --sidebar-ring: oklch(0.478 0 0);
 
   --surface: oklch(0.2 0 0);
   --surface-foreground: oklch(0.708 0 0);

package/src/styles/docs.css

@@ -126,7 +126,7 @@
     @apply px-4;
   }
 
-  [duck-abc] {
+  [data-slot="abc"] {
     @apply w-600;
   }
 }
@@ -152,3 +152,16 @@
     display: none;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0ms !important;
+    transition-duration: 1ms !important;
+  }
+}

package/src/styles/mdx-base.css

@@ -0,0 +1,27 @@
+@layer components {
+  code,
+  code > * > *,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+    font-style: normal;
+    font-optical-sizing: auto;
+  }
+
+  [data-theme="light"] {
+    display: block;
+  }
+
+  [data-theme="dark"] {
+    display: none;
+  }
+
+  .dark [data-theme="light"] {
+    display: none;
+  }
+
+  .dark [data-theme="dark"] {
+    display: block;
+  }
+}

package/src/styles/mdx-code.css

@@ -0,0 +1,142 @@
+@layer components {
+  [data-rehype-pretty-code-fragment] {
+    @apply relative bg-muted/40 dark:bg-muted/40 rounded-lg border-border border mb-4 mt-6;
+  }
+
+  div[data-value]:not([data-value="cli"])[data-slot="tabs-content"] > [data-rehype-pretty-code-fragment] {
+    @apply bg-transparent m-0 static rounded-none border-0;
+  }
+
+  [data-rehype-pretty-code-fragment] code {
+    counter-reset: line;
+    box-decoration-break: clone;
+  }
+
+  [data-rehype-pretty-code-fragment] .line {
+    @apply px-4 min-h-[1rem] py-0.5 w-full inline-block;
+  }
+
+  [data-rehype-pretty-code-fragment] [data-line-numbers] .line {
+    @apply px-2;
+  }
+
+  [data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
+    display: inline-block;
+    width: 1.8rem;
+    margin-right: 1.4rem;
+    text-align: right;
+    content: counter(line);
+    counter-increment: line;
+    @apply text-accent-foreground text-xs;
+  }
+
+  [data-rehype-pretty-code-fragment] .line--highlighted,
+  [data-rehype-pretty-code-fragment] .word--highlighted {
+    @apply bg-foreground/4 dark:bg-foreground/5;
+  }
+
+  [data-rehype-pretty-code-fragment] .line-highlighted span {
+    @apply relative;
+  }
+
+  [data-rehype-pretty-code-fragment] .word--highlighted {
+    @apply rounded-md p-1;
+  }
+
+  [data-rehype-pretty-code-figure] {
+    position: relative;
+    margin-top: calc(var(--spacing) * 6);
+    overflow: hidden;
+    font-size: var(--text-base);
+    color: var(--color-code-foreground);
+    outline: none;
+    background-color: var(--color-code);
+    border-color: var(--border);
+    border-width: 0px;
+    border-radius: var(--radius-lg);
+    @apply -mx-1 md:-mx-1;
+
+    &:has([data-rehype-pretty-code-title]) [data-slot="copy-button"] {
+      top: calc(var(--spacing) * 1.5) !important;
+    }
+  }
+
+  [data-rehype-pretty-code-title] {
+    padding-block: calc(var(--spacing) * 2.5);
+    padding-inline: calc(var(--spacing) * 4);
+    font-family: var(--font-mono);
+    font-size: var(--text-base);
+    color: var(--color-code-foreground);
+  }
+
+  [data-line-numbers] {
+    display: grid;
+    min-width: 100%;
+    white-space: pre;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    counter-reset: line;
+    box-decoration-break: clone;
+  }
+
+  [data-line-numbers] [data-line]::before {
+    position: sticky;
+    left: 0;
+    display: inline-block;
+    width: calc(var(--spacing) * 16);
+    padding-right: calc(var(--spacing) * 6);
+    font-size: var(--text-base);
+    color: var(--color-code-number);
+    text-align: right;
+    content: counter(line);
+    counter-increment: line;
+    background-color: var(--color-code);
+  }
+
+  [data-line-numbers] [data-highlighted-line][data-line]::before {
+    background-color: var(--color-code-highlight);
+  }
+
+  [data-line] {
+    display: inline-block;
+    width: 100%;
+    min-height: calc(var(--spacing) * 1);
+    padding-top: calc(var(--spacing) * 0.5);
+    padding-bottom: calc(var(--spacing) * 0.5);
+  }
+
+  [data-line] span {
+    color: var(--shiki-light);
+
+    @variant dark {
+      color: var(--shiki-dark) !important;
+    }
+  }
+
+  [data-highlighted-line],
+  [data-highlighted-chars] {
+    position: relative;
+    background-color: var(--color-code-highlight);
+  }
+
+  [data-highlighted-line] {
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      content: "";
+      background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
+    }
+  }
+
+  [data-highlighted-chars] {
+    padding-block: 0.1rem;
+    padding-inline: 0.3rem;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    border-radius: var(--radius-md);
+  }
+}

package/src/styles/mdx-extensions.css

@@ -0,0 +1,3 @@
+/* Reserved for MDX extension-specific presentation styles.
+ * Keep empty for now to avoid introducing behavioral changes during the split.
+ */

package/src/styles/mdx-typography.css

@@ -0,0 +1,27 @@
+@layer components {
+  strong {
+    @apply font-semibold;
+  }
+
+  strong > code {
+    @apply font-bold;
+  }
+
+  .steps {
+    &:first-child {
+      @apply !mt-6;
+    }
+
+    &:first-child > h3:first-child {
+      @apply !mt-6;
+    }
+
+    > h3 {
+      @apply mt-8 mb-4 text-base font-semibold;
+    }
+
+    > h3 + p {
+      @apply !mt-2;
+    }
+  }
+}

package/src/styles/mdx.css

@@ -1,197 +1,4 @@
-@layer components {
-  code,
-  code > * > *,
-  kbd,
-  samp,
-  pre {
-    font-family: var(--font-mono);
-    font-style: normal;
-    font-optical-sizing: auto;
-  }
-
-  [data-theme="light"] {
-    display: block;
-  }
-
-  [data-theme="dark"] {
-    display: none;
-  }
-
-  .dark [data-theme="light"] {
-    display: none;
-  }
-
-  .dark [data-theme="dark"] {
-    display: block;
-  }
-
-  [data-rehype-pretty-code-fragment] {
-    @apply relative bg-muted/40 dark:bg-muted/40 rounded-lg border-border border mb-4 mt-6;
-  }
-
-  div[data-value]:not([data-value="cli"])[duck-tabs-content] > [data-rehype-pretty-code-fragment] {
-    @apply bg-transparent m-0 static rounded-none border-0;
-  }
-
-  [data-rehype-pretty-code-fragment] code {
-    counter-reset: line;
-    box-decoration-break: clone;
-  }
-
-  [data-rehype-pretty-code-fragment] .line {
-    @apply px-4 min-h-[1rem] py-0.5 w-full inline-block;
-  }
-
-  [data-rehype-pretty-code-fragment] [data-line-numbers] .line {
-    @apply px-2;
-  }
-
-  [data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
-    display: inline-block;
-    width: 1.8rem;
-    margin-right: 1.4rem;
-    text-align: right;
-    content: counter(line);
-    counter-increment: line;
-    @apply text-accent-foreground text-xs;
-  }
-
-  [data-rehype-pretty-code-fragment] .line--highlighted,
-  [data-rehype-pretty-code-fragment] .word--highlighted {
-    @apply bg-foreground/4 dark:bg-foreground/5;
-  }
-
-  [data-rehype-pretty-code-fragment] .line-highlighted span {
-    @apply relative;
-  }
-
-  [data-rehype-pretty-code-fragment] .word--highlighted {
-    @apply rounded-md p-1;
-  }
-
-  strong {
-    @apply font-semibold;
-  }
-
-  strong > code {
-    @apply font-bold;
-  }
-
-  .steps {
-    &:first-child {
-      @apply !mt-6;
-    }
-
-    &:first-child > h3:first-child {
-      @apply !mt-6;
-    }
-
-    > h3 {
-      @apply mt-8 mb-4 text-base font-semibold;
-    }
-
-    > h3 + p {
-      @apply !mt-2;
-    }
-  }
-
-  [data-rehype-pretty-code-figure] {
-    position: relative;
-    margin-top: calc(var(--spacing) * 6);
-    overflow: hidden;
-    font-size: var(--text-base);
-    color: var(--color-code-foreground);
-    outline: none;
-    background-color: var(--color-code);
-    border-color: var(--border);
-    border-width: 0px;
-    border-radius: var(--radius-lg);
-    @apply -mx-1 md:-mx-1;
-
-    &:has([data-rehype-pretty-code-title]) [data-slot="copy-button"] {
-      top: calc(var(--spacing) * 1.5) !important;
-    }
-  }
-
-  [data-rehype-pretty-code-title] {
-    padding-block: calc(var(--spacing) * 2.5);
-    padding-inline: calc(var(--spacing) * 4);
-    font-family: var(--font-mono);
-    font-size: var(--text-base);
-    color: var(--color-code-foreground);
-    border-bottom: color-mix(in oklab, var(--border) 30%, transparent);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-  }
-
-  [data-line-numbers] {
-    display: grid;
-    min-width: 100%;
-    white-space: pre;
-    border: 0;
-    background: transparent;
-    padding: 0;
-    counter-reset: line;
-    box-decoration-break: clone;
-  }
-
-  [data-line-numbers] [data-line]::before {
-    position: sticky;
-    left: 0;
-    display: inline-block;
-    width: calc(var(--spacing) * 16);
-    padding-right: calc(var(--spacing) * 6);
-    font-size: var(--text-base);
-    color: var(--color-code-number);
-    text-align: right;
-    content: counter(line);
-    counter-increment: line;
-    background-color: var(--color-code);
-  }
-
-  [data-line-numbers] [data-highlighted-line][data-line]::before {
-    background-color: var(--color-code-highlight);
-  }
-
-  [data-line] {
-    display: inline-block;
-    width: 100%;
-    min-height: calc(var(--spacing) * 1);
-    padding-top: calc(var(--spacing) * 0.5);
-    padding-bottom: calc(var(--spacing) * 0.5);
-  }
-
-  [data-line] span {
-    color: var(--shiki-light);
-
-    @variant dark {
-      color: var(--shiki-dark) !important;
-    }
-  }
-
-  [data-highlighted-line],
-  [data-highlighted-chars] {
-    position: relative;
-    background-color: var(--color-code-highlight);
-  }
-
-  [data-highlighted-line] {
-    &:after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 2px;
-      height: 100%;
-      content: "";
-      background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
-    }
-  }
-
-  [data-highlighted-chars] {
-    padding-block: 0.1rem;
-    padding-inline: 0.3rem;
-    font-family: var(--font-mono);
-    font-size: 0.8rem;
-    border-radius: var(--radius-md);
-  }
-}
+@import "./mdx-base.css";
+@import "./mdx-typography.css";
+@import "./mdx-code.css";
+@import "./mdx-extensions.css";

package/src/types/index.ts

@@ -1,2 +1,3 @@
+export * from './mdx-runtime'
 export * from './nav'
 export * from './unist'

package/src/types/mdx-runtime.ts

@@ -0,0 +1,21 @@
+export interface NpmCommands {
+  __npmCommand__?: string
+  __yarnCommand__?: string
+  __pnpmCommand__?: string
+  __bunCommand__?: string
+}
+
+export type MdxCodeNodeProperties = NpmCommands & {
+  __className__?: string
+  __event__?: string
+  __isMermaid__?: boolean
+  __marks__?: string[]
+  __mermaidDarkSvg__?: string
+  __mermaidLightSvg__?: string
+  __rawString__?: string
+  __title__?: string
+}
+
+export type MdxNodeData = {
+  meta?: string
+}

package/src/types/nav.ts

@@ -5,6 +5,8 @@ export interface NavItem {
   external?: boolean
   icon?: string
   label?: string
+  accordion?: boolean
+  defaultOpen?: boolean
   collapsible?: boolean
 }
 

package/src/types/unist.ts

@@ -1,9 +1,10 @@
 import type { Node } from 'unist'
+import type { MdxCodeNodeProperties, MdxNodeData, NpmCommands } from './mdx-runtime'
+
+export type { NpmCommands } from './mdx-runtime'
 
 declare module 'unist' {
-  interface Data {
-    meta?: string
-  }
+  interface Data extends MdxNodeData {}
 }
 
 export interface UnistNode extends Node {
@@ -12,17 +13,9 @@ export interface UnistNode extends Node {
   tagName?: string
   value?: string
   properties?: {
-    __rawString__?: string
-    __className__?: string
-    __title__?: string
-    __marks__?: string[]
-    __event__?: string
-    __isMermaid__?: boolean
-    __mermaidLightSvg__?: string
-    __mermaidDarkSvg__?: string
     className?: string[]
     [key: string]: unknown
-  } & NpmCommands
+  } & MdxCodeNodeProperties
   attributes?: {
     name: string
     value: unknown
@@ -34,10 +27,3 @@ export interface UnistNode extends Node {
 export interface UnistTree extends Node {
   children: UnistNode[]
 }
-
-export interface NpmCommands {
-  __npmCommand__?: string
-  __yarnCommand__?: string
-  __pnpmCommand__?: string
-  __bunCommand__?: string
-}

package/src/velite/browser.ts

@@ -8,4 +8,5 @@ export const rehypeNpmCommand = serverOnly as unknown as () => never
 export const cleanTocItems = serverOnly as unknown as () => never
 export const rehypePreBlockSource = serverOnly as unknown as () => never
 export const rehypeTitle = serverOnly as unknown as () => never
+export const rehypeMetadataPlugin = serverOnly as unknown as () => never
 export const rhypeMetadataPlugin = serverOnly as unknown as () => never