Content Collections

If you have a folder of .ly files, lilypondLoader() turns that folder into an Astro content collection. Each file becomes one entry, with header info like title and composer extracted for you.

Defining a collection

Import lilypondLoader from astro-lilypond/loader and pass it to defineCollection() in your content.config.ts.

src/content.config.ts

import { defineCollection } from "astro:content";
import { lilypondLoader } from "astro-lilypond/loader";

export const collections = {
  scores: defineCollection({
    loader: lilypondLoader({ base: "./src/content/scores" }),
  }),
};

Fetching a collection

Read the collection with getCollection(), then render each entry by passing its data to the <LilyPond> component:

MyScores.astro

---
import { getCollection } from "astro:content";
import LilyPond from "astro-lilypond/component";

const scores = await getCollection("scores");
---

<ul>
  {scores.map((score) => (
    <li>
      <h3>{score.data.title}</h3>
      <LilyPond content={score.data} />
    </li>
  ))}
</ul>

Fetching a single entry

Use getEntry() with the collection name and an entry’s id:

MyScore.astro

---
import { getEntry } from "astro:content";
import LilyPond from "astro-lilypond/component";

const sonata = await getEntry("scores", "sonata");
---

<h3>{sonata.data.title}</h3>
<LilyPond content={sonata.data} />

The id is the file’s path relative to base, minus any file extension:

File (relative to base)	Entry id
sonata.ly	sonata
preludes/prelude-1.ly	preludes/prelude-1
works/op-27/moonlight.lilypond	works/op-27/moonlight

You can customize how ids are generated by setting generateId on the lilypondLoader config.

Accessing metadata

Each entry’s data includes fields from your .ly file’s \header such as title, composer, and opus.

You can access these properties directly from data:

MyScore.astro

---
import { getEntry } from "astro:content";
import LilyPond from "astro-lilypond/component";

const entry = await getEntry("scores", "my-score");
---

<h3>{entry.data.title}</h3>
<p>By {entry.data.composer} for {entry.data.instrument}</p>

<LilyPond content={entry.data} />

See the collections reference for all available properties.