Recipes Data

Starlight Recipes exposes information about the recipes and authors in your project. This guide explains how to use Starlight Recipes’ data.

What is recipes data?

Starlight Recipes data is an object containing the information about all the recipes and authors in your project. It includes information like a list of all the recipe authors, a list of all the recipes, the title of each recipe, the date it was published, and the authors.

Using recipe data

The recipes property contains an array of all the recipes in your project while the authors property contains an array of all the authors.

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

example.astro

---
const { recipes, authors } = Astro.locals.starlightRecipes
//        │        └─ The list of all recipe authors
//        └─ The list of all recipes
---

Example: Recipes

This can be useful for example to create a widget that lists popular recipes with their average rating on your homepage:

PopularRecipes.astro

<ul>
  {
    Astro.locals.starlightRecipes.recipes
      .toSorted((a, b) => {
        const ratingA = a.averageRating?.ratingValue ?? 0;
        const ratingB = b.averageRating?.ratingValue ?? 0;
        return ratingB - ratingA;
      })
      .slice(0, 5)
      .map((recipe) => (
        <li>
          <a href={recipe.href}>{recipe.title}</a>
          {recipe.averageRating && (
            <em>({recipe.averageRating.ratingValue}/5 stars)</em>
          )}
        </li>
      ))
  }
</ul>

Preview

• Chocolate Chip Cookies (5/5 stars)
• Spaghetti Bolognese (5/5 stars)
• Khachapuri (5/5 stars)
• Virgin Colada (4.9/5 stars)
• New York Cheesecake (4.5/5 stars)

Note

You need to set up the rating system in order for this example to work.

Example: Authors

Another example is to create a list of all the known authors of your recipes:

RecipesAuthors.astro

---
const authorNames = Astro.locals.starlightRecipes.authors
  .map((author) => author.name)
  .toSorted((a, b) => a.localeCompare(b, Astro.currentLocale))

const authorList = new Intl.ListFormat(Astro.currentLocale, {
  style: 'long',
  type: 'conjunction',
}).format(authorNames)
---

<p><b>Authors:</b>&nbsp;{authorList}</p>

Preview

Authors: Chef Hiro, Felix Schneider, Ghost, Ms. Glenda, and 爆裂サトシ

starlightRecipes object

The starlightRecipes object contains information about all recipes and authors. Here is a summary of the whole type of the object:

{
  recipes: {
    title: string;
    href: string;
    createdAt: Date;
    updatedAt: Date | undefined;
    draft: boolean;
    featured: boolean;
    cover: {
      alt: string;
      image: ImageMetadata | string;
    } | undefined;
    entry: StarlightRecipeEntry;
    authors: {
      name: string;
      title: string | undefined;
      url: string | undefined;
    }[];
    tags: {
      label: string;
      href: string;
    }[];
    averageRating: {
      ratingValue: number;
      ratingCount: number;
    } | undefined;
    time: {
      preparation: number | undefined;
      cooking: number | undefined;
      total: number | undefined;
    } | undefined;
    category: string | undefined;
    cuisine: {
      slug: string;
      name: string;
      flag: string | null;
      label: string;
      isCountry: boolean;
    } | undefined;
    ingredients: {
      name: string;
      quantity: number | undefined;
      unit: string | undefined;
      note: string | undefined;
    }[];
    instructions: {
      text: string;
      name: string | undefined;
      url: string | undefined;
      image: ImageMetadata | string | undefined;
      alt: string | undefined;
      time: number | undefined;
    }[];
    yield: {
      servings: number;
      calories: number | undefined;
      additional: {
        amount: number | undefined;
        unit: string | undefined;
      }[];
    } | undefined;
  }[];
  authors: {
    name: string;
    title: string | undefined;
    url: string | undefined;
  }[];
}

Below are the details for each Recipes Data property and its associated frontmatter field:

recipes

A list of all the recipes in your project ordered by descending publication date.

Each recipe has the following properties:

title

Type: string

The title of the recipe. — Generated from title.

cover

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

The cover image of the recipe. — Generated from cover.

Local images are imported and transformed into metadata while remote images are defined as a string URL that you can pass as a src to <Image/> or getImage().

Check the Starlight Recipes <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.

href

Type: string

The link to the recipe.

createdAt

Type: Date | undefined

The creation date of the recipe. — Generated from date.

updatedAt

Type: Date | undefined

The date the recipe was last updated. — Generated from lastUpdated.

It is only defined if the lastUpdated frontmatter field is specified and different from the date frontmatter field.

draft

Type: boolean

Whether the recipe is a draft. — Generated from draft.

Draft recipes are only visible in development mode.

featured

Type: boolean

Whether the recipe is featured. — Generated from featured.

entry

The Astro content collection entry for the recipe 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: StarlightRecipesAuthorData[]

The list of authors of the recipe. — Generated from authors.

tags

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

The list of tags of the recipe. — Generated from tags.

Each tag has the following properties:

label

Type: string

The label of the tag.

href

Type: string

The link to the tag page.

time

Type: TimeConfig

Duration-related data about the recipe. — Generated from time.

authors

Type: StarlightRecipesAuthorData[]

An unordered list of all the known authors in your recipes. — Generated from authors and Recipe Authors.

StarlightRecipesAuthorData

Recipe authors are represented by a StarlightRecipesAuthorData object with 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.