npm - forgedev - Versions diffs - 1.1.3 → 1.3.0 - Mend

forgedev 1.1.3 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/templates/docs-portal/fastapi/backend/app/portal/html_renderer.py ADDED Viewed

@@ -0,0 +1,229 @@
+"""Renders portal pages as self-contained HTML. No external template engine required."""
+from __future__ import annotations
+from html import escape as esc
+from typing import TYPE_CHECKING
+if TYPE_CHECKING:
+    from app.portal.docs_reader import DocCategory, DocFile
+def _base(title: str, project: str, categories: list[DocCategory], content: str) -> str:
+    title = esc(title)
+    project = esc(project)
+    nav_items = []
+    for cat in categories:
+        dropdown_links = "".join(
+            f'<a href="/portal/{esc(cat.id)}/{esc(d["slug"])}" class="dropdown-item">{esc(d["title"])}</a>'
+            for d in cat.docs
+        )
+        nav_items.append(f"""
+            <div class="nav-dropdown">
+                <button class="nav-btn" aria-haspopup="true" aria-expanded="false">{esc(cat.icon)} {esc(cat.label)} ▾</button>
+                <div class="dropdown-content" role="menu">{dropdown_links}</div>
+            </div>
+        """)
+    nav_html = "".join(nav_items)
+    return f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{title} — {project}</title>
+    <style>
+        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
+        body {{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1a1a1a; background: #f8f9fa; }}
+        /* Header */
+        .header {{ background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 40; }}
+        .header-inner {{ max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 64px; }}
+        .logo {{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: #1a1a1a; font-weight: 600; font-size: 16px; }}
+        .logo-icon {{ width: 32px; height: 32px; background: #1a1a1a; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }}
+        .back-link {{ font-size: 14px; color: #6b7280; text-decoration: none; }}
+        .back-link:hover {{ color: #374151; }}
+        /* Nav */
+        .nav {{ display: flex; align-items: center; gap: 4px; }}
+        .nav a.overview {{ padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #4b5563; text-decoration: none; }}
+        .nav a.overview:hover {{ background: #f3f4f6; color: #1a1a1a; }}
+        .nav-dropdown {{ position: relative; }}
+        .nav-btn {{ padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #4b5563; background: none; border: none; cursor: pointer; }}
+        .nav-btn:hover {{ background: #f3f4f6; color: #1a1a1a; }}
+        .dropdown-content {{ display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 240px; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.1); border: 1px solid #e5e7eb; padding: 8px 0; z-index: 50; }}
+        .nav-dropdown:hover .dropdown-content {{ display: block; }}
+        .dropdown-item {{ display: block; padding: 10px 16px; font-size: 14px; color: #374151; text-decoration: none; }}
+        .dropdown-item:hover {{ background: #f3f4f6; color: #1a1a1a; }}
+        /* Content */
+        .content {{ max-width: 1200px; margin: 0 auto; padding: 32px 24px; }}
+        /* Cards */
+        .card-grid {{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }}
+        .card {{ background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 24px; transition: box-shadow .15s; }}
+        .card:hover {{ box-shadow: 0 4px 12px rgba(0,0,0,.08); }}
+        .card-icon {{ font-size: 28px; margin-bottom: 12px; }}
+        .card h2 {{ font-size: 18px; font-weight: 600; margin-bottom: 4px; }}
+        .card p {{ font-size: 14px; color: #6b7280; margin-bottom: 16px; }}
+        .card-link {{ display: block; font-size: 14px; color: #2563eb; text-decoration: none; padding: 2px 0; }}
+        .card-link:hover {{ color: #1d4ed8; }}
+        /* Doc article */
+        .article {{ background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 48px; max-width: 900px; margin: 0 auto; }}
+        .breadcrumb {{ font-size: 14px; color: #6b7280; margin-bottom: 24px; }}
+        .breadcrumb a {{ color: #6b7280; text-decoration: none; }}
+        .breadcrumb a:hover {{ color: #374151; }}
+        .doc-meta {{ font-size: 13px; color: #9ca3af; margin-top: 8px; }}
+        /* Rendered markdown */
+        .prose h1 {{ font-size: 28px; font-weight: 700; margin: 32px 0 16px; }}
+        .prose h1:first-child {{ margin-top: 0; }}
+        .prose h2 {{ font-size: 22px; font-weight: 600; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }}
+        .prose h3 {{ font-size: 18px; font-weight: 600; margin: 24px 0 8px; }}
+        .prose p {{ color: #374151; line-height: 1.7; margin: 12px 0; }}
+        .prose ul, .prose ol {{ margin: 12px 0; padding-left: 24px; color: #374151; }}
+        .prose li {{ margin: 6px 0; line-height: 1.6; }}
+        .prose a {{ color: #2563eb; text-decoration: underline; }}
+        .prose a:hover {{ color: #1d4ed8; }}
+        .prose code {{ background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 13px; }}
+        .prose pre {{ background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 16px 0; }}
+        .prose pre code {{ background: none; padding: 0; color: inherit; }}
+        .prose blockquote {{ border-left: 4px solid #bfdbfe; background: #eff6ff; padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; }}
+        .prose table {{ width: 100%; border-collapse: collapse; margin: 16px 0; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; }}
+        .prose th {{ background: #f9fafb; padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 600; color: #4b5563; text-transform: uppercase; letter-spacing: .05em; }}
+        .prose td {{ padding: 12px 16px; font-size: 14px; color: #374151; border-top: 1px solid #f3f4f6; }}
+        /* Recent list */
+        .recent {{ background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 24px; margin-top: 24px; }}
+        .recent h2 {{ font-size: 18px; font-weight: 600; margin-bottom: 16px; }}
+        .recent-item {{ display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid #f3f4f6; }}
+        .recent-item:first-of-type {{ border-top: none; }}
+        .recent-item a {{ font-size: 14px; font-weight: 500; color: #1a1a1a; text-decoration: none; }}
+        .recent-item a:hover {{ color: #2563eb; }}
+        .recent-item .meta {{ font-size: 12px; color: #9ca3af; }}
+        /* Empty state */
+        .empty {{ text-align: center; padding: 80px 24px; }}
+        .empty .icon {{ font-size: 48px; margin-bottom: 16px; }}
+        .empty h1 {{ font-size: 24px; font-weight: 700; margin-bottom: 8px; }}
+        .empty p {{ color: #6b7280; max-width: 400px; margin: 0 auto; }}
+        @media (max-width: 768px) {{
+            .card-grid {{ grid-template-columns: 1fr; }}
+            .article {{ padding: 24px; }}
+            .nav {{ display: none; }}
+        }}
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="header-inner">
+            <div style="display:flex;align-items:center;gap:24px;">
+                <a href="/portal" class="logo">
+                    <div class="logo-icon">{esc(project[0]) if project else "?"}</div>
+                    {project}
+                </a>
+                <nav class="nav">
+                    <a href="/portal" class="overview">Overview</a>
+                    {nav_html}
+                </nav>
+            </div>
+            <a href="/docs" class="back-link">API docs</a>
+        </div>
+    </header>
+    <div class="content">
+        {content}
+    </div>
+</body>
+</html>"""
+def render_portal_home(categories: list[DocCategory], recent: list[DocFile], project: str) -> str:
+    if not categories:
+        content = """
+            <div class="empty">
+                <div class="icon">📄</div>
+                <h1>No documentation yet</h1>
+                <p>Documentation will appear here once it has been generated. Ask your development team to run the documentation generators.</p>
+            </div>
+        """
+        return _base("Portal", project, categories, content)
+    cards = ""
+    for cat in categories:
+        links = "".join(
+            f'<a href="/portal/{esc(cat.id)}/{esc(d["slug"])}" class="card-link">{esc(d["title"])}</a>'
+            for d in cat.docs
+        )
+        cards += f"""
+            <div class="card">
+                <div class="card-icon">{esc(cat.icon)}</div>
+                <h2>{esc(cat.label)}</h2>
+                <p>{esc(cat.description)}</p>
+                {links}
+            </div>
+        """
+    recent_items = ""
+    for doc in recent:
+        date_str = doc.last_modified.strftime("%b %d, %Y")
+        recent_items += f"""
+            <div class="recent-item">
+                <div>
+                    <a href="/portal/{esc(doc.category)}/{esc(doc.slug)}">{esc(doc.title)}</a>
+                    <span class="meta" style="margin-left:8px;">{esc(doc.category_label)}</span>
+                </div>
+                <span class="meta">{date_str}</span>
+            </div>
+        """
+    content = f"""
+        <h1 style="font-size:28px;font-weight:700;margin-bottom:8px;">Project Documentation</h1>
+        <p style="color:#6b7280;margin-bottom:24px;">Everything you need to know about this project — requirements, architecture, test results, and more.</p>
+        <div class="card-grid">{cards}</div>
+        <div class="recent">
+            <h2>Recently Updated</h2>
+            {recent_items}
+        </div>
+    """
+    return _base("Portal", project, categories, content)
+def render_category_page(cat: DocCategory, categories: list[DocCategory], project: str) -> str:
+    items = ""
+    for d in cat.docs:
+        items += f"""
+            <a href="/portal/{esc(cat.id)}/{esc(d["slug"])}" class="card" style="text-decoration:none;display:block;">
+                <h2 style="color:#1a1a1a;">{esc(d["title"])}</h2>
+            </a>
+        """
+    content = f"""
+        <div class="breadcrumb">
+            <a href="/portal">Portal</a> / <span>{esc(cat.label)}</span>
+        </div>
+        <h1 style="font-size:28px;font-weight:700;margin-bottom:8px;">{esc(cat.icon)} {esc(cat.label)}</h1>
+        <p style="color:#6b7280;margin-bottom:24px;">{esc(cat.description)}</p>
+        <div class="card-grid">{items}</div>
+    """
+    return _base(cat.label, project, categories, content)
+def render_doc_page(doc: DocFile, categories: list[DocCategory], project: str) -> str:
+    date_str = doc.last_modified.strftime("%B %d, %Y")
+    # doc.html is already rendered markdown — titles and metadata need escaping
+    content = f"""
+        <div class="article">
+            <div class="breadcrumb">
+                <a href="/portal">Portal</a> /
+                <a href="/portal/{esc(doc.category)}">{esc(doc.category_label)}</a> /
+                <span>{esc(doc.title)}</span>
+            </div>
+            <h1 style="font-size:28px;font-weight:700;margin-bottom:4px;">{esc(doc.title)}</h1>
+            <p class="doc-meta">Last updated {date_str}</p>
+            <hr style="margin:24px 0;border:none;border-top:1px solid #e5e7eb;">
+            <div class="prose">{doc.html}</div>
+        </div>
+    """
+    return _base(doc.title, project, categories, content)

package/templates/docs-portal/fastapi/backend/app/portal/router.py.template ADDED Viewed

@@ -0,0 +1,35 @@
+"""Portal routes — serves project documentation as HTML pages."""
+from fastapi import APIRouter, Request
+from fastapi.responses import HTMLResponse
+from app.portal.docs_reader import get_categories, get_doc, get_all_docs
+from app.portal.html_renderer import render_portal_home, render_category_page, render_doc_page
+router = APIRouter(prefix="/portal", tags=["portal"])
+@router.get("/", response_class=HTMLResponse)
+async def portal_home(request: Request):
+    categories = get_categories()
+    all_docs = get_all_docs()
+    recent = sorted(all_docs, key=lambda d: d.last_modified, reverse=True)[:5]
+    return render_portal_home(categories, recent, "{{PROJECT_NAME_PASCAL}}")
+@router.get("/{category}", response_class=HTMLResponse)
+async def category_page(category: str):
+    categories = get_categories()
+    cat = next((c for c in categories if c.id == category), None)
+    if not cat:
+        return HTMLResponse("<h1>Not found</h1>", status_code=404)
+    return render_category_page(cat, categories, "{{PROJECT_NAME_PASCAL}}")
+@router.get("/{category}/{slug}", response_class=HTMLResponse)
+async def doc_page(category: str, slug: str):
+    doc = get_doc(category, slug)
+    if not doc:
+        return HTMLResponse("<h1>Not found</h1>", status_code=404)
+    categories = get_categories()
+    return render_doc_page(doc, categories, "{{PROJECT_NAME_PASCAL}}")

package/templates/docs-portal/nextjs/src/app/portal/[category]/[slug]/page.tsx ADDED Viewed

@@ -0,0 +1,81 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { getCategories, getDoc } from '@/lib/docs';
+import { MarkdownRenderer } from '@/components/portal/markdown-renderer';
+export function generateStaticParams() {
+  const categories = getCategories();
+  const params: { category: string; slug: string }[] = [];
+  for (const cat of categories) {
+    for (const doc of cat.docs) {
+      params.push({ category: cat.id, slug: doc.slug });
+    }
+  }
+  return params;
+}
+export default async function DocPage({ params }: { params: Promise<{ category: string; slug: string }> }) {
+  const { category, slug } = await params;
+  const doc = getDoc(category, slug);
+  if (!doc) notFound();
+  const categories = getCategories();
+  const cat = categories.find((c) => c.id === category);
+  // Find prev/next docs within the same category
+  const catDocs = cat?.docs || [];
+  const currentIndex = catDocs.findIndex((d) => d.slug === slug);
+  const prevDoc = currentIndex > 0 ? catDocs[currentIndex - 1] : null;
+  const nextDoc = currentIndex < catDocs.length - 1 ? catDocs[currentIndex + 1] : null;
+  return (
+    <div className="max-w-4xl mx-auto">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-gray-500 mb-6">
+        <Link href="/portal" className="hover:text-gray-700 transition-colors">Portal</Link>
+        <span>/</span>
+        <Link href={`/portal/${category}`} className="hover:text-gray-700 transition-colors">
+          {doc.categoryLabel}
+        </Link>
+        <span>/</span>
+        <span className="text-gray-900">{doc.title}</span>
+      </div>
+      {/* Document */}
+      <article className="bg-white rounded-xl border border-gray-200 p-8 md:p-12">
+        <div className="mb-8 pb-6 border-b border-gray-200">
+          <h1 className="text-3xl font-bold text-gray-900">{doc.title}</h1>
+          <p className="text-sm text-gray-400 mt-2">
+            Last updated {`${doc.lastModified.getUTCFullYear()}-${String(doc.lastModified.getUTCMonth() + 1).padStart(2, '0')}-${String(doc.lastModified.getUTCDate()).padStart(2, '0')}`}
+          </p>
+        </div>
+        <MarkdownRenderer content={doc.content} />
+      </article>
+      {/* Prev/Next navigation */}
+      {(prevDoc || nextDoc) && (
+        <div className="flex justify-between mt-6 gap-4">
+          {prevDoc ? (
+            <Link
+              href={`/portal/${category}/${prevDoc.slug}`}
+              className="flex-1 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md transition-shadow"
+            >
+              <span className="text-xs text-gray-400">Previous</span>
+              <p className="text-sm font-medium text-gray-900 mt-1">{prevDoc.title}</p>
+            </Link>
+          ) : <div className="flex-1" />}
+          {nextDoc ? (
+            <Link
+              href={`/portal/${category}/${nextDoc.slug}`}
+              className="flex-1 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md transition-shadow text-right"
+            >
+              <span className="text-xs text-gray-400">Next</span>
+              <p className="text-sm font-medium text-gray-900 mt-1">{nextDoc.title}</p>
+            </Link>
+          ) : <div className="flex-1" />}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/docs-portal/nextjs/src/app/portal/[category]/page.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { getCategories, getDoc } from '@/lib/docs';
+export function generateStaticParams() {
+  return getCategories().map((cat) => ({ category: cat.id }));
+}
+export default async function CategoryPage({ params }: { params: Promise<{ category: string }> }) {
+  const { category } = await params;
+  const categories = getCategories();
+  const cat = categories.find((c) => c.id === category);
+  if (!cat) notFound();
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+          <Link href="/portal" className="hover:text-gray-700 transition-colors">Portal</Link>
+          <span>/</span>
+          <span className="text-gray-900">{cat.label}</span>
+        </div>
+        <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-3">
+          <span>{cat.icon}</span>
+          <span>{cat.label}</span>
+        </h1>
+        {cat.description && (
+          <p className="mt-2 text-gray-600">{cat.description}</p>
+        )}
+      </div>
+      <div className="grid grid-cols-1 gap-3">
+        {cat.docs.map((doc) => {
+          const full = getDoc(category, doc.slug);
+          // Get first paragraph as preview
+          const firstLine = full?.content
+            .split('\n')
+            .filter((line) => line.trim() && !line.startsWith('#'))
+            [0] ?? '';
+          const preview = firstLine.slice(0, 200);
+          const isTruncated = firstLine.length > 200;
+          return (
+            <Link
+              key={doc.slug}
+              href={`/portal/${category}/${doc.slug}`}
+              className="bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md transition-shadow block"
+            >
+              <h2 className="text-lg font-semibold text-gray-900 mb-1">{doc.title}</h2>
+              {preview && (
+                <p className="text-sm text-gray-500 line-clamp-2">{preview}{isTruncated ? '...' : ''}</p>
+              )}
+              {full && (
+                <p className="text-xs text-gray-400 mt-2">
+                  Updated {`${full.lastModified.getUTCFullYear()}-${String(full.lastModified.getUTCMonth() + 1).padStart(2, '0')}-${String(full.lastModified.getUTCDate()).padStart(2, '0')}`}
+                </p>
+              )}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/templates/docs-portal/nextjs/src/app/portal/layout.tsx.template ADDED Viewed

@@ -0,0 +1,54 @@
+import Link from 'next/link';
+import { getCategories } from '@/lib/docs';
+import { PortalNav } from '@/components/portal/portal-nav';
+import { MobilePortalNav } from '@/components/portal/mobile-portal-nav';
+export const metadata = {
+  title: 'Project Portal — {{PROJECT_NAME_PASCAL}}',
+  description: 'Project documentation, requirements, architecture, and test results',
+};
+export default function PortalLayout({ children }: { children: React.ReactNode }) {
+  const categories = getCategories();
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-40">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16">
+            <div className="flex items-center gap-6">
+              <Link href="/portal" className="flex items-center gap-2.5">
+                <div className="w-8 h-8 bg-gray-900 rounded-lg flex items-center justify-center">
+                  <span className="text-white text-sm font-bold">
+                    {'{{PROJECT_NAME_PASCAL}}'.charAt(0)}
+                  </span>
+                </div>
+                <span className="font-semibold text-gray-900">{{PROJECT_NAME_PASCAL}}</span>
+              </Link>
+              <div className="hidden md:block">
+                <PortalNav categories={categories} />
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <Link
+                href="/"
+                className="text-sm text-gray-500 hover:text-gray-700 transition-colors"
+              >
+                Back to app
+              </Link>
+              <div className="md:hidden">
+                <MobilePortalNav categories={categories} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      {/* Content */}
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {children}
+      </main>
+    </div>
+  );
+}

package/templates/docs-portal/nextjs/src/app/portal/page.tsx ADDED Viewed

@@ -0,0 +1,85 @@
+import Link from 'next/link';
+import { getCategories, getAllDocs } from '@/lib/docs';
+export default function PortalHome() {
+  const categories = getCategories();
+  const allDocs = getAllDocs();
+  const recentDocs = [...allDocs]
+    .sort((a, b) => b.lastModified.getTime() - a.lastModified.getTime())
+    .slice(0, 5);
+  if (categories.length === 0) {
+    return (
+      <div className="text-center py-20">
+        <div className="text-5xl mb-4">📄</div>
+        <h1 className="text-2xl font-bold text-gray-900 mb-2">No documentation yet</h1>
+        <p className="text-gray-600 max-w-md mx-auto">
+          Documentation will appear here once it has been generated.
+          Ask your development team to run the documentation generators.
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div className="space-y-8">
+      {/* Welcome */}
+      <div>
+        <h1 className="text-3xl font-bold text-gray-900">Project Documentation</h1>
+        <p className="mt-2 text-gray-600">
+          Everything you need to know about this project — requirements, architecture, test results, and more.
+        </p>
+      </div>
+      {/* Category cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {categories.map((cat) => (
+          <div
+            key={cat.id}
+            className="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow"
+          >
+            <div className="text-3xl mb-3">{cat.icon}</div>
+            <h2 className="text-lg font-semibold text-gray-900 mb-1">{cat.label}</h2>
+            <p className="text-sm text-gray-500 mb-4">{cat.description}</p>
+            <div className="space-y-1">
+              {cat.docs.map((doc) => (
+                <Link
+                  key={doc.slug}
+                  href={`/portal/${cat.id}/${doc.slug}`}
+                  className="block text-sm text-blue-600 hover:text-blue-800 transition-colors py-0.5"
+                >
+                  {doc.title}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* Recently updated */}
+      {recentDocs.length > 0 && (
+        <div className="bg-white rounded-xl border border-gray-200 p-6">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">Recently Updated</h2>
+          <div className="divide-y divide-gray-100">
+            {recentDocs.map((doc) => (
+              <Link
+                key={`${doc.category}/${doc.slug}`}
+                href={`/portal/${doc.category}/${doc.slug}`}
+                className="flex items-center justify-between py-3 hover:bg-gray-50 -mx-3 px-3 rounded-lg transition-colors"
+              >
+                <div>
+                  <span className="text-sm font-medium text-gray-900">{doc.title}</span>
+                  <span className="ml-2 text-xs text-gray-400">{doc.categoryLabel}</span>
+                </div>
+                <span className="text-xs text-gray-400">
+                  {`${doc.lastModified.getUTCFullYear()}-${String(doc.lastModified.getUTCMonth() + 1).padStart(2, '0')}-${String(doc.lastModified.getUTCDate()).padStart(2, '0')}`}
+                </span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/docs-portal/nextjs/src/components/portal/markdown-renderer.tsx ADDED Viewed

@@ -0,0 +1,101 @@
+'use client';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+export function MarkdownRenderer({ content }: { content: string }) {
+  return (
+    <div className="prose prose-gray max-w-none">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Clean table rendering
+          table: ({ children }) => (
+            <div className="overflow-x-auto my-6 rounded-lg border border-gray-200">
+              <table className="min-w-full divide-y divide-gray-200">{children}</table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-gray-50">{children}</thead>
+          ),
+          th: ({ children }) => (
+            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td className="px-4 py-3 text-sm text-gray-700 border-t border-gray-100">{children}</td>
+          ),
+          // Status badges
+          code: ({ children, className }) => {
+            const isBlock = className?.startsWith('language-');
+            if (isBlock) {
+              return (
+                <code className={`${className} block overflow-x-auto`}>{children}</code>
+              );
+            }
+            // Inline status badges
+            const text = String(children);
+            if (text === 'PASS' || text === '✅ Built') {
+              return <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">{text}</span>;
+            }
+            if (text === 'FAIL' || text === 'CRITICAL') {
+              return <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">{text}</span>;
+            }
+            if (text === '🚧 In Progress') {
+              return <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">{text}</span>;
+            }
+            if (text === '📋 Planned') {
+              return <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{text}</span>;
+            }
+            return <code className="px-1.5 py-0.5 rounded bg-gray-100 text-sm font-mono text-gray-800">{children}</code>;
+          },
+          // Headings with anchors
+          h1: ({ children }) => {
+            const id = String(children).toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+            return <h1 id={id} className="text-3xl font-bold text-gray-900 mt-8 mb-4 first:mt-0">{children}</h1>;
+          },
+          h2: ({ children }) => {
+            const id = String(children).toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+            return <h2 id={id} className="text-2xl font-semibold text-gray-900 mt-8 mb-3 pb-2 border-b border-gray-200">{children}</h2>;
+          },
+          h3: ({ children }) => {
+            const id = String(children).toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+            return <h3 id={id} className="text-xl font-semibold text-gray-800 mt-6 mb-2">{children}</h3>;
+          },
+          // Clean list rendering
+          ul: ({ children }) => (
+            <ul className="list-disc list-outside ml-5 space-y-1.5 text-gray-700">{children}</ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="list-decimal list-outside ml-5 space-y-1.5 text-gray-700">{children}</ol>
+          ),
+          // Paragraphs
+          p: ({ children }) => (
+            <p className="text-gray-700 leading-relaxed my-3">{children}</p>
+          ),
+          // Links — only allow safe protocols
+          a: ({ href, children }) => {
+            const safeHref = href && /^(https?:\/\/|mailto:|\/|#)/.test(href) ? href : undefined;
+            const isExternal = safeHref?.startsWith('http');
+            return (
+              <a
+                href={safeHref}
+                className="text-blue-600 hover:text-blue-800 underline decoration-blue-300 hover:decoration-blue-500 transition-colors"
+                {...(isExternal && { target: '_blank', rel: 'noopener noreferrer' })}
+              >
+                {children}
+              </a>
+            );
+          },
+          // Blockquotes
+          blockquote: ({ children }) => (
+            <blockquote className="border-l-4 border-blue-200 bg-blue-50 pl-4 py-2 my-4 rounded-r-lg text-gray-700">
+              {children}
+            </blockquote>
+          ),
+        }}
+      />
+    </div>
+  );
+}