ai-devkit 0.3.2 → 0.4.0

package/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

package/web/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+
+@theme {
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-gray-50: #fafafa;
+  --color-gray-100: #f5f5f5;
+  --color-gray-200: #e5e5e5;
+  --color-gray-300: #d4d4d4;
+  --color-gray-400: #a3a3a3;
+  --color-gray-500: #737373;
+  --color-gray-600: #525252;
+  --color-gray-700: #404040;
+  --color-gray-800: #262626;
+  --color-gray-900: #171717;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
+}
+
+body {
+  background: #ffffff;
+  color: #000000;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 0.5em;
+}
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.75rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+
+p {
+  line-height: 1.6;
+  margin-bottom: 1em;
+}
+
+a {
+  transition: opacity 0.2s;
+}
+
+a:hover {
+  opacity: 0.7;
+}
+
+code {
+  background: #f5f5f5;
+  color: #000000;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
+  font-size: 0.9em;
+}
+
+pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+
+pre {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+article pre {
+  background: #000000;
+  color: #ffffff;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.focus\:not-sr-only:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+*:focus-visible {
+  outline: 2px solid #000000;
+  outline-offset: 2px;
+}
+
+h1, h2, h3, h4, h5, h6, p, span, div {
+  color: inherit;
+}
+
+article ul, article ol {
+  list-style-type: unset;
+  padding-left: 1em;
+  margin-bottom: 1em;
+}
+
+article a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}

package/web/app/layout.tsx

