@bluefly/openstandardagents 0.2.7 → 0.2.9

package/website/app/about/page.tsx

@@ -1,304 +0,0 @@
-import Link from 'next/link';
-import type { Metadata } from 'next';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
-
-export const metadata: Metadata = {
-  title: 'About - Open Standard Agents Initiative',
-  description: 'Learn about the Open Standard Agents Initiative - the vendor-neutral specification for AI agent orchestration.',
-};
-
-export default function AboutPage() {
-  return (
-    <>
-      {/* Hero Section */}
-      <div className="bg-gradient-to-br from-secondary via-primary to-accent text-white py-20 px-4">
-        <div className="container mx-auto max-w-4xl text-center">
-          <div className="inline-flex items-center justify-center w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full mb-6">
-            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-          </div>
-          <h1 className="text-5xl font-bold mb-4">About Open Standard Agents</h1>
-          <p className="text-xl text-white/90">
-            Building the future of agent interoperability through open standards
-          </p>
-        </div>
-      </div>
-
-      <div className="container mx-auto max-w-7xl px-4 py-12">
-        <div className="max-w-4xl mx-auto">
-          <section className="mb-16">
-            <div className="flex items-center mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4">
-                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                </svg>
-              </div>
-              <h2 className="text-3xl font-bold text-primary">The Initiative</h2>
-            </div>
-          <p className="text-lg text-gray-700 mb-4">
-            The <strong>Open Standard Agents Initiative</strong> provides an open source, technical community
-            within which industry participants can easily contribute to building a vendor-neutral, portable,
-            and open specification for providing technical metadata for AI agents - the &quot;Open Standard Agents Specification&quot; (OSA).
-          </p>
-          <p className="text-lg text-gray-700 mb-4">
-            Just as the <a href="https://www.openapis.org" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">OpenAPI Initiative</a> standardized REST APIs,
-            the Open Standard Agents Initiative standardizes AI agent definitions, enabling interoperability
-            across frameworks, runtimes, and organizations.
-          </p>
-        </section>
-
-        <section className="mb-16">
-          <div className="flex items-center mb-6">
-            <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-            </div>
-            <h2 className="text-3xl font-bold text-primary">Our Mission</h2>
-          </div>
-          <p className="text-lg text-gray-700 mb-4">
-            To create a vendor-neutral, open specification that enables:
-          </p>
-          <div className="grid gap-4 mt-6">
-            <div className="flex items-start bg-gradient-to-r from-primary/5 to-transparent p-4 rounded-lg border-l-4 border-primary">
-              <svg className="w-6 h-6 text-primary mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-              </svg>
-              <span className="text-lg text-gray-700">Interoperability between different AI agent frameworks and runtimes</span>
-            </div>
-            <div className="flex items-start bg-gradient-to-r from-secondary/5 to-transparent p-4 rounded-lg border-l-4 border-secondary">
-              <svg className="w-6 h-6 text-secondary mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
-              </svg>
-              <span className="text-lg text-gray-700">Portability of agent definitions across teams and organizations</span>
-            </div>
-            <div className="flex items-start bg-gradient-to-r from-primary/5 to-transparent p-4 rounded-lg border-l-4 border-primary">
-              <svg className="w-6 h-6 text-primary mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-              <span className="text-lg text-gray-700">Standardization of agent metadata, tools, and capabilities</span>
-            </div>
-            <div className="flex items-start bg-gradient-to-r from-secondary/5 to-transparent p-4 rounded-lg border-l-4 border-secondary">
-              <svg className="w-6 h-6 text-secondary mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <span className="text-lg text-gray-700">Validation and verification of agent definitions before deployment</span>
-            </div>
-            <div className="flex items-start bg-gradient-to-r from-primary/5 to-transparent p-4 rounded-lg border-l-4 border-primary">
-              <svg className="w-6 h-6 text-primary mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
-              </svg>
-              <span className="text-lg text-gray-700">Tooling and ecosystem development around agent specifications</span>
-            </div>
-          </div>
-        </section>
-
-        <section className="mb-16">
-          <div className="flex items-center mb-6">
-            <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-            <h2 className="text-3xl font-bold text-primary">What We Are</h2>
-          </div>
-          <Card variant="default" padding="md" elevation={1} hover className="mb-4 border-l-4 border-primary">
-            <div className="flex items-start">
-              <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
-                <span className="text-2xl">✅</span>
-              </div>
-              <div>
-                <h3 className="text-xl font-semibold mb-2 text-primary">A Specification</h3>
-                <p className="text-gray-700">
-                  OSA defines a standard format for describing AI agents, their capabilities, tools, and deployment requirements.
-                </p>
-              </div>
-            </div>
-          </Card>
-          <Card variant="default" padding="md" elevation={1} hover className="mb-4 border-l-4 border-secondary">
-            <div className="flex items-start">
-              <div className="w-10 h-10 bg-secondary/10 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
-                <span className="text-2xl">✅</span>
-              </div>
-              <div>
-                <h3 className="text-xl font-semibold mb-2 text-secondary">Open Source</h3>
-                <p className="text-gray-700">
-                  Licensed under Apache 2.0. Free to use, modify, and distribute. Community-driven development.
-                </p>
-              </div>
-            </div>
-          </Card>
-          <Card variant="default" padding="md" elevation={1} hover className="mb-4 border-l-4 border-primary">
-            <div className="flex items-start">
-              <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
-                <span className="text-2xl">✅</span>
-              </div>
-              <div>
-                <h3 className="text-xl font-semibold mb-2 text-primary">Vendor-Neutral</h3>
-                <p className="text-gray-700">
-                  No single vendor controls the specification. Governed by the community and technical steering committee.
-                </p>
-              </div>
-            </div>
-          </Card>
-        </section>
-
-        <section className="mb-16">
-          <div className="flex items-center mb-6">
-            <div className="w-12 h-12 bg-gradient-to-br from-gray-400 to-gray-600 rounded-lg flex items-center justify-center mr-4">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </div>
-            <h2 className="text-3xl font-bold text-gray-700">What We Are NOT</h2>
-          </div>
-          <Card variant="default" padding="md" elevation={1} hover className="mb-4 bg-gray-50 border-l-4 border-gray-400">
-            <div className="flex items-start">
-              <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
-                <span className="text-2xl">❌</span>
-              </div>
-              <div>
-                <h3 className="text-xl font-semibold mb-2 text-gray-700">A Framework</h3>
-                <p className="text-gray-700">
-                  OSA does not implement agents. It defines the specification that frameworks follow.
-                </p>
-              </div>
-            </div>
-          </Card>
-          <Card variant="default" padding="md" elevation={1} hover className="mb-4 bg-gray-50 border-l-4 border-gray-400">
-            <div className="flex items-start">
-              <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
-                <span className="text-2xl">❌</span>
-              </div>
-              <div>
-                <h3 className="text-xl font-semibold mb-2 text-gray-700">A Runtime</h3>
-                <p className="text-gray-700">
-                  OSA does not execute agents. It describes agents that runtimes can execute.
-                </p>
-              </div>
-            </div>
-          </Card>
-          <Card variant="default" padding="md" elevation={1} hover className="mb-4 bg-gray-50 border-l-4 border-gray-400">
-            <div className="flex items-start">
-              <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
-                <span className="text-2xl">❌</span>
-              </div>
-              <div>
-                <h3 className="text-xl font-semibold mb-2 text-gray-700">Proprietary</h3>
-                <p className="text-gray-700">
-                  OSA is not owned by any single company. It's maintained by the open source community.
-                </p>
-              </div>
-            </div>
-          </Card>
-        </section>
-
-        <section className="mb-16">
-          <div className="flex items-center mb-6">
-            <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-              </svg>
-            </div>
-            <h2 className="text-3xl font-bold text-primary">Governance</h2>
-          </div>
-          <p className="text-lg text-gray-700 mb-4">
-            The Open Standard Agents Initiative follows an open governance model:
-          </p>
-          <ul className="list-disc list-inside space-y-2 text-lg text-gray-700 mb-4">
-            <li><strong>Technical Steering Committee:</strong> Guides technical direction and specification evolution</li>
-            <li><strong>Working Groups:</strong> Focus on specific areas (schema, tooling, frameworks, etc.)</li>
-            <li><strong>Community Contributors:</strong> Anyone can contribute via pull requests and discussions</li>
-            <li><strong>Specification Process:</strong> Open RFC process for proposing changes and new features</li>
-          </ul>
-        </section>
-
-        <section className="mb-16">
-          <div className="bg-gradient-to-br from-primary/10 via-accent/10 to-secondary/10 rounded-2xl p-8 mb-8">
-            <div className="flex items-center mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4">
-                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
-                </svg>
-              </div>
-              <h2 className="text-3xl font-bold text-primary">Get Involved</h2>
-            </div>
-            <p className="text-lg text-gray-700 mb-6">
-              Join the Open Standard Agents community and help shape the future of agent interoperability:
-            </p>
-          </div>
-          <div className="grid md:grid-cols-2 gap-4">
-            <Link href="https://github.com/blueflyio/openstandardagents" target="_blank" rel="noopener noreferrer">
-              <Card variant="interactive" padding="md" elevation={1} className="border-l-4 border-primary group h-full">
-                <div className="flex items-center mb-3">
-                  <svg className="w-6 h-6 text-primary mr-2 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-                  </svg>
-                  <h3 className="text-xl font-semibold text-primary">Contribute Code</h3>
-                </div>
-                <p className="text-gray-700">Submit pull requests, report issues, and help improve the specification.</p>
-              </Card>
-            </Link>
-            <Link href="/docs">
-              <Card variant="interactive" padding="md" elevation={1} className="border-l-4 border-secondary group h-full">
-                <div className="flex items-center mb-3">
-                  <svg className="w-6 h-6 text-secondary mr-2 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-                  </svg>
-                  <h3 className="text-xl font-semibold text-secondary">Improve Documentation</h3>
-                </div>
-                <p className="text-gray-700">Help make OSA more accessible with better docs and examples.</p>
-              </Card>
-            </Link>
-            <Link href="/examples">
-              <Card variant="interactive" padding="md" elevation={1} className="border-l-4 border-primary group h-full">
-                <div className="flex items-center mb-3">
-                  <svg className="w-6 h-6 text-primary mr-2 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                  </svg>
-                  <h3 className="text-xl font-semibold text-primary">Share Examples</h3>
-                </div>
-                <p className="text-gray-700">Contribute real-world examples and use cases.</p>
-              </Card>
-            </Link>
-            <Link href="https://github.com/blueflyio/openstandardagents/issues" target="_blank" rel="noopener noreferrer">
-              <Card variant="interactive" padding="md" elevation={1} className="border-l-4 border-secondary group h-full">
-                <div className="flex items-center mb-3">
-                  <svg className="w-6 h-6 text-secondary mr-2 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
-                  </svg>
-                  <h3 className="text-xl font-semibold text-secondary">Provide Feedback</h3>
-                </div>
-                <p className="text-gray-700">Share your experience and help prioritize features.</p>
-              </Card>
-            </Link>
-          </div>
-        </section>
-
-        <section className="mb-12">
-          <div className="bg-gradient-to-r from-secondary via-primary to-accent text-white rounded-2xl p-8">
-            <div className="flex items-center mb-4">
-              <svg className="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-              </svg>
-              <h2 className="text-3xl font-bold">License</h2>
-            </div>
-            <p className="text-lg text-white/90 mb-4">
-              The Open Standard Agents Specification is licensed under the{' '}
-              <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank" rel="noopener noreferrer" className="text-white font-semibold hover:underline">
-                Apache License 2.0
-              </a>.
-            </p>
-            <p className="text-lg text-white/90">
-              This means you are free to use, modify, and distribute OSA in your projects,
-              both open source and commercial, without restrictions.
-            </p>
-          </div>
-        </section>
-      </div>
-    </div>
-    </>
-  );
-}
-

