Update blog files and details

src/pages/blog/[...page].astro

@@ -2,12 +2,12 @@
 import Layout from "~/layouts/PageLayout.astro";
 
 import { SITE } from "~/config.mjs";
-import { getAllPosts } from "~/utils/getAllPosts";
-import BlogPostCard from "~/components/widgets/BlogPostCard.astro";
-import Pagination from "~/components/widgets/Pagination.astro";
+import { getPosts } from "~/utils/getPosts";
+
+import BlogList from "~/components/widgets/BlogList.astro";
 
 export async function getStaticPaths({ paginate }) {
-  const posts = await getAllPosts();
+  const posts = await getPosts();
 
   return paginate(posts, {
     pageSize: SITE.postsPerPage,
@@ -26,36 +26,7 @@ const canonical = new URL(page.url.current, Astro.site);
 ---
 
 <Layout meta={{ title, description, canonical }}>
-  <main class="mt-20">
-    <section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-      <header>
-        <h1
-          class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16"
-          style="
-"
-        >
-          News and step-by-step guides about
-          <span
-            class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
-            >AstroWind
-          </span>
-        </h1>
-      </header>
-      <ul>
-        {
-          page.data.map((post) => (
-            <li class="mb-10 md:mb-16">
-              <BlogPostCard post={post} />
-            </li>
-          ))
-        }
-      </ul>
-
-      {
-        (page.url.prev || page.url.next) && (
-          <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
-        )
-      }
-    </section>
+  <main>
+    <BlogList page={page} />
   </main>
 </Layout>

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>

src/pages/index.astro

@@ -10,7 +10,7 @@ import StepsFeatures from "~/components/widgets/StepsFeatures.astro";
 import BasicFAQs from "~/components/widgets/BasicFAQs.astro";
 import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro";
 import StepsLeft from "~/components/widgets/StepsLeft.astro";
-import BlogFeaturesPosts from "~/components/widgets/BlogFeaturesPosts.astro";
+import HighlightedPosts from "~/components/widgets/HighlightedPosts.astro";
 import Stats from "~/components/widgets/Stats.astro";
 
 const title = `${SITE.name} — Your website with Astro + Tailwind CSS`;
@@ -20,13 +20,13 @@ const canonical = new URL("", Astro.site);
 ---
 
 <Layout meta={{ title, description, canonical }}>
-  <main class="mt-20">
+  <main>
     <Hero />
     <BasicFeatures />
     <StepsLeft />
     <TwoColsFeatures />
     <StepsFeatures />
-    <BlogFeaturesPosts />
+    <HighlightedPosts />
     <BasicFAQs />
     <Stats />
     <BasicCTA />

src/pages/rss.xml.js

@@ -1,9 +1,9 @@
 import rss from "@astrojs/rss";
 
 import { SITE } from "~/config";
-import { getAllPosts } from "~/utils/getAllPosts";
+import { getPosts } from "~/utils/getPosts";
 
-const posts = await getAllPosts();
+const posts = await getPosts();
 
 export const get = () =>
   rss({