@@ -0,0 +1,106 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import SkipToContent from "@/components/SkipToContent";
+import { GitHubProvider } from "@/lib/GitHubContext";
+import Script from "next/script";
+
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://ai-devkit.com";
+
+export const metadata: Metadata = {
+  metadataBase: new URL(siteUrl),
+  title: {
+    default: "AI DevKit - Structured AI-Assisted Development",
+    template: "%s | AI DevKit",
+  },
+  description:
+    "A CLI toolkit for AI-assisted software development with phase templates and structured workflows. Improve your development process with requirements, design, planning, and testing documentation.",
+  keywords: [
+    "AI",
+    "development",
+    "CLI",
+    "templates",
+    "documentation",
+    "structured development",
+    "AI-assisted coding",
+    "software engineering",
+    "project management",
+    "development workflow",
+    "specs driven development",
+  ],
+  authors: [{ name: "AI DevKit Team" }],
+  creator: "AI DevKit",
+  publisher: "AI DevKit",
+  openGraph: {
+    title: "AI DevKit - Structured AI-Assisted Development",
+    description:
+      "A CLI toolkit for AI-assisted software development with phase templates and structured workflows.",
+    url: siteUrl,
+    siteName: "AI DevKit",
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "AI DevKit - Structured AI-Assisted Development",
+    description:
+      "A CLI toolkit for AI-assisted software development with phase templates and structured workflows.",
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="flex flex-col min-h-screen">
+        <Script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-XYJ8T5JK0Y"
+        ></Script>
+        <Script>
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'G-XYJ8T5JK0Y');
+          `}
+        </Script>
+        <GitHubProvider repo="codeaholicguy/ai-devkit">
+          <SkipToContent />
+          <Header />
+          <main id="main-content" className="flex-1">
+            {children}
+          </main>
+          <Footer />
+          <Script
+            id="structured-data"
+            type="application/ld+json"
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify({
+                "@context": "https://schema.org",
+                "@type": "website",
+                name: "AI DevKit",
+                url: siteUrl,
+              }),
+            }}
+          />
+        </GitHubProvider>
+      </body>
+    </html>
+  );
+}

package/web/app/page.tsx

@@ -0,0 +1,119 @@
+import Link from "next/link";
+import GitHubButton from "@/components/GitHubButton";
+
+export default function Home() {
+  return (
+    <div className="bg-white">
+      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 md:py-32">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-6xl font-bold mb-6">
+            Structured AI-Assisted
+            <br />
+            Development
+          </h1>
+          <p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
+            A CLI toolkit that brings structure to AI-assisted software development with phase templates, 
+            systematic planning, and comprehensive documentation workflows.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <Link 
+              href="/docs" 
+              className="px-8 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition-colors no-underline"
+            >
+              Get Started
+            </Link>
+            <GitHubButton repo="codeaholicguy/ai-devkit" />
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-gray-50 py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">
+            Why AI DevKit?
+          </h2>
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="bg-white p-8 rounded-lg border border-gray-200">
+              <h3 className="text-xl font-bold mb-3">Documentation-First</h3>
+              <p className="text-gray-600 leading-relaxed">
+                Start with clear requirements, design decisions, and implementation plans. 
+                Keep your project knowledge organized and accessible.
+              </p>
+            </div>
+            <div className="bg-white p-8 rounded-lg border border-gray-200">
+              <h3 className="text-xl font-bold mb-3">Phase-Based Workflow</h3>
+              <p className="text-gray-600 leading-relaxed">
+                Move systematically through requirements, design, planning, implementation, 
+                and testing. No step gets skipped.
+              </p>
+            </div>
+            <div className="bg-white p-8 rounded-lg border border-gray-200">
+              <h3 className="text-xl font-bold mb-3">AI-Friendly Context</h3>
+              <p className="text-gray-600 leading-relaxed">
+                Organize project knowledge so AI assistants provide better guidance. 
+                Amplify human capabilities with structured context.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="max-w-3xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold mb-8 text-center">
+              Quick Start
+            </h2>
+            <div className="bg-gray-50 p-8 rounded-lg border border-gray-200">
+              <p className="text-gray-600 mb-4">Install AI DevKit globally:</p>
+              <pre className="bg-black text-white p-4 rounded overflow-x-auto">
+                <code>npm install -g ai-devkit</code>
+              </pre>
+              <p className="text-gray-600 mt-6 mb-4">Initialize in your project:</p>
+              <pre className="bg-black text-white p-4 rounded overflow-x-auto">
+                <code>ai-devkit init</code>
+              </pre>
+              <p className="text-gray-600 mt-6">or</p>
+              <pre className="bg-black text-white p-4 rounded overflow-x-auto">
+                <code>npx ai-devkit init</code>
+              </pre>
+              <p className="text-gray-600 mt-6">
+                This creates a <code>docs/ai/</code> directory with phase templates for 
+                requirements, design, planning, implementation, testing, deployment, and monitoring.
+              </p>
+              <p className="text-gray-600 mt-6">
+                In Cursor or Claude Code, type <code>/new-requirement</code> to get started.
+              </p>
+              <iframe src="https://www.youtube.com/embed/8cNFkHEVE3o?autoplay=1&mute=1&loop=1&controls=0" className="w-full h-[440px]" />
+            </div>
+            <div className="text-center mt-8">
+              <Link 
+                href="/docs" 
+                className="text-lg font-medium hover:opacity-70 transition-opacity"
+              >
+                Read the full documentation →
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-black text-white py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-6">
+            Ready to structure your development?
+          </h2>
+          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
+            Join developers who are building better software with AI assistance and structured workflows.
+          </p>
+          <Link 
+            href="/docs" 
+            className="inline-block px-8 py-3 bg-white text-black rounded-lg font-medium hover:bg-gray-100 transition-colors no-underline"
+          >
+            Get Started Now
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}

package/web/app/roadmap/page.tsx

@@ -0,0 +1,150 @@
+import { getRoadmap } from '@/lib/content/loader';
+import MarkdownContent from '@/components/MarkdownContent';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Roadmap | AI DevKit',
+  description: 'The development roadmap for AI DevKit - see what we\'re building and where we\'re headed.',
+};
+
+const statusColors = {
+  'planned': 'bg-gray-100 text-gray-800 border-gray-300',
+  'in-progress': 'bg-blue-50 text-blue-800 border-blue-300',
+  'completed': 'bg-green-50 text-green-800 border-green-300',
+  'on-hold': 'bg-yellow-50 text-yellow-800 border-yellow-300',
+};
+
+const statusLabels = {
+  'planned': 'Planned',
+  'in-progress': 'In Progress',
+  'completed': 'Completed',
+  'on-hold': 'On Hold',
+};
+
+export default function RoadmapPage() {
+  const roadmapItems = getRoadmap();
+
+  const groupedItems = {
+    'in-progress': roadmapItems.filter(item => item.metadata.status === 'in-progress'),
+    'planned': roadmapItems.filter(item => item.metadata.status === 'planned'),
+    'completed': roadmapItems.filter(item => item.metadata.status === 'completed'),
+    'on-hold': roadmapItems.filter(item => item.metadata.status === 'on-hold'),
+  };
+
+  return (
+    <div className="bg-white py-16">
+      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+        <h1 className="text-4xl md:text-5xl font-bold mb-4">Roadmap</h1>
+        
+        <p className="text-xl text-gray-600 mb-12">
+          Our development roadmap shows what we're working on and what's coming next for AI DevKit.
+        </p>
+
+        {roadmapItems.length === 0 ? (
+          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8">
+            <p className="text-gray-600">
+              Roadmap items will be added soon. Check back later or follow us on GitHub for updates.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-12">
+            {groupedItems['in-progress'].length > 0 && (
+              <section>
+                <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
+                  <span className="w-3 h-3 bg-blue-500 rounded-full"></span>
+                  In Progress
+                </h2>
+                <div className="space-y-6">
+                  {groupedItems['in-progress'].map((item, index) => (
+                    <RoadmapItem key={index} item={item} />
+                  ))}
+                </div>
+              </section>
+            )}
+
+            {groupedItems['planned'].length > 0 && (
+              <section>
+                <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
+                  <span className="w-3 h-3 bg-gray-400 rounded-full"></span>
+                  Planned
+                </h2>
+                <div className="space-y-6">
+                  {groupedItems['planned'].map((item, index) => (
+                    <RoadmapItem key={index} item={item} />
+                  ))}
+                </div>
+              </section>
+            )}
+
+            {groupedItems['completed'].length > 0 && (
+              <section>
+                <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
+                  <span className="w-3 h-3 bg-green-500 rounded-full"></span>
+                  Completed
+                </h2>
+                <div className="space-y-6">
+                  {groupedItems['completed'].map((item, index) => (
+                    <RoadmapItem key={index} item={item} />
+                  ))}
+                </div>
+              </section>
+            )}
+          </div>
+        )}
+
+        <div className="mt-16 pt-8 border-t border-gray-200">
+          <div className="bg-gray-50 p-8 rounded-lg border border-gray-200">
+            <h2 className="text-2xl font-bold mb-4">Have ideas?</h2>
+            <p className="text-gray-600 mb-6">
+              We'd love to hear your suggestions for AI DevKit. Open an issue or discussion on GitHub to share your thoughts.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <a
+                href="https://github.com/codeaholicguy/ai-devkit/issues/new"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="px-6 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition-colors no-underline text-center"
+              >
+                Submit an Idea
+              </a>
+              <a
+                href="https://github.com/codeaholicguy/ai-devkit/discussions"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="px-6 py-3 border border-black rounded-lg font-medium hover:bg-gray-50 transition-colors no-underline text-center"
+              >
+                Join Discussion
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RoadmapItem({ item }: { item: { metadata: any; content: string } }) {
+  const statusColor = statusColors[item.metadata.status as keyof typeof statusColors] || statusColors.planned;
+  const statusLabel = statusLabels[item.metadata.status as keyof typeof statusLabels] || 'Unknown';
+
+  return (
+    <div className="border border-gray-200 rounded-lg p-6 hover:border-gray-400 transition-colors">
+      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
+        <h3 className="text-xl font-bold">{item.metadata.title}</h3>
+        <div className="flex gap-2 flex-wrap">
+          <span className={`px-3 py-1 rounded-full text-sm font-medium border ${statusColor}`}>
+            {statusLabel}
+          </span>
+          {item.metadata.timeframe && (
+            <span className="px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 border border-gray-300">
+              {item.metadata.timeframe}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="text-gray-700 leading-relaxed">
+        {item.content}
+      </div>
+    </div>
+  );
+}

package/web/app/robots.ts

@@ -0,0 +1,16 @@
+import { MetadataRoute } from 'next';
+
+export const dynamic = 'force-static';
+
+export default function robots(): MetadataRoute.Robots {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://ai-devkit.com';
+
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: `${baseUrl}/sitemap.xml`,
+  };
+}
+

package/web/app/sitemap.ts

@@ -0,0 +1,46 @@
+import { MetadataRoute } from 'next';
+import { getAllDocPages, getAllPages, getRoadmap } from '@/lib/content/loader';
+
+export const dynamic = 'force-static';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://ai-devkit.com';
+
+  const staticRoutes = [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: 'weekly' as const,
+      priority: 1.0,
+    },
+    {
+      url: `${baseUrl}/docs`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly' as const,
+      priority: 0.9,
+    },
+    {
+      url: `${baseUrl}/vision`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly' as const,
+      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/roadmap`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly' as const,
+      priority: 0.8,
+    },
+  ];
+
+  const docs = getAllDocPages();
+  const docRoutes = docs.map((doc) => ({
+    url: `${baseUrl}/docs/${doc.metadata.slug}`,
+    lastModified: new Date(),
+    changeFrequency: 'weekly' as const,
+    priority: 0.7,
+  }));
+
+  return [...staticRoutes, ...docRoutes];
+}
+