Restore post metadata and align comments

sites/vibes/src/components/CoralComments.astro

@@ -8,7 +8,7 @@ const { storyID, storyURL } = Astro.props;
 const coralRoot = "https://coral.neeldhara.cloud";
 ---
 
-<section class="coral-comments container max-w-3xl py-10 md:py-12" aria-label="Comments">
+<section class="coral-comments blog-comments-shell" aria-label="Comments">
   <div id="coral_thread" data-story-id={storyID} data-story-url={storyURL}></div>
 </section>
 

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

@@ -1,4 +1,14 @@
 import type { ReactNode } from "react";
+import { format } from "date-fns";
+
+const getReadingTime = (body: string | undefined) => {
+  const words = (body ?? "")
+    .replace(/```[\s\S]*?```/g, " ")
+    .replace(/<[^>]+>/g, " ")
+    .match(/\b[\w'-]+\b/g);
+
+  return Math.max(1, Math.ceil((words?.length ?? 0) / 220));
+};
 
 const BlogPost = ({
   post,
@@ -7,11 +17,22 @@ const BlogPost = ({
   post: any;
   children: ReactNode;
 }) => {
-  const { title, image } = post.data;
+  const { title, image, pubDate } = post.data;
+  const readingTime = getReadingTime(post.body);
 
   return (
     <section className="blog-post-shell">
       <article className="blog-article">
+        <header className="blog-post-header">
+          <div className="blog-post-meta">
+            <time dateTime={pubDate.toISOString()}>
+              {format(pubDate, "MMMM d, yyyy")}
+            </time>
+            <span>{readingTime} min read</span>
+          </div>
+          <h1 className="blog-post-title">{title}</h1>
+        </header>
+
         {image ? (
           <figure className="blog-post-hero-image">
             <img src={image} alt={title} />