feat(web-ui): overhaul homepage with hero section, section overview cards, recent docs strip, and MCP info
- Hero: large headline + tagline + dual CTA buttons + search box - Section overview: 4-column card grid with icons, descriptions, counts - Recent documents: card grid sorted by updatedAt - MCP info footer with server endpoint - Consistent with docs page layout overhaul
This commit is contained in:
asepharyana
+170
-58
@@ -1,82 +1,194 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { listDocuments } from "@mcpedia/core";
|
import { listDocuments } from "@mcpedia/core";
|
||||||
import { cookies } from "next/headers";
|
import { cookies } from "next/headers";
|
||||||
|
import type { DocSection } from "@mcpedia/core";
|
||||||
|
|
||||||
export const dynamic = "force-dynamic";
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
const SECTIONS = [
|
const SECTIONS: { id: DocSection; label: string; icon: string; desc: string }[] = [
|
||||||
{ id: "docs", label: "Documentation" },
|
{
|
||||||
{ id: "writeups", label: "Writeups" },
|
id: "docs",
|
||||||
{ id: "research", label: "Research" },
|
label: "Documentation",
|
||||||
{ id: "notes", label: "Notes" },
|
icon: "📄",
|
||||||
] as const;
|
desc: "Setup guides, API references, and protocol specs.",
|
||||||
|
},
|
||||||
|
{ id: "writeups", label: "Writeups", icon: "📝", desc: "Post-mortems, debugging stories, and case studies." },
|
||||||
|
{ id: "research", label: "Research", icon: "🔬", desc: "Deep-dive analysis, architecture notes, and experiments." },
|
||||||
|
{ id: "notes", label: "Notes", icon: "📌", desc: "Quick references, patterns, and gotchas." },
|
||||||
|
];
|
||||||
|
|
||||||
export default async function HomePage() {
|
export default async function HomePage() {
|
||||||
const all = await listDocuments();
|
const all = await listDocuments();
|
||||||
const bySection = SECTIONS.map((section) => ({
|
|
||||||
...section,
|
|
||||||
docs: all.filter((d) => d.section === section.id),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const cookieStore = await cookies();
|
const cookieStore = await cookies();
|
||||||
const canEdit = cookieStore.get("mcpedia_admin")?.value != null;
|
const canEdit = cookieStore.get("mcpedia_admin")?.value != null;
|
||||||
|
|
||||||
|
const recent = [...all]
|
||||||
|
.sort(
|
||||||
|
(a, b) =>
|
||||||
|
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
|
||||||
|
)
|
||||||
|
.slice(0, 6);
|
||||||
|
|
||||||
|
const bySection = SECTIONS.map((s) => ({
|
||||||
|
...s,
|
||||||
|
docs: all.filter((d) => d.section === s.id).slice(0, 4),
|
||||||
|
total: all.filter((d) => d.section === s.id).length,
|
||||||
|
}));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<div className="mb-12">
|
{/* ── Hero ── */}
|
||||||
<h1 className="text-[2.5rem] font-light text-[#f7f8f8] mb-2">
|
<section className="mb-16">
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<h1 className="text-5xl font-medium text-[#f7f8f8] mb-4 leading-tight">
|
||||||
MCPedia
|
MCPedia
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-[#8a8f98] text-lg max-w-2xl">
|
<p className="text-xl text-[#8a8f98] mb-8 leading-relaxed max-w-2xl">
|
||||||
A content-first knowledge base. Humans read the Web UI; AI agents
|
A content-first knowledge base for humans and AI agents. Read the
|
||||||
use the MCP server. Both share one Core.
|
web docs, call the MCP server, or browse the full document archive.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3 mb-8">
|
||||||
|
<Link
|
||||||
|
href="/docs"
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-[#5e6ad2] text-white rounded-lg font-medium hover:bg-[#6a75e0] transition-colors"
|
||||||
|
>
|
||||||
|
Browse Documents
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/search"
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-[#191a1b] border border-[#1f2022] text-[#d0d6e0] rounded-lg font-medium hover:border-[#5e6ad2]/40 hover:text-[#f7f8f8] transition-colors"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search box */}
|
||||||
|
<Link
|
||||||
|
href="/search"
|
||||||
|
className="relative flex items-center max-w-2xl group mb-12"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[#62666d] group-focus-within:text-[#5e6ad2] transition-colors"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="w-full pl-10 pr-4 py-3 bg-[#191a1b] border border-[#1f2022] rounded-lg text-[#62666d] group-hover:border-[#5e6ad2]/40 transition-colors">
|
||||||
|
Search documents, tags, authors...
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Section Overview ── */}
|
||||||
|
<section className="mb-16">
|
||||||
|
<h2 className="text-sm font-medium text-[#d0d6e0] uppercase mb-6">
|
||||||
|
Browse by section
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{bySection.map((s) => (
|
||||||
|
<Link
|
||||||
|
key={s.id}
|
||||||
|
href={`/${s.id}`}
|
||||||
|
className="group block bg-[#0f1011] border border-[#1f2022] rounded-lg p-5 hover:border-[#5e6ad2]/40 hover:bg-[#131415] transition-all duration-200"
|
||||||
|
>
|
||||||
|
<div className="text-3xl mb-3">{s.icon}</div>
|
||||||
|
<h3 className="font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors mb-1">
|
||||||
|
{s.label}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-[#62666d] mb-2 line-clamp-2">
|
||||||
|
{s.desc}
|
||||||
|
</p>
|
||||||
|
<span className="text-xs text-[#8a8f98]">
|
||||||
|
{s.total} document{s.total !== 1 ? "s" : ""}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Recent Documents ── */}
|
||||||
|
{recent.length > 0 && (
|
||||||
|
<section className="mb-16">
|
||||||
|
<div className="flex items-baseline justify-between mb-6">
|
||||||
|
<h2 className="text-sm font-medium text-[#d0d6e0] uppercase">
|
||||||
|
Recently updated
|
||||||
|
</h2>
|
||||||
|
<Link
|
||||||
|
href="/docs"
|
||||||
|
className="text-xs text-[#62666d] hover:text-[#7170ff] transition-colors"
|
||||||
|
>
|
||||||
|
View all →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{recent.map((d) => (
|
||||||
|
<Link
|
||||||
|
key={d.slug}
|
||||||
|
href={`/${d.slug}`}
|
||||||
|
className="group block bg-[#0f1011] border border-[#1f2022] rounded-lg p-4 hover:border-[#5e6ad2]/40 hover:bg-[#131415] transition-all duration-200"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-2 mb-2">
|
||||||
|
<span className="text-xl">
|
||||||
|
{SECTIONS.find((s) => s.id === d.section)?.icon || "📄"}
|
||||||
|
</span>
|
||||||
|
<time className="text-xs text-[#62666d]">
|
||||||
|
{new Date(d.updatedAt).toLocaleDateString(undefined, {
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
})}
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-2">
|
||||||
|
{d.title}
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{d.tags.slice(0, 3).map((t) => (
|
||||||
|
<span
|
||||||
|
key={t}
|
||||||
|
className="text-xs px-1.5 py-0.5 bg-[#191a1b] border border-[#23252a] rounded text-[#d0d6e0]"
|
||||||
|
>
|
||||||
|
#{t}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ── MCP info ── */}
|
||||||
|
<section className="border-t border-[#1f2022] pt-8">
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-[#f7f8f8] mb-1">AI agents</h3>
|
||||||
|
<p className="text-sm text-[#8a8f98]">
|
||||||
|
MCP server at{" "}
|
||||||
|
<code className="text-[#d0d6e0] bg-[#191a1b] px-1.5 py-0.5 rounded">
|
||||||
|
mcp.asepharyana.my.id/mcp
|
||||||
|
</code>
|
||||||
|
. All tools available via Streamable HTTP transport.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{canEdit && (
|
|
||||||
<div className="mb-8">
|
|
||||||
<Link
|
<Link
|
||||||
href="/create"
|
href="https://github.com/modelcontextprotocol"
|
||||||
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"
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-xs text-[#62666d] hover:text-[#7170ff] transition-colors"
|
||||||
>
|
>
|
||||||
+ Create Document
|
MCP spec →
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</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>
|
</section>
|
||||||
);
|
</>
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user