Blog Preview
Responsive grid of blog post cards showing date, title, description, and a "Read more" link. Use it on a landing page to surface recent content.
Summary
The Blog Preview component renders a <section> containing a heading, optional description, and a grid of post cards. Each card displays a formatted date, title, description, and a link to the full post.
Dates are formatted using the site's current locale with the year, long month, and day.
Why Use This Component?
- Surface recent content on your landing page without building a custom blog feed.
- Consistent card layout across all presets — spacing, typography, and depth are preset-aware.
- Formatted dates — pass a date string and the component handles locale-aware formatting.
Usage
Auto Mode
When auto is set to true, the component automatically fetches blog posts from Docusaurus global data. No manual posts array is needed.
Options
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | — | Section heading text. Required. |
posts | Array<{ title: string, description: string, permalink: string, date: string }> | undefined | Blog post data. Required when auto is not true. |
description | string | undefined | undefined | Optional description paragraph below the heading. |
surface | 'alt' | undefined | undefined | Set to 'alt' to use the alternate surface background. |
auto | boolean | undefined | undefined | When true, fetches posts from Docusaurus global data. The posts prop is ignored. |
limit | number | undefined | undefined | Maximum number of posts to display. No limit by default. |
sort | 'newest' | 'oldest' | undefined | 'newest' | Sort direction by date. Applies in both manual and auto mode. |
Troubleshooting
- Date format — The
datefield is passed tonew Date(). Use ISO 8601 format (YYYY-MM-DD) for consistent parsing. - No posts placeholder — When there are no posts (empty array in manual mode, or no blog posts in auto mode), the component shows a "No posts yet" message.
- Auto mode shows no posts — Ensure the blog plugin is enabled in your Docusaurus config and that you have at least one published blog post.