Skip to content

davidenke/astro-decap-collection

Repository files navigation

NPM version Test and build status Sources in GitHub Demo app

Astro Decap Collection

Derive Astro content collection schemata from Decap collection configs.

The procedure is to transform a Decap config into a Zod schema by mapping the Decap widget fields with custom transformers.

A demo application using the transforms to convert in the browser can be found here.

Installation

npm i -D astro-decap-collection
# or
pnpm add -D astro-decap-collection
# or
yarn add -D astro-decap-collection

Usage

Transform the Decap config at build time and use the generated Zod schema. This allows Astro to validate the given data and provides types as well.

Option Description
--config, -c Path to the Decap YML config file, can be a glob pattern
--target, -t Path to the Astro content directory to write to
--naming, -n Naming pattern of the created file with placeholders
--watch, -w Watch the config file for changes

The name of the target file will be config.<collection>.ts by default, using the collection name from the Decap config.
This can be configured with the --naming option placeholders.

Config paths can be provided as positionals, thus the --config flag is optional.

# astro-decap-collection, adc - Binary name
# --config, -c - Decap YML config file path to read from
# --target, -t - Astro content directory path to write to
# --watch,  -w - Use watch mode

# full command:
astro-decap-collection --config ./public/admin/config.yml --target ./src/content --watch
# or with shorthands and positionals:
adc -t ./src/content -w ./public/admin/config.yml
# or with glob pattern:
adc -t ./src/content -w ./public/collections/*.yml

The cli command should be run at least before every astro build.

Then, the generated schema can be used in the Astro collection config.

import { defineCollection } from 'astro:content';
import { prepareSchema } from 'astro-decap-collection';

// grab generated schema
import { schema } from './config.blog.ts';

// define the collection
// https://docs.astro.build/en/guides/content-collections/#defining-collections
export const collections = {
  blog: defineCollection(prepareSchema(schema)),
  // ... or without the convenience wrapper
  blog: defineCollection({ type: 'content', schema }),
};

Placeholders

The --naming option can be used to define a naming pattern for the generated file.
For the time being, the following placeholders are supported:

  • %%name%% - The name of the collection from the Decap config

Local development

Run a local tsx compiler in watch mode

npx -y tsx watch src/cli.ts -c public/examples/blog.yml -t tmp -w