@gentleduck/docs 0.0.1

package/src/styles/docs.css

@@ -0,0 +1,186 @@
+@import "./base.css";
+@import "./mdx.css";
+@import "tw-animate-css";
+
+@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;
+
+  @keyframes shine {
+    from {
+      background-position: 200% 0;
+    }
+
+    to {
+      background-position: -200% 0;
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border font-medium;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    scroll-behavior: smooth;
+  }
+
+  html {
+    @apply scroll-smooth;
+  }
+
+  .font-sans {
+    font-family: var(--font-sans-geist) !important;
+  }
+
+  .font-mono {
+    font-family: var(--font-mono-geist) !important;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 5px;
+  }
+
+  ::selection {
+    color: var(--selection-foreground);
+    background-color: var(--selection);
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
+
+  image {
+    user-select: none;
+  }
+
+  a:active,
+  button:active {
+    @apply opacity-60 md:opacity-100;
+  }
+}
+
+@utility duck-truncate {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+@layer utilities {
+  .step {
+    counter-increment: step;
+  }
+
+  .step::before {
+    content: counter(step);
+    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+    @apply ml-[-50px] mt-[-4px];
+  }
+
+  .chunk-container {
+    @apply shadow-none;
+  }
+
+  .chunk-container::after {
+    content: "";
+    @apply absolute -inset-4 shadow-xl rounded-xl border;
+  }
+
+  .border-grid {
+    @apply border-border/30 dark:border-border border-dashed;
+  }
+
+  .container {
+    @apply 3xl:max-w-screen-2xl mx-auto max-w-[1400px] px-4 lg:px-8;
+  }
+}
+
+@media (max-width: 640px) {
+  .container {
+    @apply px-4;
+  }
+
+  [duck-abc] {
+    @apply w-600;
+  }
+}
+
+@layer utilities {
+  .ellipsis {
+    display: grid;
+    -webkit-box-orient: vertical;
+    grid-template-columns: 1fr 1fr;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/src/styles/mdx.css

@@ -0,0 +1,205 @@
+@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 > * > *,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+    font-style: normal;
+    font-weight: 600;
+    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-zinc-50/40 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);
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './nav'
+export * from './unist'

package/src/types/nav.ts

@@ -0,0 +1,17 @@
+export interface NavItem {
+  title: string
+  href?: string
+  disabled?: boolean
+  external?: boolean
+  icon?: string
+  label?: string
+  collapsible?: boolean
+}
+
+export interface NavItemWithChildren extends NavItem {
+  items?: NavItemWithChildren[]
+}
+
+export interface MainNavItem extends NavItem {}
+
+export interface SidebarNavItem extends NavItemWithChildren {}

package/src/types/unist.ts

@@ -0,0 +1,39 @@
+import type { Node } from 'unist'
+
+declare module 'unist' {
+  interface Data {
+    meta?: string
+  }
+}
+
+export interface UnistNode extends Node {
+  type: string
+  name?: string
+  tagName?: string
+  value?: string
+  properties?: {
+    __rawString__?: string
+    __className__?: string
+    __title__?: string
+    __marks__?: string[]
+    __event__?: string
+    [key: string]: unknown
+  } & NpmCommands
+  attributes?: {
+    name: string
+    value: unknown
+    type?: string
+  }[]
+  children?: UnistNode[]
+}
+
+export interface UnistTree extends Node {
+  children: UnistNode[]
+}
+
+export interface NpmCommands {
+  __npmCommand__?: string
+  __yarnCommand__?: string
+  __pnpmCommand__?: string
+  __bunCommand__?: string
+}

package/src/velite/browser.ts

@@ -0,0 +1,11 @@
+const serverOnly = () => {
+  throw new Error('@gentleduck/docs/velite is server-only.')
+}
+
+export const docsVeliteConfig = {} as never
+export const createDocsVeliteConfig = serverOnly as unknown as () => never
+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 rhypeMetadataPlugin = serverOnly as unknown as () => never

package/src/velite/config.ts

@@ -0,0 +1,118 @@
+import type { UnistNode } from '@duck-docs/types'
+import { getHighlighter } from '@shikijs/compat'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+// @ts-ignore
+import rehypePrettyCode from 'rehype-pretty-code'
+import rehypeSlug from 'rehype-slug'
+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 { cleanTocItems } from './utils'
+
+export type DocsVeliteConfigOptions = {
+  docsPattern?: string
+  rehypePlugins?: Pluggable[]
+  rehypePluginsBefore?: Pluggable[]
+  remarkPlugins?: Pluggable[]
+  remarkPluginsBefore?: Pluggable[]
+}
+
+export function createDocsVeliteConfig({
+  docsPattern = 'docs/**/*.mdx',
+  rehypePlugins = [],
+  rehypePluginsBefore = [],
+  remarkPlugins = [],
+  remarkPluginsBefore = [],
+}: DocsVeliteConfigOptions = {}) {
+  return defineConfig({
+    collections: {
+      docs: {
+        name: 'Docs',
+        pattern: docsPattern,
+        schema: s
+          .object({
+            body: s.mdx(),
+            component: s.boolean().default(false),
+            content: s.markdown(),
+            description: s.string(),
+            excerpt: s.excerpt(),
+            links: s.object({ api: s.string().optional(), doc: s.string().optional() }).optional(),
+            metadata: s.metadata(),
+            title: s.string().max(99),
+            toc: s.toc(),
+          })
+          .transform((data, { path, meta }) => {
+            const _meta = meta as ZodMeta & { path: string }
+            return {
+              ...data,
+              contentType: _meta.path.split('.').pop(),
+              flattenedPath: _meta.path
+                .split('/')
+                .slice(-2, -1)
+                .join('/')
+                .replace(/\.mdx$/, ''),
+              permalink: _meta.path.replace(/^.*docs\//, '').replace(/\.mdx$/, ''),
+              slug: _meta.path
+                .split('docs/')
+                .pop()
+                ?.replace(/\.mdx$/, '')
+                .replace(/^\/+/, '')
+                ? `docs/${_meta.path
+                    .split('docs/')
+                    .pop()
+                    ?.replace(/\.mdx$/, '')
+                    .replace(/^\/+/, '')}`
+                : 'docs',
+              sourceFileDir: _meta.path.split('/').slice(-3, -1).join('/'),
+              sourceFileName: _meta.path.split('/').pop(),
+              sourceFilePath: path,
+              toc: cleanTocItems(data.toc),
+            }
+          }),
+      },
+    },
+    mdx: {
+      rehypePlugins: [
+        ...rehypePluginsBefore,
+        // @ts-ignore
+        rehypeSlug,
+        rhypeMetadataPlugin,
+        [
+          rehypePrettyCode,
+          {
+            getHighlighter,
+            onVisitHighlightedLine(node: UnistNode) {
+              // @ts-ignore
+              node.properties.className.push('line--highlighted')
+            },
+            onVisitHighlightedWord(node: UnistNode) {
+              // @ts-ignore
+              node.properties.className = ['word--highlighted']
+            },
+            onVisitLine(node: UnistNode) {
+              if (node.children?.length === 0) {
+                node.children = [{ type: 'text', value: ' ' }]
+              }
+            },
+            theme: {
+              dark: 'catppuccin-mocha',
+              light: 'github-light',
+            },
+          },
+        ],
+        rehypeTitle,
+        rehypePreBlockSource,
+        rehypeNpmCommand,
+        // @ts-ignore
+        [rehypeAutolinkHeadings, { properties: { ariaLabel: 'Link to section', className: ['subheading-anchor'] } }],
+        ...rehypePlugins,
+      ],
+      remarkPlugins: [...remarkPluginsBefore, remarkGfm, codeImport, ...remarkPlugins],
+    },
+  }) as any
+}
+
+export const docsVeliteConfig = createDocsVeliteConfig()

package/src/velite/index.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,3 @@
+export * from './metadata-plugin'
+export * from './rehype-pre-block-source'
+export * from './rehype-title'

package/src/velite/plugins/metadata-plugin.ts

@@ -0,0 +1,26 @@
+import type { UnistNode, UnistTree } from '@duck-docs/types'
+import { visit } from 'unist-util-visit'
+
+export function rhypeMetadataPlugin() {
+  return (tree: UnistTree): UnistTree => {
+    visit(tree, 'element', (node: UnistNode) => {
+      if (node.tagName === 'code' && node.children) {
+        let match = {} as any
+
+        if (node.data?.meta) {
+          const meta = node.data?.meta as string
+          match.__title__ = (meta?.match(/title="([^"]*)"/) ?? [])[1]
+          match.__marks__ = [...meta?.matchAll(/\/([^/]+)\//g)].map((m) => m[1])
+        }
+
+        node.properties = {
+          ...node.properties,
+          __rawString__: node.children?.[0]?.value,
+          ...match,
+        }
+      }
+    })
+
+    return tree
+  }
+}

package/src/velite/plugins/rehype-pre-block-source.ts

@@ -0,0 +1,25 @@
+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'
+
+export function rehypePreBlockSource() {
+  return (tree: UnistTree) => {
+    visit(tree, (node: UnistNode) => {
+      if (node?.type === 'element' && node?.tagName === 'div' && node?.properties) {
+        if (!('data-rehype-pretty-code-fragment' in node.properties)) {
+          return
+        }
+
+        node.children?.forEach((child: UnistNode) => {
+          if (child?.type === 'element' && child?.tagName === 'pre') {
+            child.properties = {
+              ...child?.properties,
+              __rawString__: toString(child as Nodes),
+            }
+          }
+        })
+      }
+    })
+  }
+}

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

@@ -0,0 +1,24 @@
+import type { UnistNode, UnistTree } from '@duck-docs/types'
+import { visit } from 'unist-util-visit'
+
+export function rehypeTitle() {
+  return (tree: UnistTree) => {
+    visit(tree, (node: UnistNode) => {
+      if (node?.type === 'element' && node?.tagName === 'div' && node?.properties) {
+        if (!('data-rehype-pretty-code-fragment' in node.properties)) {
+          return
+        }
+
+        node.children?.forEach((child: UnistNode) => {
+          if (
+            child.type === 'element' &&
+            child.tagName === 'div' &&
+            Object.keys(child.properties ?? {}).includes('data-rehype-pretty-code-title')
+          ) {
+            child.tagName = 'figcaption'
+          }
+        })
+      }
+    })
+  }
+}