/astro-cooklang-integration

Primary LanguageTypeScript

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 in your content 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;

// Use the Content component to render the recipe to HTML in your template.
const { Content } = await entry.render();
---

<Content />

See the demo site for an example Astro site using this integration.

TODO

  • Write a readme
  • 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