From 1ab3d231453a770a2602acb4cd2a934d65dbbcde Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Mon, 29 Sep 2025 04:09:19 +0000
Subject: [PATCH] Wire BlogPost page to Builder CMS

cgen-f46d9cc87ed543389a7b64f959a3b218
---
 client/pages/BlogPost.tsx | 117 ++++++++++++++------------------------
 1 file changed, 44 insertions(+), 73 deletions(-)

diff --git a/client/pages/BlogPost.tsx b/client/pages/BlogPost.tsx
index 549ec1d8..cad6b4c2 100644
--- a/client/pages/BlogPost.tsx
+++ b/client/pages/BlogPost.tsx
@@ -1,100 +1,71 @@
-import { useMemo } from "react";
+import { useEffect, useState } from "react";
 import { useParams, Link } from "react-router-dom";
 import Layout from "@/components/Layout";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { User, Calendar } from "lucide-react";
 import NotFound from "./NotFound";
+import { fetchBuilderOne } from "@/lib/builder";
 
 export default function BlogPost() {
   const { slug } = useParams<{ slug: string }>();
+  const [post, setPost] = useState<any | null>(null);
+  const [loading, setLoading] = useState(true);
 
-  const featuredPost = {
-    title: "The Future of Quantum Game Development",
-    excerpt:
-      "Exploring how quantum computing will revolutionize game AI, physics simulations, and procedural generation in the next decade.",
-    author: "Dr. Sarah Chen",
-    date: "December 15, 2024",
-    readTime: "8 min read",
-    category: "Research",
-    likes: 124,
-    comments: 23,
-    image:
-      "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=1200&h=600&fit=crop",
-  };
-
-  const posts = [
-    featuredPost,
-    {
-      title: "Building Scalable Game Architecture with Microservices",
-      excerpt:
-        "Learn how to design game backends that can handle millions of concurrent players using modern microservices patterns.",
-      author: "Marcus Rodriguez",
-      date: "December 12, 2024",
-      readTime: "6 min read",
-      category: "Technology",
-    },
-    {
-      title: "Advanced Unity Optimization Techniques",
-      excerpt:
-        "Performance optimization strategies that can boost your Unity game's frame rate by up to 300%.",
-      author: "Alex Thompson",
-      date: "December 10, 2024",
-      readTime: "12 min read",
-      category: "Tutorials",
-    },
-  ];
-
-  const normalize = (t?: string) =>
-    (t || "")
-      .toLowerCase()
-      .trim()
-      .replace(/[^a-z0-9\s-]/g, "")
-      .replace(/\s+/g, "-")
-      .replace(/-+/g, "-");
-
-  const post = useMemo(() => {
-    if (!slug) return null;
-    return posts.find((p) => normalize(p.title) === normalize(slug));
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        if (!slug) return;
+        const entry = await fetchBuilderOne<any>("blog-post", slug);
+        if (!cancelled) setPost(entry?.data ? { ...entry.data, title: entry.data.title || entry.name } : null);
+      } catch (e) {
+        console.warn("Builder CMS blog post fetch failed:", e);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
   }, [slug]);
 
-  if (!post) {
-    return <NotFound />;
-  }
+  if (loading) return null;
+  if (!post) return <NotFound />;
 
   return (
     <Layout>
       <div className="min-h-screen bg-aethex-gradient py-12">
         <div className="container mx-auto px-4 max-w-3xl">
           <Card className="overflow-hidden border-border/50 animate-scale-in">
-            <img src={post.image} alt={post.title} className="w-full h-64 object-cover" />
+            {post.image && (
+              <img src={post.image} alt={post.title} className="w-full h-64 object-cover" />
+            )}
             <CardHeader>
-              <Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">{post.category}</Badge>
+              {post.category && (
+                <Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">{post.category}</Badge>
+              )}
               <CardTitle className="text-3xl mt-2">{post.title}</CardTitle>
-              <CardDescription className="text-muted-foreground mt-2">{post.excerpt}</CardDescription>
+              {post.excerpt && (
+                <CardDescription className="text-muted-foreground mt-2">{post.excerpt}</CardDescription>
+              )}
               <div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
-                <div className="flex items-center gap-2">
-                  <User className="h-4 w-4" /> <span>{post.author}</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Calendar className="h-4 w-4" /> <span>{post.date}</span>
-                </div>
+                {post.author && (
+                  <div className="flex items-center gap-2">
+                    <User className="h-4 w-4" /> <span>{post.author}</span>
+                  </div>
+                )}
+                {post.date && (
+                  <div className="flex items-center gap-2">
+                    <Calendar className="h-4 w-4" /> <span>{post.date}</span>
+                  </div>
+                )}
               </div>
             </CardHeader>
             <CardContent className="prose max-w-none mt-6">
-              {/* Simple placeholder content for the article body */}
-              <p>
-                {post.excerpt}
-              </p>
-
-              <p>
-                This is a sample article page. In production the blog content would be loaded from the CMS or database and rendered here.
-              </p>
-
-              <p>
-                <strong>Author:</strong> {post.author}
-              </p>
-
+              {post.body ? (
+                <div dangerouslySetInnerHTML={{ __html: post.body }} />
+              ) : (
+                <p>{post.excerpt}</p>
+              )}
               <div className="pt-6">
                 <Link to="/blog" className="text-aethex-400 underline">Back to Blog</Link>
               </div>