@bluefly/openstandardagents 0.2.4 → 0.2.7

package/website/app/about/page.tsx

@@ -1,5 +1,6 @@
 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',
@@ -10,7 +11,7 @@ export default function AboutPage() {
   return (
     <>
       {/* Hero Section */}
-      <div className="bg-gradient-to-br from-primary via-accent to-secondary text-white py-20 px-4">
+      <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">
@@ -28,7 +29,7 @@ export default function AboutPage() {
         <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-primary to-secondary rounded-lg flex items-center justify-center mr-4">
+              <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>
@@ -49,7 +50,7 @@ export default function AboutPage() {
 
         <section className="mb-16">
           <div className="flex items-center mb-6">
-            <div className="w-12 h-12 bg-gradient-to-br from-secondary to-primary rounded-lg flex items-center justify-center mr-4">
+            <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>
@@ -95,14 +96,14 @@ export default function AboutPage() {
 
         <section className="mb-16">
           <div className="flex items-center mb-6">
-            <div className="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center mr-4">
+            <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>
-          <div className="card p-6 mb-4 border-l-4 border-primary hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          <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>
@@ -114,8 +115,8 @@ export default function AboutPage() {
                 </p>
               </div>
             </div>
-          </div>
-          <div className="card p-6 mb-4 border-l-4 border-secondary hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          </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>
@@ -127,8 +128,8 @@ export default function AboutPage() {
                 </p>
               </div>
             </div>
-          </div>
-          <div className="card p-6 mb-4 border-l-4 border-primary hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          </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>
@@ -140,7 +141,7 @@ export default function AboutPage() {
                 </p>
               </div>
             </div>
-          </div>
+          </Card>
         </section>
 
         <section className="mb-16">
@@ -152,7 +153,7 @@ export default function AboutPage() {
             </div>
             <h2 className="text-3xl font-bold text-gray-700">What We Are NOT</h2>
           </div>
-          <div className="card p-6 mb-4 bg-gray-50 border-l-4 border-gray-400 hover:shadow-lg transition-shadow">
+          <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>
@@ -164,8 +165,8 @@ export default function AboutPage() {
                 </p>
               </div>
             </div>
-          </div>
-          <div className="card p-6 mb-4 bg-gray-50 border-l-4 border-gray-400 hover:shadow-lg transition-shadow">
+          </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>
@@ -177,8 +178,8 @@ export default function AboutPage() {
                 </p>
               </div>
             </div>
-          </div>
-          <div className="card p-6 mb-4 bg-gray-50 border-l-4 border-gray-400 hover:shadow-lg transition-shadow">
+          </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>
@@ -190,12 +191,12 @@ export default function AboutPage() {
                 </p>
               </div>
             </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-accent to-primary rounded-lg flex items-center justify-center mr-4">
+            <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>
@@ -216,7 +217,7 @@ export default function AboutPage() {
         <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-primary to-secondary rounded-lg flex items-center justify-center mr-4">
+              <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>
@@ -228,47 +229,55 @@ export default function AboutPage() {
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-4">
-            <Link href="https://github.com/blueflyio/openstandardagents" target="_blank" rel="noopener noreferrer" className="card-hover p-6 border-l-4 border-primary group hover:-translate-y-1 transition-all duration-300">
-              <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>
+            <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" className="card-hover p-6 border-l-4 border-secondary group hover:-translate-y-1 transition-all duration-300">
-              <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>
+            <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" className="card-hover p-6 border-l-4 border-primary group hover:-translate-y-1 transition-all duration-300">
-              <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>
+            <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" className="card-hover p-6 border-l-4 border-secondary group hover:-translate-y-1 transition-all duration-300">
-              <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>
+            <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-primary to-secondary text-white rounded-2xl p-8">
+          <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" />

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

@@ -13,6 +13,31 @@ interface PageProps {
 
 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`);
 
@@ -20,20 +45,40 @@ function getBlogPost(slug: string): { content: string; metadata: any } | null {
     return null;
   }
 
-  const fileContents = fs.readFileSync(fullPath, 'utf8');
-  const { data, content } = matter(fileContents);
-
-  return {
-    content,
-    metadata: {
-      title: data.title,
-      date: data.date,
-      author: data.author,
-      category: data.category,
-      tags: data.tags || [],
-      excerpt: data.excerpt,
-    },
-  };
+  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[] {
@@ -97,11 +142,7 @@ export default async function BlogPostPage({ params }: PageProps) {
               <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>{new Date(post.metadata.date).toLocaleDateString('en-US', {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric'
-              })}</span>
+              <span>{post.metadata.formattedDate}</span>
             </div>
           </div>
         </div>
@@ -109,7 +150,7 @@ export default async function BlogPostPage({ params }: PageProps) {
 
       {/* Content */}
       <div className="container mx-auto max-w-4xl px-4 py-12">
-        <article className="glass-card p-8 md:p-12 rounded-lg shadow-lg">
+        <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

package/website/app/blog/page.tsx

@@ -1,12 +1,19 @@
 import Link from 'next/link';
+import type { Metadata } from 'next';
 import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
 
+export const metadata: Metadata = {
+  title: 'OSSA Blog - Insights, Research, and Updates',
+  description: 'Insights, research, and updates on the open standard for AI agents. Learn about OSSA, agent orchestration, and best practices.',
+};
+
 interface BlogPost {
   slug: string;
   title: string;
   date: string;
+  formattedDate: string;
   author: string;
   category: string;
   tags: string[];
@@ -15,38 +22,121 @@ interface BlogPost {
 
 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;
+}
+
 function getAllBlogPosts(): BlogPost[] {
+  if (!fs.existsSync(blogDirectory)) {
+    console.warn(`Blog directory does not exist: ${blogDirectory}`);
+    return [];
+  }
+
   const fileNames = fs.readdirSync(blogDirectory);
   const posts = fileNames
     .filter(fileName => fileName.endsWith('.md'))
     .map(fileName => {
-      const slug = fileName.replace(/\.md$/, '');
-      const fullPath = path.join(blogDirectory, fileName);
-      const fileContents = fs.readFileSync(fullPath, 'utf8');
-      const { data } = matter(fileContents);
-
-      return {
-        slug,
-        title: data.title || slug,
-        date: data.date || new Date().toISOString(),
-        author: data.author || 'OSSA Team',
-        category: data.category || 'General',
-        tags: data.tags || [],
-        excerpt: data.excerpt || '',
-      };
+      try {
+        const slug = fileName.replace(/\.md$/, '');
+        const fullPath = path.join(blogDirectory, fileName);
+        const fileContents = fs.readFileSync(fullPath, 'utf8');
+        
+        // Fix malformed YAML before parsing
+        const fixedContent = fixYamlFrontmatter(fileContents);
+        const { data } = matter(fixedContent);
+
+        // Clean up extracted values (remove extra quotes if present)
+        const cleanValue = (value: any): any => {
+          if (typeof value === 'string') {
+            // Remove surrounding double quotes if present
+            return value.replace(/^""(.*)""$/, '$1').replace(/^"(.*)"$/, '$1');
+          }
+          return value;
+        };
+
+        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 {
+          slug,
+          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 ${fileName}:`, error);
+        // Return a default post so the page doesn't crash
+        const defaultDate = new Date();
+        return {
+          slug: fileName.replace(/\.md$/, ''),
+          title: fileName.replace(/\.md$/, ''),
+          date: defaultDate.toISOString(),
+          formattedDate: defaultDate.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+          }),
+          author: 'OSSA Team',
+          category: 'General',
+          tags: [],
+          excerpt: '',
+        };
+      }
     })
-    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+    .filter(post => post !== null && post !== undefined)
+    .sort((a, b) => {
+      try {
+        const dateA = new Date(a.date).getTime();
+        const dateB = new Date(b.date).getTime();
+        if (isNaN(dateA) || isNaN(dateB)) return 0;
+        return dateB - dateA;
+      } catch {
+        return 0;
+      }
+    });
 
   return posts;
 }
 
 export default function BlogPage() {
-  const posts = getAllBlogPosts();
-
-  // Featured post - OpenAPI AI Agents Standard
-  const featuredSlug = 'openapi-ai-agents-standard';
-  const featuredPost = posts.find(p => p.slug.toLowerCase().includes(featuredSlug) || p.slug.toLowerCase().includes('openapi'));
-  const otherPosts = posts.filter(p => p.slug !== featuredPost?.slug);
+  let posts: BlogPost[] = [];
+  let featuredPost: BlogPost | undefined;
+  let otherPosts: BlogPost[] = [];
+
+  try {
+    posts = getAllBlogPosts();
+    // Featured post - Welcome to OSSA
+    const featuredSlug = 'welcome-to-ossa';
+    featuredPost = posts.find(p => p.slug.toLowerCase() === featuredSlug);
+    otherPosts = posts.filter(p => p.slug !== featuredPost?.slug);
+  } catch (error) {
+    console.error('Error loading blog posts:', error);
+    // Continue with empty arrays - page will show "No blog posts yet"
+  }
 
   return (
     <div className="min-h-screen bg-gray-50">
@@ -54,9 +144,14 @@ export default function BlogPage() {
       <div className="bg-gradient-to-br from-primary via-blue-600 to-secondary text-white py-20 px-4">
         <div className="container mx-auto max-w-6xl">
           <h1 className="text-5xl font-bold mb-6">OSSA Blog</h1>
-          <p className="text-xl opacity-90 max-w-3xl">
+          <p className="text-xl opacity-90 max-w-3xl mb-4">
             Insights, research, and updates on the open standard for AI agents
           </p>
+          {featuredPost && featuredPost.title && featuredPost.excerpt && (
+            <p className="text-lg opacity-80 max-w-3xl">
+              Start with our featured article: <strong>&quot;{featuredPost.title}&quot;</strong> - {featuredPost.excerpt}
+            </p>
+          )}
         </div>
       </div>
 
@@ -89,11 +184,7 @@ export default function BlogPage() {
                 <div className="flex items-center gap-4 text-sm text-gray-500">
                   <span className="font-medium">{featuredPost.author}</span>
                   <span>•</span>
-                  <span>{new Date(featuredPost.date).toLocaleDateString('en-US', {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric'
-                  })}</span>
+                  <span>{featuredPost.formattedDate}</span>
                 </div>
                 <span className="text-primary font-medium">Read article →</span>
               </div>
@@ -110,7 +201,7 @@ export default function BlogPage() {
             <Link
               key={post.slug}
               href={`/blog/${post.slug}`}
-              className="glass-card p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 block"
+              className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 block border border-gray-200"
             >
               <div className="mb-4">
                 <span className="inline-block px-3 py-1 text-xs font-semibold text-primary bg-blue-100 rounded-full">
@@ -128,11 +219,7 @@ export default function BlogPage() {
 
               <div className="flex items-center justify-between text-sm text-gray-500">
                 <span>{post.author}</span>
-                <span>{new Date(post.date).toLocaleDateString('en-US', {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric'
-                })}</span>
+                <span>{post.formattedDate}</span>
               </div>
 
               {post.tags.length > 0 && (