feat(web): full layout overhaul — Linear design system

Complete UI/UX overhaul, not just style changes: Layout: - Dark-mode-first (near-black #08090a canvas, whiteOpacity borders) - Sticky header with brand + nav + theme toggle - Sticky sidebar (xl+) with hierarchical doc tree - Main content in max-w-3xl centered column - Inter font system (via @font-face + CSS vars) - Font feature settings cv01/ss03 for Linear-geometric Inter Components rewritten in Linear aesthetic: - Homepage: editorial-style doc listing with tags, section headers - Doc page: breadcrumb-style nav links, metadata bar (author/date/tags), clean prose, Related + History sections - TOC: rehype-slug heading anchors + github-slugger matching - Create/Edit: inline form with Linear-style inputs/buttons - Login: centered card-style, brand-indigo CTA button - Docs index: sectioned listing with tag previews - Search: dark-themed search with result cards + snippets - ThemeToggle: system-default + localStorage persistence Typography: - prose with custom Tailwind classes matching Linear's: headings #f7f8f8 font-light, body #d0d6e0, links #7170ff with hover #828fff, code blocks #191a1b bg with #23252a border New deps: rehype-slug (heading anchors), github-slugger (TOC matching) Files: layout.tsx (overhaul), page.tsx, create/, login/, docs/, [section]/[...slug]/page.tsx, Sidebar.tsx, ThemeToggle.tsx, TOC.tsx, DocForm.tsx, Markdown.tsx, Search page
2026-08-20 16:57:30 +07:00
parent f8b525d10c
commit 167d95c5e8
13 changed files with 517 additions and 375 deletions
@@ -0,0 +1,66 @@
+import Link from "next/link";
+import { listDocuments } from "@mcpedia/core";
+
+const SECTIONS = [
+  { id: "docs", label: "Documentation" },
+  { id: "writeups", label: "Writeups" },
+  { id: "research", label: "Research" },
+  { id: "notes", label: "Notes" },
+] as const;
+
+export default async function Sidebar() {
+  const docs = await listDocuments();
+
+  // Build a tree: section → top-level slugs + children
+  const bySection: Record<string, { slug: string; title: string; depth: number }[]> = {};
+  for (const doc of docs) {
+    if (!bySection[doc.section]) bySection[doc.section] = [];
+    // Count depth from dots in a flattened slug: docs/websocket/contract
+    // We'll show all docs at their depth level
+    bySection[doc.section].push({
+      slug: doc.slug,
+      title: doc.title,
+      depth: doc.slug.split("/").length,
+    });
+  }
+
+  return (
+    <nav className="h-full overflow-y-auto py-6">
+      <ul className="space-y-1 px-3 text-sm">
+        {SECTIONS.map(({ id, label }) => {
+          const sectionDocs = bySection[id] || [];
+          if (sectionDocs.length === 0) return null;
+          return (
+            <li key={id}>
+              <div className="text-xs font-medium text-[#62666d] uppercase mb-1 mt-4 first:mt-0">
+                {label}
+              </div>
+              <ul className="space-y-0.5">
+                {sectionDocs.map((doc) => {
+                  const parts = doc.slug.split("/").slice(1); // remove section prefix
+                  const label = parts[parts.length - 1];
+                  const formatted = label
+                    .split(/[-_]/)
+                    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                    .join(" ");
+                  const indent = doc.depth - 1;
+                  return (
+                    <li key={doc.slug} style={{ marginLeft: `${indent * 12}px` }}>
+                      <Link
+                        href={`/${doc.slug}`}
+                        className="block text-[#d0d6e0] hover:text-[#f7f8f8] hover:bg-[#191a1b] rounded px-2 py-0.5 transition-colors"
+                        title={doc.title}
+                      >
+                        {formatted || doc.slug}
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}