Add Latest Posts support

src/components/blog/HighlightedPosts.astro

@@ -1,9 +1,7 @@
 ---
-import Picture from '~/components/core/Picture.astro';
+import Grid from '~/components/blog/Grid.astro';
 
 import { findPostsByIds } from '~/utils/posts';
-import { findImage } from '~/utils/images';
-import { getPermalink } from '~/utils/permalinks';
 
 const ids = [
 	'get-started-website-with-astro-tailwind-css',
@@ -11,10 +9,7 @@ const ids = [
 	'useful-resources-to-create-websites',
 	'astrowind-template-in-depth',
 ];
-
-const items = await Promise.all(
-	(await findPostsByIds(ids)).map(async (item) => ({ ...item, image: await findImage(item.image) }))
-);
+const posts = await findPostsByIds(ids);
 ---
 
 <section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
@@ -30,29 +25,5 @@ const items = await Promise.all(
 		</p>
 	</div>
 
-	<div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
-		{
-			items.map((post) => (
-				<article class="mb-6 transition">
-					<Picture
-						src={post.image}
-						class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-						widths={[400, 900]}
-						sizes="(max-width: 900px) 400px, 900px"
-						alt={post.title}
-						aspectRatio="16:9"
-					/>
-					<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
-						<a
-							href={getPermalink(post.slug, 'post')}
-							class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-						>
-							{post.title}
-						</a>
-					</h3>
-					<p class="text-gray-700 dark:text-gray-400">{post.excerpt || post.description}</p>
-				</article>
-			))
-		}
-	</div>
+	<Grid posts={posts} />
 </section>