Content Collections are a welcome addition to my Astro setup

All of the notes on this site are built from markdown files in an Astro static site. As of Astro 2.0, you can effectively add type validation to your markdown files, via a feature called Content Collections.

I must confess I don't enjoy TypeScript all that much. I can see how and why it is helpful in certain circumstances, but I'm not in the "make everything TypeScript because TyPeScRiPt iS tHe fUtUre" demographic.

It makes sense for this usecase of improving the experience of debugging issues in your markdown files. I'm currently working on a little redesign of this site, and having the note content typed has made working on it faster and easier.

How I upgraded my site to use Content Collections

Updated Astro

npm install astro@latest

Moved all the notes to src/content/notes

Previously there were in a a directory at src/notes, but Content Collections need to be kept in the content directory.

Added type definitions

For my notes collection in src/content/config.js

// 1. Import utilities from `astro:content`
import { z, defineCollection } from 'astro:content';
// 2. Define your collection(s)
const notesCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    tags: z.array(z.string()),
    added: z.string(),
    updated: z.string(),
    excerpt: z.string().nullable(),
  })
});
// 3. Export a single `collections` object to register your collection(s)
// This key should match your collection directory name in "src/content"
export const collections = {
  'notes': notesCollection,
};

Replaced the usage of Astro.glob with getCollection

The old way of getting all my notes:

const notes = await Astro.glob(`../notes/*.md`);

The new way:

import { getCollection, getEntryBySlug } from 'astro:content';

const notes = await getCollection('notes');

Astro.glob returned an array objects with a frontmatter property. getCollection returns an array of objects with a data property, so I had to update the places where I was accessing the frontmatter.

For example

note.frontmatter.title

is now

note.data.title