chore: clean up empty code change sections in the changes log

app/blog/[slug]/page.tsx

@@ -0,0 +1,18 @@
+import { notFound } from "next/navigation";
+import { BlogDetailContent } from "@/components/blog-detail-content";
+import { getBlogDetailBySlug } from "@/data/blog-detail";
+
+type BlogDetailPageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
+  const { slug } = await params;
+  const post = getBlogDetailBySlug(slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  return <BlogDetailContent post={post} />;
+}

components/blog-detail-content.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Badge, Card, Typography } from "poyraz-ui/atoms";
+import type { BlogDetail } from "@/data/blog-detail";
+
+type BlogDetailContentProps = {
+  post: BlogDetail;
+};
+
+function MermaidBlock({ chart }: { chart: string }) {
+  const [svg, setSvg] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2)}`);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const renderChart = async () => {
+      try {
+        const mermaid = (await import("mermaid")).default;
+        mermaid.initialize({ startOnLoad: false, theme: "neutral", securityLevel: "loose" });
+        const { svg: rendered } = await mermaid.render(idRef.current, chart);
+        if (mounted) {
+          setSvg(rendered);
+          setError("");
+        }
+      } catch {
+        if (mounted) {
+          setError("Mermaid diagram could not be rendered.");
+        }
+      }
+    };
+
+    void renderChart();
+    return () => {
+      mounted = false;
+    };
+  }, [chart]);
+
+  if (error) {
+    return (
+      <Card className="rounded-sm border-border p-3">
+        <Typography variant="small" className="text-red-600">
+          {error}
+        </Typography>
+      </Card>
+    );
+  }
+
+  if (!svg) {
+    return (
+      <Card className="rounded-sm border-border p-3">
+        <Typography variant="small" className="text-muted-foreground">
+          Rendering diagram...
+        </Typography>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="overflow-x-auto rounded-sm border-border p-3">
+      <div dangerouslySetInnerHTML={{ __html: svg }} />
+    </Card>
+  );
+}
+
+export function BlogDetailContent({ post }: BlogDetailContentProps) {
+  const scrollerRef = useRef<HTMLDivElement | null>(null);
+  const [progress, setProgress] = useState(0);
+
+  const progressWidth = useMemo(() => `${Math.min(100, Math.max(0, progress))}%`, [progress]);
+
+  const handleScroll = () => {
+    const el = scrollerRef.current;
+    if (!el) return;
+
+    const scrollable = el.scrollHeight - el.clientHeight;
+    if (scrollable <= 0) {
+      setProgress(100);
+      return;
+    }
+
+    setProgress((el.scrollTop / scrollable) * 100);
+  };
+
+  return (
+    <div
+      ref={scrollerRef}
+      onScroll={handleScroll}
+      className="relative h-full overflow-y-auto rounded-sm border border-border"
+    >
+      <div className="sticky top-0 z-20 h-1 w-full bg-border">
+        <div
+          className="h-full bg-red-600 transition-[width] duration-100"
+          style={{ width: progressWidth }}
+        />
+      </div>
+
+      <article className="space-y-5 p-5 md:p-6">
+        <Link
+          href="/blog"
+          className="inline-flex items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+        >
+          ← Back to blog
+        </Link>
+
+        <header className="space-y-3">
+          <Badge className="rounded-sm">{post.category}</Badge>
+          <Typography variant="h2" className="leading-tight">
+            {post.title}
+          </Typography>
+          <Typography variant="small" className="text-muted-foreground">
+            {post.author} - {post.date} - {post.readTime}
+          </Typography>
+          <Typography variant="p" className="text-muted-foreground">
+            {post.excerpt}
+          </Typography>
+        </header>
+
+        <Card className="relative aspect-[16/8] overflow-hidden rounded-sm border-border">
+          <Image
+            src={post.coverImage}
+            alt={post.title}
+            fill
+            sizes="(max-width: 768px) 100vw, 50vw"
+            className="object-cover"
+          />
+        </Card>
+
+        <section className="space-y-4">
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+              h2: ({ children }) => (
+                <Typography variant="h3" className="mt-6">
+                  {children}
+                </Typography>
+              ),
+              h3: ({ children }) => (
+                <Typography variant="large" className="mt-4 text-foreground">
+                  {children}
+                </Typography>
+              ),
+              p: ({ children }) => (
+                <Typography variant="p" className="text-sm leading-relaxed">
+                  {children}
+                </Typography>
+              ),
+              li: ({ children }) => (
+                <li className="ml-5 list-disc text-sm leading-relaxed text-foreground">{children}</li>
+              ),
+              blockquote: ({ children }) => (
+                <blockquote className="border-l-2 border-red-600 pl-3 text-sm text-muted-foreground">
+                  {children}
+                </blockquote>
+              ),
+              table: ({ children }) => (
+                <div className="my-3 overflow-x-auto rounded-sm border border-border">
+                  <table className="min-w-full border-collapse text-sm">{children}</table>
+                </div>
+              ),
+              thead: ({ children }) => <thead className="bg-muted/40">{children}</thead>,
+              tr: ({ children }) => <tr className="border-b border-border">{children}</tr>,
+              th: ({ children }) => (
+                <th className="px-3 py-2 text-left font-semibold text-foreground">{children}</th>
+              ),
+              td: ({ children }) => (
+                <td className="px-3 py-2 align-top text-foreground">{children}</td>
+              ),
+              code: ({ className, children }) => {
+                const match = /language-(\w+)/.exec(className ?? "");
+                const codeText = String(children).replace(/\n$/, "");
+                const language = match?.[1] ?? "";
+
+                if (!match) {
+                  return (
+                    <code className="rounded-sm bg-muted px-1.5 py-0.5 text-[13px]">
+                      {children}
+                    </code>
+                  );
+                }
+
+                if (language === "mermaid") {
+                  return <MermaidBlock chart={codeText} />;
+                }
+
+                return (
+                  <SyntaxHighlighter
+                    language={language}
+                    style={vscDarkPlus}
+                    customStyle={{
+                      borderRadius: "0.25rem",
+                      marginTop: "0.5rem",
+                      marginBottom: "0.5rem",
+                    }}
+                    showLineNumbers
+                  >
+                    {codeText}
+                  </SyntaxHighlighter>
+                );
+              },
+            }}
+          >
+            {post.markdown}
+          </ReactMarkdown>
+        </section>
+      </article>
+    </div>
+  );
+}

data/blog-detail.ts

@@ -0,0 +1,211 @@
+export type BlogDetail = {
+  slug: string;
+  title: string;
+  category: string;
+  date: string;
+  readTime: string;
+  author: string;
+  excerpt: string;
+  coverImage: string;
+  markdown: string;
+};
+
+export const BLOG_DETAILS: BlogDetail[] = [
+  {
+    slug: "building-minimal-design-systems",
+    title: "Building Minimal Design Systems",
+    category: "React",
+    date: "March 2026",
+    readTime: "12 min read",
+    author: "Poyraz Avsever",
+    excerpt:
+      "A practical and detailed playbook for building a clean, scalable UI system with markdown-driven documentation, mermaid diagrams, and implementation-ready code.",
+    coverImage: "/news/design.svg",
+    markdown: `
+## Why Most Design Systems Become Heavy
+
+Most teams start with good intentions and end up with too many variants, too many exceptions, and no clear usage guide.  
+The real problem is usually **decision sprawl**:
+
+- Too many size and style combinations
+- Inconsistent naming conventions
+- Documentation that explains props, but not decisions
+
+---
+
+## Core Principle: Constrain First, Expand Later
+
+Start with a strict base:
+
+1. Typography scale
+2. Spacing scale
+3. Semantic colors
+4. A handful of primitives
+
+> A design system is not a component museum.  
+> It is an agreement that helps teams ship consistent UI quickly.
+
+---
+
+## Suggested Token Strategy
+
+\`\`\`json
+{
+  "font": {
+    "size": { "sm": "0.875rem", "base": "1rem", "lg": "1.125rem" },
+    "weight": { "regular": 400, "medium": 500, "bold": 700 }
+  },
+  "space": {
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "6": "1.5rem"
+  }
+}
+\`\`\`
+
+---
+
+## Architecture Flow
+
+\`\`\`mermaid
+flowchart LR
+  A[Design Tokens] --> B[Primitives]
+  B --> C[Composed Components]
+  C --> D[Page Sections]
+  D --> E[Product Screens]
+\`\`\`
+
+---
+
+## Example: Button Primitive
+
+\`\`\`tsx
+import { cva } from "class-variance-authority";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-sm text-sm font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        outline: "border border-border bg-background",
+        ghost: "bg-transparent"
+      },
+      size: {
+        sm: "h-8 px-3",
+        md: "h-9 px-4",
+        lg: "h-10 px-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+\`\`\`
+
+Why this works:
+
+- Variants are explicit
+- Defaults are stable
+- Consumers avoid ad-hoc class combinations
+
+---
+
+## Documentation Pattern That Scales
+
+Instead of “prop-only docs”, use this pattern for every component:
+
+### 1) When to use
+Explain context and intent.
+
+### 2) Do / Don't
+Show 2 positive and 2 negative examples.
+
+### 3) Accessibility checklist
+
+- Keyboard interaction
+- Focus visibility
+- ARIA coverage
+
+### 4) Code examples by complexity
+
+- Basic
+- With validation
+- With async state
+
+---
+
+## Mermaid Sequence for Contribution Workflow
+
+\`\`\`mermaid
+sequenceDiagram
+  participant Dev as Developer
+  participant DS as Design System
+  participant App as Product App
+
+  Dev->>DS: Add primitive or variant
+  DS-->>Dev: Exports + docs update
+  Dev->>App: Integrate component
+  App-->>Dev: UX feedback
+  Dev->>DS: Refine API
+\`\`\`
+
+---
+
+## Example: Page-Level Composition
+
+\`\`\`tsx
+export function BlogHeader() {
+  return (
+    <header className="space-y-2">
+      <Badge>React</Badge>
+      <h1 className="text-2xl font-bold">Building Minimal Design Systems</h1>
+      <p className="text-sm text-muted-foreground">
+        Practical notes from shipping real components.
+      </p>
+    </header>
+  );
+}
+\`\`\`
+
+---
+
+## Common Failure Modes
+
+| Problem | Why it happens | Better approach |
+|---|---|---|
+| Variant explosion | No ownership rules | Add contribution guardrails |
+| Styling overrides everywhere | Weak defaults | Strengthen semantic tokens |
+| Inconsistent docs | No template | Use one markdown template |
+| Slow adoption | API too abstract | Show direct usage examples |
+
+---
+
+## Final Checklist Before Shipping a New Component
+
+- [ ] API is minimal and explicit
+- [ ] States are documented (default, hover, focus, disabled, loading)
+- [ ] Keyboard support verified
+- [ ] Mobile rendering verified
+- [ ] Real usage example added to docs
+
+---
+
+## Closing Notes
+
+A minimal design system should feel boring in the best way.  
+When engineers can predict behavior, teams move faster with fewer regressions.
+
+Focus on **consistency, clarity, and constraints**.  
+Those three will outperform “feature-rich” component sets in the long run.
+`,
+  },
+] as const;
+
+export function getBlogDetailBySlug(slug: string) {
+  return BLOG_DETAILS.find((post) => post.slug === slug) ?? null;
+}

