Update blog files and details

src/pages/blog/[slug].astro

@@ -1,12 +1,13 @@
 ---
-import Layout from "~/layouts/PageLayout.astro";
-import Picture from "~/components/core/Picture.astro";
-
 import { SITE } from "~/config.mjs";
-import { getAllPosts } from "~/utils/getAllPosts";
+import { getPosts } from "~/utils/getPosts";
+import { findImage } from "~/utils/findImage";
+
+import Layout from "~/layouts/PageLayout.astro";
+import BlogPost from "~/components/widgets/BlogPost.astro";
 
 export async function getStaticPaths() {
-  const posts = await getAllPosts();
+  const posts = await getPosts();
 
   return posts.map((post) => ({
     params: { slug: post.slug },
@@ -20,14 +21,7 @@ const title = `${post.title} — ${SITE.name}`;
 const description = post.description;
 const canonical = new URL(`blog/${post.slug}`, Astro.site);
 
-const images = import.meta.glob("../../assets/images/*");
-
-const imageSrc =
-  typeof images[post.image] === "function"
-    ? (await images[post.image]())["default"]
-    : typeof post.image === "string"
-    ? post.image
-    : null;
+const image = await findImage(post.image);
 ---
 
 <Layout
@@ -35,45 +29,10 @@ const imageSrc =
     title,
     description,
     canonical,
-    image: imageSrc,
+    image,
   }}
 >
-  <main class="mt-20">
-    <section class="py-8 sm:py-16 lg:py-20 mx-auto">
-      <article>
-        <header>
-          <p class="max-w-3xl mx-auto text-center">
-            <time datetime={post.pubDate}>
-              {
-                new Date(post.pubDate).toLocaleDateString("en-us", {
-                  year: "numeric",
-                  month: "short",
-                  day: "numeric",
-                })
-              }
-            </time> ~ {Math.ceil(post.readingTime)} min
-          </p>
-          <h1
-            class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-6 md:mb-8"
-          >
-            {post.title}
-          </h1>
-
-          <Picture
-            src={imageSrc}
-            class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
-            widths={[400, 768, 900]}
-            sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
-            alt={post.description}
-            aspectRatio="16:9"
-          />
-        </header>
-        <div
-          class="container mx-auto px-4 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
-        >
-          <Fragment set:html={post.body} />
-        </div>
-      </article>
-    </section>
+  <main>
+    <BlogPost post={{ ...post, image }} />
   </main>
 </Layout>