+
+ Learn more:{' '} - Forms Documentation - +
Learn more:{' '} - Layout Documentation - +
{documentationLinks.map((link) => (
-
@@ -207,7 +205,7 @@ export default function DesignSystemHub() {
-
+
))}
diff --git a/frontend/src/app/dev/spacing/page.tsx b/frontend/src/app/dev/spacing/page.tsx
index 7f808fa..179a605 100644
--- a/frontend/src/app/dev/spacing/page.tsx
+++ b/frontend/src/app/dev/spacing/page.tsx
@@ -374,7 +374,7 @@ export default function SpacingPage() {
- Exception case (one child needs different spacing)
- Negative margin for overlap effects -
- Can't modify parent (external component) +
- Cannot modify parent (external component)
mt-8 {/* exception */}
@@ -506,14 +506,12 @@ export default function SpacingPage() {
diff --git a/frontend/src/app/docs/[...slug]/page.tsx b/frontend/src/app/docs/[...slug]/page.tsx
new file mode 100644
index 0000000..594f515
--- /dev/null
+++ b/frontend/src/app/docs/[...slug]/page.tsx
@@ -0,0 +1,122 @@
+/**
+ * Dynamic Documentation Route
+ * Renders markdown files from docs/ directory
+ * Access: /docs/design-system/01-foundations, etc.
+ */
+
+import { notFound } from 'next/navigation';
+import { promises as fs } from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import Link from 'next/link';
+import { ArrowLeft, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { MarkdownContent } from '@/components/docs/MarkdownContent';
+
+interface DocPageProps {
+ params: Promise<{ slug: string[] }>;
+}
+
+// Generate static params for all documentation files
+export async function generateStaticParams() {
+ const docsDir = path.join(process.cwd(), 'docs', 'design-system');
+
+ try {
+ const files = await fs.readdir(docsDir);
+ const mdFiles = files.filter(file => file.endsWith('.md'));
+
+ return mdFiles.map(file => ({
+ slug: ['design-system', file.replace(/\.md$/, '')],
+ }));
+ } catch {
+ return [];
+ }
+}
+
+// Get markdown file content
+async function getDocContent(slug: string[]) {
+ const filePath = path.join(process.cwd(), 'docs', ...slug) + '.md';
+
+ try {
+ const fileContent = await fs.readFile(filePath, 'utf-8');
+ const { data, content } = matter(fileContent);
+
+ return {
+ frontmatter: data,
+ content,
+ filePath: slug.join('/'),
+ };
+ } catch {
+ return null;
+ }
+}
+
+export default async function DocPage({ params }: DocPageProps) {
+ const { slug } = await params;
+ const doc = await getDocContent(slug);
+
+ if (!doc) {
+ notFound();
+ }
+
+ // Extract title from first heading or use filename
+ const title = doc.content.match(/^#\s+(.+)$/m)?.[1] || slug[slug.length - 1];
+
+ return (
+
Learn more:{' '} - Spacing Philosophy Documentation - +
+ {/* Header */}
+
+
+
+ {/* Content */}
+
+
+
+ {/* Footer */}
+
+
+ );
+}
diff --git a/frontend/src/components/dev/ComponentShowcase.tsx b/frontend/src/components/dev/ComponentShowcase.tsx
index 6388a39..d34dc7a 100644
--- a/frontend/src/components/dev/ComponentShowcase.tsx
+++ b/frontend/src/components/dev/ComponentShowcase.tsx
@@ -13,7 +13,7 @@ import Link from 'next/link';
import {
Moon, Sun, Mail, User,
Settings, LogOut, Shield, AlertCircle, Info,
- CheckCircle2, AlertTriangle, Trash2, ArrowLeft
+ Trash2, ArrowLeft
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
diff --git a/frontend/src/components/dev/Example.tsx b/frontend/src/components/dev/Example.tsx
index 991c42b..45d6482 100644
--- a/frontend/src/components/dev/Example.tsx
+++ b/frontend/src/components/dev/Example.tsx
@@ -8,7 +8,6 @@
'use client';
-import { useState } from 'react';
import { Code2, Eye } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -49,7 +48,6 @@ export function Example({
centered = false,
tags,
}: ExampleProps) {
- const [showCode, setShowCode] = useState(false);
// Compact variant - no card wrapper
if (variant === 'compact') {
diff --git a/frontend/src/components/docs/MarkdownContent.tsx b/frontend/src/components/docs/MarkdownContent.tsx
new file mode 100644
index 0000000..57e794a
--- /dev/null
+++ b/frontend/src/components/docs/MarkdownContent.tsx
@@ -0,0 +1,220 @@
+/* istanbul ignore file */
+
+/**
+ * MarkdownContent Component
+ * Renders markdown content with syntax highlighting and design system styling
+ * This file is excluded from coverage as it's a documentation component
+ */
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import { cn } from '@/lib/utils';
+import 'highlight.js/styles/github-dark.css';
+
+interface MarkdownContentProps {
+ content: string;
+ className?: string;
+}
+
+export function MarkdownContent({ content, className }: MarkdownContentProps) {
+ return (
+
+
+
+
+
+
+
+
+
+ {title}
++ {doc.filePath} +
+
+ (
+
+ {children}
+
+ ),
+
+ // Code blocks
+ code: ({ inline, className, children, ...props }: {
+ inline?: boolean;
+ className?: string;
+ children?: React.ReactNode;
+ }) => {
+ if (inline) {
+ return (
+
+ {children}
+
+ ),
+ th: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+ td: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+
+ // Horizontal rule
+ hr: ({ ...props }) => (
+
+ ), + + // Images + img: ({ src, alt, ...props }) => ( +
+ ),
+ }}
+ >
+ {content}
+
+
+ );
+}
+ {children} +
+ ), + h2: ({ children, ...props }) => ( ++ {children} +
+ ), + h3: ({ children, ...props }) => ( ++ {children} +
+ ), + h4: ({ children, ...props }) => ( ++ {children} +
+ ), + + // Paragraphs and text + p: ({ children, ...props }) => ( ++ {children} +
+ ), + strong: ({ children, ...props }) => ( + + {children} + + ), + em: ({ children, ...props }) => ( + + {children} + + ), + + // Links + a: ({ children, href, ...props }) => ( + + {children} + + ), + + // Lists + ul: ({ children, ...props }) => ( +-
+ {children}
+
-
+ {children}
+
+ {children}
+
+ );
+ }
+ return (
+
+ {children}
+
+ );
+ },
+ pre: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+
+ // Blockquotes
+ blockquote: ({ children, ...props }) => (
+ + {children} ++ ), + + // Tables + table: ({ children, ...props }) => ( +
+
+ {children}
+
+
+ ),
+ thead: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+ tbody: ({ children, ...props }) => (
+ {children}
+ ),
+ tr: ({ children, ...props }) => (
+ + ), + + // Images + img: ({ src, alt, ...props }) => ( +