Restore post metadata and align comments

sites/art/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/art/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} />

sites/art/src/styles/article.css

@@ -18,6 +18,10 @@
 }
 
 .blog-post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono);
   font-size: 0.75rem;
@@ -25,6 +29,12 @@
   text-transform: uppercase;
 }
 
+.blog-post-meta span::before {
+  content: "/";
+  margin-right: 0.65rem;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)) 55%, transparent);
+}
+
 .blog-post-header .blog-post-title {
   margin-top: 0.65rem;
   color: hsl(var(--foreground));
@@ -314,7 +324,9 @@
 }
 
 .article-content :where([data-footnotes] ol) {
-  padding-left: 1.25rem;
+  margin-left: 0;
+  padding-left: 0;
+  list-style-position: inside;
 }
 
 .article-content :where([data-footnotes] li + li) {
@@ -322,6 +334,7 @@
 }
 
 .article-content :where([data-footnotes] p) {
+  display: inline;
   margin: 0;
 }
 
@@ -330,6 +343,17 @@
   text-decoration: none;
 }
 
+.blog-comments-shell {
+  width: 100%;
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 0 1.5rem 4.5rem;
+}
+
+.blog-comments-shell #coral_thread {
+  width: 100%;
+}
+
 @media (min-width: 768px) {
   .blog-post-shell {
     padding-top: 4rem;

sites/poetry/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/poetry/src/components/sections/blog-post.tsx

@@ -1,3 +1,14 @@
+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,
   children,
@@ -5,12 +16,19 @@ const BlogPost = ({
   post: any;
   children: React.ReactNode;
 }) => {
-  const { title } = post.data;
+  const { title, pubDate } = post.data;
+  const readingTime = getReadingTime(post.body);
 
   return (
     <section className="container px-6 py-2 md:py-6">
       <article className="poetry-post mx-auto">
         <h1 className="poetry-post-title">{title}</h1>
+        <div className="poetry-post-meta">
+          <time dateTime={pubDate.toISOString()}>
+            {format(pubDate, "MMMM d, yyyy")}
+          </time>
+          <span>{readingTime} min read</span>
+        </div>
         <div className="poetry-post-body">{children}</div>
       </article>
     </section>

sites/poetry/src/styles/article.css

@@ -18,6 +18,10 @@
 }
 
 .blog-post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono);
   font-size: 0.75rem;
@@ -25,6 +29,12 @@
   text-transform: uppercase;
 }
 
+.blog-post-meta span::before {
+  content: "/";
+  margin-right: 0.65rem;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)) 55%, transparent);
+}
+
 .blog-post-header .blog-post-title {
   margin-top: 0.65rem;
   color: hsl(var(--foreground));
@@ -314,7 +324,9 @@
 }
 
 .article-content :where([data-footnotes] ol) {
-  padding-left: 1.25rem;
+  margin-left: 0;
+  padding-left: 0;
+  list-style-position: inside;
 }
 
 .article-content :where([data-footnotes] li + li) {
@@ -322,6 +334,7 @@
 }
 
 .article-content :where([data-footnotes] p) {
+  display: inline;
   margin: 0;
 }
 
@@ -330,6 +343,17 @@
   text-decoration: none;
 }
 
+.blog-comments-shell {
+  width: 100%;
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 0 1.5rem 4.5rem;
+}
+
+.blog-comments-shell #coral_thread {
+  width: 100%;
+}
+
 @media (min-width: 768px) {
   .blog-post-shell {
     padding-top: 4rem;

sites/poetry/src/styles/global.css

@@ -300,7 +300,16 @@
   }
 
   .poetry-post-title {
-    @apply mb-8 text-2xl font-semibold md:mb-10 md:text-3xl;
+    @apply mb-3 text-2xl font-semibold md:text-3xl;
+  }
+
+  .poetry-post-meta {
+    @apply mb-8 flex flex-wrap items-center justify-center gap-2 font-mono text-xs uppercase tracking-wide text-muted-foreground md:mb-10;
+  }
+
+  .poetry-post-meta span::before {
+    content: "/";
+    margin-right: 0.5rem;
   }
 
   .poetry-post-body {

sites/puzzles/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/puzzles/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} />

sites/puzzles/src/styles/article.css

@@ -18,6 +18,10 @@
 }
 
 .blog-post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono);
   font-size: 0.75rem;
@@ -25,6 +29,12 @@
   text-transform: uppercase;
 }
 
+.blog-post-meta span::before {
+  content: "/";
+  margin-right: 0.65rem;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)) 55%, transparent);
+}
+
 .blog-post-header .blog-post-title {
   margin-top: 0.65rem;
   color: hsl(var(--foreground));
@@ -314,7 +324,9 @@
 }
 
 .article-content :where([data-footnotes] ol) {
-  padding-left: 1.25rem;
+  margin-left: 0;
+  padding-left: 0;
+  list-style-position: inside;
 }
 
 .article-content :where([data-footnotes] li + li) {
@@ -322,6 +334,7 @@
 }
 
 .article-content :where([data-footnotes] p) {
+  display: inline;
   margin: 0;
 }
 
