chore: update dependencies and enhance documentation features

BunsDev · BunsDev · commit b6e13c40fbbf · 2026-01-28T13:29:51.000-06:00
- Added `github-slugger` and `rehype-slug` packages for improved heading management in markdown.
- Updated layout settings in `layout.tsx` to default to dark theme and disabled system theme switching.
- Refined Table of Contents components to ensure unique IDs using `github-slugger`.
- Adjusted documentation content for clarity and consistency in `ROADMAP.md` and other files.
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -4,7 +4,7 @@ This document outlines the planned features and development stages for the @crea
 
 ## Overview
 
-The @create-markdown project provides a complete block-based markdown solution with:
+`@create-markdown` provides a complete block-based markdown solution with:
 
 - **@create-markdown/core** - Zero-dependency parsing and serialization
 - **@create-markdown/preview** - Framework-agnostic HTML rendering with plugins
diff --git a/bun.lock b/bun.lock
diff --git a/packages/docs/app/docs/[[...slug]]/page.tsx b/packages/docs/app/docs/[[...slug]]/page.tsx
@@ -1,6 +1,7 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
 import { getDocBySlug, getAllDocSlugs, extractHeadings } from '@/lib/mdx';
 import { mdxComponents } from '@/components/docs/mdx-components';
 import { TableOfContents, MobileTOC } from '@/components/docs/toc';
@@ -69,7 +70,12 @@ export default async function DocPage({ params }: DocPageProps) {
             <MDXRemote
               source={doc.content}
               components={mdxComponents}
-              options={{ mdxOptions: { remarkPlugins: [remarkGfm] } }}
+              options={{
+                mdxOptions: {
+                  remarkPlugins: [remarkGfm],
+                  rehypePlugins: [rehypeSlug],
+                },
+              }}
             />
           </div>
         </article>
diff --git a/packages/docs/app/layout.tsx b/packages/docs/app/layout.tsx
@@ -47,8 +47,8 @@ export default function RootLayout({
       <body className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased bg-background min-h-screen`}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
-          enableSystem
+          defaultTheme="dark"
+          enableSystem={false}
           disableTransitionOnChange
         >
           {/* Fixed background effects - Purple only */}
diff --git a/packages/docs/components/docs/toc.tsx b/packages/docs/components/docs/toc.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import GitHubSlugger from 'github-slugger';
 import { List, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -56,9 +57,9 @@ export function TableOfContents({ items = [] }: TableOfContentsProps) {
     <div className="space-y-2">
       <p className="font-medium">On This Page</p>
       <ul className="m-0 list-none text-sm">
-        {items.map((item) => (
+        {items.map((item, index) => (
           <li
-            key={item.id}
+            key={`${item.id}-${index}`}
             className={cn(
               'mt-0 pt-2',
               item.level === 3 && 'pl-4'
@@ -125,19 +126,19 @@ export function MobileTOC({ items = [] }: TableOfContentsProps) {
   );
 }
 
-// Utility to extract headings from content
+// Utility to extract headings from content (use @/lib/mdx extractHeadings for doc pages).
+// Uses github-slugger so ids are unique and match rehype-slug output.
 export function extractHeadings(content: string): TocItem[] {
   const headingRegex = /^(#{2,3})\s+(.+)$/gm;
   const headings: TocItem[] = [];
+  const slugger = new GitHubSlugger();
   let match;
 
   while ((match = headingRegex.exec(content)) !== null) {
     const level = match[1].length;
-    const text = match[2];
-    const id = text
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/(^-|-$)/g, '');
+    const rawText = match[2];
+    const text = rawText.replace(/\*\*/g, '').replace(/`/g, '').trim();
+    const id = slugger.slug(text);
 
     headings.push({ id, text, level });
   }
diff --git a/packages/docs/content/roadmap.mdx b/packages/docs/content/roadmap.mdx
@@ -9,7 +9,7 @@ This document outlines the planned features and development stages for the @crea
 
 ## Overview
 
-The @create-markdown project provides a complete block-based markdown solution with:
+`@create-markdown` provides a complete block-based markdown solution with:
 
 - **@create-markdown/core** - Zero-dependency parsing and serialization
 - **@create-markdown/preview** - Framework-agnostic HTML rendering with plugins
diff --git a/packages/docs/lib/mdx.ts b/packages/docs/lib/mdx.ts
@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import GitHubSlugger from 'github-slugger';
 import matter from 'gray-matter';
 
 const contentDirectory = path.join(process.cwd(), 'content');
@@ -106,20 +107,20 @@ export function getAllDocs(): Doc[] {
 }
 
 /**
- * Extract headings from MDX content
+ * Extract headings from MDX content.
+ * Uses github-slugger so ids match rehype-slug (used when compiling MDX).
  */
 export function extractHeadings(content: string): Array<{ id: string; text: string; level: number }> {
   const headingRegex = /^(#{2,3})\s+(.+)$/gm;
   const headings: Array<{ id: string; text: string; level: number }> = [];
+  const slugger = new GitHubSlugger();
   let match;
 
   while ((match = headingRegex.exec(content)) !== null) {
     const level = match[1].length;
-    const text = match[2].replace(/\*\*/g, '').replace(/`/g, '');
-    const id = text
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/(^-|-$)/g, '');
+    const rawText = match[2];
+    const text = rawText.replace(/\*\*/g, '').replace(/`/g, '').trim();
+    const id = slugger.slug(text);
 
     headings.push({ id, text, level });
   }
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -29,7 +29,9 @@
     "shiki": "^3.21.0",
     "tailwind-merge": "^3.4.0",
     "gray-matter": "^4.0.3",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "github-slugger": "^2.0.0",
+    "rehype-slug": "^6.0.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.15",
diff --git a/packages/docs/scripts/convert.ts b/packages/docs/scripts/convert.ts
@@ -6,10 +6,12 @@
 
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
 import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
 import { markdownToMDXWithMeta } from '@create-markdown/mdx';
 
-const ROOT_DIR = join(import.meta.dir, '../../..');
-const OUTPUT_DIR = join(import.meta.dir, '../content');
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT_DIR = join(__dirname, '../../..');
+const OUTPUT_DIR = join(__dirname, '../content');
 
 interface FileMapping {
   source: string;
