@bluefly/openstandardagents 0.2.4 → 0.2.5-RC

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 && (