Import Quarto posts and expand blog sync bridge

sites/vibes/src/components/sections/blog-posts.tsx

@@ -16,8 +16,47 @@ const BlogPosts = ({
   // Get the first post as the featured post
   const featuredPost = posts[0];
   const remainingPosts = posts.slice(1);
+  const slugFor = (post: any) => post.id.replace(/\/index$/, "");
   const hrefFor = (post: any) =>
-    collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
+    collection ? `/${collection}/${slugFor(post)}/` : `/${slugFor(post)}/`;
+
+  const PostVisual = ({
+    post,
+    featured = false,
+  }: {
+    post: any;
+    featured?: boolean;
+  }) => {
+    if (post.data.image) {
+      return (
+        <img
+          src={post.data.image}
+          alt={post.data.title}
+          className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
+        />
+      );
+    }
+
+    return (
+      <div className="bg-accent/70 text-accent-foreground flex aspect-video w-full items-center justify-center rounded-lg border px-6 text-center">
+        <span
+          className={
+            featured ? "font-fraunces text-2xl" : "font-fraunces text-lg"
+          }
+        >
+          {post.data.title}
+        </span>
+      </div>
+    );
+  };
+
+  if (!featuredPost) {
+    return (
+      <div className="text-muted-foreground container max-w-3xl py-16">
+        No posts yet.
+      </div>
+    );
+  }
 
   return (
     <div className="relative py-10 md:py-16 lg:py-20">
@@ -35,11 +74,7 @@ const BlogPosts = ({
             <div className="flex flex-col gap-6 lg:flex-row">
               <div className="lg:w-1/2">
                 <div className="p-2 lg:p-4">
-                  <img
-                    src={featuredPost.data.image}
-                    alt={featuredPost.data.title}
-                    className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.02]"
-                  />
+                  <PostVisual post={featuredPost} featured />
                 </div>
               </div>
               <div className="flex flex-col justify-center p-4 pb-8 lg:w-1/2 lg:pr-8">
@@ -89,11 +124,7 @@ const BlogPosts = ({
                 href={hrefFor(post)}
               >
                 <div className="p-2">
-                  <img
-                    src={post.data.image}
-                    alt={post.data.title}
-                    className="aspect-video w-full rounded-lg object-cover transition-transform group-hover:scale-[1.01]"
-                  />
+                  <PostVisual post={post} />
                 </div>
                 <div className="px-4 pb-5 pt-2">
                   <h2 className="mb-2 text-xl font-semibold group-hover:underline">