MythEclipse/mcpedia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): overhaul frontend with cyber-intelligence design and interactive topology
CI / typecheck + tests (push) Canceled after 0s
Details
CI / build + deploy (Nix) — api (push) Canceled after 0s
Details
CI / build + deploy (Nix) — mcp (push) Canceled after 0s
Details
CI / build + deploy (Nix) — worker (push) Canceled after 0s
Details
CI / build + deploy (web) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
asepharyana
2026-08-22 14:55:19 +07:00
parent 9591c67478
commit 011571e12d
22 changed files with 1763 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/page.tsx
+133 -81
View File
@@ -2,6 +2,23 @@ import Link from "next/link";
import { listDocuments, listSections } from "@mcpedia/core";
import { getSectionMeta, type SectionConfig } from "@mcpedia/config";
import McpConfigSnippet from "@/components/McpConfigSnippet";
import InteractiveTopology from "@/components/InteractiveTopology";
import {
Sparkles,
Search,
Plus,
BookOpen,
ArrowRight,
Database,
Cpu,
Layers,
Activity,
Folder,
FileText,
Clock,
CheckCircle2,
Terminal,
} from "lucide-react";
export const dynamic = "force-dynamic";
@@ -22,7 +39,6 @@ function slugToTitle(segment: string): string {
function buildFolderTree(docs: { slug: string; title: string }[], section: string): TreeNode[] {
const tree: TreeNode[] = [];
const treeIndex = new Map<string, TreeNode>();
for (const doc of docs) {
const parts = doc.slug.split("/");
@@ -44,7 +60,6 @@ function buildFolderTree(docs: { slug: string; title: string }[], section: strin
isLeaf: false,
};
current.push(node);
treeIndex.set(currentPath, node);
}
if (isLeaf) {
@@ -77,26 +92,28 @@ function buildFolderTree(docs: { slug: string; title: string }[], section: strin
return sortAll(tree);
}
function renderTree(nodes: TreeNode[], pathname: string) {
function renderTree(nodes: TreeNode[]) {
return (
<ul className="space-y-1">
{nodes.map((node) => (
{nodes.slice(0, 5).map((node) => (
<li key={node.slug}>
<Link
href={`/${node.slug}`}
className={`flex items-center gap-1.5 text-xs py-1 px-1.5 rounded transition-all ${
pathname === `/${node.slug}`
? "text-[var(--brand)] dark:text-[var(--accent)] bg-[var(--brand)]/15 font-medium"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
}`}
className="flex items-center gap-2 text-xs py-1 px-2 rounded-md text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)] transition-colors group"
title={node.title}
>
<span className="opacity-80">{node.isLeaf && node.children.length === 0 ? "📄" : "📁"}</span>
<span className="shrink-0 text-[var(--text-dim)] group-hover:text-[var(--brand)] transition-colors">
{node.isLeaf && node.children.length === 0 ? (
<FileText className="w-3 h-3" />
) : (
<Folder className="w-3 h-3" />
)}
</span>
<span className="truncate">{node.title || node.name}</span>
</Link>
{node.children.length > 0 && (
<div className="ml-3.5 border-l border-[var(--border-color)] pl-2 mt-0.5">
{renderTree(node.children, pathname)}
<div className="ml-3 border-l border-[var(--border-color)] pl-2 mt-0.5">
{renderTree(node.children)}
</div>
)}
</li>
@@ -105,13 +122,7 @@ function renderTree(nodes: TreeNode[], pathname: string) {
);
}
interface SectionTreeProps {
section: string;
docs: { slug: string; title: string }[];
pathname: string;
}
function SectionTree({ section, docs, pathname }: SectionTreeProps) {
function SectionTree({ section, docs }: { section: string; docs: { slug: string; title: string }[] }) {
const tree = buildFolderTree(
docs.filter((d) => d.slug.startsWith(`${section}/`)),
section,
@@ -120,9 +131,9 @@ function SectionTree({ section, docs, pathname }: SectionTreeProps) {
return (
<div>
{tree.length > 0 ? (
renderTree(tree, pathname)
renderTree(tree)
) : (
<p className="text-xs text-[var(--text-dim)] pl-1">No documents</p>
<p className="text-xs text-[var(--text-dim)] pl-2">No documents yet</p>
)}
</div>
);
@@ -144,76 +155,112 @@ export default async function HomePage() {
return (
<div className="space-y-16">
{/* Hero Section */}
<section className="relative pt-4 pb-2">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--brand)]/10 border border-[var(--brand)]/25 text-[var(--brand)] dark:text-[var(--accent)] text-xs font-medium mb-6">
<span className="w-2 h-2 rounded-full bg-[var(--brand)] animate-pulse" />
<span>Model Context Protocol + PostgreSQL Core</span>
<section className="relative pt-2 pb-4">
{/* Floating status pill */}
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--brand)]/10 border border-[var(--brand)]/25 text-[var(--brand)] dark:text-[var(--accent)] text-xs font-semibold mb-6 shadow-xs animate-fade-in">
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
<span>Model Context Protocol · PostgreSQL Source of Truth</span>
</div>
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-[var(--text-primary)] tracking-tight mb-5 leading-tight">
{/* Primary Title */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-[var(--text-primary)] tracking-tight mb-5 leading-[1.12]">
Knowledge Base for <br />
<span className="bg-gradient-to-r from-[var(--brand)] via-[var(--accent)] to-[var(--accent-hover)] dark:to-white bg-clip-text text-transparent">
<span className="bg-gradient-to-r from-indigo-500 via-indigo-600 to-cyan-500 dark:to-cyan-400 bg-clip-text text-transparent">
Humans and AI Agents
</span>
</h1>
{/* Subtitle */}
<p className="text-base sm:text-lg text-[var(--text-muted)] max-w-2xl leading-relaxed mb-8">
A high-performance, database-backed documentation system. Browse hierarchical notes and technical writeups in your browser, or connect AI coding assistants directly via native MCP tools.
A high-performance technical knowledge repository. Browse structured notes and CTF writeups in your browser, or equip AI coding assistants directly via native MCP tools.
</p>
{/* Quick action buttons & stats */}
{/* Quick Action Buttons */}
<div className="flex flex-wrap items-center gap-3 mb-10">
<Link
href="/docs"
className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--brand)] hover:bg-[var(--brand-hover)] text-white rounded-lg font-medium text-sm transition-all shadow-md shadow-[var(--brand)]/20"
className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--brand)] hover:bg-[var(--brand-hover)] text-white rounded-xl font-semibold text-sm transition-all shadow-md shadow-[var(--brand)]/25 hover:shadow-[var(--brand)]/40 hover:-translate-y-0.5 cursor-pointer"
>
<BookOpen className="w-4 h-4" />
<span>Browse Documentation</span>
<span>→</span>
<ArrowRight className="w-4 h-4 ml-0.5" />
</Link>
<Link
href="/search"
className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-lg font-medium text-sm transition-all shadow-sm"
className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-xl font-semibold text-sm transition-all shadow-xs hover:-translate-y-0.5"
>
<svg className="w-4 h-4 text-[var(--text-muted)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>Hybrid Search</span>
<Search className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
<span>Hybrid Search Console</span>
</Link>
<Link
href="/create"
className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg text-sm transition-colors shadow-sm"
className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-xl text-sm transition-all shadow-xs"
>
<span>+ Create Document</span>
<Plus className="w-4 h-4" />
<span>Create Document</span>
</Link>
</div>
{/* Stats bar */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl max-w-3xl shadow-sm">
<div>
<div className="text-xl font-bold text-[var(--text-primary)]">{all.length}</div>
<div className="text-xs text-[var(--text-muted)]">Documents in DB</div>
{/* Live Telemetry Metric Strip */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-4 sm:p-5 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl shadow-sm">
<div className="flex items-center gap-3">
<div className="p-2.5 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
<Database className="w-5 h-5" />
</div>
<div>
<div className="text-xl font-bold text-[var(--text-primary)]">{all.length}</div>
<div className="text-[11px] text-[var(--text-muted)] font-mono">Documents in DB</div>
</div>
</div>
<div>
<div className="text-xl font-bold text-[var(--text-primary)]">{sections.length}</div>
<div className="text-xs text-[var(--text-muted)]">Active sections</div>
<div className="flex items-center gap-3">
<div className="p-2.5 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400">
<Layers className="w-5 h-5" />
</div>
<div>
<div className="text-xl font-bold text-[var(--text-primary)]">{sections.length}</div>
<div className="text-[11px] text-[var(--text-muted)] font-mono">Active Sections</div>
</div>
</div>
<div>
<div className="text-xl font-bold text-[var(--brand)] dark:text-[var(--accent)]">RRF Hybrid</div>
<div className="text-xs text-[var(--text-muted)]">FTS + Cosine Vectors</div>
<div className="flex items-center gap-3">
<div className="p-2.5 rounded-xl bg-violet-500/10 text-violet-600 dark:text-violet-400">
<Search className="w-5 h-5" />
</div>
<div>
<div className="text-xl font-bold text-[var(--brand)] dark:text-[var(--accent)]">RRF Hybrid</div>
<div className="text-[11px] text-[var(--text-muted)] font-mono">FTS + Cosine Vectors</div>
</div>
</div>
<div>
<div className="text-xl font-bold text-emerald-600 dark:text-emerald-400">13 MCP Tools</div>
<div className="text-xs text-[var(--text-muted)]">Streamable HTTP :4021</div>
<div className="flex items-center gap-3">
<div className="p-2.5 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
<Terminal className="w-5 h-5" />
</div>
<div>
<div className="text-xl font-bold text-emerald-600 dark:text-emerald-400">13 Tools</div>
<div className="text-[11px] text-[var(--text-muted)] font-mono">Streamable HTTP :4021</div>
</div>
</div>
</div>
</section>
{/* Browse by Section */}
{/* Interactive System Architecture & Topology */}
<section>
<InteractiveTopology />
</section>
{/* Browse Knowledge by Section */}
<section>
<div className="flex items-center justify-between mb-6">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">
Browse by Section
</h2>
<div className="flex items-center gap-2">
<Layers className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
<h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
Browse Knowledge by Section
</h2>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -222,19 +269,19 @@ export default async function HomePage() {
return (
<div
key={s.id}
className="group flex flex-col justify-between bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl p-5 transition-all shadow-sm"
className="group flex flex-col justify-between bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-2xl p-5 transition-all shadow-xs hover:shadow-md hover:-translate-y-0.5"
>
<div>
<div className="flex items-center justify-between gap-2 mb-3">
<span className="text-2xl">{s.icon}</span>
<Link
href={`/${s.id}`}
className="text-xs font-mono text-[var(--brand)] dark:text-[var(--accent)] hover:underline"
className="text-xs font-mono text-[var(--brand)] dark:text-[var(--accent)] hover:underline font-semibold"
>
{sectionDocs.length} docs →
</Link>
</div>
<h3 className="font-semibold text-base text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors mb-1.5">
<h3 className="font-bold text-base text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors mb-1.5">
{s.label}
</h3>
<p className="text-xs text-[var(--text-muted)] mb-4 line-clamp-2 leading-relaxed">
@@ -242,12 +289,11 @@ export default async function HomePage() {
</p>
</div>
{/* Inline folder tree */}
{/* Inline folder directory preview */}
<div className="pt-3 border-t border-[var(--border-color)]">
<SectionTree
section={s.id}
docs={all.map((d) => ({ slug: d.slug, title: d.title }))}
pathname="/"
/>
</div>
</div>
@@ -256,18 +302,22 @@ export default async function HomePage() {
</div>
</section>
{/* Recent Documents */}
{/* Recently Updated Knowledge */}
{recent.length > 0 && (
<section>
<div className="flex items-center justify-between mb-6">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">
Recently Updated Knowledge
</h2>
<div className="flex items-center gap-2">
<Clock className="w-4 h-4 text-[var(--brand)] dark:text-[var(--accent)]" />
<h2 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider font-mono">
Recently Updated Knowledge
</h2>
</div>
<Link
href="/docs"
className="text-xs text-[var(--brand)] dark:text-[var(--accent)] hover:underline font-medium"
className="text-xs text-[var(--brand)] dark:text-[var(--accent)] hover:underline font-semibold flex items-center gap-1"
>
View all ({all.length}) →
<span>View all ({all.length})</span>
<ArrowRight className="w-3.5 h-3.5" />
</Link>
</div>
@@ -278,11 +328,12 @@ export default async function HomePage() {
<Link
key={d.slug}
href={`/${d.slug}`}
className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl p-4 transition-all shadow-sm"
className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-2xl p-5 transition-all shadow-xs hover:shadow-md hover:-translate-y-0.5"
>
<div className="flex items-center justify-between gap-2 mb-2">
<span className="text-xs font-mono text-[var(--brand)] dark:text-[var(--accent)] uppercase">
{sInfo?.icon} {d.section}
<div className="flex items-center justify-between gap-2 mb-2.5">
<span className="text-[11px] font-mono font-semibold text-[var(--brand)] dark:text-[var(--accent)] uppercase flex items-center gap-1">
<span>{sInfo?.icon}</span>
<span>{d.section}</span>
</span>
<time className="text-[11px] text-[var(--text-dim)] font-mono">
{new Date(d.updatedAt).toLocaleDateString(undefined, {
@@ -291,15 +342,15 @@ export default async function HomePage() {
})}
</time>
</div>
<h3 className="font-medium text-sm text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors line-clamp-1 mb-2">
<h3 className="font-bold text-sm text-[var(--text-primary)] group-hover:text-[var(--brand)] dark:group-hover:text-[var(--accent)] transition-colors line-clamp-1 mb-2">
{d.title}
</h3>
{d.tags.length > 0 && (
<div className="flex flex-wrap gap-1">
<div className="flex flex-wrap gap-1 mt-3">
{d.tags.slice(0, 3).map((t) => (
<span
key={t}
className="text-[10px] px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)]"
className="text-[10px] px-2 py-0.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-md text-[var(--text-muted)] font-mono"
>
#{t}
</span>
@@ -313,17 +364,18 @@ export default async function HomePage() {
</section>
)}
{/* MCP Agent Integration Showcase */}
{/* Connect AI Assistant Showcase */}
<section className="border-t border-[var(--border-color)] pt-12 pb-6">
<div className="mb-6">
<div className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] text-xs font-mono mb-2">
<span>⚡ Native Model Context Protocol (MCP)</span>
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] text-xs font-mono mb-3">
<Sparkles className="w-3.5 h-3.5 text-indigo-500" />
<span>Connect Coding Assistants</span>
</div>
<h2 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight mb-2">
Connect AI Coding Assistants
<h2 className="text-2xl sm:text-3xl font-extrabold text-[var(--text-primary)] tracking-tight mb-2">
Model Context Protocol Configuration
</h2>
<p className="text-sm text-[var(--text-muted)] max-w-xl">
Give Claude Desktop, Cursor, Antigravity, or Zed direct access to your knowledge base via semantic search, read resources, and document tools.
<p className="text-xs sm:text-sm text-[var(--text-muted)] max-w-xl leading-relaxed">
Equip Claude Desktop, Cursor, Antigravity, or custom agents with direct access to your knowledge base via semantic search, read resources, and document tools.
</p>
</div>