Blog Data

Starlight Blog exposes information about the blog posts in your project. This guide explains how to use Starlight Blog’s data.

What is blog data?

Starlight Blog data is an object containing the information about all the blog posts in your project. It includes information like a list of all the blog posts, the title of each post, the date it was published, and the author.

Using blog data

The posts object contains an array of all the blog posts in your project.

You can access this data from the Astro.locals.starlightBlog global in Astro components:

---
const { posts } = Astro.locals.starlightBlog
//        ^ The list of all blog posts
---

This can be useful for example to create a widget that lists recent blog posts on your homepage:

<ul>
  {
    Astro.locals.starlightBlog.posts.slice(0, 5).map((post) => (
      <li>
        <a href={post.href}>{post.title}</a>
      </li>
    ))
  }
</ul>

Preview

`starlightBlog`

The starlightBlog object has the following properties:

`posts`

An list of all the blog posts in your project ordered by descending publication date.

Each post has the following properties:

`title`

Type: string

The title of the blog post.

`href`

Type: string

The link to the blog post.

`createdAt`

Type: Date

The date of the blog post.

`updatedAt`

Type: Date | undefined

The last update date of the blog post. It is only defined if the lastUpdated frontmatter field is specified and different from the date frontmatter field.

`draft`

Type: boolean

Whether the blog post is a draft. Draft blog posts are only visible in development mode.

`featured`

Type: boolean

Whether the blog post is featured.

`cover`

Type: { alt: string; image: ImageMetadata } | { alt: string; dark: ImageMetadata; light: ImageMetadata } | undefined

The optional cover image of the blog post.

Based on how the cover image is defined in the frontmatter of the blog post, it can either be a single image or a pair of images for dark and light themes. Images are imported and transformed into metadata, allowing you to pass it as a src to <Image/> or getImage().

Check the Starlight Blog <Cover> component to see an example of how to use the cover image or learn more about images in content collections in the Astro docs.

`entry`

The Astro content collection entry for the blog post which includes frontmatter values at entry.data.

entry: {
  data: {
    description: string | undefined
    // etc.
  }
}

Learn more about the shape of this object in Astro’s Collection Entry Type reference.

`authors`

Type: { name: string; title?: string; url?: string; }[]

The list of authors of the blog post.

Each author has the following properties:

`name`

Type: string

The name of the author.

`title`

Type: string | undefined

The optional title of the author.

`url`

Type: string | undefined

The optional URL to link the author to.

`tags`

Type: { label: string; href: string; }[]

The list of tags of the blog post.

Each tag has the following properties:

`label`

Type: string

The label of the tag.

`href`

Type: string

The link to the tag page.