Astro Cooklang Integration

This integration adds support to load .cook format files as content collections.

Setup

Install this package

npm install --save-dev astro-cooklang
# OR
yarn add -D astro-cooklang

Update your config

Add the plugin to your Astro site's config.

// ./astro.config.js
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import cooklang from "astro-cooklang";

// https://astro.build/config
export default defineConfig({
  integrations: [cooklang()],
});

Usage

Extend the base recipe schema as a data collection in your collections configuration file.

// ./src/content/config.js
import { recipeSchema } from "astro-cooklang";
import { defineCollection, z } from "astro:content";

export const collections = {
  recipes: defineCollection({
    schema: z.object({
      // Add recipe properties.
      ...recipeSchema,

      // Metadata is top level.
      title: z.string().optional(),
    }),
  }),
};

Recipe entries are loaded using the Cooklang-TS library and have the properties shown below.

---
// ./src/pages/[...recipe].astro
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const recipeEntries = await getCollection("recipes");

  return recipeEntries.map((entry) => {
    return {
      params: {
        // e.g `spec/fried-rice`
        recipe: entry.slug,
      },
      props: { entry },
    };
  });
}

const { entry } = Astro.props;

// You can access recipe data like this...
const { ingredients, cookwares, metadata, steps, shoppingList } = entry.data;

// But metadata is also top level...
const title = entry.data.title || entry.slug;
---

See the demo site (source) for an example of an Astro site using this integration.

Development

• ./packages/cooklang/ - Astro integation package, published to npm
• ./demo - Demo site, deployed to GitHub Pages

This project uses Turborepo to run tasks in sub-projects. Run scripts from the top-level directory:

# Build Astro integration + demo.
pnpm run build

# Build integration & watch for changes + run demo site in debug mode
pnpm run dev

TODO

• Write a readme
• Support content collections
  • Allow renderer component to be customized #2
• Find and display recipe images #3
• Properly handle conflicting filenames #5
• Add test fixtures #4
• Setup deploy action #6
• Show how to use categories in demo project
• Show how to use tags in demo project

Thanks

• The Cooklang-TS TypeScript library
• The Cooklang project and it's contributors