almost done

src/layouts/BlogPost.astro

@@ -1,36 +1,30 @@
 ---
-import type { CollectionEntry } from 'astro:content'
-import FormattedDate from '../components/FormattedDate.astro'
+import type { MarkdownHeading } from 'astro'
 import { Image } from 'astro:assets'
-import Root from './Root.astro'
+import type { CollectionEntry } from 'astro:content'
+import type { ReadTimeResults } from 'reading-time'
+import PostAttributes from '../components/PostAttributes.astro'
+import Tags from '../components/Tags.astro'
+import Toc from '../components/Toc.astro'
+import PageWithTitle from './PageWithTitle.astro'
 
-type Props = CollectionEntry<'blog'>['data']
+type Props = CollectionEntry<'blog'>['data'] & { headings: MarkdownHeading[]; readingTime: ReadTimeResults }
 
-const { title, updatedDate, date, tags, coverImage } = Astro.props
+const { title, updatedDate, date, tags, coverImage, headings, readingTime } = Astro.props
 ---
 
-<Root>
+<PageWithTitle title={title} readable>
   <article>
-    <div class="hero-image">
-      {coverImage && <Image width={1020} height={510} src={coverImage} alt="" />}
-    </div>
-    <div class="prose">
-      <div class="title">
-        <div class="date">
-          <FormattedDate date={date} />
-          {
-            updatedDate && (
-              <div class="last-updated-on">
-                Last updated on <FormattedDate date={updatedDate} />
-              </div>
-            )
-          }
-        </div>
-        <h1>{title}</h1>
-        {tags.map((tag) => <a href={`/tag/${tag}`}>{tag}</a>)}
-        <hr />
-      </div>
-      <slot />
-    </div>
+    <Toc {headings} />
+    <PostAttributes {date} {updatedDate} {readingTime} />
+    {coverImage && <Image width={1020} height={510} src={coverImage} alt="" />}
+    <Tags tags={tags.map((t) => ({ name: t, href: `/tag/${t}` }))} />
+    <slot />
   </article>
-</Root>
+</PageWithTitle>
+
+<style>
+  img {
+    margin: 1rem 0;
+  }
+</style>