File: src/blocks/blog/Blog01.astro
Recent posts grid from the blog content collection. Config supplies headings/CTA; posts must be fetched on the page and passed in.
Config (blocks.ts → blog)
blog: {
heading: "Latest writing",
subheading: "Notes on web development, performance, and shipping great sites.",
ctaLabel: "View all posts",
ctaUrl: "/blog/",
},Add to a page
---
import { getCollection } from "astro:content";
import Blog01 from "@/blocks/blog/Blog01.astro";
const posts = (await getCollection("blog"))
.filter((p) => !p.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---
<Blog01 posts={posts} limit={3} />Inline:
<Blog01
posts={posts}
limit={6}
heading="Latest writing"
showCta={true}
/>Props
| Prop | Config key | Notes |
|---|---|---|
sectionId |
— | Default "blog" |
heading / subheading |
blog.* |
|
posts |
— | Required — collection entries |
limit |
— | Default 3 |
showCta |
— | Default true (only if posts exist) |
ctaLabel / ctaUrl |
blog.cta* |
Content collection
Posts live in src/content/blog/*.md. See Content.