@@ -330,6 +343,17 @@
   text-decoration: none;
 }
 
+.blog-comments-shell {
+  width: 100%;
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 0 1.5rem 4.5rem;
+}
+
+.blog-comments-shell #coral_thread {
+  width: 100%;
+}
+
 @media (min-width: 768px) {
   .blog-post-shell {
     padding-top: 4rem;

sites/reflections/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/reflections/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} />

sites/reflections/src/styles/article.css

@@ -18,6 +18,10 @@
 }
 
 .blog-post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono);
   font-size: 0.75rem;
@@ -25,6 +29,12 @@
   text-transform: uppercase;
 }
 
+.blog-post-meta span::before {
+  content: "/";
+  margin-right: 0.65rem;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)) 55%, transparent);
+}
+
 .blog-post-header .blog-post-title {
   margin-top: 0.65rem;
   color: hsl(var(--foreground));
@@ -314,7 +324,9 @@
 }
 
 .article-content :where([data-footnotes] ol) {
-  padding-left: 1.25rem;
+  margin-left: 0;
+  padding-left: 0;
+  list-style-position: inside;
 }
 
 .article-content :where([data-footnotes] li + li) {
@@ -322,6 +334,7 @@
 }
 
 .article-content :where([data-footnotes] p) {
+  display: inline;
   margin: 0;
 }
 
@@ -330,6 +343,17 @@
   text-decoration: none;
 }
 
+.blog-comments-shell {
+  width: 100%;
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 0 1.5rem 4.5rem;
+}
+
+.blog-comments-shell #coral_thread {
+  width: 100%;
+}
+
 @media (min-width: 768px) {
   .blog-post-shell {
     padding-top: 4rem;

sites/research/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/research/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} />

sites/research/src/styles/article.css

@@ -18,6 +18,10 @@
 }
 
 .blog-post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono);
   font-size: 0.75rem;
@@ -25,6 +29,12 @@
   text-transform: uppercase;
 }
 
+.blog-post-meta span::before {
+  content: "/";
+  margin-right: 0.65rem;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)) 55%, transparent);
+}
+
 .blog-post-header .blog-post-title {
   margin-top: 0.65rem;
   color: hsl(var(--foreground));
@@ -314,7 +324,9 @@
 }
 
 .article-content :where([data-footnotes] ol) {
-  padding-left: 1.25rem;
+  margin-left: 0;
+  padding-left: 0;
+  list-style-position: inside;
 }
 
 .article-content :where([data-footnotes] li + li) {
@@ -322,6 +334,7 @@
 }
 
 .article-content :where([data-footnotes] p) {
+  display: inline;
   margin: 0;
 }
 
@@ -330,6 +343,17 @@
   text-decoration: none;
 }
 
+.blog-comments-shell {
+  width: 100%;
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 0 1.5rem 4.5rem;
+}
+
+.blog-comments-shell #coral_thread {
+  width: 100%;
+}
+
 @media (min-width: 768px) {
   .blog-post-shell {
     padding-top: 4rem;

sites/reviews/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/reviews/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} />

sites/reviews/src/styles/article.css

@@ -18,6 +18,10 @@
 }
 
 .blog-post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono);
   font-size: 0.75rem;
@@ -25,6 +29,12 @@
   text-transform: uppercase;
 }
 
+.blog-post-meta span::before {
+  content: "/";
+  margin-right: 0.65rem;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)) 55%, transparent);
+}
+
 .blog-post-header .blog-post-title {
   margin-top: 0.65rem;
   color: hsl(var(--foreground));
@@ -314,7 +324,9 @@
 }
 
 .article-content :where([data-footnotes] ol) {
-  padding-left: 1.25rem;
+  margin-left: 0;
+  padding-left: 0;
+  list-style-position: inside;
 }
 
 .article-content :where([data-footnotes] li + li) {
@@ -322,6 +334,7 @@
 }
 
 .article-content :where([data-footnotes] p) {
+  display: inline;
   margin: 0;
 }
 
@@ -330,6 +343,17 @@
   text-decoration: none;
 }
 
+.blog-comments-shell {
+  width: 100%;
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 0 1.5rem 4.5rem;
+}
+
+.blog-comments-shell #coral_thread {
+  width: 100%;
+}
+
 @media (min-width: 768px) {
   .blog-post-shell {
     padding-top: 4rem;

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} />

sites/vibes/src/styles/article.css

@@ -18,6 +18,10 @@
 }
 
 .blog-post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono);
   font-size: 0.75rem;
@@ -25,6 +29,12 @@
   text-transform: uppercase;
 }
 
+.blog-post-meta span::before {
+  content: "/";
+  margin-right: 0.65rem;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)) 55%, transparent);
+}
+
 .blog-post-header .blog-post-title {
   margin-top: 0.65rem;
   color: hsl(var(--foreground));
@@ -314,7 +324,9 @@
 }
 
 .article-content :where([data-footnotes] ol) {
-  padding-left: 1.25rem;
+  margin-left: 0;
+  padding-left: 0;
+  list-style-position: inside;
 }
 
 .article-content :where([data-footnotes] li + li) {
@@ -322,6 +334,7 @@
 }
 
 .article-content :where([data-footnotes] p) {
+  display: inline;
   margin: 0;
 }
 
