@angius/astro-jsonc

This is a very simple Astro Integration to allow you to use JSON with comments files as data collections.

Quick Installation

1# global
2astro add @angius/astro-jsonc
3# or npm
4npx astro add @angius/astro-jsonc
5# or yarn
6yarn dlx astro add @angius/astro-jsonc
7# or pnpm
8pnpm dlx astro add @angius/astro-jsonc
9# or bun
10bunx astro add @angius/astro-jsonc

Manual Installation

First, install the @angius/astro-jsonc package using your package manager.

1# or npm
2npm install @angius/astro-jsonc
3# or yarn
4yarn add @angius/astro-jsonc
5# or pnpm
6pnpm add @angius/astro-jsonc
7# or bun
8bun i @angius/astro-jsonc

Next, add the integration to your astro.config.* file. There is currently no set of configuration options.

1import { defineConfig } from "astro/config";
2import jsonc from "@angius/astro-jsonc";
3
4export default defineConfig({
5  // ...
6  integrations: [jsonc()],
7});

Usage

JSON with comment files can only be used within content collections of the data type. Add entries to any content collection using the .jsonc extension:

src/content/my-stuff/
  data-1.jsonc
  data-2.jsonc

Define a collection and its schema in your content/config.ts file.

1import { z, defineCollection } from "astro:content";
2
3const jsoncCollection = defineCollection({
4  // MUST BE 'data'. 'content' will not work.
5  type: "data",
6  // Schema must match what is in your TOML files.
7  schema: z.object({
8    title: z.string(),
9    tags: z.array(z.string()),
10    image: z.string().optional(),
11  }),
12});
13
14export const collections = {
15  // ...
16  'my-stuff': jsoncCollection,
17};

1---
2import { getEntryBySlug } from 'astro:content';
3
4const entry = await getEntryBySlug('my-stuff', 'data-1');
5---
6
7<!--Access frontmatter properties with `data`-->
8<h1>{entry.data.title}</h1>