package/website/app/blog/[slug]/page.tsx

@@ -1,208 +0,0 @@
-import { notFound } from 'next/navigation';
-import fs from 'fs';
-import path from 'path';
-import matter from 'gray-matter';
-import { MarkdownContent } from '@/components/docs/MarkdownContent';
-import Link from 'next/link';
-
-interface PageProps {
-  params: Promise<{
-    slug: string;
-  }>;
-}
-
-const blogDirectory = path.join(process.cwd(), 'content/blog');
-
-// Helper function to fix malformed YAML frontmatter (double quotes)
-function fixYamlFrontmatter(content: string): string {
-  // Fix double-quoted values in frontmatter
-  // Pattern: key: ""value"" -> key: "value"
-  // Also handle escaped quotes in values
-  let fixed = content;
-  
-  // Fix double quotes around values (key: ""value"" -> key: "value")
-  fixed = fixed.replace(/(\w+):\s*""([^"]*)""/g, '$1: "$2"');
-  
-  // Fix escaped quotes in excerpt (\"value\" -> value)
-  fixed = fixed.replace(/excerpt:\s*"\\"([^"]*)\\""/g, 'excerpt: "$1"');
-  
-  return fixed;
-}
-
-// Helper to clean extracted values
-function cleanValue(value: any): any {
-  if (typeof value === 'string') {
-    // Remove surrounding double quotes if present
-    return value.replace(/^""(.*)""$/, '$1').replace(/^"(.*)"$/, '$1');
-  }
-  return value;
-}
-
-function getBlogPost(slug: string): { content: string; metadata: any } | null {
-  const fullPath = path.join(blogDirectory, `${slug}.md`);
-
-  if (!fs.existsSync(fullPath)) {
-    return null;
-  }
-
-  try {
-    const fileContents = fs.readFileSync(fullPath, 'utf8');
-    
-    // Fix malformed YAML before parsing
-    const fixedContent = fixYamlFrontmatter(fileContents);
-    const { data, content } = matter(fixedContent);
-
-    const dateValue = cleanValue(data.date) || new Date().toISOString();
-    const dateObj = new Date(dateValue);
-    const validDate = isNaN(dateObj.getTime()) ? new Date() : dateObj;
-    
-    // Format date during server-side rendering to avoid hydration mismatch
-    const formattedDate = validDate.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    });
-
-    return {
-      content,
-      metadata: {
-        title: cleanValue(data.title) || slug,
-        date: validDate.toISOString(),
-        formattedDate,
-        author: cleanValue(data.author) || 'OSSA Team',
-        category: cleanValue(data.category) || 'General',
-        tags: Array.isArray(data.tags) ? data.tags.map(cleanValue) : [],
-        excerpt: cleanValue(data.excerpt) || '',
-      },
-    };
-  } catch (error) {
-    console.error(`Error parsing blog post ${slug}:`, error);
-    return null;
-  }
-}
-
-function getAllBlogSlugs(): string[] {
-  const fileNames = fs.readdirSync(blogDirectory);
-  return fileNames
-    .filter(fileName => fileName.endsWith('.md'))
-    .map(fileName => fileName.replace(/\.md$/, ''));
-}
-
-export const dynamic = 'force-static';
-export const dynamicParams = false;
-
-export async function generateStaticParams() {
-  const slugs = getAllBlogSlugs();
-  return slugs.map((slug) => ({
-    slug,
-  }));
-}
-
-export default async function BlogPostPage({ params }: PageProps) {
-  const { slug } = await params;
-  const post = getBlogPost(slug);
-
-  if (!post) {
-    notFound();
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Hero Section */}
-      <div className="bg-gradient-to-br from-primary via-blue-600 to-secondary text-white py-16 px-4">
-        <div className="container mx-auto max-w-4xl">
-          <div className="mb-4">
-            <Link
-              href="/blog"
-              className="inline-flex items-center text-white/80 hover:text-white transition-colors"
-            >
-              <svg className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-              </svg>
-              Back to Blog
-            </Link>
-          </div>
-
-          <div className="mb-4">
-            <span className="inline-block px-3 py-1 text-xs font-semibold bg-white/20 rounded-full">
-              {post.metadata.category}
-            </span>
-          </div>
-
-          <h1 className="text-4xl md:text-5xl font-bold mb-6">{post.metadata.title}</h1>
-
-          <div className="flex items-center gap-6 text-white/90">
-            <div className="flex items-center gap-2">
-              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-              </svg>
-              <span>{post.metadata.author}</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
-              <span>{post.metadata.formattedDate}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="container mx-auto max-w-4xl px-4 py-12">
-        <article className="bg-white p-8 md:p-12 rounded-lg shadow-lg border border-gray-200">
-          <div className="prose prose-lg max-w-none
-            prose-headings:text-gray-900
-            prose-h1:text-4xl prose-h1:font-bold prose-h1:mb-6
-            prose-h2:text-3xl prose-h2:font-bold prose-h2:mt-12 prose-h2:mb-4
-            prose-h3:text-2xl prose-h3:font-semibold prose-h3:mt-8 prose-h3:mb-3
-            prose-p:text-gray-700 prose-p:leading-relaxed prose-p:mb-6
-            prose-a:text-primary prose-a:no-underline hover:prose-a:underline
-            prose-strong:text-gray-900 prose-strong:font-semibold
-            prose-code:text-primary prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded
-            prose-pre:bg-gray-900 prose-pre:text-gray-100
-            prose-ul:my-6 prose-ul:list-disc prose-ul:pl-6
-            prose-ol:my-6 prose-ol:list-decimal prose-ol:pl-6
-            prose-li:text-gray-700 prose-li:mb-2
-            prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic
-            prose-table:w-full prose-table:border-collapse
-            prose-th:bg-gray-100 prose-th:p-3 prose-th:text-left prose-th:font-semibold
-            prose-td:p-3 prose-td:border-t prose-td:border-gray-200
-          ">
-            <MarkdownContent content={post.content} />
-          </div>
-
-          {/* Tags */}
-          {post.metadata.tags.length > 0 && (
-            <div className="mt-12 pt-8 border-t border-gray-200">
-              <h3 className="text-sm font-semibold text-gray-900 mb-3">Tags</h3>
-              <div className="flex flex-wrap gap-2">
-                {post.metadata.tags.map((tag: string) => (
-                  <span
-                    key={tag}
-                    className="px-3 py-1 bg-blue-100 text-primary text-sm font-medium rounded-full"
-                  >
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-        </article>
-
-        {/* Back to Blog */}
-        <div className="mt-12 text-center">
-          <Link
-            href="/blog"
-            className="inline-flex items-center px-6 py-3 bg-primary text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            <svg className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-            </svg>
-            Back to All Posts
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}