Schritt 5: Shortcodes durch Astro-Komponenten ersetzen

Mapping Hugo-Shortcodes → Astro:

| Shortcode             | Astro-Äquivalent                          |
|-----------------------|-------------------------------------------|
| {{< recent-posts >}}  | src/components/RecentPosts.astro          |
| {{< marginalcontent-md >}} | Layout-Slot (kommt in Schritt 6)    |
| {{< marginalcontent-html >}} | Layout-Slot (kommt in Schritt 6)  |
| {{< footerlinks >}}   | Layout-Prop/Slot (kommt in Schritt 6)     |

RecentPosts.astro: zeigt die 5 neuesten Blog-Posts (entspricht
dem Hugo-Shortcode recent-posts.html). Wird in der Startseite verwendet.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

diff --git a/src/components/RecentPosts.astro b/src/components/RecentPosts.astro
new file mode 100644 (file)
index 0000000..7e24b94
--- /dev/null
+++ b/src/components/RecentPosts.astro
@@ -0,0 +1,12 @@
+---
+import { getCollection } from 'astro:content';
+
+const posts = (await getCollection('blog', ({ data }) => !data.draft))
+  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
+  .slice(0, 5);
+---
+<ul>
+  {posts.map(post => (
+    <li><a href={post.data.url ?? `/${post.id}/`}>{post.data.title}</a></li>
+  ))}
+</ul>