Skip to content

kauhat/astro-cooklang-integration

Repository files navigation

Astro Cooklang Banner

Astro Cooklang Integration

npm version npm downloads Github Actions

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

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