data/blog.ts

@@ -5,7 +5,7 @@ export const BLOG_NEWS = [
     category: "Technology",
     image: "/news/performance.svg",
     date: "Mar 6, 2026",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "ui-system-basics",
@@ -13,7 +13,7 @@ export const BLOG_NEWS = [
     category: "Design",
     image: "/news/design.svg",
     date: "Mar 5, 2026",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "next-16-notes-2",
@@ -21,7 +21,7 @@ export const BLOG_NEWS = [
     category: "Technology",
     image: "/news/performance.svg",
     date: "Mar 6, 2026",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "ui-system-basics-2",
@@ -29,7 +29,7 @@ export const BLOG_NEWS = [
     category: "Design",
     image: "/news/design.svg",
     date: "Mar 5, 2026",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
 ] as const;
 
@@ -43,7 +43,7 @@ export const BLOG_ARTICLES = [
     image: "/news/design.svg",
     date: "Mar 2026",
     readTime: "4 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-2",
@@ -54,7 +54,7 @@ export const BLOG_ARTICLES = [
     image: "/news/performance.svg",
     date: "Mar 2026",
     readTime: "5 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-3",
@@ -65,7 +65,7 @@ export const BLOG_ARTICLES = [
     image: "/news/performance.svg",
     date: "Mar 2026",
     readTime: "6 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-4",
@@ -76,7 +76,7 @@ export const BLOG_ARTICLES = [
     image: "/images/hero1.png",
     date: "Feb 2026",
     readTime: "4 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-5",
@@ -87,7 +87,7 @@ export const BLOG_ARTICLES = [
     image: "/news/design.svg",
     date: "Feb 2026",
     readTime: "5 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-6",
@@ -98,7 +98,7 @@ export const BLOG_ARTICLES = [
     image: "/news/performance.svg",
     date: "Feb 2026",
     readTime: "5 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-7",
@@ -109,7 +109,7 @@ export const BLOG_ARTICLES = [
     image: "/images/hero2.png",
     date: "Jan 2026",
     readTime: "4 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-8",
@@ -120,7 +120,7 @@ export const BLOG_ARTICLES = [
     image: "/news/design.svg",
     date: "Jan 2026",
     readTime: "6 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-9",
@@ -131,7 +131,7 @@ export const BLOG_ARTICLES = [
     image: "/news/performance.svg",
     date: "Jan 2026",
     readTime: "3 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-10",
@@ -142,7 +142,7 @@ export const BLOG_ARTICLES = [
     image: "/images/hero1.png",
     date: "Dec 2025",
     readTime: "4 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-11",
@@ -153,7 +153,7 @@ export const BLOG_ARTICLES = [
     image: "/news/design.svg",
     date: "Dec 2025",
     readTime: "4 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
   {
     id: "article-design-systems-12",
@@ -164,7 +164,7 @@ export const BLOG_ARTICLES = [
     image: "/news/performance.svg",
     date: "Dec 2025",
     readTime: "6 min",
-    href: "/blog",
+    href: "/blog/building-minimal-design-systems",
   },
 ] as const;
 

package.json

@@ -10,11 +10,15 @@
   },
   "dependencies": {
     "@iconify/react": "^6.0.2",
+    "mermaid": "^11.13.0",
     "next": "16.1.6",
     "poyraz-ui": "^2.0.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-hook-form": "^7.71.2"
+    "react-hook-form": "^7.71.2",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",