feat(core): dynamic custom frontmatter fields for CTF writeup metadata

- Add extra_fields JSONB column to documents table (migration 0003)
- CreateDocInput/UpdateDocInput: extraFields?: Record<string, string>
- parseFile: extracts non-standard frontmatter keys as extraFields
- stringifyFile: writes extraFields dynamically to YAML frontmatter
- toMeta: spreads extraFields from DB row into DocumentMeta
- DocForm: '+ Add field' UI for content creators to add any metadata
- API routes: splitPayload() separates standard vs custom fields
- Doc page: CustomFieldBadges dynamically renders any custom field
- Add db:migrate / db:push scripts + deploy workflow migration step
- Add CTF writeup template (content/writeups/ctf/template/)
- Add sample DEF CON writeup with event/challenge/category/difficulty/points
- Add @tailwindcss/typography for table rendering (prose classes)
- Add remark-gfm for GitHub Flavored Markdown table parsing

apps/web/app/[section]/[...slug]/page.tsx

@@ -29,6 +29,71 @@ const SECTION_ICON: Record<string, string> = {
   notes: "📌",
 };
 
+/**
+ * Render any extra/custom frontmatter fields as 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.
+ */
+function CustomFieldBadges({
+  doc,
+  standardKeys,
+}: {
+  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]) => !standardKeys.has(k) && v !== undefined && v !== null && v !== "" && !k.startsWith("_"),
+  );
+
+  if (customEntries.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 mt-3">
+      {customEntries.map(([key, value]) => {
+        const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");
+        let colorClass = "bg-[#191a1b] border-[#23252a] text-[#d0d6e0]";
+        let prefix = "";
+
+        // Auto-style common CTF fields based on key name
+        if (key === "points") {
+          prefix = "pts";
+          colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
+        } else if (key === "difficulty" || key === "level") {
+          const v = String(value).toLowerCase();
+          if (v === "easy")
+            colorClass = "bg-green-500/10 border-green-500/30 text-green-400";
+          else if (v === "medium")
+            colorClass = "bg-yellow-500/10 border-yellow-500/30 text-yellow-400";
+          else if (v === "hard")
+            colorClass = "bg-red-500/10 border-red-500/30 text-red-400";
+          else
+            colorClass = "bg-[#191a1b] border-[#23252a] text-[#d0d6e0]";
+        } else if (key === "event" || key === "category") {
+          colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
+        }
+
+        const displayValue = Array.isArray(value)
+          ? value.join(", ")
+          : typeof value === "object"
+            ? JSON.stringify(value)
+            : String(value);
+
+        return (
+          <span
+            key={key}
+            className={`px-2 py-0.5 border rounded text-xs ${colorClass}`}
+          >
+            {prefix ? `${displayValue} ${prefix}` : `${label}: ${displayValue}`}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
 export default async function DocPage({ params, searchParams }: DocPageProps) {
   const { section, slug } = await params;
   const { edit } = await searchParams;
@@ -39,6 +104,13 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
   const cookieStore = await cookies();
   const canEdit = cookieStore.get("mcpedia_admin")?.value != null;
 
+  // Standard frontmatter keys that are rendered explicitly in the template.
+  // Any other key in the document metadata becomes a dynamic badge.
+  const STANDARD_KEYS = new Set([
+    "id", "slug", "title", "type", "section", "status",
+    "author", "tags", "path", "createdAt", "updatedAt",
+  ]);
+
   // Edit mode: inline form
   if (edit === "1" && canEdit) {
     return (
@@ -106,7 +178,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
           {doc.title}
         </h1>
 
-        <div className="flex flex-wrap items-center gap-3 text-xs text-[#62666d] mb-6">
+        <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}>
@@ -125,6 +197,9 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
             </span>
           ))}
         </div>
+
+        {/* Dynamic custom field badges — content creator controls what shows */}
+        <CustomFieldBadges doc={{ ...doc }} standardKeys={STANDARD_KEYS} />
       </div>
 
       {/* Content + TOC */}

apps/web/app/api/docs/[...slug]/route.ts

@@ -17,6 +17,27 @@ function unauthorized() {
   return NextResponse.json({ ok: false, error: "Unauthorized" }, { status: 401 });
 }
 
+const STANDARD_FIELDS = new Set([
+  "title", "body", "type", "status",
+  "author", "tags", "createdAt", "updatedAt", "id", "path", "slug",
+]);
+
+function splitPayload(body: Record<string, unknown>): {
+  standard: Record<string, unknown>;
+  extraFields: Record<string, string>;
+} {
+  const standard: Record<string, unknown> = {};
+  const extraFields: Record<string, string> = {};
+  for (const [key, value] of Object.entries(body)) {
+    if (STANDARD_FIELDS.has(key)) {
+      standard[key] = value;
+    } else if (value !== undefined && value !== null) {
+      extraFields[key] = typeof value === "string" ? value : JSON.stringify(value);
+    }
+  }
+  return { standard, extraFields };
+}
+
 // PUT /api/docs/{slug...} — Update an existing document.
 export async function PUT(
   req: NextRequest,
@@ -35,7 +56,8 @@ export async function PUT(
   }
 
   try {
-    const doc = await updateDocument(fullSlug, body);
+    const { standard, extraFields } = splitPayload(body);
+    const doc = await updateDocument(fullSlug, { ...standard, extraFields } as any);
     return NextResponse.json({ ok: true, slug: doc.slug, doc });
   } catch (err) {
     const msg = err instanceof Error ? err.message : String(err);

apps/web/app/api/docs/route.ts

@@ -24,6 +24,33 @@ function unauthorized() {
   return NextResponse.json({ ok: false, error: "Unauthorized" }, { status: 401 });
 }
 
+// Standard DocumentMeta field names — NOT custom fields.
+const STANDARD_FIELDS = new Set([
+  "slug", "title", "body", "section", "type", "status",
+  "author", "tags", "createdAt", "updatedAt", "id", "path",
+]);
+
+/**
+ * Separate a flat payload into standard CRUD fields + extraFields (custom metadata).
+ * The DocForm sends all fields flat — any key not in STANDARD_FIELDS becomes an
+ * entry in extraFields, which is stored as JSONB in the documents table.
+ */
+function splitPayload(body: Record<string, unknown>): {
+  standard: Record<string, unknown>;
+  extraFields: Record<string, unknown>;
+} {
+  const standard: Record<string, unknown> = {};
+  const extraFields: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(body)) {
+    if (STANDARD_FIELDS.has(key)) {
+      standard[key] = value;
+    } else {
+      extraFields[key] = value;
+    }
+  }
+  return { standard, extraFields };
+}
+
 // GET /api/docs — list all documents (for sidebar navigation).
 export async function GET() {
   const docs = await listDocuments();
@@ -36,11 +63,19 @@ export async function POST(req: NextRequest) {
 
   const body = await req.json().catch(() => null);
   if (!body) {
-    return NextResponse.json({ ok: false, error: "Invalid JSON body" }, { status:400 });
+    return NextResponse.json({ ok: false, error: "Invalid JSON body" }, { status: 400 });
   }
 
   try {
-    const doc = await createDocument(body);
+    const { standard, extraFields } = splitPayload(body);
+    // Coerce all extra field values to strings (form sends strings; API/MCP may send objects).
+    const stringExtra: Record<string, string> = {};
+    for (const [k, v] of Object.entries(extraFields)) {
+      if (v !== undefined && v !== null) {
+        stringExtra[k] = typeof v === "string" ? v : JSON.stringify(v);
+      }
+    }
+    const doc = await createDocument({ ...standard, extraFields: stringExtra } as any);
     return NextResponse.json({ ok: true, slug: doc.slug, doc });
   } catch (err) {
     const msg = err instanceof Error ? err.message : String(err);

apps/web/app/components/DocForm.tsx

@@ -34,6 +34,12 @@ export default function DocForm({ mode, slug, secret, initial }: DocFormProps) {
   const [tags, setTags] = useState(initial?.tags?.join(", ") ?? "");
   const [author, setAuthor] = useState(initial?.author ?? "");
 
+  // Dynamic custom fields — content creators can add any metadata they want
+  // (e.g. CTF: event, challenge, category, difficulty, points, team_name, ...)
+  const [customFields, setCustomFields] = useState<
+    Array<{ key: string; value: string }>
+  >([]);
+
   const tagList = tags
     .split(",")
     .map((t) => t.trim())
@@ -42,27 +48,68 @@ export default function DocForm({ mode, slug, secret, initial }: DocFormProps) {
   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]";
 
+  function addCustomField() {
+    setCustomFields([...customFields, { key: "", value: "" }]);
+  }
+
+  function updateCustomField(index: number, field: "key" | "value", value: string) {
+    const updated = [...customFields];
+    updated[index][field] = value;
+    setCustomFields(updated);
+  }
+
+  function removeCustomField(index: number) {
+    setCustomFields(customFields.filter((_, i) => i !== index));
+  }
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setLoading(true);
     setError(null);
 
-    const payload = { title, body, section, type, status, author, tags: tagList };
+    // Build payload with custom fields flattened at top level
+    const payload: Record<string, unknown> = {
+      title,
+      body,
+      section,
+      type,
+      status,
+      author,
+      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();
+      }
+    }
 
     try {
       let res: Response;
       if (mode === "create") {
-        const slugVal = slug ?? title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+        const slugVal =
+          slug ??
+          title
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, "-")
+            .replace(/^-+|-+$/g, "");
         res = await fetch("/api/docs", {
           method: "POST",
-          headers: { "Content-Type": "application/json", "x-webhook-secret": secret },
+          headers: {
+            "Content-Type": "application/json",
+            "x-webhook-secret": secret,
+          },
           body: JSON.stringify({ slug: slugVal, ...payload }),
         });
       } else {
         const editSlug = slug ?? "";
         res = await fetch(`/api/docs/${editSlug}`, {
           method: "PUT",
-          headers: { "Content-Type": "application/json", "x-webhook-secret": secret },
+          headers: {
+            "Content-Type": "application/json",
+            "x-webhook-secret": secret,
+          },
           body: JSON.stringify(payload),
         });
       }
@@ -90,12 +137,22 @@ export default function DocForm({ mode, slug, secret, initial }: DocFormProps) {
       )}
 
       <div>
-        <label className="block text-xs font-medium text-[#d0d6e0] mb-1">Title</label>
-        <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} className={baseInputCls} required />
+        <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+          Title
+        </label>
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          className={baseInputCls}
+          required
+        />
       </div>
 
       <div>
-        <label className="block text-xs font-medium text-[#d0d6e0] mb-1">Slug</label>
+        <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+          Slug
+        </label>
         <input
           type="text"
           value={slug ?? ""}
@@ -103,29 +160,53 @@ export default function DocForm({ mode, slug, secret, initial }: DocFormProps) {
           className="w-full px-3 py-2 bg-[#191a1b] border border-[#23252a] rounded text-[#8a8f98]"
           placeholder={section}
         />
-        <p className="text-xs text-[#62666d] mt-1">URL-safe path under the section.</p>
+        <p className="text-xs text-[#62666d] mt-1">
+          URL-safe path under the section.
+        </p>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">Section</label>
-          <select value={section} onChange={(e) => setSection(e.target.value as typeof section)} className={baseInputCls}>
+          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+            Section
+          </label>
+          <select
+            value={section}
+            onChange={(e) => setSection(e.target.value as typeof section)}
+            className={baseInputCls}
+          >
             {SECTION_OPTIONS.map((s) => (
-              <option key={s} value={s}>{s}</option>
+              <option key={s} value={s}>
+                {s}
+              </option>
             ))}
           </select>
         </div>
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">Type</label>
-          <select value={type} onChange={(e) => setType(e.target.value as typeof type)} className={baseInputCls}>
+          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+            Type
+          </label>
+          <select
+            value={type}
+            onChange={(e) => setType(e.target.value as typeof type)}
+            className={baseInputCls}
+          >
             {TYPE_OPTIONS.map((t) => (
-              <option key={t} value={t}>{t}</option>
+              <option key={t} value={t}>
+                {t}
+              </option>
             ))}
           </select>
         </div>
         <div>
-          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">Status</label>
-          <select value={status} onChange={(e) => setStatus(e.target.value as typeof status)} className={baseInputCls}>
+          <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+            Status
+          </label>
+          <select
+            value={status}
+            onChange={(e) => setStatus(e.target.value as typeof status)}
+            className={baseInputCls}
+          >
             <option value="published">Published</option>
             <option value="draft">Draft</option>
           </select>
@@ -133,17 +214,88 @@ export default function DocForm({ mode, slug, secret, initial }: DocFormProps) {
       </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" />
+        <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} />
+        <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 */}
+      <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. These will be stored in the document's
+          YAML frontmatter and rendered as badges on the doc page. Examples for
+          CTF writeups: <code className="text-[#7170ff]">event</code>,{" "}
+          <code className="text-[#7170ff]">challenge</code>,{" "}
+          <code className="text-[#7170ff]">category</code>,{" "}
+          <code className="text-[#7170ff]">difficulty</code>,{" "}
+          <code className="text-[#7170ff]">points</code>.
+        </p>
+        {customFields.length > 0 && (
+          <div className="space-y-3 mb-3">
+            {customFields.map((field, i) => (
+              <div key={i} className="flex gap-2 items-center">
+                <input
+                  type="text"
+                  placeholder="field name (e.g. event)"
+                  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]"
+                />
+                <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]"
+                />
+                <button
+                  type="button"
+                  onClick={() => removeCustomField(i)}
+                  className="text-xs text-[#fca5a5] hover:text-[#ff6b6b] px-2 py-1 rounded hover:bg-[#191a1b] transition-colors"
+                >
+                  ✕
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+        <button
+          type="button"
+          onClick={addCustomField}
+          className="text-xs text-[#7170ff] hover:text-[#828fff] px-3 py-1.5 rounded border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 transition-colors"
+        >
+          + Add field
+        </button>
       </div>
 
       <div>
-        <label className="block text-xs font-medium text-[#d0d6e0] mb-1">Body (Markdown)</label>
+        <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+          Body (Markdown)
+        </label>
         <textarea
           value={body}
           onChange={(e) => setBody(e.target.value)}