initial commit

src/components/RecentPosts.astro

@@ -0,0 +1,33 @@
+---
+import { IconClock, IconStar, IconArrowRight } from '@tabler/icons-react';
+import { fetchAllPosts } from '../utils/data/posts.js';
+import { md } from '@utils/helpers.js';
+
+const posts = await fetchAllPosts();
+---
+
+<h2>
+  <IconClock size={24} />
+  Recent posts
+</h2>
+{posts.slice(0, 5).map(post => (
+  <article key={post.url}>
+    <div class="post-meta">
+      {post.featured && <IconStar size={16} />}
+      <time datetime={post.date}>
+        {new Date(post.date).toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        })}
+      </time>
+    </div>
+    <h3>
+      <a href={post.url}>{post.title}</a>
+    </h3>
+    <p set:html={md(post.description)}></p>
+  </article>
+))}
+<a class="icon-link" href="/posts">
+  View all posts <IconArrowRight size={16} />
+</a>