forgedev 1.2.0 → 1.3.0

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>
+  );
+}

package/templates/docs-portal/nextjs/src/components/portal/mobile-portal-nav.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface NavCategory {
+  id: string;
+  label: string;
+  icon: string;
+  docs: { slug: string; title: string }[];
+}
+
+export function MobilePortalNav({ categories }: { categories: NavCategory[] }) {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(!open)}
+        className="p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"
+        aria-label="Toggle navigation menu"
+      >
+        {open ? (
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        ) : (
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 right-0 bg-white border-b border-gray-200 shadow-lg z-50">
+          <div className="max-w-7xl mx-auto px-4 py-4 space-y-2">
+            <Link
+              href="/portal"
+              onClick={() => setOpen(false)}
+              className={`block px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                pathname === '/portal'
+                  ? 'bg-gray-100 text-gray-900'
+                  : 'text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              Overview
+            </Link>
+            {categories.map((cat) => (
+              <div key={cat.id} className="space-y-1">
+                <Link
+                  href={`/portal/${cat.id}`}
+                  onClick={() => setOpen(false)}
+                  className={`block px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    pathname.startsWith(`/portal/${cat.id}`)
+                      ? 'bg-gray-100 text-gray-900'
+                      : 'text-gray-600 hover:bg-gray-50'
+                  }`}
+                >
+                  <span className="mr-2">{cat.icon}</span>
+                  {cat.label}
+                </Link>
+                {cat.docs.map((doc) => (
+                  <Link
+                    key={doc.slug}
+                    href={`/portal/${cat.id}/${doc.slug}`}
+                    onClick={() => setOpen(false)}
+                    className="block pl-8 pr-3 py-1.5 text-sm text-gray-500 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
+                  >
+                    {doc.title}
+                  </Link>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/templates/docs-portal/nextjs/src/components/portal/portal-nav.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState, useRef, useEffect } from 'react';
+
+interface NavCategory {
+  id: string;
+  label: string;
+  icon: string;
+  docs: { slug: string; title: string }[];
+}
+
+export function PortalNav({ categories }: { categories: NavCategory[] }) {
+  const pathname = usePathname();
+  const [openMenu, setOpenMenu] = useState<string | null>(null);
+  const navRef = useRef<HTMLElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (navRef.current && !navRef.current.contains(e.target as Node)) {
+        setOpenMenu(null);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <nav ref={navRef} className="flex items-center gap-1">
+      <Link
+        href="/portal"
+        className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+          pathname === '/portal'
+            ? 'bg-gray-100 text-gray-900'
+            : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+        }`}
+      >
+        Overview
+      </Link>
+      {categories.map((cat) => (
+        <div
+          key={cat.id}
+          className="relative"
+          onMouseEnter={() => setOpenMenu(cat.id)}
+          onMouseLeave={() => setOpenMenu(null)}
+        >
+          <button
+            aria-expanded={openMenu === cat.id}
+            aria-haspopup="true"
+            onClick={() => setOpenMenu(openMenu === cat.id ? null : cat.id)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') setOpenMenu(null);
+            }}
+            className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 ${
+              pathname.startsWith(`/portal/${cat.id}`)
+                ? 'bg-gray-100 text-gray-900'
+                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+            }`}
+          >
+            <span>{cat.icon}</span>
+            <span>{cat.label}</span>
+            <svg className="w-3.5 h-3.5 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          {openMenu === cat.id && cat.docs.length > 0 && (
+            <div role="menu" className="absolute top-full left-0 mt-1 w-64 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50">
+              {cat.docs.map((doc) => (
+                <Link
+                  key={doc.slug}
+                  role="menuitem"
+                  href={`/portal/${cat.id}/${doc.slug}`}
+                  className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 transition-colors"
+                >
+                  {doc.title}
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}