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

fix(theme): support full dynamic Light Mode and Dark Mode with CSS variables and storage sync

Browse Source
This commit is contained in:
asepharyana
2026-08-21 11:13:05 +07:00
parent 62116be88d
commit aedfb022f3
16 changed files with 464 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/[section]/[...slug]/page.tsx
+67 -67
View File
@@ -54,47 +54,47 @@ function CustomFieldBadges({
if (customEntries.length === 0) return null;
return (
<div className="flex flex-wrap items-center gap-2 mt-4 pt-3.5 border-t border-[#1f2022]">
<div className="flex flex-wrap items-center gap-2 mt-4 pt-3.5 border-t border-[var(--border-color)]">
{customEntries.map(([key, value]) => {
const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");
let colorClass = "bg-[#141517] border-[#23252a] text-[#d0d6e0]";
let colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-secondary)]";
let icon = "🏷️";
let displayValue: string;
if (typeof value === "number") {
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#5e6ad2] dark:text-[#7170ff]";
icon = "🎯";
displayValue = `${value} pts`;
} else if (typeof value === "boolean") {
colorClass = value
? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400"
: "bg-rose-500/10 border-rose-500/30 text-rose-400";
? "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400"
: "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400";
icon = value ? "✓" : "✕";
displayValue = value ? "Solved" : "Pending";
} else if (Array.isArray(value)) {
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#5e6ad2] dark:text-[#7170ff]";
icon = "🗂️";
displayValue = value.join(", ");
} else {
const v = String(value).toLowerCase();
if (/^(easy|simple|beginner)/i.test(v)) {
colorClass = "bg-emerald-500/10 border-emerald-500/30 text-emerald-400";
colorClass = "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400";
icon = "🟢";
displayValue = "Easy";
} else if (/^(medium|intermediate)/i.test(v)) {
colorClass = "bg-amber-500/10 border-amber-500/30 text-amber-400";
colorClass = "bg-amber-500/10 border-amber-500/30 text-amber-600 dark:text-amber-400";
icon = "🟡";
displayValue = "Medium";
} else if (/^(hard|expert|advanced)/i.test(v)) {
colorClass = "bg-rose-500/10 border-rose-500/30 text-rose-400";
colorClass = "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400";
icon = "🔴";
displayValue = "Hard";
} else if (/^(pwn|web|crypto|misc|forensic|reverse|binary)/i.test(v)) {
colorClass = "bg-indigo-500/10 border-indigo-500/30 text-indigo-300";
colorClass = "bg-indigo-500/10 border-indigo-500/30 text-indigo-600 dark:text-indigo-300";
icon = "⚡";
displayValue = v.toUpperCase();
} else if (/ctf|def.?con|event/i.test(v)) {
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#5e6ad2] dark:text-[#7170ff]";
icon = "🏆";
displayValue = String(value);
} else {
@@ -108,7 +108,7 @@ function CustomFieldBadges({
className={`inline-flex items-center gap-1.5 px-2.5 py-1 border rounded-md text-xs font-mono transition-colors ${colorClass}`}
>
<span className="text-[10px] opacity-70">{icon}</span>
<span className="text-[#8a8f98] font-sans">{label}:</span>
<span className="text-[var(--text-muted)] font-sans">{label}:</span>
<span className="font-medium">{displayValue}</span>
</span>
);
@@ -157,12 +157,12 @@ function FolderIndexPage({
return (
<div>
{/* Breadcrumb */}
<nav className="flex items-center gap-2 text-xs text-[#62666d] mb-6 flex-wrap">
<Link href="/" className="hover:text-[#d0d6e0] transition-colors">
<nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] mb-6 flex-wrap">
<Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
MCPedia
</Link>
<span>/</span>
<Link href={`/${section}`} className="hover:text-[#d0d6e0] transition-colors">
<Link href={`/${section}`} className="hover:text-[var(--text-primary)] transition-colors">
{sectionInfo.label}
</Link>
{slug.split("/").map((part, i) => {
@@ -172,7 +172,7 @@ function FolderIndexPage({
return (
<span key={path} className="flex items-center gap-2">
<span>/</span>
<span className={isLast ? "text-[#8a8f98] font-medium" : "hover:text-[#d0d6e0]"}>
<span className={isLast ? "text-[var(--text-primary)] font-semibold" : "hover:text-[var(--text-primary)]"}>
{label}
</span>
</span>
@@ -181,22 +181,22 @@ function FolderIndexPage({
</nav>
{/* Header card */}
<div className="bg-[#0f1011] border border-[#1f2022] rounded-xl p-6 mb-8">
<div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 mb-8 shadow-sm">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-[#141517] border border-[#23252a] flex items-center justify-center text-xl">
<div className="w-10 h-10 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border-color)] flex items-center justify-center text-xl">
📁
</div>
<div>
<h1 className="text-2xl sm:text-3xl font-semibold text-[#f7f8f8] tracking-tight">
<h1 className="text-2xl sm:text-3xl font-bold text-[var(--text-primary)] tracking-tight">
{folderName}
</h1>
<p className="text-xs text-[#8a8f98] mt-0.5">
Directory path: <code className="text-[#7170ff] font-mono">{section}/{slug}</code>
<p className="text-xs text-[var(--text-muted)] mt-0.5">
Directory path: <code className="text-[#5e6ad2] dark:text-[#7170ff] font-mono">{section}/{slug}</code>
</p>
</div>
</div>
<span className="text-xs font-mono text-[#8a8f98] bg-[#141517] border border-[#23252a] px-2.5 py-1 rounded-md">
<span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-elevated)] border border-[var(--border-color)] px-2.5 py-1 rounded-md">
{immediateDocs.length + folders.length} item{folders.length + immediateDocs.length !== 1 ? "s" : ""}
</span>
</div>
@@ -205,23 +205,23 @@ function FolderIndexPage({
{/* Subfolders */}
{folders.length > 0 && (
<div className="mb-8">
<h2 className="text-xs font-semibold text-[#8a8f98] uppercase mb-3 tracking-wider flex items-center gap-2">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase mb-3 tracking-wider flex items-center gap-2">
<span>Subfolders</span>
<span className="text-[10px] text-[#62666d]">({folders.length})</span>
<span className="text-[10px] text-[var(--text-dim)]">({folders.length})</span>
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
{folders.map(([folder, info]) => (
<Link
key={folder}
href={`/${section}/${slug}/${folder}`.replace(/\/+/g, "/")}
className="group flex items-center gap-3 p-3.5 bg-[#0f1011] hover:bg-[#141517] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-lg transition-all shadow-sm"
className="group flex items-center gap-3 p-3.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg transition-all shadow-sm"
>
<span className="text-2xl group-hover:scale-110 transition-transform">📁</span>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors truncate">
<div className="text-sm font-semibold text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors truncate">
{folder.split(/[-_]/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}
</div>
<div className="text-xs text-[#62666d] mt-0.5 font-mono">
<div className="text-xs text-[var(--text-muted)] mt-0.5 font-mono">
{info.docCount} document{info.docCount !== 1 ? "s" : ""}
</div>
</div>
@@ -234,21 +234,21 @@ function FolderIndexPage({
{/* Documents */}
{immediateDocs.length > 0 && (
<div>
<h2 className="text-xs font-semibold text-[#8a8f98] uppercase mb-3 tracking-wider flex items-center gap-2">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase mb-3 tracking-wider flex items-center gap-2">
<span>Documents</span>
<span className="text-[10px] text-[#62666d]">({immediateDocs.length})</span>
<span className="text-[10px] text-[var(--text-dim)]">({immediateDocs.length})</span>
</h2>
<div className="space-y-2">
{immediateDocs.map((doc) => (
<Link
key={doc.slug}
href={`/${doc.slug}`}
className="group flex items-center justify-between gap-4 p-4 bg-[#0f1011] hover:bg-[#141517] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-lg transition-all shadow-sm"
className="group flex items-center justify-between gap-4 p-4 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg transition-all shadow-sm"
>
<div className="flex items-center gap-3 min-w-0">
<span className="text-xl opacity-70 group-hover:opacity-100">📄</span>
<div className="min-w-0">
<div className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors truncate">
<div className="text-sm font-semibold text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors truncate">
{doc.title}
</div>
{doc.tags.length > 0 && (
@@ -256,7 +256,7 @@ function FolderIndexPage({
{doc.tags.slice(0, 4).map((t) => (
<span
key={t}
className="text-[11px] px-1.5 py-0.25 bg-[#141517] border border-[#23252a] rounded text-[#8a8f98]"
className="text-[11px] px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)]"
>
#{t}
</span>
@@ -265,7 +265,7 @@ function FolderIndexPage({
)}
</div>
</div>
<time className="text-xs text-[#62666d] shrink-0 font-mono">
<time className="text-xs text-[var(--text-dim)] shrink-0 font-mono">
{new Date(doc.updatedAt).toLocaleDateString(undefined, {
month: "short",
day: "numeric",
@@ -278,8 +278,8 @@ function FolderIndexPage({
)}
{folders.length === 0 && immediateDocs.length === 0 && (
<div className="text-center py-12 border border-[#1f2022] rounded-xl bg-[#0f1011]">
<p className="text-sm text-[#8a8f98]">No documents found in this directory.</p>
<div className="text-center py-12 border border-[var(--border-color)] rounded-xl bg-[var(--bg-surface)]">
<p className="text-sm text-[var(--text-muted)]">No documents found in this directory.</p>
</div>
)}
</div>
@@ -317,11 +317,11 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
<div>
<Link
href={`/${doc.slug}`}
className="inline-flex items-center gap-1 text-xs text-[#8a8f98] hover:text-[#d0d6e0] mb-4 transition-colors"
className="inline-flex items-center gap-1 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] mb-4 transition-colors"
>
<span>← Back to document</span>
</Link>
<h1 className="text-2xl font-semibold text-[#f7f8f8] mb-6">
<h1 className="text-2xl font-bold text-[var(--text-primary)] mb-6">
Edit: {doc.title}
</h1>
<DocForm
@@ -356,8 +356,8 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
{/* Main Content Column */}
<article className="flex-1 min-w-0">
{/* Breadcrumb */}
<nav className="flex items-center gap-2 text-xs text-[#62666d] mb-4 flex-wrap">
<Link href="/" className="hover:text-[#d0d6e0] transition-colors">
<nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] mb-4 flex-wrap">
<Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
MCPedia
</Link>
{doc.slug.split("/").map((part, i) => {
@@ -371,7 +371,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
<span>/</span>
<Link
href={`/${crumbPath}`}
className={isLast ? "text-[#8a8f98] font-medium" : "hover:text-[#d0d6e0] transition-colors"}
className={isLast ? "text-[var(--text-primary)] font-semibold" : "hover:text-[var(--text-primary)] transition-colors"}
>
{label}
</Link>
@@ -381,24 +381,24 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
</nav>
{/* Hero Metadata Card */}
<div className="bg-[#0f1011] border border-[#1f2022] rounded-xl p-6 mb-8 shadow-sm">
<div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 mb-8 shadow-sm">
<div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2 flex-wrap">
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono font-medium bg-[#5e6ad2]/15 text-[#7170ff] border border-[#5e6ad2]/30">
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono font-medium bg-[#5e6ad2]/15 text-[#5e6ad2] dark:text-[#7170ff] border border-[#5e6ad2]/30">
<span>{sectionInfo.icon}</span>
<span className="uppercase">{sectionInfo.label}</span>
</span>
<span className="text-xs text-[#62666d]">·</span>
<span className="text-xs text-[#8a8f98] capitalize">
<span className="text-xs text-[var(--text-dim)]">·</span>
<span className="text-xs text-[var(--text-muted)] capitalize">
{doc.type}
</span>
<span className="text-xs text-[#62666d]">·</span>
<span className="text-xs text-[#8a8f98] font-mono">
<span className="text-xs text-[var(--text-dim)]">·</span>
<span className="text-xs text-[var(--text-muted)] font-mono">
{readingTime}
</span>
</div>
<h1 className="text-2xl sm:text-3xl font-semibold text-[#f7f8f8] tracking-tight leading-tight">
<h1 className="text-2xl sm:text-3xl font-bold text-[var(--text-primary)] tracking-tight leading-tight">
{doc.title}
</h1>
</div>
@@ -408,14 +408,14 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
</div>
{/* Author + Date + Tags */}
<div className="flex flex-wrap items-center gap-3 text-xs text-[#8a8f98] pt-3 border-t border-[#1a1b1d]">
<div className="flex flex-wrap items-center gap-3 text-xs text-[var(--text-muted)] pt-3 border-t border-[var(--border-color)]">
{doc.author && (
<div className="flex items-center gap-1.5">
<div className="w-4 h-4 rounded-full bg-[#5e6ad2] text-white flex items-center justify-center text-[10px] font-bold">
{doc.author.charAt(0).toUpperCase()}
</div>
<span className="text-[#d0d6e0]">{doc.author}</span>
<span className="text-[#62666d]">·</span>
<span className="text-[var(--text-secondary)]">{doc.author}</span>
<span className="text-[var(--text-dim)]">·</span>
</div>
)}
<span>
@@ -427,12 +427,12 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
</span>
{doc.tags.length > 0 && (
<>
<span className="text-[#62666d]">·</span>
<span className="text-[var(--text-dim)]">·</span>
<div className="flex flex-wrap gap-1">
{doc.tags.map((t) => (
<span
key={t}
className="px-2 py-0.5 bg-[#141517] border border-[#23252a] rounded text-[#8a8f98] text-[11px]"
className="px-2 py-0.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)] text-[11px]"
>
#{t}
</span>
@@ -447,7 +447,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
</div>
{/* Mobile TOC (rendered inline on smaller screens) */}
<div className="xl:hidden mb-6 p-4 bg-[#0f1011] border border-[#1f2022] rounded-lg">
<div className="xl:hidden mb-6 p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg shadow-sm">
<TOC source={doc.body} />
</div>
@@ -458,8 +458,8 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
{/* Related Documents */}
{related.length > 0 && (
<aside className="mt-12 pt-8 border-t border-[#1f2022]">
<h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider mb-4 flex items-center gap-2">
<aside className="mt-12 pt-8 border-t border-[var(--border-color)]">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-4 flex items-center gap-2">
<span>Related Knowledge</span>
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
@@ -469,20 +469,20 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
<Link
key={r.slug}
href={`/${r.slug}`}
className="group block bg-[#0f1011] hover:bg-[#141517] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-lg 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-lg p-4 transition-all shadow-sm"
>
<div className="flex items-center justify-between gap-2 mb-2">
<span className="text-xs text-[#7170ff] font-mono uppercase">
<span className="text-xs text-[#5e6ad2] dark:text-[#7170ff] font-mono uppercase">
{rInfo.icon} {r.section}
</span>
<time className="text-[11px] text-[#62666d] font-mono">
<time className="text-[11px] text-[var(--text-dim)] font-mono">
{new Date(r.updatedAt).toLocaleDateString(undefined, {
month: "short",
day: "numeric",
})}
</time>
</div>
<h3 className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-1">
<h3 className="text-sm font-semibold text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-1">
{r.title}
</h3>
</Link>
@@ -494,9 +494,9 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
{/* Revision History */}
{revisions.length > 0 && (
<aside className="mt-10 pt-8 border-t border-[#1f2022]">
<aside className="mt-10 pt-8 border-t border-[var(--border-color)]">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">
Revision History ({revisions.length})
</h2>
</div>
@@ -504,16 +504,16 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
{revisions.map((rev) => (
<div
key={rev.id}
className="flex items-center justify-between gap-3 p-3 bg-[#0f1011] border border-[#1f2022] rounded-lg text-xs"
className="flex items-center justify-between gap-3 p-3 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg text-xs shadow-sm"
>
<div className="flex items-center gap-2 min-w-0">
<span className="font-mono text-[#7170ff] bg-[#5e6ad2]/10 px-1.5 py-0.5 rounded border border-[#5e6ad2]/30">
<span className="font-mono text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/10 px-1.5 py-0.5 rounded border border-[#5e6ad2]/30 font-semibold">
v{rev.revisionNo}
</span>
<span className="text-[#d0d6e0] truncate">
<span className="text-[var(--text-primary)] truncate">
{rev.reason || "Updated document"}
</span>
<span className="text-[#62666d] hidden sm:inline">
<span className="text-[var(--text-dim)] hidden sm:inline">
· {new Date(rev.createdAt).toLocaleString()}
</span>
</div>
@@ -522,7 +522,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
<input type="hidden" name="id" value={rev.id} />
<button
type="submit"
className="text-xs text-[#d0d6e0] hover:text-white bg-[#141517] hover:bg-[#23252a] px-2.5 py-1 rounded border border-[#23252a] hover:border-[#5e6ad2] transition-colors"
className="text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] px-2.5 py-1 rounded border border-[var(--border-color)] hover:border-[var(--brand)] transition-colors font-medium shadow-sm"
>
Restore
</button>
@@ -536,7 +536,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
</article>
{/* Desktop Sticky Table of Contents Column */}
<aside className="hidden xl:block w-64 shrink-0 sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto pl-6 border-l border-[#1f2022]">
<aside className="hidden xl:block w-64 shrink-0 sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto pl-6 border-l border-[var(--border-color)]">
<TOC source={doc.body} />
</aside>
</div>
apps/web/app/[section]/page.tsx
+25 -25
View File
@@ -84,10 +84,10 @@ function renderTree(nodes: TreeNode[], pathname: string) {
href={`/${node.slug}`}
className={`flex items-center justify-between gap-2 text-xs py-1.5 px-2.5 rounded-lg transition-all ${
isActive
? "text-[#7170ff] bg-[#5e6ad2]/15 font-medium border border-[#5e6ad2]/30"
? "text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/15 font-semibold border border-[#5e6ad2]/30"
: hasActiveChild
? "text-[#d0d6e0] bg-[#141517]"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
? "text-[var(--text-primary)] bg-[var(--bg-elevated)]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
}`}
>
<span className="flex items-center gap-2 truncate">
@@ -95,13 +95,13 @@ function renderTree(nodes: TreeNode[], pathname: string) {
<span className="truncate">{node.doc?.title || node.name}</span>
</span>
{isFolder && (
<span className="text-[10px] text-[#62666d] bg-[#191a1b] px-1.5 py-0.5 rounded font-mono">
<span className="text-[10px] text-[var(--text-dim)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-1.5 py-0.5 rounded font-mono">
{node.docCount} docs
</span>
)}
</Link>
{node.children.length > 0 && (
<div className="ml-4 border-l border-[#1f2022] pl-2 mt-1">
<div className="ml-4 border-l border-[var(--border-color)] pl-2 mt-1">
{renderTree(node.children, pathname)}
</div>
)}
@@ -123,8 +123,8 @@ export default async function SectionIndexPage({
if (!sectionInfo) {
return (
<div className="py-12 text-center">
<h1 className="text-2xl font-semibold text-[#f7f8f8]">Unknown section</h1>
<p className="text-sm text-[#8a8f98] mt-2">Section &quot;{section}&quot; does not exist.</p>
<h1 className="text-2xl font-semibold text-[var(--text-primary)]">Unknown section</h1>
<p className="text-sm text-[var(--text-muted)] mt-2">Section &quot;{section}&quot; does not exist.</p>
</div>
);
}
@@ -136,33 +136,33 @@ export default async function SectionIndexPage({
return (
<div className="space-y-10">
{/* Breadcrumb */}
<nav className="flex items-center gap-2 text-xs text-[#62666d]">
<Link href="/" className="hover:text-[#d0d6e0] transition-colors">
<nav className="flex items-center gap-2 text-xs text-[var(--text-dim)]">
<Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
MCPedia
</Link>
<span>/</span>
<span className="text-[#8a8f98] font-medium">{sectionInfo.label}</span>
<span className="text-[var(--text-muted)] font-medium">{sectionInfo.label}</span>
</nav>
{/* Hero Card */}
<div className="bg-[#0f1011] border border-[#1f2022] rounded-xl p-6 shadow-sm">
<div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 shadow-sm">
<div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-3">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-xl bg-[#141517] border border-[#23252a] flex items-center justify-center text-2xl shadow-inner">
<div className="w-12 h-12 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border-color)] flex items-center justify-center text-2xl shadow-inner">
{sectionInfo.icon}
</div>
<div>
<h1 className="text-2xl sm:text-3xl font-bold text-[#f7f8f8] tracking-tight">
<h1 className="text-2xl sm:text-3xl font-bold text-[var(--text-primary)] tracking-tight">
{sectionInfo.label}
</h1>
<p className="text-xs text-[#8a8f98] mt-0.5 font-mono uppercase">
<p className="text-xs text-[var(--text-muted)] mt-0.5 font-mono uppercase">
Section: {section}
</p>
</div>
</div>
<div className="flex items-center gap-2">
<span className="text-xs font-mono text-[#7170ff] bg-[#5e6ad2]/10 border border-[#5e6ad2]/25 px-2.5 py-1 rounded-md">
<span className="text-xs font-mono text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/10 border border-[#5e6ad2]/25 px-2.5 py-1 rounded-md">
{sectionDocs.length} document{sectionDocs.length !== 1 ? "s" : ""}
</span>
<Link
@@ -174,15 +174,15 @@ export default async function SectionIndexPage({
</div>
</div>
<p className="text-sm text-[#8a8f98] leading-relaxed max-w-2xl mt-2">
<p className="text-sm text-[var(--text-muted)] leading-relaxed max-w-2xl mt-2">
{sectionInfo.desc}
</p>
</div>
{/* Hierarchical Folder Directory */}
{tree.length > 0 && (
<section className="bg-[#0c0d0e] border border-[#1f2022] rounded-xl p-6">
<h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider mb-4 flex items-center gap-2">
<section className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 shadow-sm">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-4 flex items-center gap-2">
<span>Folder Structure</span>
</h2>
{renderTree(tree, section)}
@@ -192,7 +192,7 @@ export default async function SectionIndexPage({
{/* Document List */}
{sectionDocs.length > 0 ? (
<section>
<h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider mb-4">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-4">
All Documents in {sectionInfo.label}
</h2>
<div className="space-y-2">
@@ -205,12 +205,12 @@ export default async function SectionIndexPage({
<Link
key={d.slug}
href={`/${d.slug}`}
className="group flex items-center justify-between gap-4 p-4 bg-[#0f1011] hover:bg-[#141517] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-xl transition-all shadow-sm"
className="group flex items-center justify-between gap-4 p-4 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl transition-all shadow-sm"
>
<div className="flex items-center gap-3 min-w-0">
<span className="text-lg opacity-70 group-hover:opacity-100">📄</span>
<div className="min-w-0">
<h3 className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors truncate">
<h3 className="text-sm font-medium text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors truncate">
{d.title}
</h3>
{d.tags.length > 0 && (
@@ -218,7 +218,7 @@ export default async function SectionIndexPage({
{d.tags.slice(0, 4).map((t) => (
<span
key={t}
className="text-[10px] px-1.5 py-0.25 bg-[#141517] border border-[#23252a] rounded text-[#8a8f98]"
className="text-[10px] px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)]"
>
#{t}
</span>
@@ -227,7 +227,7 @@ export default async function SectionIndexPage({
)}
</div>
</div>
<time className="text-xs text-[#62666d] font-mono shrink-0">
<time className="text-xs text-[var(--text-dim)] font-mono shrink-0">
{new Date(d.updatedAt).toLocaleDateString(undefined, {
month: "short",
day: "numeric",
@@ -239,8 +239,8 @@ export default async function SectionIndexPage({
</div>
</section>
) : (
<div className="text-center py-12 border border-[#1f2022] rounded-xl bg-[#0f1011]">
<p className="text-sm text-[#8a8f98]">No documents in this section yet.</p>
<div className="text-center py-12 border border-[var(--border-color)] rounded-xl bg-[var(--bg-surface)]">
<p className="text-sm text-[var(--text-muted)]">No documents in this section yet.</p>
</div>
)}
</div>
apps/web/app/components/CommandMenu.tsx
+24 -24
View File
@@ -91,13 +91,13 @@ export default function CommandMenu() {
return (
<button
onClick={() => setOpen(true)}
className="hidden md:flex items-center gap-2 px-3 py-1.5 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-xs text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg transition-all shadow-inner"
className="hidden md:flex items-center gap-2 px-3 py-1.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all shadow-sm"
>
<svg className="w-3.5 h-3.5 text-[#62666d]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-3.5 h-3.5 text-[var(--text-dim)]" 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>Search documentation...</span>
<kbd className="ml-2 font-mono bg-[#08090a] px-1.5 py-0.5 rounded border border-[#1f2022] text-[10px] text-[#62666d]">
<span>Search docs...</span>
<kbd className="ml-2 font-mono bg-[var(--bg-elevated)] px-1.5 py-0.5 rounded border border-[var(--border-color)] text-[10px] text-[var(--text-dim)]">
⌘K
</kbd>
</button>
@@ -108,15 +108,15 @@ export default function CommandMenu() {
<div className="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
className="fixed inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-sm transition-opacity"
onClick={() => setOpen(false)}
/>
{/* Modal */}
<div className="relative w-full max-w-2xl bg-[#0f1011] border border-[#27292d] rounded-xl shadow-2xl overflow-hidden animate-fade-in">
<div className="relative w-full max-w-2xl bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-2xl overflow-hidden animate-fade-in">
{/* Search input bar */}
<div className="flex items-center gap-3 px-4 py-3.5 border-b border-[#1f2022] bg-[#141517]">
<svg className="w-5 h-5 text-[#7170ff] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div className="flex items-center gap-3 px-4 py-3.5 border-b border-[var(--border-color)] bg-[var(--bg-elevated)]">
<svg className="w-5 h-5 text-[#5e6ad2] dark:text-[#7170ff] shrink-0" 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>
<input
@@ -126,14 +126,14 @@ export default function CommandMenu() {
onChange={(e) => setQuery(e.target.value)}
onKeyDown={handleKeyNavigation}
placeholder="Type to search (titles, keywords, concepts)..."
className="w-full bg-transparent text-[#f7f8f8] placeholder-[#62666d] text-sm focus:outline-none"
className="w-full bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] text-sm focus:outline-none"
/>
{loading && (
<div className="w-4 h-4 border-2 border-[#5e6ad2] border-t-transparent rounded-full animate-spin shrink-0" />
)}
<button
onClick={() => setOpen(false)}
className="text-xs text-[#62666d] hover:text-[#d0d6e0] bg-[#1b1d20] px-1.5 py-0.5 rounded border border-[#27292d]"
className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] px-1.5 py-0.5 rounded border border-[var(--border-color)]"
>
ESC
</button>
@@ -143,14 +143,14 @@ export default function CommandMenu() {
<div className="max-h-96 overflow-y-auto p-2">
{query.trim() === "" ? (
<div className="px-3 py-6 text-center">
<p className="text-xs text-[#8a8f98]">Search full-text, semantic embeddings, and CTF writeups.</p>
<div className="flex justify-center gap-2 mt-3 text-[11px] text-[#62666d]">
<span>Navigation: <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↑</kbd> <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↓</kbd></span>
<span>Select: <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↵</kbd></span>
<p className="text-xs text-[var(--text-muted)]">Search full-text, semantic embeddings, and CTF writeups.</p>
<div className="flex justify-center gap-2 mt-3 text-[11px] text-[var(--text-dim)]">
<span>Navigation: <kbd className="bg-[var(--bg-elevated)] px-1 py-0.5 rounded border border-[var(--border-color)]">↑</kbd> <kbd className="bg-[var(--bg-elevated)] px-1 py-0.5 rounded border border-[var(--border-color)]">↓</kbd></span>
<span>Select: <kbd className="bg-[var(--bg-elevated)] px-1 py-0.5 rounded border border-[var(--border-color)]">↵</kbd></span>
</div>
</div>
) : results.length === 0 && !loading ? (
<div className="px-4 py-8 text-center text-xs text-[#8a8f98]">
<div className="px-4 py-8 text-center text-xs text-[var(--text-muted)]">
No documents matching &quot;{query}&quot;
</div>
) : (
@@ -164,27 +164,27 @@ export default function CommandMenu() {
onMouseEnter={() => setSelectedIndex(index)}
className={`flex items-start justify-between gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-all ${
isSelected
? "bg-[#5e6ad2]/15 border border-[#5e6ad2]/40 text-[#f7f8f8]"
: "hover:bg-[#141517] text-[#d0d6e0] border border-transparent"
? "bg-[#5e6ad2]/15 border border-[#5e6ad2]/40 text-[var(--text-primary)]"
: "hover:bg-[var(--bg-elevated)] text-[var(--text-secondary)] border border-transparent"
}`}
>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="text-xs px-1.5 py-0.25 bg-[#191a1b] border border-[#23252a] rounded text-[#7170ff] font-mono">
<span className="text-xs px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[#5e6ad2] dark:text-[#7170ff] font-mono">
{hit.section}
</span>
<span className={`text-sm font-medium ${isSelected ? "text-[#7170ff]" : "text-[#f7f8f8]"} truncate`}>
<span className={`text-sm font-medium ${isSelected ? "text-[#5e6ad2] dark:text-[#7170ff]" : "text-[var(--text-primary)]"} truncate`}>
{hit.title}
</span>
</div>
{hit.snippet && (
<p
className="text-xs text-[#8a8f98] mt-1 line-clamp-1 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[#f7f8f8] [&>mark]:rounded [&>mark]:px-0.5"
className="text-xs text-[var(--text-muted)] mt-1 line-clamp-1 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[var(--text-primary)] [&>mark]:rounded [&>mark]:px-0.5"
dangerouslySetInnerHTML={{ __html: hit.snippet }}
/>
)}
</div>
<span className="text-[11px] text-[#62666d] shrink-0 self-center">
<span className="text-[11px] text-[var(--text-dim)] shrink-0 self-center">
{hit.slug}
</span>
</li>
@@ -195,12 +195,12 @@ export default function CommandMenu() {
</div>
{/* Footer */}
<div className="flex items-center justify-between px-4 py-2.5 border-t border-[#1f2022] bg-[#0c0d0e] text-[11px] text-[#62666d]">
<span>Tip: Press <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">Hybrid</kbd> search is enabled by default</span>
<div className="flex items-center justify-between px-4 py-2.5 border-t border-[var(--border-color)] bg-[var(--bg-elevated)] text-[11px] text-[var(--text-dim)]">
<span>Tip: Press <kbd className="bg-[var(--bg-surface)] px-1 py-0.5 rounded border border-[var(--border-color)]">Hybrid</kbd> search is enabled</span>
<Link
href={`/search?q=${encodeURIComponent(query)}`}
onClick={() => setOpen(false)}
className="hover:text-[#7170ff] transition-colors"
className="hover:text-[#5e6ad2] dark:hover:text-[#7170ff] transition-colors"
>
Open full search page →
</Link>
apps/web/app/components/DocActions.tsx
+8 -8
View File
@@ -32,14 +32,14 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
onClick={handleCopyMarkdown}
type="button"
title="Copy raw markdown content"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#f7f8f8] rounded-md transition-all"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs 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-md transition-all shadow-sm"
>
{copiedMd ? (
<>
<svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-emerald-400">Copied MD</span>
<span className="text-emerald-500 font-medium">Copied MD</span>
</>
) : (
<>
@@ -56,14 +56,14 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
onClick={handleCopyLink}
type="button"
title="Copy link to document"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#f7f8f8] rounded-md transition-all"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs 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-md transition-all shadow-sm"
>
{copiedLink ? (
<>
<svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-emerald-400">Copied</span>
<span className="text-emerald-500 font-medium">Copied Link</span>
</>
) : (
<>
@@ -78,12 +78,12 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
{/* Edit Link */}
<Link
href={canEdit ? `/${slug}?edit=1` : `/login?redirect=/${slug}`}
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#5e6ad2]/15 hover:bg-[#5e6ad2]/25 border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 text-[#7170ff] hover:text-white rounded-md transition-all"
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#5e6ad2]/10 hover:bg-[#5e6ad2]/20 border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 text-[#5e6ad2] dark:text-[#7170ff] rounded-md transition-all font-medium"
>
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
<span>{canEdit ? "Edit" : "Edit"}</span>
<span>Edit</span>
</Link>
</div>
);
apps/web/app/components/DocForm.tsx
+37 -37
View File
@@ -82,7 +82,7 @@ export default function DocForm({
const availableFolders = existingFolders?.[section] ?? [];
const baseInputCls =
"w-full px-3.5 py-2 bg-[#0f1011] border border-[#23252a] hover:border-[#383b42] rounded-lg text-sm text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] transition-colors";
"w-full px-3.5 py-2 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-sm text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-1 focus:ring-[#5e6ad2] transition-colors";
function addCustomField(key = "", value = "") {
setCustomFields([...customFields, { key, value }]);
@@ -184,14 +184,14 @@ export default function DocForm({
return (
<form onSubmit={handleSubmit} className="space-y-6 max-w-4xl">
{error && (
<div className="p-3.5 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-400 text-sm">
<div className="p-3.5 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-500 dark:text-rose-400 text-sm">
{error}
</div>
)}
{/* Title */}
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Document Title *
</label>
<input
@@ -207,7 +207,7 @@ export default function DocForm({
{/* Section + Type + Status */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Section
</label>
<select
@@ -224,7 +224,7 @@ export default function DocForm({
</select>
</div>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Type
</label>
<select
@@ -240,7 +240,7 @@ export default function DocForm({
</select>
</div>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Status
</label>
<select
@@ -257,7 +257,7 @@ export default function DocForm({
{/* Folder + Slug */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Parent Folder
</label>
<select
@@ -275,7 +275,7 @@ export default function DocForm({
</select>
</div>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
{isEdit ? "Full Slug" : "Slug (File name) *"}
</label>
{isEdit ? (
@@ -283,7 +283,7 @@ export default function DocForm({
type="text"
value={slug ?? ""}
readOnly
className="w-full px-3.5 py-2 bg-[#141517] border border-[#23252a] rounded-lg text-sm text-[#8a8f98] font-mono"
className="w-full px-3.5 py-2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-lg text-sm text-[var(--text-muted)] font-mono"
/>
) : (
<input
@@ -295,8 +295,8 @@ export default function DocForm({
required
/>
)}
<p className="text-[11px] text-[#62666d] mt-1 font-mono">
Path: <span className="text-[#7170ff]">{effectiveSlug || section}</span>
<p className="text-[11px] text-[var(--text-dim)] mt-1 font-mono">
Path: <span className="text-[#5e6ad2] dark:text-[#7170ff]">{effectiveSlug || section}</span>
</p>
</div>
</div>
@@ -304,7 +304,7 @@ export default function DocForm({
{/* Tags + Author */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Tags (comma separated)
</label>
<input
@@ -316,7 +316,7 @@ export default function DocForm({
/>
</div>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Author
</label>
<input
@@ -330,25 +330,25 @@ export default function DocForm({
</div>
{/* Custom Metadata Fields */}
<div className="p-4 bg-[#0c0d0e] border border-[#1f2022] rounded-xl space-y-3">
<div className="p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl space-y-3 shadow-sm">
<div className="flex items-center justify-between">
<div>
<h3 className="text-xs font-semibold uppercase tracking-wider text-[#8a8f98]">
<h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]">
Dynamic Custom Metadata
</h3>
<p className="text-[11px] text-[#62666d] mt-0.5">
<p className="text-[11px] text-[var(--text-dim)] mt-0.5">
Add custom key-values (event, difficulty, points, etc.) rendered as styled badges.
</p>
</div>
<div className="flex items-center gap-1.5 flex-wrap">
<span className="text-[11px] text-[#62666d]">Presets:</span>
<span className="text-[11px] text-[var(--text-dim)]">Presets:</span>
{PRESET_FIELDS.map((preset) => (
<button
key={preset.key}
type="button"
onClick={() => addCustomField(preset.key, preset.value)}
className="px-2 py-0.5 text-[11px] bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#8a8f98] hover:text-[#d0d6e0] rounded transition-colors"
className="px-2 py-0.5 text-[11px] bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded transition-colors"
>
+{preset.key}
</button>
@@ -375,7 +375,7 @@ export default function DocForm({
<button
type="button"
onClick={() => removeCustomField(i)}
className="p-2 text-[#fca5a5] hover:text-rose-400 rounded hover:bg-[#191a1b] transition-colors"
className="p-2 text-rose-500 hover:text-rose-600 rounded hover:bg-[var(--bg-elevated)] transition-colors"
title="Remove field"
>
✕
@@ -386,16 +386,16 @@ export default function DocForm({
<button
type="button"
onClick={() => addCustomField()}
className="text-xs text-[#7170ff] hover:text-[#828fff] px-3 py-1.5 rounded-lg border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 bg-[#5e6ad2]/5 transition-colors"
className="text-xs text-[#5e6ad2] dark:text-[#7170ff] hover:underline px-3 py-1.5 rounded-lg border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 bg-[#5e6ad2]/5 transition-colors font-medium"
>
+ Add Custom Field
</button>
</div>
{/* Body with Write / Preview Tabs */}
<div className="border border-[#1f2022] rounded-xl overflow-hidden bg-[#0c0d0e]">
<div className="border border-[var(--border-color)] rounded-xl overflow-hidden bg-[var(--bg-surface)] shadow-sm">
{/* Editor Toolbar */}
<div className="flex items-center justify-between px-3 py-2 bg-[#141517] border-b border-[#1f2022] flex-wrap gap-2">
<div className="flex items-center justify-between px-3 py-2 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
{/* Tabs */}
<div className="flex items-center gap-1">
<button
@@ -403,8 +403,8 @@ export default function DocForm({
onClick={() => setActiveTab("write")}
className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
activeTab === "write"
? "bg-[#5e6ad2] text-white"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "bg-[#5e6ad2] text-white shadow-sm"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
>
Write
@@ -414,8 +414,8 @@ export default function DocForm({
onClick={() => setActiveTab("preview")}
className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
activeTab === "preview"
? "bg-[#5e6ad2] text-white"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "bg-[#5e6ad2] text-white shadow-sm"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
>
Live Preview
@@ -424,11 +424,11 @@ export default function DocForm({
{/* Markdown Action Shortcuts */}
{activeTab === "write" && (
<div className="flex items-center gap-1 text-xs text-[#8a8f98]">
<div className="flex items-center gap-1 text-xs text-[var(--text-muted)]">
<button
type="button"
onClick={() => insertMarkdown("**", "**")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Bold"
>
<b>B</b>
@@ -436,7 +436,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("*", "*")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Italic"
>
<i>I</i>
@@ -444,7 +444,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("## ")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Heading 2"
>
H2
@@ -452,7 +452,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("```\n", "\n```")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0] font-mono"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] font-mono"
title="Code Block"
>
{"</>"}
@@ -460,7 +460,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("[", "](https://)")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Link"
>
Link
@@ -468,7 +468,7 @@ export default function DocForm({
<button
type="button"
onClick={() => insertMarkdown("> [!NOTE]\n> ")}
className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
title="Note Callout"
>
Note
@@ -483,16 +483,16 @@ export default function DocForm({
ref={textareaRef}
value={body}
onChange={(e) => setBody(e.target.value)}
className="w-full h-96 p-4 bg-transparent text-[#f7f8f8] placeholder-[#62666d] font-mono text-sm focus:outline-none resize-y leading-relaxed"
className="w-full h-96 p-4 bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] font-mono text-sm focus:outline-none resize-y leading-relaxed"
placeholder="# Write your markdown document here..."
required
/>
) : (
<div className="p-6 h-96 overflow-y-auto bg-[#08090a]">
<div className="p-6 h-96 overflow-y-auto bg-[var(--bg-app)]">
{body.trim() ? (
<Markdown source={body} />
) : (
<p className="text-xs text-[#62666d] italic">Nothing to preview yet.</p>
<p className="text-xs text-[var(--text-dim)] italic">Nothing to preview yet.</p>
)}
</div>
)}
@@ -513,7 +513,7 @@ export default function DocForm({
<button
type="button"
onClick={() => router.back()}
className="px-4 py-2.5 border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg text-sm transition-colors"
className="px-4 py-2.5 border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] rounded-lg text-sm transition-colors shadow-sm"
>
Cancel
</button>
apps/web/app/components/Header.tsx
+16 -16
View File
@@ -12,7 +12,7 @@ export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="sticky top-0 z-30 border-b border-[#1f2022] glass-nav">
<header className="sticky top-0 z-30 border-b border-[var(--border-color)] glass-nav">
<div className="mx-auto max-w-7xl px-4 sm:px-6 h-14 flex items-center justify-between gap-4">
{/* Brand */}
<div className="flex items-center gap-3">
@@ -20,11 +20,11 @@ export default function Header() {
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-[#5e6ad2] to-[#7170ff] flex items-center justify-center text-white font-bold text-xs shadow-md shadow-[#5e6ad2]/20 group-hover:scale-105 transition-transform">
M
</div>
<span className="font-semibold text-[#f7f8f8] text-base tracking-tight group-hover:text-white transition-colors">
<span className="font-semibold text-[var(--text-primary)] text-base tracking-tight transition-colors">
MCPedia
</span>
</Link>
<span className="hidden sm:inline-block text-[10px] uppercase font-mono px-1.5 py-0.5 rounded bg-[#141517] border border-[#23252a] text-[#8a8f98]">
<span className="hidden sm:inline-block text-[10px] uppercase font-mono px-1.5 py-0.5 rounded bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)]">
v0.1.0
</span>
</div>
@@ -39,11 +39,11 @@ export default function Header() {
href={`/${s.id}`}
className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
isActive
? "text-[#f7f8f8] bg-[#141517] border border-[#23252a]"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]/50"
? "text-[var(--text-primary)] bg-[var(--bg-elevated)] border border-[var(--border-color)]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface-hover)]"
}`}
>
<span className="mr-1.5 opacity-70">{s.icon}</span>
<span className="mr-1.5 opacity-80">{s.icon}</span>
{s.label}
</Link>
);
@@ -56,7 +56,7 @@ export default function Header() {
<Link
href="/search"
className="md:hidden p-1.5 text-[#8a8f98] hover:text-[#f7f8f8] rounded-lg hover:bg-[#141517] transition-colors"
className="md:hidden p-1.5 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg hover:bg-[var(--bg-elevated)] transition-colors"
title="Search"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -66,7 +66,7 @@ export default function Header() {
<Link
href="/create"
className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 bg-[#5e6ad2] hover:bg-[#7170ff] text-white text-xs font-medium rounded-lg transition-all shadow-sm hover:shadow-[#5e6ad2]/20"
className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 bg-[#5e6ad2] hover:bg-[#7170ff] text-white text-xs font-medium rounded-lg transition-all shadow-sm"
>
<span>+</span>
<span>New Doc</span>
@@ -76,21 +76,21 @@ export default function Header() {
href="/login"
className={`px-2.5 py-1 text-xs rounded-lg transition-colors ${
pathname === "/login"
? "text-[#f7f8f8] bg-[#141517]"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
? "text-[var(--text-primary)] bg-[var(--bg-elevated)] font-medium"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
}`}
>
Login
</Link>
<div className="border-l border-[#1f2022] pl-2.5 flex items-center">
<div className="border-l border-[var(--border-color)] pl-2.5 flex items-center">
<ThemeToggle />
</div>
{/* Mobile menu toggle */}
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden p-1 text-[#8a8f98] hover:text-[#f7f8f8]"
className="md:hidden p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)]"
aria-label="Toggle navigation"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -106,23 +106,23 @@ export default function Header() {
{/* Mobile Drawer */}
{mobileMenuOpen && (
<div className="md:hidden border-t border-[#1f2022] bg-[#0c0d0e] px-4 py-3 space-y-1 animate-fade-in">
<div className="md:hidden border-t border-[var(--border-color)] bg-[var(--bg-surface)] px-4 py-3 space-y-1 animate-fade-in shadow-lg">
{SECTIONS.map((s) => (
<Link
key={s.id}
href={`/${s.id}`}
onClick={() => setMobileMenuOpen(false)}
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[#d0d6e0] hover:bg-[#141517] hover:text-[#f7f8f8]"
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:text-[var(--text-primary)]"
>
<span>{s.icon}</span>
<span>{s.label}</span>
</Link>
))}
<div className="pt-2 border-t border-[#1f2022] flex gap-2">
<div className="pt-2 border-t border-[var(--border-color)] flex gap-2">
<Link
href="/search"
onClick={() => setMobileMenuOpen(false)}
className="flex-1 text-center py-2 text-xs bg-[#141517] text-[#d0d6e0] rounded-lg"
className="flex-1 text-center py-2 text-xs bg-[var(--bg-elevated)] text-[var(--text-secondary)] rounded-lg font-medium border border-[var(--border-color)]"
>
Search
</Link>
apps/web/app/components/McpConfigSnippet.tsx
+9 -9
View File
@@ -60,9 +60,9 @@ export default function McpConfigSnippet() {
}
return (
<div className="bg-[#0c0d0e] border border-[#1f2022] rounded-xl overflow-hidden shadow-lg">
<div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl overflow-hidden shadow-md">
{/* Header bar with tabs */}
<div className="flex items-center justify-between px-4 py-2.5 bg-[#141517] border-b border-[#1f2022] flex-wrap gap-2">
<div className="flex items-center justify-between px-4 py-2.5 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
<div className="flex items-center gap-1.5">
{CONFIGS.map((c) => (
<button
@@ -71,7 +71,7 @@ export default function McpConfigSnippet() {
className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
activeTab === c.id
? "bg-[#5e6ad2] text-white shadow-sm"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#1b1d20]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface)]"
}`}
>
{c.label}
@@ -82,14 +82,14 @@ export default function McpConfigSnippet() {
<button
onClick={handleCopy}
type="button"
className="flex items-center gap-1.5 text-xs text-[#8a8f98] hover:text-white bg-[#1a1b1d] hover:bg-[#23252a] px-2.5 py-1 rounded border border-[#27292d] transition-all"
className="flex items-center gap-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated-hover)] px-2.5 py-1 rounded border border-[var(--border-color)] transition-all shadow-sm"
>
{copied ? (
<>
<svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-emerald-400 font-medium">Copied!</span>
<span className="text-emerald-500 font-medium">Copied!</span>
</>
) : (
<>
@@ -103,12 +103,12 @@ export default function McpConfigSnippet() {
</div>
{/* Code preview */}
<pre className="p-4 text-xs font-mono text-[#d0d6e0] overflow-x-auto leading-relaxed">
<pre className="p-4 text-xs font-mono text-[var(--pre-text)] bg-[var(--code-block-bg)] overflow-x-auto leading-relaxed">
<code>{current.content}</code>
</pre>
<div className="px-4 py-2 bg-[#090a0b] border-t border-[#1a1b1d] text-[11px] text-[#62666d]">
Config location: <span className="font-mono text-[#8a8f98]">{current.filename}</span>
<div className="px-4 py-2 bg-[var(--bg-elevated)] border-t border-[var(--border-color)] text-[11px] text-[var(--text-dim)]">
Config location: <span className="font-mono text-[var(--text-muted)]">{current.filename}</span>
</div>
</div>
);
apps/web/app/components/Sidebar.tsx
+16 -16
View File
@@ -102,14 +102,14 @@ function TreeNodeItem({
const isCollapsed = collapsedMap[node.slug] ?? false;
return (
<li className={`select-none ${depth > 0 ? "ml-3 pl-2 border-l border-[#1f2022]" : ""}`}>
<li className={`select-none ${depth > 0 ? "ml-3 pl-2 border-l border-[var(--border-color)]" : ""}`}>
<div
className={`group flex items-center justify-between gap-1.5 text-xs py-1.5 px-2 rounded-md transition-all ${
isActive
? "text-[#7170ff] bg-[#5e6ad2]/15 font-medium border border-[#5e6ad2]/30 shadow-sm"
? "text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/15 font-semibold border border-[#5e6ad2]/30 shadow-sm"
: isParentOfActive
? "text-[#d0d6e0] bg-[#141517]/80"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
? "text-[var(--text-primary)] bg-[var(--bg-elevated)]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
}`}
>
<Link
@@ -125,7 +125,7 @@ function TreeNodeItem({
{isFolder && (
<div className="flex items-center gap-1 shrink-0">
<span className="text-[10px] text-[#62666d] bg-[#191a1b] px-1 py-0.2 rounded font-mono">
<span className="text-[10px] text-[var(--text-muted)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-1 py-0.2 rounded font-mono">
{node.docCount}
</span>
<button
@@ -135,7 +135,7 @@ function TreeNodeItem({
e.stopPropagation();
toggleCollapse(node.slug);
}}
className="p-0.5 text-[#62666d] hover:text-[#d0d6e0] rounded hover:bg-[#23252a] transition-transform"
className="p-0.5 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded hover:bg-[var(--bg-elevated-hover)] transition-transform"
aria-label={isCollapsed ? "Expand folder" : "Collapse folder"}
>
<svg
@@ -210,10 +210,10 @@ export default function Sidebar() {
value={filterText}
onChange={(e) => setFilterText(e.target.value)}
placeholder="Filter docs..."
className="w-full pl-7 pr-3 py-1.5 bg-[#141517] border border-[#23252a] hover:border-[#383b42] rounded-md text-xs text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] transition-colors"
className="w-full pl-7 pr-3 py-1.5 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-md text-xs text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] transition-colors"
/>
<svg
className="w-3.5 h-3.5 text-[#62666d] absolute left-2 top-2.5"
className="w-3.5 h-3.5 text-[var(--text-muted)] absolute left-2 top-2.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -223,7 +223,7 @@ export default function Sidebar() {
{filterText && (
<button
onClick={() => setFilterText("")}
className="absolute right-2 top-2 text-xs text-[#62666d] hover:text-[#d0d6e0]"
className="absolute right-2 top-2 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
>
✕
</button>
@@ -232,7 +232,7 @@ export default function Sidebar() {
</div>
{/* Summary count */}
<div className="flex items-center justify-between px-1 mb-3 text-[11px] text-[#62666d]">
<div className="flex items-center justify-between px-1 mb-3 text-[11px] text-[var(--text-dim)]">
<span className="uppercase tracking-wider font-mono">Documentation</span>
<span>{filteredDocs.length} items</span>
</div>
@@ -247,20 +247,20 @@ export default function Sidebar() {
const isSectionActive = pathname === `/${id}` || pathname.startsWith(`/${id}/`);
return (
<div key={id} className="border-b border-[#141516] pb-3 last:border-0">
<div key={id} className="border-b border-[var(--border-color)] pb-3 last:border-0">
<Link
href={`/${id}`}
className={`flex items-center justify-between gap-1.5 px-1 py-1 mb-1 rounded text-xs font-semibold uppercase tracking-wider transition-colors ${
isSectionActive
? "text-[#7170ff]"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "text-[#5e6ad2] dark:text-[#7170ff]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
>
<div className="flex items-center gap-1.5">
<span>{icon}</span>
<span>{label}</span>
</div>
<span className="text-[10px] text-[#62666d] font-normal font-mono">
<span className="text-[10px] text-[var(--text-dim)] font-normal font-mono">
{sectionDocs.length}
</span>
</Link>
@@ -283,10 +283,10 @@ export default function Sidebar() {
</div>
{/* Bottom quick links */}
<div className="pt-3 border-t border-[#1f2022] mt-auto">
<div className="pt-3 border-t border-[var(--border-color)] mt-auto">
<Link
href="/create"
className="flex items-center justify-center gap-1.5 w-full py-1.5 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#d0d6e0] hover:text-white rounded-md transition-colors font-medium"
className="flex items-center justify-center gap-1.5 w-full py-1.5 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-md transition-colors font-medium"
>
<span>+ Create New Document</span>
</Link>
apps/web/app/components/TOC.tsx
+6 -6
View File
@@ -60,16 +60,16 @@ export default function TOC({ source }: { source: string }) {
return (
<nav className="text-xs">
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-[#1f2022]">
<svg className="w-3.5 h-3.5 text-[#7170ff]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-[var(--border-color)]">
<svg className="w-3.5 h-3.5 text-[#5e6ad2] dark:text-[#7170ff]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
</svg>
<span className="font-semibold uppercase tracking-wider text-[#8a8f98] text-[11px]">
<span className="font-semibold uppercase tracking-wider text-[var(--text-muted)] text-[11px]">
On this page
</span>
</div>
<ul className="space-y-1.5 border-l border-[#1f2022] pl-2.5">
<ul className="space-y-1.5 border-l border-[var(--border-color)] pl-2.5">
{toc.map((entry) => {
const isActive = activeId === entry.id;
return (
@@ -92,8 +92,8 @@ export default function TOC({ source }: { source: string }) {
}}
className={`block py-0.5 transition-colors line-clamp-1 ${
isActive
? "text-[#7170ff] font-medium translate-x-0.5"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "text-[#5e6ad2] dark:text-[#7170ff] font-semibold translate-x-0.5"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
title={entry.text}
>
apps/web/app/components/ThemeToggle.tsx
+36 -10
View File
@@ -4,33 +4,59 @@ import { useEffect, useState } from "react";
const STORAGE_KEY = "mcpedia-theme";
/** Dark mode toggle — persisted in localStorage, defaults to system preference. */
export default function ThemeToggle() {
const [dark, setDark] = useState(false);
const [mounted, setMounted] = useState(false);
const [isDark, setIsDark] = useState(true);
useEffect(() => {
setMounted(true);
const stored = localStorage.getItem(STORAGE_KEY);
const initial =
const darkActive =
stored === "dark" ||
(stored === null &&
window.matchMedia("(prefers-color-scheme: dark)").matches);
setDark(initial);
setIsDark(darkActive);
if (darkActive) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}, []);
function toggle() {
const next = !dark;
setDark(next);
const next = !isDark;
setIsDark(next);
localStorage.setItem(STORAGE_KEY, next ? "dark" : "light");
document.documentElement.classList.toggle("dark", next);
if (next) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}
if (!mounted) {
return (
<div className="w-8 h-8 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border-color)] opacity-50" />
);
}
return (
<button
onClick={toggle}
aria-label="Toggle dark mode"
className="text-[#d0d6e0] hover:text-[#f7f8f8] p-1 rounded transition-colors"
type="button"
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
title={isDark ? "Switch to light mode" : "Switch to dark mode"}
className="p-1.5 rounded-lg text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)] border border-transparent hover:border-[var(--border-color)] transition-all flex items-center justify-center"
>
{dark ? "☀️" : "🌙"}
{isDark ? (
<svg className="w-4 h-4 text-amber-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
) : (
<svg className="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
)}
</button>
);
}
apps/web/app/create/page.tsx
+7 -7
View File
@@ -19,23 +19,23 @@ export default async function CreatePage() {
return (
<div className="space-y-6">
{/* Breadcrumb */}
<nav className="flex items-center gap-2 text-xs text-[#62666d]">
<Link href="/" className="hover:text-[#d0d6e0] transition-colors">
<nav className="flex items-center gap-2 text-xs text-[var(--text-dim)]">
<Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
MCPedia
</Link>
<span>/</span>
<span className="text-[#8a8f98] font-medium">Create Document</span>
<span className="text-[var(--text-muted)] font-medium">Create Document</span>
</nav>
{/* Header */}
<div className="flex items-center justify-between pb-4 border-b border-[#1f2022]">
<div className="flex items-center justify-between pb-4 border-b border-[var(--border-color)]">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-[#5e6ad2]/15 border border-[#5e6ad2]/30 flex items-center justify-center text-xl text-[#7170ff]">
<div className="w-10 h-10 rounded-lg bg-[#5e6ad2]/15 border border-[#5e6ad2]/30 flex items-center justify-center text-xl text-[#5e6ad2] dark:text-[#7170ff]">
✏️
</div>
<div>
<h1 className="text-2xl font-bold text-[#f7f8f8] tracking-tight">Create Document</h1>
<p className="text-xs text-[#8a8f98] mt-0.5">
<h1 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight">Create Document</h1>
<p className="text-xs text-[var(--text-muted)] mt-0.5">
Writes markdown file to disk, records revision, and computes 2048-dim vector embeddings.
</p>
</div>
apps/web/app/globals.css
+113 -42
View File
@@ -1,43 +1,102 @@
@import "tailwindcss";
@plugin "@tailwindcss/typography";
/* Modern Linear / Vercel style dark-mode-first tokens */
@custom-variant dark (&:where(.dark, .dark *));
/* Light mode defaults (:root) */
:root {
color-scheme: light;
--bg-app: #f8fafc;
--bg-surface: #ffffff;
--bg-surface-hover: #f1f5f9;
--bg-elevated: #f1f5f9;
--bg-elevated-hover: #e2e8f0;
--border-color: #e2e8f0;
--border-subtle: #edf2f7;
--border-card: #e2e8f0;
--text-primary: #0f172a;
--text-secondary: #334155;
--text-muted: #64748b;
--text-dim: #94a3b8;
--brand: #5e6ad2;
--accent: #4f46e5;
--accent-hover: #4338ca;
--nav-bg: rgba(255, 255, 255, 0.88);
--code-bg: #f1f5f9;
--code-block-bg: #0f172a;
--pre-text: #f8fafc;
--table-zebra: rgba(241, 245, 249, 0.6);
--scrollbar-thumb: #cbd5e1;
--scrollbar-thumb-hover: #94a3b8;
--shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
}
/* Dark mode overrides (html.dark) */
html.dark {
color-scheme: dark;
--bg-app: #08090a;
--bg-surface: #0f1011;
--bg-surface-hover: #131415;
--bg-elevated: #141517;
--bg-elevated-hover: #1b1d20;
--border-color: #1f2022;
--border-subtle: rgba(255, 255, 255, 0.06);
--border-card: #1f2022;
--text-primary: #f7f8f8;
--text-secondary: #d0d6e0;
--text-muted: #8a8f98;
--text-dim: #62666d;
--brand: #5e6ad2;
--accent: #7170ff;
--accent-hover: #828fff;
--nav-bg: rgba(8, 9, 10, 0.85);
--code-bg: #141517;
--code-block-bg: #0c0d0e;
--pre-text: #e2e4e7;
--table-zebra: rgba(255, 255, 255, 0.02);
--scrollbar-thumb: #23252a;
--scrollbar-thumb-hover: #383b42;
--shadow-card: none;
}
@theme inline {
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--color-background: #08090a;
--color-surface: #0f1011;
--color-elevated: #141517;
--color-elevated-hover: #1b1d20;
--color-border: #1f2022;
--color-border-subtle: rgba(255, 255, 255, 0.06);
--color-border-standard: rgba(255, 255, 255, 0.1);
--color-background: var(--bg-app);
--color-surface: var(--bg-surface);
--color-surface-hover: var(--bg-surface-hover);
--color-elevated: var(--bg-elevated);
--color-elevated-hover: var(--bg-elevated-hover);
--color-border: var(--border-color);
--color-border-subtle: var(--border-subtle);
--color-text-primary: #f7f8f8;
--color-text-secondary: #d0d6e0;
--color-text-tertiary: #8a8f98;
--color-text-quaternary: #62666d;
--color-text-primary: var(--text-primary);
--color-text-secondary: var(--text-secondary);
--color-text-tertiary: var(--text-muted);
--color-text-quaternary: var(--text-dim);
--color-brand: #5e6ad2;
--color-accent: #7170ff;
--color-accent-hover: #828fff;
--color-brand: var(--brand);
--color-accent: var(--accent);
--color-accent-hover: var(--accent-hover);
}
html {
scroll-behavior: smooth;
color-scheme: dark;
}
body {
background: var(--color-background);
color: var(--color-text-secondary);
background-color: var(--bg-app);
color: var(--text-secondary);
font-family: var(--font-sans);
font-feature-settings: "cv01", "ss03";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Custom scrollbar */
@@ -51,29 +110,41 @@ body {
}
::-webkit-scrollbar-thumb {
background: #23252a;
background: var(--scrollbar-thumb);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: #383b42;
background: var(--scrollbar-thumb-hover);
}
/* Glassmorphism helpers */
.glass-panel {
background: rgba(15, 16, 17, 0.75);
background: var(--bg-surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--border-color);
}
.glass-nav {
background: rgba(8, 9, 10, 0.85);
background: var(--nav-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* Prose markdown typography */
/* Prose markdown typography for both Light and Dark modes */
.prose {
color: var(--text-secondary) !important;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose strong {
color: var(--text-primary) !important;
}
.prose a {
color: var(--accent) !important;
}
.prose table {
width: 100%;
border-collapse: separate;
@@ -82,19 +153,19 @@ body {
font-size: 0.875rem;
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid #1f2022;
border: 1px solid var(--border-color);
}
.prose th,
.prose td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid #1f2022;
border-bottom: 1px solid var(--border-color);
}
.prose th {
background: #141517;
color: #f7f8f8;
background: var(--bg-elevated);
color: var(--text-primary);
font-weight: 600;
font-size: 0.8125rem;
text-transform: uppercase;
@@ -102,20 +173,20 @@ body {
}
.prose td {
color: #d0d6e0;
color: var(--text-secondary);
}
.prose tbody tr:last-child td {
border-bottom: none;
}
.prose tbody tr:hover {
background: rgba(255, 255, 255, 0.02);
.prose tbody tr:nth-child(even) {
background: var(--table-zebra);
}
.prose pre {
background: #0d0e0f !important;
border: 1px solid #1f2022;
background: var(--code-block-bg) !important;
border: 1px solid var(--border-color);
border-radius: 0.625rem;
padding: 1rem 1.25rem;
overflow-x: auto;
@@ -125,15 +196,15 @@ body {
.prose code {
font-family: var(--font-mono);
font-size: 0.85em;
color: #e2e4e7;
}
.prose :not(pre) > code {
background: #141517;
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--code-bg);
color: var(--text-primary);
border: 1px solid var(--border-color);
padding: 0.15rem 0.35rem;
border-radius: 0.25rem;
font-weight: 400;
font-weight: 500;
}
.prose :not(pre) > code::before,
@@ -142,17 +213,17 @@ body {
}
.prose blockquote {
border-left: 3px solid #5e6ad2;
background: rgba(94, 106, 210, 0.05);
border-left: 3px solid var(--brand);
background: rgba(94, 106, 210, 0.08);
border-radius: 0 0.375rem 0.375rem 0;
margin: 1.5em 0;
padding: 0.75em 1.25em;
font-style: normal;
color: #a0a4a8;
color: var(--text-muted);
}
.prose hr {
border-color: #1f2022;
border-color: var(--border-color);
margin: 2.5rem 0;
}
apps/web/app/layout.tsx
+22 -3
View File
@@ -15,8 +15,27 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en" className="h-full scroll-smooth">
<body className="min-h-screen bg-[#08090a] text-[#e2e4e7] font-sans antialiased selection:bg-[#5e6ad2]/30 selection:text-white flex flex-col">
<html lang="en" className="h-full scroll-smooth" suppressHydrationWarning>
<head>
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
var stored = localStorage.getItem('mcpedia-theme');
var isDark = stored === 'dark' || (stored === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (isDark) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
} catch(e) {}
})();
`,
}}
/>
</head>
<body className="min-h-screen bg-[var(--bg-app)] text-[var(--text-secondary)] font-sans antialiased selection:bg-[#5e6ad2]/30 selection:text-white flex flex-col transition-colors duration-150">
<div hidden>
<div id="a11y-live-region" aria-live="polite" aria-atomic="true" />
</div>
@@ -25,7 +44,7 @@ export default function RootLayout({
<div className="mx-auto max-w-7xl w-full flex-1 flex flex-col">
<div className="flex flex-1">
<aside className="hidden lg:block w-72 shrink-0 border-r border-[#1f2022] sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto">
<aside className="hidden lg:block w-72 shrink-0 border-r border-[var(--border-color)] sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto bg-[var(--bg-app)]">
<Sidebar />
</aside>
<main className="flex-1 min-w-0">
apps/web/app/login/page.tsx
+10 -10
View File
@@ -38,7 +38,7 @@ export default function LoginPage() {
return (
<div className="flex min-h-[65vh] items-center justify-center px-4">
<div className="w-full max-w-md bg-[#0f1011] border border-[#1f2022] rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
<div className="w-full max-w-md bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
{/* Top decorative glow */}
<div className="absolute -top-12 left-1/2 -translate-x-1/2 w-48 h-24 bg-[#5e6ad2]/20 blur-2xl pointer-events-none rounded-full" />
@@ -46,21 +46,21 @@ export default function LoginPage() {
<div className="w-12 h-12 rounded-xl bg-[#5e6ad2] text-white font-bold text-xl flex items-center justify-center mx-auto mb-3 shadow-lg shadow-[#5e6ad2]/25">
M
</div>
<h1 className="text-2xl font-bold text-[#f7f8f8] tracking-tight">Admin Authentication</h1>
<p className="text-xs text-[#8a8f98] mt-1.5">
<h1 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight">Admin Authentication</h1>
<p className="text-xs text-[var(--text-muted)] mt-1.5">
Enter your admin password to create, edit, or delete documents.
</p>
</div>
{error && (
<div className="p-3.5 mb-6 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-400 text-xs">
<div className="p-3.5 mb-6 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-500 dark:text-rose-400 text-xs">
{error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
<label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
Admin Password
</label>
<div className="relative">
@@ -69,14 +69,14 @@ export default function LoginPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter password..."
className="w-full px-3.5 py-2.5 bg-[#141517] border border-[#23252a] hover:border-[#383b42] rounded-lg text-sm text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] transition-colors"
className="w-full px-3.5 py-2.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-sm text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-1 focus:ring-[#5e6ad2] transition-colors"
required
autoFocus
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-2.5 text-xs text-[#62666d] hover:text-[#d0d6e0]"
className="absolute right-3 top-2.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
>
{showPassword ? "Hide" : "Show"}
</button>
@@ -95,14 +95,14 @@ export default function LoginPage() {
</button>
</form>
<div className="mt-8 pt-6 border-t border-[#1a1b1d] flex items-center justify-between text-xs text-[#8a8f98]">
<div className="mt-8 pt-6 border-t border-[var(--border-color)] flex items-center justify-between text-xs text-[var(--text-muted)]">
<Link
href="/"
className="hover:text-[#d0d6e0] transition-colors"
className="hover:text-[var(--text-primary)] transition-colors"
>
← Back to Home
</Link>
<span className="text-[11px] text-[#62666d]">HTTP-only Secure Cookie</span>
<span className="text-[11px] text-[var(--text-dim)]">HTTP-only Secure Cookie</span>
</div>
</div>
</div>
apps/web/app/page.tsx
+39 -39
View File
@@ -62,7 +62,7 @@ function buildFolderTree(docs: { slug: string; title: string }[], section: strin
const aFolder = a.children.length > 0 ? 0 : 1;
const bFolder = b.children.length > 0 ? 0 : 1;
if (aFolder !== bFolder) return aFolder - bFolder;
return a.title.localeCompare(b.title);
return (a.title || a.name).localeCompare(b.title || b.name);
});
}
@@ -86,16 +86,16 @@ function renderTree(nodes: TreeNode[], pathname: string) {
href={`/${node.slug}`}
className={`flex items-center gap-1.5 text-xs py-1 px-1.5 rounded transition-all ${
pathname === `/${node.slug}`
? "text-[#7170ff] bg-[#5e6ad2]/15 font-medium"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
? "text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/15 font-medium"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
}`}
title={node.title}
>
<span className="opacity-70">{node.isLeaf && node.children.length === 0 ? "📄" : "📁"}</span>
<span className="opacity-80">{node.isLeaf && node.children.length === 0 ? "📄" : "📁"}</span>
<span className="truncate">{node.title || node.name}</span>
</Link>
{node.children.length > 0 && (
<div className="ml-3.5 border-l border-[#1f2022] pl-2 mt-0.5">
<div className="ml-3.5 border-l border-[var(--border-color)] pl-2 mt-0.5">
{renderTree(node.children, pathname)}
</div>
)}
@@ -124,7 +124,7 @@ function SectionTree({ section, docs, pathname }: SectionTreeProps) {
{tree.length > 0 ? (
renderTree(tree, pathname)
) : (
<p className="text-xs text-[#62666d] pl-1">No documents</p>
<p className="text-xs text-[var(--text-dim)] pl-1">No documents</p>
)}
</div>
);
@@ -144,19 +144,19 @@ export default async function HomePage() {
<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-[#5e6ad2]/10 border border-[#5e6ad2]/25 text-[#7170ff] text-xs font-medium mb-6">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#5e6ad2]/10 border border-[#5e6ad2]/25 text-[#5e6ad2] dark:text-[#7170ff] text-xs font-medium mb-6">
<span className="w-2 h-2 rounded-full bg-[#5e6ad2] animate-pulse" />
<span>Model Context Protocol + Unified Knowledge Base</span>
</div>
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-[#f7f8f8] tracking-tight mb-5 leading-tight">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-[var(--text-primary)] tracking-tight mb-5 leading-tight">
Knowledge Base for <br />
<span className="bg-gradient-to-r from-[#7170ff] via-[#828fff] to-white bg-clip-text text-transparent">
<span className="bg-gradient-to-r from-[#5e6ad2] via-[#7170ff] to-[#4338ca] dark:to-white bg-clip-text text-transparent">
Humans and AI Agents
</span>
</h1>
<p className="text-base sm:text-lg text-[#8a8f98] max-w-2xl leading-relaxed mb-8">
<p className="text-base sm:text-lg text-[var(--text-muted)] max-w-2xl leading-relaxed mb-8">
A high-performance, content-first documentation system. Browse hierarchical notes and CTF writeups in your browser, or connect AI coding assistants directly via native MCP tools.
</p>
@@ -171,38 +171,38 @@ export default async function HomePage() {
</Link>
<Link
href="/search"
className="inline-flex items-center gap-2 px-5 py-2.5 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#d0d6e0] hover:text-white rounded-lg font-medium text-sm transition-all"
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"
>
<svg className="w-4 h-4 text-[#8a8f98]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
</Link>
<Link
href="/create"
className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg text-sm transition-colors"
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"
>
<span>+ Create Document</span>
</Link>
</div>
{/* Stats bar */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-4 bg-[#0c0d0e] border border-[#1f2022] rounded-xl max-w-3xl">
<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-semibold text-[#f7f8f8]">{all.length}</div>
<div className="text-xs text-[#62666d]">Documents indexed</div>
<div className="text-xl font-bold text-[var(--text-primary)]">{all.length}</div>
<div className="text-xs text-[var(--text-muted)]">Documents indexed</div>
</div>
<div>
<div className="text-xl font-semibold text-[#f7f8f8]">{SECTIONS.length}</div>
<div className="text-xs text-[#62666d]">Core sections</div>
<div className="text-xl font-bold text-[var(--text-primary)]">{SECTIONS.length}</div>
<div className="text-xs text-[var(--text-muted)]">Core sections</div>
</div>
<div>
<div className="text-xl font-semibold text-[#7170ff]">RRF Hybrid</div>
<div className="text-xs text-[#62666d]">FTS + 2048-dim vectors</div>
<div className="text-xl font-bold text-[#5e6ad2] dark:text-[#7170ff]">RRF Hybrid</div>
<div className="text-xs text-[var(--text-muted)]">FTS + 2048-dim vectors</div>
</div>
<div>
<div className="text-xl font-semibold text-emerald-400">10 MCP Tools</div>
<div className="text-xs text-[#62666d]">Streamable HTTP :4021</div>
<div className="text-xl font-bold text-emerald-600 dark:text-emerald-400">10 MCP Tools</div>
<div className="text-xs text-[var(--text-muted)]">Streamable HTTP :4021</div>
</div>
</div>
</section>
@@ -210,7 +210,7 @@ export default async function HomePage() {
{/* Browse by Section */}
<section>
<div className="flex items-center justify-between mb-6">
<h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">
Browse by Section
</h2>
</div>
@@ -221,28 +221,28 @@ export default async function HomePage() {
return (
<div
key={s.id}
className="group flex flex-col justify-between bg-[#0f1011] hover:bg-[#131415] border border-[#1f2022] hover:border-[#5e6ad2]/40 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-xl p-5 transition-all shadow-sm"
>
<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-[#7170ff] hover:underline"
className="text-xs font-mono text-[#5e6ad2] dark:text-[#7170ff] hover:underline"
>
{sectionDocs.length} docs →
</Link>
</div>
<h3 className="font-semibold text-base text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors mb-1.5">
<h3 className="font-semibold text-base text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors mb-1.5">
{s.label}
</h3>
<p className="text-xs text-[#8a8f98] mb-4 line-clamp-2 leading-relaxed">
<p className="text-xs text-[var(--text-muted)] mb-4 line-clamp-2 leading-relaxed">
{s.desc}
</p>
</div>
{/* Inline folder tree */}
<div className="pt-3 border-t border-[#1a1b1d]">
<div className="pt-3 border-t border-[var(--border-color)]">
<SectionTree
section={s.id}
docs={all.map((d) => ({ slug: d.slug, title: d.title }))}
@@ -259,12 +259,12 @@ export default async function HomePage() {
{recent.length > 0 && (
<section>
<div className="flex items-center justify-between mb-6">
<h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider">
<h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">
Recently Updated Knowledge
</h2>
<Link
href="/docs"
className="text-xs text-[#7170ff] hover:underline"
className="text-xs text-[#5e6ad2] dark:text-[#7170ff] hover:underline font-medium"
>
View all ({all.length}) →
</Link>
@@ -277,20 +277,20 @@ export default async function HomePage() {
<Link
key={d.slug}
href={`/${d.slug}`}
className="group block bg-[#0f1011] hover:bg-[#131415] border border-[#1f2022] hover:border-[#5e6ad2]/40 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-xl p-4 transition-all shadow-sm"
>
<div className="flex items-center justify-between gap-2 mb-2">
<span className="text-xs font-mono text-[#7170ff] uppercase">
<span className="text-xs font-mono text-[#5e6ad2] dark:text-[#7170ff] uppercase">
{sInfo?.icon} {d.section}
</span>
<time className="text-[11px] text-[#62666d] font-mono">
<time className="text-[11px] text-[var(--text-dim)] font-mono">
{new Date(d.updatedAt).toLocaleDateString(undefined, {
month: "short",
day: "numeric",
})}
</time>
</div>
<h3 className="font-medium text-sm text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-2">
<h3 className="font-medium text-sm text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-2">
{d.title}
</h3>
{d.tags.length > 0 && (
@@ -298,7 +298,7 @@ export default async function HomePage() {
{d.tags.slice(0, 3).map((t) => (
<span
key={t}
className="text-[10px] px-1.5 py-0.25 bg-[#141517] border border-[#23252a] rounded text-[#8a8f98]"
className="text-[10px] px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)]"
>
#{t}
</span>
@@ -313,15 +313,15 @@ export default async function HomePage() {
)}
{/* MCP Agent Integration Showcase */}
<section className="border-t border-[#1f2022] pt-12 pb-6">
<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-[#141517] border border-[#23252a] text-[#8a8f98] text-xs font-mono mb-2">
<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>
<h2 className="text-2xl font-bold text-[#f7f8f8] tracking-tight mb-2">
<h2 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight mb-2">
Connect AI Coding Assistants
</h2>
<p className="text-sm text-[#8a8f98] max-w-xl">
<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>
</div>
apps/web/app/search/page.tsx
+29 -29
View File
@@ -74,16 +74,16 @@ function SearchContent() {
<div className="max-w-4xl space-y-8">
{/* Header */}
<div>
<h1 className="text-3xl font-bold text-[#f7f8f8] tracking-tight mb-2">
<h1 className="text-3xl font-bold text-[var(--text-primary)] tracking-tight mb-2">
Search Knowledge Base
</h1>
<p className="text-sm text-[#8a8f98]">
<p className="text-sm text-[var(--text-muted)]">
Find answers across all documentation, CTF writeups, research notes, and semantic vector chunks.
</p>
</div>
{/* Search Box & Controls */}
<div className="bg-[#0f1011] border border-[#1f2022] rounded-xl p-4 sm:p-5 shadow-sm space-y-4">
<div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-4 sm:p-5 shadow-sm space-y-4">
{/* Search Input */}
<div className="relative">
<input
@@ -91,11 +91,11 @@ function SearchContent() {
value={query}
onChange={handleChange}
placeholder="Search by keywords, challenge names, tools, concepts..."
className="w-full pl-11 pr-10 py-3 bg-[#141517] border border-[#23252a] hover:border-[#383b42] rounded-lg text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-2 focus:ring-[#5e6ad2]/20 text-base transition-all"
className="w-full pl-11 pr-10 py-3 bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-2 focus:ring-[#5e6ad2]/20 text-base transition-all"
autoFocus
/>
<svg
className="w-5 h-5 text-[#7170ff] absolute left-3.5 top-3.5"
className="w-5 h-5 text-[#5e6ad2] dark:text-[#7170ff] absolute left-3.5 top-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -108,7 +108,7 @@ function SearchContent() {
setQuery("");
setResults([]);
}}
className="absolute right-3.5 top-3.5 text-xs text-[#62666d] hover:text-[#d0d6e0] p-0.5"
className="absolute right-3.5 top-3.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] p-0.5"
>
✕
</button>
@@ -116,10 +116,10 @@ function SearchContent() {
</div>
{/* Search Mode & Section Filters */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-[#1a1b1d] text-xs">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-[var(--border-color)] text-xs">
{/* Mode Selector */}
<div className="flex items-center gap-1.5 flex-wrap">
<span className="text-[#62666d] mr-1">Algorithm:</span>
<span className="text-[var(--text-muted)] mr-1">Algorithm:</span>
{[
{ id: "hybrid", label: "⚡ Hybrid (RRF)", desc: "FTS + Vector Fusion" },
{ id: "keyword", label: "🔍 Keyword", desc: "PostgreSQL FTS" },
@@ -133,7 +133,7 @@ function SearchContent() {
className={`px-3 py-1 rounded-md border font-medium transition-all ${
mode === m.id
? "bg-[#5e6ad2] border-[#5e6ad2] text-white shadow-sm"
: "bg-[#141517] border-[#23252a] text-[#8a8f98] hover:text-[#d0d6e0]"
: "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
>
{m.label}
@@ -148,8 +148,8 @@ function SearchContent() {
onClick={() => setSelectedSection("all")}
className={`px-2.5 py-1 rounded-md text-xs transition-colors ${
selectedSection === "all"
? "bg-[#23252a] text-white"
: "text-[#62666d] hover:text-[#8a8f98]"
? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-medium"
: "text-[var(--text-dim)] hover:text-[var(--text-muted)]"
}`}
>
All Sections
@@ -161,8 +161,8 @@ function SearchContent() {
onClick={() => setSelectedSection(s.id)}
className={`px-2.5 py-1 rounded-md text-xs transition-colors ${
selectedSection === s.id
? "bg-[#23252a] text-white"
: "text-[#62666d] hover:text-[#8a8f98]"
? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-medium"
: "text-[var(--text-dim)] hover:text-[var(--text-muted)]"
}`}
>
{s.label}
@@ -174,7 +174,7 @@ function SearchContent() {
{/* Loading State */}
{loading && (
<div className="flex items-center gap-3 py-8 text-[#8a8f98] text-sm">
<div className="flex items-center gap-3 py-8 text-[var(--text-muted)] text-sm">
<div className="w-5 h-5 border-2 border-[#5e6ad2] border-t-transparent rounded-full animate-spin" />
<span>Searching knowledge base...</span>
</div>
@@ -182,10 +182,10 @@ function SearchContent() {
{/* Empty State */}
{!loading && query && filteredResults.length === 0 && (
<div className="text-center py-16 bg-[#0f1011] border border-[#1f2022] rounded-xl">
<div className="text-center py-16 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-sm">
<div className="text-3xl mb-3">🔍</div>
<h3 className="text-base font-medium text-[#f7f8f8] mb-1">No matching documents</h3>
<p className="text-xs text-[#8a8f98] max-w-sm mx-auto">
<h3 className="text-base font-semibold text-[var(--text-primary)] mb-1">No matching documents</h3>
<p className="text-xs text-[var(--text-muted)] max-w-sm mx-auto">
Try switching algorithm mode to <strong>Hybrid</strong> or <strong>Semantic</strong>, or search with different keywords.
</p>
</div>
@@ -193,8 +193,8 @@ function SearchContent() {
{/* Initial Hint */}
{!loading && !query && (
<div className="p-8 text-center bg-[#0c0d0e] border border-[#1f2022] rounded-xl space-y-4">
<p className="text-xs text-[#8a8f98]">Popular search queries:</p>
<div className="p-8 text-center bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl space-y-4 shadow-sm">
<p className="text-xs text-[var(--text-muted)]">Popular search queries:</p>
<div className="flex justify-center flex-wrap gap-2 text-xs">
{["stack alignment", "ret2win", "bullmq worker", "streamable http", "full-text search", "caddy reverse proxy"].map((term) => (
<button
@@ -203,7 +203,7 @@ function SearchContent() {
setQuery(term);
handleSearch(term, mode);
}}
className="px-3 py-1 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#5e6ad2]/40 rounded-md text-[#d0d6e0] transition-colors"
className="px-3 py-1 bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-md text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
>
{term}
</button>
@@ -215,7 +215,7 @@ function SearchContent() {
{/* Results List */}
{!loading && filteredResults.length > 0 && (
<div className="space-y-4">
<div className="flex items-center justify-between text-xs text-[#62666d]">
<div className="flex items-center justify-between text-xs text-[var(--text-dim)]">
<span>Found {filteredResults.length} result{filteredResults.length !== 1 ? "s" : ""}</span>
<span className="font-mono">Ranked by {mode} score</span>
</div>
@@ -225,29 +225,29 @@ function SearchContent() {
<Link
key={r.slug}
href={`/${r.slug}`}
className="group block bg-[#0f1011] hover:bg-[#131415] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-xl p-4 sm:p-5 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-xl p-4 sm:p-5 transition-all shadow-sm"
>
<div className="flex items-center justify-between gap-3 mb-2">
<div className="flex items-center gap-2">
<span className="text-xs font-mono px-2 py-0.5 rounded bg-[#5e6ad2]/10 border border-[#5e6ad2]/30 text-[#7170ff] uppercase">
<span className="text-xs font-mono px-2 py-0.5 rounded bg-[#5e6ad2]/10 border border-[#5e6ad2]/30 text-[#5e6ad2] dark:text-[#7170ff] uppercase">
{r.section}
</span>
<span className="text-xs text-[#62666d] font-mono truncate">
<span className="text-xs text-[var(--text-dim)] font-mono truncate">
/{r.slug}
</span>
</div>
<span className="text-xs font-mono text-[#8a8f98] bg-[#141517] px-2 py-0.5 rounded">
<span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-elevated)] border border-[var(--border-color)] px-2 py-0.5 rounded">
Score: {r.score.toFixed(3)}
</span>
</div>
<h2 className="text-base font-semibold text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors mb-2">
<h2 className="text-base font-semibold text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors mb-2">
{r.title}
</h2>
{r.snippet && (
<p
className="text-xs text-[#8a8f98] leading-relaxed line-clamp-2 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-white [&>mark]:px-1 [&>mark]:rounded [&>mark]:font-medium"
className="text-xs text-[var(--text-muted)] leading-relaxed line-clamp-2 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[var(--text-primary)] [&>mark]:px-1 [&>mark]:rounded [&>mark]:font-medium"
dangerouslySetInnerHTML={{ __html: r.snippet }}
/>
)}
@@ -265,8 +265,8 @@ export default function SearchPage() {
<Suspense
fallback={
<div className="max-w-4xl py-12">
<h1 className="text-2xl font-bold text-[#f7f8f8] mb-4">Search</h1>
<p className="text-sm text-[#8a8f98]">Loading search module...</p>
<h1 className="text-2xl font-bold text-[var(--text-primary)] mb-4">Search</h1>
<p className="text-sm text-[var(--text-muted)]">Loading search module...</p>
</div>
}
>