Add web

Author: codeaholicguy

.github/workflows/deploy.yml

@@ -0,0 +1,60 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: web/package-lock.json
+
+      - name: Install dependencies
+        run: |
+          cd web
+          npm ci
+
+      - name: Build website
+        run: |
+          cd web
+          npm run build
+        env:
+          NODE_ENV: production
+          NEXT_PUBLIC_SITE_URL: https://ai-devkit.com
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: web/out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

README.md

@@ -304,11 +304,6 @@ Use the capture-knowledge command to analyze <entry-point>
 - **Function**: `/capture-knowledge calculateTotalPrice` - Analyzes a specific function
 - **API Endpoint**: `/capture-knowledge POST:/api/users` - Analyzes an API endpoint flow
 
-**Options:**
-- `--depth <n>` - Control recursion depth (default: 3)
-- `--save` - Save output to `docs/ai/knowledge/`
-- `--diagram-only` - Generate only diagrams
-
 **What You Get:**
 - 📖 **Detailed Explanation**: Natural language description of how the code works
 - 🔍 **Implementation Details**: Key components, logic flow, and design patterns
@@ -344,17 +339,11 @@ For modules/folders, you get:
 
 **Example Workflow:**
 ```bash
-# Understand a payment function
-/capture-knowledge processPayment --depth 4
-
 # Document an entire authentication module
-/capture-knowledge src/auth/ --save
+/capture-knowledge @src/auth/
 
 # Analyze an API endpoint
 /capture-knowledge POST:/api/checkout
-
-# Get just the diagrams for a complex function
-/capture-knowledge handleOrderProcessing --diagram-only
 ```
 
 The analysis is saved to `docs/ai/knowledge/` and can be versioned alongside your code.

web/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web/.nojekyll

@@ -0,0 +1,2 @@
+# This file tells GitHub Pages not to process the site with Jekyll
+

web/CNAME

@@ -0,0 +1 @@
+ai-devkit.com

web/README.md

@@ -0,0 +1,100 @@
+# AI DevKit Website
+
+This is the source code for the AI DevKit static website built with Next.js.
+
+## Development
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view the site.
+
+## Building
+
+```bash
+npm run build
+```
+
+This generates static files in the `out/` directory.
+
+## Deployment
+
+The site is automatically deployed to GitHub Pages when changes are pushed to the `main` branch.
+
+### Manual Deployment Setup
+
+1. Go to your repository settings on GitHub
+2. Navigate to **Settings > Pages**
+3. Under **Source**, select **GitHub Actions**
+4. The workflow will run automatically on push to main
+
+## Project Structure
+
+```
+web/
+├── app/              # Next.js app directory
+│   ├── docs/         # Documentation pages
+│   ├── roadmap/      # Roadmap page
+│   ├── vision/       # Vision page
+│   ├── layout.tsx    # Root layout
+│   └── page.tsx      # Landing page
+├── components/       # Reusable components
+├── content/          # Markdown content
+│   ├── docs/         # Documentation files
+│   ├── pages/        # Static pages
+│   └── roadmap/      # Roadmap items
+├── lib/              # Utilities and helpers
+│   └── content/      # Content loading utilities
+└── public/           # Static assets
+```
+
+## Content Management
+
+All content is managed via Markdown files with frontmatter:
+
+- Documentation: `content/docs/*.md`
+- Pages (vision, etc): `content/pages/*.md`
+- Roadmap items: `content/roadmap/*.md`
+
+### Adding New Documentation
+
+Create a new file in `content/docs/`:
+
+```markdown
+---
+title: Your Doc Title
+description: Brief description
+slug: your-doc-slug
+order: 1
+---
+
+# Your content here...
+```
+
+### Adding Roadmap Items
+
+Create a new file in `content/roadmap/`:
+
+```markdown
+---
+title: Feature Name
+status: planned | in-progress | completed | on-hold
+timeframe: Q1 2026
+priority: high | medium | low
+order: 1
+---
+
+Feature description...
+```
+
+## SEO
+
+The site includes:
+
+- Comprehensive metadata
+- Sitemap at `/sitemap.xml`
+- Robots.txt at `/robots.txt`
+- Open Graph tags for social sharing
+- Semantic HTML and ARIA labels

web/app/docs/[slug]/page.tsx

@@ -0,0 +1,103 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { getDocPage, getAllDocPages } from "@/lib/content/loader";
+import MarkdownContent from "@/components/MarkdownContent";
+import type { Metadata } from "next";
+
+interface DocPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateStaticParams() {
+  const docs = getAllDocPages();
+  return docs.map((doc) => ({
+    slug: doc.metadata.slug,
+  }));
+}
+
+export async function generateMetadata({
+  params,
+}: DocPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const doc = getDocPage(slug);
+
+  if (!doc) {
+    return {
+      title: "Page Not Found",
+    };
+  }
+
+  return {
+    title: `${doc.metadata.title} | AI DevKit Documentation`,
+    description: doc.metadata.description,
+  };
+}
+
+export default async function DocPage({ params }: DocPageProps) {
+  const { slug } = await params;
+  const doc = getDocPage(slug);
+
+  if (!doc) {
+    notFound();
+  }
+
+  const allDocs = getAllDocPages();
+  const currentIndex = allDocs.findIndex((d) => d.metadata.slug === slug);
+  const prevDoc = currentIndex > 0 ? allDocs[currentIndex - 1] : null;
+  const nextDoc =
+    currentIndex < allDocs.length - 1 ? allDocs[currentIndex + 1] : null;
+
+  return (
+    <div className="bg-white py-16">
+      <article className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+        <nav className="mb-8 text-sm text-gray-600">
+          <Link href="/docs" className="hover:text-black transition-colors">
+            Documentation
+          </Link>
+          <span className="mx-2">/</span>
+          <span className="text-black">{doc.metadata.title}</span>
+        </nav>
+
+        <h1 className="text-4xl md:text-5xl font-bold mb-4">
+          {doc.metadata.title}
+        </h1>
+
+        {doc.metadata.description && (
+          <p className="text-xl text-gray-600 mb-12">
+            {doc.metadata.description}
+          </p>
+        )}
+
+        <MarkdownContent content={doc.content} />
+      </article>
+      <nav className="mt-16 pt-8 border-t border-gray-200 mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {prevDoc ? (
+            <Link
+              href={`/docs/${prevDoc.metadata.slug}`}
+              className="p-4 border border-gray-200 rounded-lg hover:border-black transition-colors no-underline group"
+            >
+              <div className="text-sm text-gray-600 mb-1">Previous</div>
+              <div className="font-bold group-hover:opacity-70 transition-opacity">
+                ← {prevDoc.metadata.title}
+              </div>
+            </Link>
+          ) : (
+            <div />
+          )}
+          {nextDoc && (
+            <Link
+              href={`/docs/${nextDoc.metadata.slug}`}
+              className="p-4 border border-gray-200 rounded-lg hover:border-black transition-colors no-underline text-right group"
+            >
+              <div className="text-sm text-gray-600 mb-1">Next</div>
+              <div className="font-bold group-hover:opacity-70 transition-opacity">
+                {nextDoc.metadata.title} →
+              </div>
+            </Link>
+          )}
+        </div>
+      </nav>
+    </div>
+  );
+}