Getting Started

An opinionated Starlight plugin to create a recipe website.

Starlight Recipes supports the following features:

• Paginated recipe browsing and discovery
• Global and per-recipe author attribution
• High-resolution cover image support
• Custom sidebar with featured content
• Cooking mode: Integrated timers and checkboxes
• Dynamic ingredient scaling by serving size
• Print-optimized layouts for every recipe
• Automated SEO via recipe structured data

The following features are available when you allow on-demand rendering:

• Automatic rating system based on Countify

Check out the demo for a preview of an example cookbook.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation and setup

1. Starlight Recipes is a Starlight plugin. Install it by running the following command in your terminal:

   npm pnpm yarn

   npm install starlight-recipes

   pnpm add starlight-recipes

   yarn add starlight-recipes

2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightRecipes from 'starlight-recipes'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightRecipes()],
         title: 'My Docs',
       }),
     ],
   })

3. Starlight Recipes uses Astro’s content collections, which are configured in the src/content.config.ts file.

   Update the content config file to add support for customizing individual recipes using their frontmatter:

   src/content.config.ts

   import { defineCollection } from 'astro:content';
   import { docsLoader } from '@astrojs/starlight/loaders';
   import { docsSchema } from '@astrojs/starlight/schema';
   import { recipesSchema } from 'starlight-recipes/schema'
   
   export const collections = {
     docs: defineCollection({
       loader: docsLoader(),
       schema: docsSchema({
         extend: (context) => recipesSchema(context)
       })
     }),
   };

   If you are already extending Starlight’s schema with additional fields, you can rely on Zod’s API to compose schemas together, e.g. recipesSchema(context).merge(mySchema).

4. Add Astro’s site configuration to enable Structured Data. This is necessary to generate valid SEO images.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightRecipes from 'starlight-recipes'
   
   export default defineConfig({
    site: "https://example.com",
     integrations: [
       starlight({
       plugins: [starlightRecipes()],
       title: 'My Docs',
       }),
     ],
   })

5. Add any Astro Server Adapter to unlock interactive features.

   npm pnpm yarn

   Cloudflare Netlify Node Vercel

   npx astro add cloudflare

   npx astro add netlify

   npx astro add node

   npx astro add vercel

   pnpm astro add cloudflare

   pnpm astro add netlify

   pnpm astro add node

   pnpm astro add vercel

   yarn astro add cloudflare

   yarn astro add netlify

   yarn astro add node

   yarn astro add vercel

6. Create your first recipe by copying the recipe’s cover image into a new project folder, like src/assets/, and creating a .md or .mdx file in the src/content/docs/recipes/ directory:

   src/content/docs/recipes/virgin-colada.md

   ---
   title: Virgin Colada
   cover:
     alt: A tall glass of Virgin Colada with a pineapple wedge and cherry
     image: "../../../assets/virgin-colada.png"
   ---

7. Start the development server to preview the plugin in action.

The Starlight Recipes plugin behavior can be tweaked using various configuration options.