- Section index: doc-title-based tree, folder doc counts, active+parent highlighting, recent list with dates, doc counter badge - Folder index: rich card listing with doc titles (not path slugs), dates, tags, subfolder grid with doc counts, breadcrumb - Doc page: metadata card (bg-[#0f1011] border), structured header with author/date/tags, badge title tooltips, improved FolderIndex breadcrumb - Sidebar: recursive hierarchical tree with depth indentation + 16px/level, folder doc counts, section icons, active parent highlighting, alphabetical sort - DocForm: clean 2-column grid layout, no duplicate slug field, edit-mode loads existing custom fields - Homepage: inline folder tree per section card - Header nav: added Writeups/Research/Notes links - Deleted duplicate apps/web/app/docs/page.tsx (superseded by generic [section]/page.tsx) - Added CSS vars: --color-border-subtle, --color-border-standard, --color-text-tertiary, --color-text-quaternary
This commit is contained in:
asepharyana
@@ -0,0 +1,80 @@
|
||||
# Phase 15 — UI/UX Polish Pass
|
||||
|
||||
> User: "perbagus ui ux nya"
|
||||
|
||||
## Audit
|
||||
|
||||
### Current issues
|
||||
1. **Section index** (`[section]/page.tsx`):
|
||||
- `buildFolderTree` uses path segments instead of doc titles for leaf nodes
|
||||
- Folder tree + flat list at bottom is redundant
|
||||
- No folder icons (📁), no doc type indicators, no dates
|
||||
- Tree rendering is very basic (no visual hierarchy)
|
||||
|
||||
2. **Doc page** (`[section]/[...slug]/page.tsx`):
|
||||
- CustomFieldBadges shows key=value but labels all badges with key name as title
|
||||
- No structured metadata card layout
|
||||
- Related docs cards are functional but visually flat
|
||||
|
||||
3. **Folder index** (`FolderIndexPage` in `[...slug]/page.tsx`):
|
||||
- Shows doc slug parts (e.g. "pwn-100-ret2win-alignment") instead of titles
|
||||
- No date, no tags, no description
|
||||
- Subfolders are plain text links, no folder count or doc count
|
||||
|
||||
4. **Homepage** (`page.tsx`):
|
||||
- Folder tree inside cards is cramped (text-xs, no spacing)
|
||||
- Section cards show "View all (N)" but folder tree duplicates that
|
||||
|
||||
5. **Sidebar** (`Sidebar.tsx`):
|
||||
- Tree uses indentation via inline style but no visual depth cues
|
||||
- No hover expand for folders
|
||||
- Active state only on exact match, not parent folders
|
||||
|
||||
## Plan
|
||||
|
||||
### 1. Section index — enhanced tree
|
||||
- Use doc titles for leaf nodes (already have `doc` reference in tree)
|
||||
- Add 📁 for folders, 📄 for docs
|
||||
- Show doc count per folder
|
||||
- Remove flat list (redundant with tree)
|
||||
- Add "View all" link per section
|
||||
- Better visual hierarchy: folder headers with counts, doc titles with dates
|
||||
|
||||
### 2. Doc page — metadata card
|
||||
- Replace inline badge row with a structured metadata card
|
||||
- Show custom fields as labeled badges (key → value with color)
|
||||
- Keep CustomFieldBadges for backward compat but improve layout
|
||||
- Add metadata card with: author, date, tags, and all custom fields
|
||||
|
||||
### 3. Folder index — rich listing
|
||||
- Show doc titles (fetch from listDocuments, match by path)
|
||||
- Show update date per doc
|
||||
- Show tags per doc
|
||||
- Add doc count for subfolders
|
||||
- Better visual separation between subfolders and docs
|
||||
|
||||
### 4. Homepage — cleaner tree
|
||||
- Increase font size for tree items
|
||||
- Show section icon + label in tree header
|
||||
- Better spacing between sections
|
||||
|
||||
### 5. Sidebar — depth cues
|
||||
- Use ml-4 per level instead of inline style
|
||||
- Add section divider lines
|
||||
- Highlight active section + parent folders
|
||||
|
||||
## Files to change
|
||||
```
|
||||
mod: apps/web/app/[section]/page.tsx # enhanced tree, use doc titles
|
||||
mod: apps/web/app/[section]/[...slug]/page.tsx # FolderIndexPage + metadata card
|
||||
mod: apps/web/app/page.tsx # cleaner section tree cards
|
||||
mod: apps/web/app/components/Sidebar.tsx # depth + active parent highlight
|
||||
mod: apps/web/app/globals.css # additional CSS vars if needed
|
||||
```
|
||||
|
||||
## Verification
|
||||
- All endpoints still 200
|
||||
- `bun run test` green
|
||||
- `turbo run typecheck` green
|
||||
- `next build` succeeds
|
||||
- Live visual check of folder index, section index, doc page
|
||||
@@ -7,6 +7,7 @@ import Markdown from "@/components/Markdown";
|
||||
import DocForm from "@/components/DocForm";
|
||||
import TOC from "@/components/TOC";
|
||||
import { classifyPath, extractFoldersForSection } from "@mcpedia/core";
|
||||
import type { DocumentMeta } from "@mcpedia/core";
|
||||
|
||||
// Render at request time (content in Postgres, not available at build time).
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -31,10 +32,10 @@ const SECTION_ICON: Record<string, string> = {
|
||||
};
|
||||
|
||||
/**
|
||||
* Render any extra/custom frontmatter fields as badges.
|
||||
* Render any extra/custom frontmatter fields as labeled badges.
|
||||
* This makes the system dynamic — the content creator decides what metadata
|
||||
* to include, not the UI template. Standard fields (title, author, tags, etc.)
|
||||
* are handled explicitly; any OTHER keys in frontmatter become badges here.
|
||||
* to include. Standard fields (title, author, tags, etc.) are handled
|
||||
* explicitly; any OTHER keys in frontmatter become badges here.
|
||||
*/
|
||||
function CustomFieldBadges({
|
||||
doc,
|
||||
@@ -43,7 +44,6 @@ function CustomFieldBadges({
|
||||
doc: Record<string, unknown>;
|
||||
standardKeys: Set<string>;
|
||||
}) {
|
||||
// Convert doc to a plain record to get index signature
|
||||
const docRecord: Record<string, unknown> = { ...doc } as Record<string, unknown>;
|
||||
const customEntries = Object.entries(docRecord).filter(
|
||||
([k, v]) =>
|
||||
@@ -53,7 +53,7 @@ function CustomFieldBadges({
|
||||
if (customEntries.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-2 mt-3">
|
||||
<div className="flex flex-wrap items-center gap-2 mt-4 pt-3 border-t border-[#1f2022]">
|
||||
{customEntries.map(([key, value]) => {
|
||||
const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");
|
||||
let colorClass = "bg-[#191a1b] border-[#23252a] text-[#d0d6e0]";
|
||||
@@ -64,30 +64,24 @@ function CustomFieldBadges({
|
||||
// not by using specific key names)
|
||||
|
||||
if (typeof value === "number") {
|
||||
// Numeric values → purple "points"-style badge with + prefix
|
||||
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
|
||||
displayValue = `${value}`;
|
||||
} else if (typeof value === "boolean") {
|
||||
// Boolean values → green check/X
|
||||
colorClass = value
|
||||
? "bg-green-500/15 border-green-500/25 text-green-400"
|
||||
: "bg-red-500/15 border-red-500/25 text-red-400";
|
||||
displayValue = value ? "Yes" : "No";
|
||||
} else if (Array.isArray(value)) {
|
||||
// Arrays → purple badge, joined values
|
||||
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
|
||||
displayValue = value.join(", ");
|
||||
} else if (typeof value === "object" && value !== null) {
|
||||
// Objects → neutral badge, truncated JSON
|
||||
displayValue = JSON.stringify(value).slice(0, 40) +
|
||||
(JSON.stringify(value).length > 40 ? "…" : "");
|
||||
} else {
|
||||
// String values — auto-detect content type for styling
|
||||
const v = String(value).toLowerCase();
|
||||
|
||||
// Difficulty-like values (easy/medium/hard/etc) OR numeric with suffix
|
||||
const diffMatch = v.match(
|
||||
/^(easy|simple|beginner)\b|^(medium|intermediate)\b|^(hard|expert|advanced)\b/i
|
||||
/^(easy|simple|beginner)\b|^(medium|intermediate)\b|^(hard|expert|advanced)\b/i,
|
||||
);
|
||||
if (diffMatch) {
|
||||
if (/^easy|simple|beginner/i.test(v))
|
||||
@@ -97,33 +91,24 @@ function CustomFieldBadges({
|
||||
else if (/^hard|expert|advanced/i.test(v))
|
||||
colorClass = "bg-red-500/10 border-red-500/30 text-red-400";
|
||||
displayValue = diffMatch[0];
|
||||
}
|
||||
// Event-like values (contains CTF, DEF CON, hack, etc.)
|
||||
else if (/ctf|def.?con|hack|game|competition|tournament|qualifier/i.test(v)) {
|
||||
} else if (/ctf|def.?con|hack|game|competition|tournament|qualifier/i.test(v)) {
|
||||
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
|
||||
displayValue = String(value);
|
||||
}
|
||||
// Points-like values (number + "pts" suffix)
|
||||
else if (/(\d+)\s*pts?$/i.test(v)) {
|
||||
} else if (/(\d+)\s*pts?$/i.test(v)) {
|
||||
const match = v.match(/(\d+)\s*pts?$/i);
|
||||
colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
|
||||
displayValue = match ? `${match[1]} pts` : String(value);
|
||||
}
|
||||
// Category-like values (pwn/web/crypto/etc)
|
||||
else if (/^(pwn|web|crypto|misc|forensic|reverse|pwnable|binary|webexploit)$/i.test(v)) {
|
||||
} else if (/^(pwn|web|crypto|misc|forensic|reverse|pwnable|binary|webexploit)$/i.test(v)) {
|
||||
colorClass = "bg-orange-500/15 border-orange-500/25 text-orange-400";
|
||||
displayValue = v.charAt(0).toUpperCase() + v.slice(1);
|
||||
}
|
||||
// Status-like values (solved/pending/wip)
|
||||
else if (/^(solved|pending|wip|in.?progress|completed|todo)$/i.test(v)) {
|
||||
} else if (/^(solved|pending|wip|in.?progress|completed|todo)$/i.test(v)) {
|
||||
colorClass = v.includes("solved") || v.includes("completed")
|
||||
? "bg-green-500/10 border-green-500/30 text-green-400"
|
||||
: v.includes("wip") || v.includes("progress")
|
||||
? "bg-yellow-500/10 border-yellow-500/30 text-yellow-400"
|
||||
: "bg-red-500/10 border-red-500/30 text-red-400";
|
||||
displayValue = v.charAt(0).toUpperCase() + v.slice(1);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
displayValue = String(value);
|
||||
}
|
||||
}
|
||||
@@ -132,6 +117,7 @@ function CustomFieldBadges({
|
||||
<span
|
||||
key={key}
|
||||
className={`px-2 py-0.5 border rounded text-xs ${colorClass}`}
|
||||
title={label}
|
||||
>
|
||||
{displayValue}
|
||||
</span>
|
||||
@@ -148,80 +134,113 @@ function CustomFieldBadges({
|
||||
function FolderIndexPage({
|
||||
section,
|
||||
slug,
|
||||
docPaths,
|
||||
allDocs,
|
||||
}: {
|
||||
section: string;
|
||||
slug: string;
|
||||
docPaths: string[];
|
||||
allDocs: DocumentMeta[];
|
||||
}) {
|
||||
const prefix = `${section}/${slug}/`;
|
||||
const folderDocs = docPaths
|
||||
.filter((p) => p.startsWith(prefix))
|
||||
.map((p) => p.slice(prefix.length).replace(/\.md$/, ""))
|
||||
.sort();
|
||||
const folderDocPaths = allDocs
|
||||
.filter((d) => d.path.startsWith(prefix))
|
||||
.map((d) => ({
|
||||
rel: d.path.slice(prefix.length).replace(/\.md$/, ""),
|
||||
doc: d,
|
||||
}))
|
||||
.sort((a, b) => a.rel.localeCompare(b.rel));
|
||||
|
||||
// Group into immediate children: folders vs leaf docs
|
||||
const immediateFolders = new Set<string>();
|
||||
const immediateDocs: { name: string; slug: string }[] = [];
|
||||
const immediateFolders = new Map<string, { docCount: number }>();
|
||||
const immediateDocs: DocumentMeta[] = [];
|
||||
|
||||
for (const relPath of folderDocs) {
|
||||
const parts = relPath.split("/");
|
||||
for (const { rel, doc } of folderDocPaths) {
|
||||
const parts = rel.split("/");
|
||||
if (parts.length === 1) {
|
||||
// Leaf doc directly in this folder
|
||||
immediateDocs.push({ name: parts[0], slug: `${section}/${slug}/${parts[0]}`.replace(/\/+/g, "/") });
|
||||
immediateDocs.push(doc);
|
||||
} else {
|
||||
// Deeper — register the immediate folder
|
||||
immediateFolders.add(parts[0]);
|
||||
const folder = parts[0];
|
||||
const existing = immediateFolders.get(folder) || { docCount: 0 };
|
||||
existing.docCount += 1;
|
||||
immediateFolders.set(folder, existing);
|
||||
}
|
||||
}
|
||||
|
||||
const folders = [...immediateFolders].sort();
|
||||
const folders = [...immediateFolders.entries()].sort(([a], [b]) => a.localeCompare(b));
|
||||
|
||||
const sectionInfo = {
|
||||
icon: SECTION_ICON[section] || "📁",
|
||||
label: SECTION_LABEL[section] || section,
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-2 text-xs text-[#62666d] mb-6">
|
||||
<Link href="/" className="hover:text-[#d0d6e0] transition-colors">
|
||||
MCPedia
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<Link
|
||||
href={`/${section}`}
|
||||
className="hover:text-[#d0d6e0] transition-colors"
|
||||
>
|
||||
{sectionInfo.label}
|
||||
</Link>
|
||||
{slug.split("/").map((part, i) => {
|
||||
const path = `${section}/${slug.split("/").slice(0, i + 1).join("/")}`;
|
||||
const isLast = i === slug.split("/").length - 1;
|
||||
const label = part
|
||||
.split(/[-_]/)
|
||||
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
||||
.join(" ");
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
<span>/</span>
|
||||
<span
|
||||
key={path}
|
||||
href={`/${path}`}
|
||||
className={isLast ? "text-[#8a8f98]" : "hover:text-[#d0d6e0] transition-colors"}
|
||||
className={isLast ? "text-[#8a8f98]" : "hover:text-[#d0d6e0]"}
|
||||
>
|
||||
{part}
|
||||
</Link>
|
||||
{!isLast && <span>/</span>}
|
||||
{label}
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className="text-xl">📁</span>
|
||||
<h1 className="text-3xl font-medium text-[#f7f8f8]">{slug.split("/").pop()}</h1>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 mb-8">
|
||||
<span className="text-2xl">📁</span>
|
||||
<h1 className="text-3xl font-medium text-[#f7f8f8]">
|
||||
{slug.split("/").pop()!.split(/[-_]/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}
|
||||
</h1>
|
||||
<span className="text-xs text-[#62666d] bg-[#191a1b] px-2 py-0.5 rounded">
|
||||
{immediateDocs.length + folders.length} item{folders.length + immediateDocs.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{(folders.length > 0 || immediateDocs.length > 0) ? (
|
||||
<div>
|
||||
{folders.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h2 className="text-sm font-medium text-[#d0d6e0] uppercase mb-3">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xs font-medium text-[#8a8f98] uppercase mb-3 tracking-wider">
|
||||
Subfolders
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{folders.map((folder) => (
|
||||
<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="flex items-center gap-2 text-sm text-[#d0d6e0] hover:text-[#7170ff] transition-colors"
|
||||
className="group flex items-center gap-3 p-3 bg-[#0f1011] border border-[#1f2022] rounded-lg hover:border-[#5e6ad2]/40 hover:bg-[#131415] transition-all"
|
||||
>
|
||||
<span>📁</span> {folder}
|
||||
<span className="text-2xl">📁</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors">
|
||||
{folder.split(/[-_]/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}
|
||||
</div>
|
||||
<div className="text-xs text-[#62666d] mt-0.5">
|
||||
{info.docCount} document{info.docCount !== 1 ? "s" : ""}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
@@ -229,7 +248,7 @@ function FolderIndexPage({
|
||||
)}
|
||||
{immediateDocs.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-sm font-medium text-[#d0d6e0] uppercase mb-3">
|
||||
<h2 className="text-xs font-medium text-[#8a8f98] uppercase mb-3 tracking-wider">
|
||||
Documents
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
@@ -237,9 +256,34 @@ function FolderIndexPage({
|
||||
<Link
|
||||
key={doc.slug}
|
||||
href={`/${doc.slug}`}
|
||||
className="flex items-center gap-2 text-sm text-[#d0d6e0] hover:text-[#7170ff] transition-colors line-clamp-1"
|
||||
className="group flex items-center justify-between gap-3 p-3 bg-[#0f1011] border border-[#1f2022] rounded-lg hover:border-[#5e6ad2]/40 hover:bg-[#131415] transition-all"
|
||||
>
|
||||
<span>📄</span> {doc.name}
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<span className="text-xl">📄</span>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1">
|
||||
{doc.title}
|
||||
</div>
|
||||
{doc.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{doc.tags.slice(0, 3).map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="text-xs px-1.5 py-0.25 bg-[#191a1b] border border-[#23252a] rounded text-[#8a8f98]"
|
||||
>
|
||||
#{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<time className="text-xs text-[#62666d] flex-shrink-0">
|
||||
{new Date(doc.updatedAt).toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})}
|
||||
</time>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
@@ -266,7 +310,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
|
||||
|
||||
// If the slug path is a folder (not a leaf doc), render the folder index
|
||||
if (classification === "folder") {
|
||||
return <FolderIndexPage section={section} slug={slug.join("/")} docPaths={docPaths} />;
|
||||
return <FolderIndexPage section={section} slug={slug.join("/")} allDocs={allDocs} />;
|
||||
}
|
||||
|
||||
// Otherwise, treat as a document (existing behavior)
|
||||
@@ -285,7 +329,6 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
|
||||
|
||||
// Edit mode: inline form
|
||||
if (edit === "1" && canEdit) {
|
||||
// Load existing folders for the folder picker in edit mode
|
||||
const existingFolders = extractFoldersForSection(docPaths, doc.section);
|
||||
return (
|
||||
<div>
|
||||
@@ -361,38 +404,58 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="text-xl">
|
||||
{/* Metadata Card */}
|
||||
<div className="bg-[#0f1011] border border-[#1f2022] rounded-lg p-6 mb-8">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<span className="text-2xl">
|
||||
{SECTION_ICON[doc.section] || "📄"}
|
||||
</span>
|
||||
<span className="text-xs font-medium text-[#7170ff] uppercase">
|
||||
{SECTION_LABEL[doc.section] || doc.section}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-xs font-medium text-[#7170ff] uppercase">
|
||||
{SECTION_LABEL[doc.section] || doc.section}
|
||||
</span>
|
||||
<span className="text-xs text-[#62666d]">·</span>
|
||||
<span className="text-xs text-[#62666d]">
|
||||
{doc.type}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-medium text-[#f7f8f8] leading-tight">
|
||||
{doc.title}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl font-medium text-[#f7f8f8] mb-4 leading-tight">
|
||||
{doc.title}
|
||||
</h1>
|
||||
|
||||
{/* Author + date + tags */}
|
||||
<div className="flex flex-wrap items-center gap-3 text-xs text-[#62666d] mb-3">
|
||||
<span className="text-[#d0d6e0]">{doc.author || "unknown"}</span>
|
||||
<span>·</span>
|
||||
<time dateTime={doc.updatedAt}>
|
||||
Updated {new Date(doc.updatedAt).toLocaleDateString(undefined, {
|
||||
{doc.author && (
|
||||
<>
|
||||
<span className="text-[#d0d6e0]">by {doc.author}</span>
|
||||
<span>·</span>
|
||||
</>
|
||||
)}
|
||||
<span className="text-[#d0d6e0]">
|
||||
updated {new Date(doc.updatedAt).toLocaleDateString(undefined, {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</time>
|
||||
{doc.tags.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="px-2 py-0.5 bg-[#191a1b] border border-[#23252a] rounded text-[#d0d6e0]"
|
||||
>
|
||||
#{t}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
{doc.tags.length > 0 && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{doc.tags.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="px-2 py-0.5 bg-[#191a1b] border border-[#23252a] rounded text-[#d0d6e0]"
|
||||
>
|
||||
#{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dynamic custom field badges — content creator controls what shows */}
|
||||
@@ -400,7 +463,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
|
||||
</div>
|
||||
|
||||
{/* Content + TOC */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-12">
|
||||
<TOC source={doc.body} />
|
||||
<Markdown source={doc.body} />
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
import Link from "next/link";
|
||||
import { listDocuments, type DocumentMeta } from "@mcpedia/core";
|
||||
import type { DocSection } from "@mcpedia/core";
|
||||
import { listDocuments } from "@mcpedia/core";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const SECTIONS: { id: DocSection; label: string; icon: string; desc: string }[] = [
|
||||
interface DocMeta {
|
||||
slug: string;
|
||||
title: string;
|
||||
section: string;
|
||||
tags: string[];
|
||||
updatedAt: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
const SECTIONS: { id: string; label: string; icon: string; desc: string }[] = [
|
||||
{
|
||||
id: "docs",
|
||||
label: "Documentation",
|
||||
@@ -17,88 +25,102 @@ const SECTIONS: { id: DocSection; label: string; icon: string; desc: string }[]
|
||||
];
|
||||
|
||||
/**
|
||||
* Group documents into a folder tree. Returns nodes where each node is either:
|
||||
* - a folder (has `children`) or
|
||||
* - a leaf doc (has `doc`)
|
||||
* The tree is built from the path segments of each document's `path`.
|
||||
* Build a hierarchical folder tree from a flat list of documents.
|
||||
* Each node is either a folder (has children) or a leaf doc.
|
||||
*/
|
||||
interface TreeNode {
|
||||
name: string;
|
||||
slug: string;
|
||||
doc?: DocumentMeta;
|
||||
children?: TreeNode[];
|
||||
doc?: DocMeta;
|
||||
children: TreeNode[];
|
||||
docCount: number; // total docs in subtree
|
||||
}
|
||||
|
||||
function buildFolderTree(docs: DocumentMeta[], section: string): TreeNode[] {
|
||||
function buildFolderTree(docs: DocMeta[], section: string): TreeNode[] {
|
||||
const root: TreeNode[] = [];
|
||||
const rootMap = new Map<string, TreeNode>();
|
||||
|
||||
for (const doc of docs.filter((d) => d.section === section)) {
|
||||
// path is like "docs/websocket/contract.md" → strip section prefix + .md
|
||||
const rel = doc.path.startsWith(`${section}/`)
|
||||
? doc.path.slice(section.length + 1)
|
||||
: doc.path;
|
||||
const cleanPath = rel.replace(/\.md$/, "");
|
||||
const parts = cleanPath.split("/");
|
||||
|
||||
let currentLevel = root;
|
||||
let current = root;
|
||||
let currentPath = section;
|
||||
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
const part = parts[i];
|
||||
currentPath = `${currentPath}/${part}`;
|
||||
const isLeaf = i === parts.length - 1;
|
||||
currentPath = `${currentPath}/${part}`;
|
||||
|
||||
let node = currentLevel.find((n) => n.name === part);
|
||||
let node = current.find((n) => n.name === part);
|
||||
if (!node) {
|
||||
node = {
|
||||
name: part === "" ? section : part,
|
||||
name: part,
|
||||
slug: currentPath,
|
||||
children: isLeaf ? undefined : [],
|
||||
children: [],
|
||||
docCount: 0,
|
||||
};
|
||||
currentLevel.push(node);
|
||||
current.push(node);
|
||||
}
|
||||
|
||||
if (isLeaf) {
|
||||
node.doc = doc;
|
||||
node.docCount = 1;
|
||||
} else {
|
||||
if (!node.children) node.children = [];
|
||||
currentLevel = node.children;
|
||||
// This is a folder — count will be accumulated below
|
||||
}
|
||||
current = node.children;
|
||||
}
|
||||
}
|
||||
|
||||
// Recursively compute docCount for folder nodes
|
||||
function countDocs(node: TreeNode): number {
|
||||
if (node.doc) return 1;
|
||||
return node.children.reduce((sum, child) => sum + countDocs(child), 0);
|
||||
}
|
||||
|
||||
for (const node of root) {
|
||||
node.docCount = countDocs(node);
|
||||
}
|
||||
|
||||
return root;
|
||||
}
|
||||
|
||||
function renderTree(nodes: TreeNode[], section: DocSection) {
|
||||
function renderTree(nodes: TreeNode[], pathname: string) {
|
||||
return (
|
||||
<ul className="space-y-0.5">
|
||||
{nodes.map((node) => {
|
||||
const isFolder = !!node.children;
|
||||
const isDoc = !!node.doc;
|
||||
const isFolder = node.children.length > 0;
|
||||
const isActive = pathname === `/${node.slug}`;
|
||||
const hasActiveChild = pathname.startsWith(`/${node.slug}/`);
|
||||
|
||||
return (
|
||||
<li key={node.slug}>
|
||||
{isFolder ? (
|
||||
<Link
|
||||
href={`/${node.slug}`}
|
||||
className="flex items-center gap-1.5 text-xs py-0.5 rounded hover:bg-[#191a1b] text-[#d0d6e0] hover:text-[#f7f8f8]"
|
||||
>
|
||||
<span>📁</span>
|
||||
{node.name}
|
||||
</Link>
|
||||
) : isDoc ? (
|
||||
<Link
|
||||
href={`/${node.slug}`}
|
||||
className="flex items-center gap-1.5 text-xs py-0.5 rounded hover:bg-[#191a1b] text-[#d0d6e0] hover:text-[#f7f8f8] line-clamp-1"
|
||||
>
|
||||
<span>📄</span>
|
||||
<Link
|
||||
href={`/${node.slug}`}
|
||||
className={`flex items-center justify-between gap-2 text-xs py-1 px-2 rounded transition-all ${
|
||||
isActive
|
||||
? "text-[#7170ff] bg-[#191a1b]"
|
||||
: hasActiveChild
|
||||
? "text-[#d0d6e0]"
|
||||
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#191a1b]"
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span>{isFolder ? "📁" : "📄"}</span>
|
||||
{node.doc?.title || node.name}
|
||||
</Link>
|
||||
) : null}
|
||||
{node.children && node.children.length > 0 && (
|
||||
<div className="ml-3 mt-0.5">
|
||||
{renderTree(node.children, section)}
|
||||
</span>
|
||||
{isFolder && (
|
||||
<span className="text-[#62666d] bg-[#191a1b] px-1.5 py-0.25 rounded">
|
||||
{node.docCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
{node.children.length > 0 && (
|
||||
<div className="ml-4 mt-0.5">
|
||||
{renderTree(node.children, pathname)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
@@ -115,7 +137,8 @@ export default async function SectionIndexPage({
|
||||
}) {
|
||||
const { section } = await params;
|
||||
|
||||
if (!SECTIONS.some((s) => s.id === section)) {
|
||||
const sectionInfo = SECTIONS.find((s) => s.id === section);
|
||||
if (!sectionInfo) {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-medium text-[#f7f8f8]">Unknown section</h1>
|
||||
@@ -123,39 +146,42 @@ export default async function SectionIndexPage({
|
||||
);
|
||||
}
|
||||
|
||||
const all = await listDocuments();
|
||||
const sectionDocs = all.filter((d) => d.section === section);
|
||||
const tree = buildFolderTree(all, section as DocSection);
|
||||
const sectionInfo = SECTIONS.find((s) => s.id === section)!;
|
||||
const allDocs = await listDocuments();
|
||||
const sectionDocs = allDocs.filter((d) => d.section === section);
|
||||
const tree = buildFolderTree(allDocs, section);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className="text-2xl">{sectionInfo.icon}</span>
|
||||
<h1 className="text-3xl font-medium text-[#f7f8f8]">{sectionInfo.label}</h1>
|
||||
<span className="text-xs text-[#62666d] bg-[#191a1b] px-2 py-0.5 rounded">
|
||||
{sectionDocs.length} document{sectionDocs.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-[#8a8f98] mb-6 max-w-2xl">
|
||||
|
||||
<p className="text-sm text-[#8a8f98] mb-8 max-w-2xl">
|
||||
{sectionInfo.desc}
|
||||
</p>
|
||||
|
||||
<div className="mb-8">
|
||||
<h2 className="text-sm font-medium text-[#d0d6e0] uppercase mb-3">
|
||||
Folder structure
|
||||
</h2>
|
||||
{tree.length > 0 ? (
|
||||
renderTree(tree, section as DocSection)
|
||||
) : (
|
||||
<p className="text-xs text-[#62666d]">No documents found.</p>
|
||||
)}
|
||||
</div>
|
||||
{tree.length > 0 ? (
|
||||
<div className="mb-12">
|
||||
<h2 className="text-xs font-medium text-[#8a8f98] uppercase mb-3 tracking-wider">
|
||||
Folder structure
|
||||
</h2>
|
||||
{renderTree(tree, section)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-[#62666d] mb-8">No documents found in this section.</p>
|
||||
)}
|
||||
|
||||
{sectionDocs.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-sm font-medium text-[#d0d6e0] uppercase mb-3">
|
||||
All documents ({sectionDocs.length})
|
||||
<h2 className="text-xs font-medium text-[#8a8f98] uppercase mb-3 tracking-wider">
|
||||
Recently updated
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{sectionDocs
|
||||
{[...sectionDocs]
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
|
||||
@@ -164,10 +190,17 @@ export default async function SectionIndexPage({
|
||||
<Link
|
||||
key={d.slug}
|
||||
href={`/${d.slug}`}
|
||||
className="block text-sm text-[#d0d6e0] hover:text-[#7170ff] transition-colors line-clamp-1"
|
||||
title={d.title}
|
||||
className="group flex items-center justify-between gap-3 py-2 border-b border-[#141516] last:border-0"
|
||||
>
|
||||
{d.title}
|
||||
<span className="text-sm text-[#d0d6e0] group-hover:text-[#7170ff] transition-colors line-clamp-1">
|
||||
{d.title}
|
||||
</span>
|
||||
<time className="text-xs text-[#62666d] flex-shrink-0">
|
||||
{new Date(d.updatedAt).toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})}
|
||||
</time>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -42,31 +42,40 @@ export default function DocForm({
|
||||
const [status, setStatus] = useState(initial?.status ?? "published");
|
||||
const [tags, setTags] = useState(initial?.tags?.join(", ") ?? "");
|
||||
const [author, setAuthor] = useState(initial?.author ?? "");
|
||||
const [parentFolder, setParentFolder] = useState("");
|
||||
|
||||
// Dynamic custom fields — content creators can add any metadata they want
|
||||
// Extract existing custom fields from initial for edit mode
|
||||
const [customFields, setCustomFields] = useState<
|
||||
Array<{ key: string; value: string }>
|
||||
>([]);
|
||||
|
||||
// Parent folder selection (hierarchical structure like GitHub folders)
|
||||
const [parentFolder, setParentFolder] = useState("");
|
||||
>(() => {
|
||||
if (initial?.extraFields) {
|
||||
return Object.entries(initial.extraFields)
|
||||
.filter(([k, v]) => k !== "slug" && v !== undefined && v !== null)
|
||||
.map(([k, v]) => ({ key: k, value: typeof v === "string" ? v : JSON.stringify(v) }))
|
||||
.filter((f) => f.value);
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const tagList = tags
|
||||
.split(",")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
// For edit mode, slug is fixed (full path). For create mode, build from folder + slugInput.
|
||||
const isEdit = mode === "edit";
|
||||
const effectiveSlug = isEdit ? (slug ?? "") : parentFolder
|
||||
? `${parentFolder}/${slugInput}`.replace(/^\/+/, "").replace(/\/+/g, "/")
|
||||
: slugInput;
|
||||
const effectiveSlug = isEdit
|
||||
? (slug ?? "")
|
||||
: parentFolder
|
||||
? `${parentFolder}/${slugInput}`.replace(/^\/+/, "").replace(/\/+/g, "/")
|
||||
: slugInput;
|
||||
|
||||
const availableFolders = existingFolders?.[section] ?? [];
|
||||
|
||||
const baseInputCls =
|
||||
"w-full px-3 py-2 bg-[#0f1011] border border-[#23252a] rounded text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2]";
|
||||
|
||||
const baseSelectCls = baseInputCls;
|
||||
|
||||
function addCustomField() {
|
||||
setCustomFields([...customFields, { key: "", value: "" }]);
|
||||
}
|
||||
@@ -92,7 +101,6 @@ export default function DocForm({
|
||||
return;
|
||||
}
|
||||
|
||||
// Build payload with custom fields flattened at top level
|
||||
const payload: Record<string, unknown> = {
|
||||
title,
|
||||
body,
|
||||
@@ -104,7 +112,6 @@ export default function DocForm({
|
||||
tags: tagList,
|
||||
};
|
||||
|
||||
// Merge dynamic custom fields
|
||||
for (const field of customFields) {
|
||||
if (field.key.trim() && field.value.trim()) {
|
||||
payload[field.key.trim()] = field.value.trim();
|
||||
@@ -156,6 +163,7 @@ export default function DocForm({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
Title
|
||||
@@ -169,6 +177,7 @@ export default function DocForm({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Section + Type + Status */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
@@ -177,7 +186,7 @@ export default function DocForm({
|
||||
<select
|
||||
value={section}
|
||||
onChange={(e) => setSection(e.target.value as typeof section)}
|
||||
className={baseInputCls}
|
||||
className={baseSelectCls}
|
||||
disabled={isEdit}
|
||||
>
|
||||
{SECTION_OPTIONS.map((s) => (
|
||||
@@ -194,7 +203,7 @@ export default function DocForm({
|
||||
<select
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value as typeof type)}
|
||||
className={baseInputCls}
|
||||
className={baseSelectCls}
|
||||
>
|
||||
{TYPE_OPTIONS.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
@@ -210,7 +219,7 @@ export default function DocForm({
|
||||
<select
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value as typeof status)}
|
||||
className={baseInputCls}
|
||||
className={baseSelectCls}
|
||||
>
|
||||
<option value="published">Published</option>
|
||||
<option value="draft">Draft</option>
|
||||
@@ -218,90 +227,91 @@ export default function DocForm({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
Parent folder (optional)
|
||||
</label>
|
||||
<select
|
||||
value={parentFolder}
|
||||
onChange={(e) => setParentFolder(e.target.value)}
|
||||
className={baseInputCls}
|
||||
disabled={isEdit}
|
||||
>
|
||||
<option value="">(root of section)</option>
|
||||
{availableFolders.map((folder) => (
|
||||
<option key={folder} value={folder}>
|
||||
{folder}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="text-xs text-[#62666d] mt-1">
|
||||
Place this document inside an existing folder. The slug will be
|
||||
prepended with the folder path (e.g. selecting "ctf/defcon-quals-2024"
|
||||
+ slug "pwn-100" → "ctf/defcon-quals-2024/pwn-100").
|
||||
</p>
|
||||
{/* Folder + Slug */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
Parent folder (optional)
|
||||
</label>
|
||||
<select
|
||||
value={parentFolder}
|
||||
onChange={(e) => setParentFolder(e.target.value)}
|
||||
className={baseSelectCls}
|
||||
disabled={isEdit}
|
||||
>
|
||||
<option value="">(root of section)</option>
|
||||
{availableFolders.map((folder) => (
|
||||
<option key={folder} value={folder}>
|
||||
{folder}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="text-xs text-[#62666d] mt-1">
|
||||
Place inside an existing folder.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
{isEdit ? "Full slug" : "Slug (file name)"}
|
||||
</label>
|
||||
{isEdit ? (
|
||||
<input
|
||||
type="text"
|
||||
value={slug ?? ""}
|
||||
readOnly
|
||||
className="w-full px-3 py-2 bg-[#191a1b] border border-[#23252a] rounded text-[#8a8f98]"
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
value={slugInput}
|
||||
onChange={(e) => setSlugInput(e.target.value)}
|
||||
className={baseInputCls}
|
||||
placeholder="my-document-slug"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
<p className="text-xs text-[#62666d] mt-1">
|
||||
Resolved: <code className="bg-[#191a1b] px-1 py-0.25 rounded">{effectiveSlug || section}</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
{isEdit ? "Full slug (read-only)" : "Slug (file name)"}
|
||||
</label>
|
||||
{isEdit ? (
|
||||
{/* Tags + Author */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
Tags
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={slug ?? ""}
|
||||
readOnly
|
||||
className="w-full px-3 py-2 bg-[#191a1b] border border-[#23252a] rounded text-[#8a8f98]"
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
value={slugInput}
|
||||
onChange={(e) => setSlugInput(e.target.value)}
|
||||
value={tags}
|
||||
onChange={(e) => setTags(e.target.value)}
|
||||
className={baseInputCls}
|
||||
placeholder="my-document-slug"
|
||||
required
|
||||
placeholder="comma, separated, tags"
|
||||
/>
|
||||
)}
|
||||
<p className="text-xs text-[#62666d] mt-1">
|
||||
Resolved path: <code>{effectiveSlug || section}</code>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
Author
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={author}
|
||||
onChange={(e) => setAuthor(e.target.value)}
|
||||
className={baseInputCls}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
Tags
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={tags}
|
||||
onChange={(e) => setTags(e.target.value)}
|
||||
className={baseInputCls}
|
||||
placeholder="comma, separated, tags"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
Author
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={author}
|
||||
onChange={(e) => setAuthor(e.target.value)}
|
||||
className={baseInputCls}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dynamic custom fields — creators add whatever metadata they need */}
|
||||
{/* Custom fields */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-2">
|
||||
Custom metadata fields
|
||||
</label>
|
||||
<p className="text-xs text-[#62666d] mb-3">
|
||||
Add extra frontmatter fields. Content creators name and define their own
|
||||
metadata here — the system auto-renders any field as a badge on the doc
|
||||
page based on its value.
|
||||
Add extra frontmatter fields. Any field you add will be rendered as
|
||||
an auto-styled badge on the doc page based on its value.
|
||||
</p>
|
||||
{customFields.length > 0 && (
|
||||
<div className="space-y-3 mb-3">
|
||||
@@ -309,17 +319,17 @@ export default function DocForm({
|
||||
<div key={i} className="flex gap-2 items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="field name (e.g. event)"
|
||||
placeholder="field name"
|
||||
value={field.key}
|
||||
onChange={(e) => updateCustomField(i, "key", e.target.value)}
|
||||
className="flex-1 px-3 py-2 bg-[#0f1011] border border-[#23252a] rounded text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2]"
|
||||
className={baseInputCls}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="value"
|
||||
value={field.value}
|
||||
onChange={(e) => updateCustomField(i, "value", e.target.value)}
|
||||
className="flex-1 px-3 py-2 bg-[#0f1011] border border-[#23252a] rounded text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2]"
|
||||
className={baseInputCls}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@@ -341,6 +351,7 @@ export default function DocForm({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[#d0d6e0] mb-1">
|
||||
Body (Markdown)
|
||||
@@ -353,6 +364,7 @@ export default function DocForm({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
@@ -19,91 +19,100 @@ const SECTIONS = [
|
||||
] as const;
|
||||
|
||||
/**
|
||||
* Build a hierarchical folder tree from a flat list of documents.
|
||||
* Each doc's slug is like "section/sub/sub2/leaf-name".
|
||||
* The tree groups by path segments so the sidebar shows nested folders
|
||||
* with proper indentation (like GitHub's file tree).
|
||||
* Build a hierarchical folder tree from flat document slugs.
|
||||
* Each node is either a folder (has children) or a leaf doc.
|
||||
*/
|
||||
interface TreeNode {
|
||||
name: string;
|
||||
slug: string;
|
||||
title: string;
|
||||
children: TreeNode[];
|
||||
isLeaf: boolean;
|
||||
docCount: number; // total docs in subtree
|
||||
}
|
||||
|
||||
function buildFolderTree(docs: Doc[]): Record<string, TreeNode> {
|
||||
// Returns a map from section id → tree root for that section.
|
||||
const result: Record<string, TreeNode> = {};
|
||||
function buildFolderTree(docs: Doc[], section: string): TreeNode[] {
|
||||
const root: TreeNode[] = [];
|
||||
|
||||
for (const section of SECTIONS) {
|
||||
const sectionDocs = docs.filter((d) => d.section === section.id);
|
||||
const root: TreeNode = {
|
||||
name: section.id,
|
||||
slug: section.id,
|
||||
title: section.label,
|
||||
children: [],
|
||||
};
|
||||
const nodeMap = new Map<string, TreeNode>();
|
||||
nodeMap.set(section.id, root);
|
||||
for (const doc of docs.filter((d) => d.section === section)) {
|
||||
const parts = doc.slug.split("/");
|
||||
// parts[0] should be the section
|
||||
let current = root;
|
||||
|
||||
for (const doc of sectionDocs) {
|
||||
// slug is like "docs/websocket/contract" → parts after section
|
||||
const parts = doc.slug.split("/");
|
||||
// parts[0] should be the section
|
||||
let current = root;
|
||||
for (let i = 1; i < parts.length; i++) {
|
||||
const part = parts[i];
|
||||
const isLeaf = i === parts.length - 1;
|
||||
|
||||
for (let i = 1; i < parts.length; i++) {
|
||||
const part = parts[i];
|
||||
const path = parts.slice(0, i + 1).join("/");
|
||||
const isLeaf = i === parts.length - 1;
|
||||
|
||||
let child = current.children.find((n) => n.name === part);
|
||||
if (!child) {
|
||||
child = {
|
||||
name: part,
|
||||
slug: path,
|
||||
title: isLeaf ? doc.title : part,
|
||||
children: [],
|
||||
};
|
||||
current.children.push(child);
|
||||
nodeMap.set(path, child);
|
||||
} else if (isLeaf) {
|
||||
child.title = doc.title;
|
||||
}
|
||||
current = child;
|
||||
let node = current.find((n) => n.name === part);
|
||||
if (!node) {
|
||||
node = {
|
||||
name: part,
|
||||
slug: parts.slice(0, i + 1).join("/"),
|
||||
title: "",
|
||||
children: [],
|
||||
isLeaf: false,
|
||||
docCount: 0,
|
||||
};
|
||||
current.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
root.children.sort((a, b) => {
|
||||
// Folders first, then docs
|
||||
if (isLeaf) {
|
||||
node.isLeaf = true;
|
||||
node.title = doc.title;
|
||||
} else if (!node.title) {
|
||||
node.title = part
|
||||
.split(/[-_]/)
|
||||
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
||||
.join(" ");
|
||||
}
|
||||
current = node.children;
|
||||
}
|
||||
}
|
||||
|
||||
// Recursively compute docCount
|
||||
function countDocs(node: TreeNode): number {
|
||||
if (node.isLeaf) return 1;
|
||||
return node.children.reduce((sum, child) => sum + countDocs(child), 0);
|
||||
}
|
||||
|
||||
for (const node of root) {
|
||||
node.docCount = countDocs(node);
|
||||
}
|
||||
|
||||
// Sort: folders first, then docs, alphabetically
|
||||
function sortNodes(nodes: TreeNode[]): TreeNode[] {
|
||||
return nodes.sort((a, b) => {
|
||||
const aFolder = a.children.length > 0 ? 0 : 1;
|
||||
const bFolder = b.children.length > 0 ? 0 : 1;
|
||||
if (aFolder !== bFolder) return aFolder - bFolder;
|
||||
return a.name.localeCompare(b.name);
|
||||
return a.title.localeCompare(b.title);
|
||||
});
|
||||
|
||||
result[section.id] = root;
|
||||
}
|
||||
for (const node of root) {
|
||||
sortNodes(node.children);
|
||||
}
|
||||
|
||||
return result;
|
||||
return sortNodes(root);
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively render the folder tree with indentation.
|
||||
* depth = 0 is the top-level items under a section.
|
||||
* Recursively render the folder tree with proper depth styling.
|
||||
*/
|
||||
function renderTreeNode(node: TreeNode, depth: number, pathname: string) {
|
||||
function renderTreeNode(
|
||||
node: TreeNode,
|
||||
depth: number,
|
||||
pathname: string,
|
||||
): React.ReactElement {
|
||||
const isFolder = node.children.length > 0;
|
||||
const isActive = pathname === `/${node.slug}`;
|
||||
const hasActiveChild = pathname.startsWith(`/${node.slug}/`);
|
||||
|
||||
const indent = depth * 12; // 12px per level
|
||||
const indent = depth * 16; // 16px per level
|
||||
|
||||
return (
|
||||
<li key={node.slug}>
|
||||
<Link
|
||||
href={`/${node.slug}`}
|
||||
className={`flex items-center gap-1.5 text-xs py-0.5 rounded transition-all ${
|
||||
className={`flex items-center gap-1.5 text-xs py-1 px-2 rounded transition-all ${
|
||||
isActive
|
||||
? "text-[#7170ff] bg-[#191a1b]"
|
||||
: hasActiveChild
|
||||
@@ -114,10 +123,15 @@ function renderTreeNode(node: TreeNode, depth: number, pathname: string) {
|
||||
title={node.title}
|
||||
>
|
||||
<span>{isFolder ? "📁" : "📄"}</span>
|
||||
{node.title || node.name}
|
||||
<span className="truncate">{node.title || node.name}</span>
|
||||
{isFolder && node.docCount > 0 && (
|
||||
<span className="ml-auto text-[#62666d] bg-[#191a1b] px-1 py-0 rounded">
|
||||
{node.docCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
{node.children && node.children.length > 0 && (
|
||||
<ul>
|
||||
{node.children.length > 0 && (
|
||||
<ul className="mt-0.5">
|
||||
{node.children.map((child) => renderTreeNode(child, 0, pathname))}
|
||||
</ul>
|
||||
)}
|
||||
@@ -141,64 +155,33 @@ export default function Sidebar() {
|
||||
.catch(() => setDocs([]));
|
||||
}, []);
|
||||
|
||||
const tree = buildFolderTree(docs);
|
||||
|
||||
// Flatten all docs count for display
|
||||
const totalDocs = docs.length;
|
||||
|
||||
return (
|
||||
<nav className="h-full overflow-y-auto py-6">
|
||||
<div className="mb-4 px-3">
|
||||
<span className="text-xs text-[#62666d] uppercase">
|
||||
{totalDocs} documents · {SECTIONS.length} sections
|
||||
{docs.length} documents
|
||||
</span>
|
||||
</div>
|
||||
<ul className="space-y-0.5 px-3">
|
||||
<ul className="space-y-2 px-3 text-sm">
|
||||
{SECTIONS.map(({ id, label, icon }) => {
|
||||
const treeRoot = tree[id];
|
||||
const sectionDocs = docs.filter((d) => d.section === id);
|
||||
if (sectionDocs.length === 0) return null;
|
||||
|
||||
const isActive = pathname.startsWith(`/${id}`);
|
||||
const tree = buildFolderTree(docs, id);
|
||||
const isActive = pathname === `/${id}` || pathname.startsWith(`/${id}/`);
|
||||
|
||||
return (
|
||||
<li key={id}>
|
||||
<div
|
||||
className={`text-xs font-medium mb-1 flex items-center gap-1.5 ${
|
||||
className={`flex items-center gap-1.5 mb-1 mt-4 first:mt-0 ${
|
||||
isActive ? "text-[#7170ff]" : "text-[#62666d]"
|
||||
}`}
|
||||
>
|
||||
<span>{icon}</span>
|
||||
{label}
|
||||
<span className="text-xs font-medium">{label}</span>
|
||||
</div>
|
||||
<ul className="space-y-0.5">
|
||||
{treeRoot && treeRoot.children.length > 0
|
||||
? treeRoot.children.map((node) =>
|
||||
renderTreeNode(node, 0, pathname),
|
||||
)
|
||||
: sectionDocs.map((doc) => {
|
||||
const parts = doc.slug.split("/").slice(1);
|
||||
const label = parts[parts.length - 1]
|
||||
.split(/[-_]/)
|
||||
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
||||
.join(" ");
|
||||
const isDocActive = pathname === `/${doc.slug}`;
|
||||
return (
|
||||
<li key={doc.slug}>
|
||||
<Link
|
||||
href={`/${doc.slug}`}
|
||||
className={`flex items-center gap-1.5 text-xs py-0.5 rounded transition-all ${
|
||||
isDocActive
|
||||
? "text-[#7170ff] bg-[#191a1b]"
|
||||
: "text-[#d0d6e0] hover:text-[#f7f8f8] hover:bg-[#191a1b]"
|
||||
}`}
|
||||
title={doc.title}
|
||||
>
|
||||
<span>📄</span>
|
||||
{label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<ul className="space-y-0.5 pl-0">
|
||||
{tree.map((node) => renderTreeNode(node, 0, pathname))}
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user