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
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import Link from "next/link";
|
|
import { listDocuments } from "@mcpedia/core";
|
|
import { cookies } from "next/headers";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
const SECTIONS = [
|
|
{ id: "docs", label: "Documentation" },
|
|
{ id: "writeups", label: "Writeups" },
|
|
{ id: "research", label: "Research" },
|
|
{ id: "notes", label: "Notes" },
|
|
] as const;
|
|
|
|
export default async function HomePage() {
|
|
const all = await listDocuments();
|
|
const bySection = SECTIONS.map((section) => ({
|
|
...section,
|
|
docs: all.filter((d) => d.section === section.id),
|
|
}));
|
|
|
|
const cookieStore = await cookies();
|
|
const canEdit = cookieStore.get("mcpedia_admin")?.value != null;
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-12">
|
|
<h1 className="text-[2.5rem] font-light text-[#f7f8f8] mb-2">
|
|
MCPedia
|
|
</h1>
|
|
<p className="text-[#8a8f98] text-lg max-w-2xl">
|
|
A content-first knowledge base. Humans read the Web UI; AI agents
|
|
use the MCP server. Both share one Core.
|
|
</p>
|
|
</div>
|
|
|
|
{canEdit && (
|
|
<div className="mb-8">
|
|
<Link
|
|
href="/create"
|
|
className="inline-flex items-center gap-2 px-4 py-2 rounded bg-[#5e6ad2] text-white hover:bg-[#7170ff] transition-colors font-medium text-sm"
|
|
>
|
|
+ Create Document
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
{bySection.map(({ id, label, docs }) => {
|
|
if (docs.length === 0) return null;
|
|
return (
|
|
<section key={id} className="mb-10">
|
|
<h2 className="text-sm font-medium text-[#d0d6e0] uppercase mb-4">
|
|
{label}
|
|
</h2>
|
|
<ul className="space-y-px text-sm">
|
|
{docs.map((d) => (
|
|
<li key={d.slug}>
|
|
<Link
|
|
href={`/${d.slug}`}
|
|
className="group flex items-start gap-3 py-2 text-[#d0d6e0] hover:text-[#f7f8f8] transition-colors"
|
|
>
|
|
<span className="text-[#8a8f98] group-hover:text-[#d0d6e0] w-5 text-center mt-0.5">
|
|
•
|
|
</span>
|
|
<span>
|
|
<span className="font-medium">{d.title}</span>
|
|
{d.tags.length > 0 && (
|
|
<span className="mt-0.5 text-xs text-[#62666d]">
|
|
{" "}
|
|
{d.tags.slice(0, 3).map((t) => `#${t}`).join(" ")}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|