asepharyana
1dd16ebcba
- Install rehype-slug (proper heading anchors) + github-slugger (matching TOC) - TOC component: auto-generated from h2/h3 headings, clickable anchors - Dark mode toggle: ThemeToggle (localStorage + system default), class-based - /docs index page (lists all docs by section) - Markdown.tsx uses rehype-slug for stable heading ids - globals.css: @custom-variant dark (.dark class) for class-based dark mode - layout.tsx: nav includes ThemeToggle Note: per user instruction, installed real deps (rehype-slug, github-slugger, @types/hast) instead of hacky inline any-cast hacks.
13 lines
446 B
TypeScript
13 lines
446 B
TypeScript
import ReactMarkdown from "react-markdown";
|
|
import rehypeSlug from "rehype-slug";
|
|
|
|
export default function Markdown({ source }: { source: string }) {
|
|
return (
|
|
<div className="prose prose-zinc dark:prose-invert max-w-none [&_pre]:bg-zinc-100 dark:[&_pre]:bg-zinc-900 [&_pre]:p-3 [&_pre]:rounded [&_code]:font-mono [&_a]:underline">
|
|
<ReactMarkdown rehypePlugins={[rehypeSlug]}>
|
|
{source}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|