@@ -330,6 +343,17 @@
   text-decoration: none;
 }
 
+.blog-comments-shell {
+  width: 100%;
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 0 1.5rem 4.5rem;
+}
+
+.blog-comments-shell #coral_thread {
+  width: 100%;
+}
+
 @media (min-width: 768px) {
   .blog-post-shell {
     padding-top: 4rem;

src/components/sections/blog-post.tsx

@@ -1,87 +1,47 @@
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import type { ReactNode } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { format } from "date-fns";
-import { Calendar, Clock, ArrowLeft, User } from "lucide-react";
+
+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,
   children,
 }: {
   post: any;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => {
-  const { title, authorName, image, pubDate, description, authorImage } =
+  const { title, image, pubDate } = post.data;
-    post.data;
+  const readingTime = getReadingTime(post.body);
+
   return (
-    <>
+    <section className="blog-post-shell">
-      {/* Hero section with gradient background and post info */}
+      <article className="blog-article">
-      <section className="pb-8 pt-4">
+        <header className="blog-post-header">
-        <div className="container max-w-4xl">
+          <div className="blog-post-meta">
-          <div className="space-y-2 text-center">
+            <time dateTime={pubDate.toISOString()}>
-            <h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
+              {format(pubDate, "MMMM d, yyyy")}
-              {title}
+            </time>
-            </h1>
+            <span>{readingTime} min read</span>
-            <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
-              {description}
-            </p>
           </div>
+          <h1 className="blog-post-title">{title}</h1>
+        </header>
 
-          <div className="mx-auto mt-6 flex max-w-md flex-wrap items-center justify-center gap-6">
+        {image ? (
-            {/* Author info */}
+          <figure className="blog-post-hero-image">
-            {authorImage ? (
+            <img src={image} alt={title} />
-              <div className="flex items-center gap-3">
+          </figure>
-              </div>
+        ) : null}
-            ) : (
-              <div className="flex items-center gap-3">
-                <div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded-full shadow-sm">
-                  <User className="h-5 w-5" />
-                </div>
-                <div className="flex flex-col text-sm">
-                  <span className="font-medium">
-                    {authorName || "Anonymous"}
-                  </span>
-                  <span className="text-muted-foreground">Author</span>
-                </div>
-              </div>
-            )}
 
-            {/* Date info */}
+        <div className="article-content">{children}</div>
-            <div className="flex items-center gap-4">
+      </article>
-              <div className="text-muted-foreground flex items-center gap-1 text-sm">
+    </section>
-                <Calendar className="h-4 w-4" />
-                <span>{format(pubDate, "MMMM d, yyyy")}</span>
-              </div>
-
-              <div className="text-muted-foreground flex items-center gap-1 text-sm">
-                <Clock className="h-4 w-4" />
-                <span>5 min read</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Featured image */}
-      {image && (
-        <section className="container max-w-5xl py-4">
-          <div className="aspect-video w-full overflow-hidden rounded-xl border">
-            <img
-              src={image}
-              alt={title}
-              className="h-full w-full object-cover"
-            />
-          </div>
-        </section>
-      )}
-
-      {/* Article content */}
-      <section className="container my-10 max-w-3xl">
-        <article className="prose prose-lg dark:prose-invert prose-headings:font-semibold prose-a:text-primary mx-auto">
-          {children}
-        </article>
-      </section>
-    </>
   );
 };
 

src/styles/article.css

@@ -18,6 +18,10 @@
 }
 
 .blog-post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono);
   font-size: 0.75rem;
@@ -25,6 +29,12 @@
   text-transform: uppercase;
 }
 
+.blog-post-meta span::before {
+  content: "/";
+  margin-right: 0.65rem;
+  color: color-mix(in srgb, hsl(var(--muted-foreground)) 55%, transparent);
+}
+
 .blog-post-header .blog-post-title {
   margin-top: 0.65rem;
   color: hsl(var(--foreground));
@@ -314,7 +324,9 @@
 }
 
 .article-content :where([data-footnotes] ol) {
-  padding-left: 1.25rem;
+  margin-left: 0;
+  padding-left: 0;
+  list-style-position: inside;
 }
 
 .article-content :where([data-footnotes] li + li) {
@@ -322,6 +334,7 @@
 }
 
 .article-content :where([data-footnotes] p) {
+  display: inline;
   margin: 0;
 }
 
@@ -330,6 +343,17 @@
   text-decoration: none;
 }
 
+.blog-comments-shell {
+  width: 100%;
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 0 1.5rem 4.5rem;
+}
+
+.blog-comments-shell #coral_thread {
+  width: 100%;
+}
+
 @media (min-width: 768px) {
   .blog-post-shell {
     padding-top: 4rem;