asepharyana
167d95c5e8
CI / typecheck + build (turbo) (push) Canceled after 0s
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
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import "./globals.css";
|
|
import ThemeToggle from "@/components/ThemeToggle";
|
|
import Sidebar from "@/components/Sidebar";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "MCPedia — Knowledge base for humans and AI agents",
|
|
description:
|
|
"A content-first knowledge base. Humans read the Web UI; AI agents use the MCP server. Both share one Core.",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<html lang="en" className="h-full scroll-smooth">
|
|
<body className="min-h-screen bg-[#08090a] text-[#e2e4e7] font-inter">
|
|
<header className="sticky top-0 z-20 border-b border-[#1f2022]">
|
|
<div className="mx-auto max-w-7xl px-4 h-14 flex items-center justify-between">
|
|
<Link href="/" className="font-medium text-[#f7f8f8] text-lg">
|
|
MCPedia
|
|
</Link>
|
|
<nav className="flex items-center gap-6 text-sm">
|
|
<Link
|
|
href="/docs"
|
|
className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
|
|
>
|
|
Docs
|
|
</Link>
|
|
<Link
|
|
href="/search"
|
|
className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
|
|
>
|
|
Search
|
|
</Link>
|
|
<Link
|
|
href="/login"
|
|
className="text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
|
|
>
|
|
Login
|
|
</Link>
|
|
<ThemeToggle />
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="mx-auto max-w-7xl">
|
|
<div className="flex">
|
|
{/* Sticky sidebar for doc navigation */}
|
|
<aside className="hidden xl:block w-64 shrink-0 border-r border-[#1f2022]">
|
|
<Sidebar />
|
|
</aside>
|
|
|
|
<main className="flex-1 min-w-0">
|
|
<div className="px-8 py-10 max-w-3xl mx-auto">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|