Fix rendering songs

astro.config.ts

@@ -2,10 +2,9 @@ import { defineConfig } from 'astro/config';
 import rehypeKatex from 'rehype-katex';
 import remarkMath from 'remark-math';
 import remarkEmoji from 'remark-emoji';
-import mdx from '@astrojs/mdx';
 import remarkRuby from './src/utils/ruby';
+import mdx from '@astrojs/mdx';
 import solid from '@astrojs/solid-js';
-import markdoc from '@astrojs/markdoc';
 
 
 // https://astro.build/config
@@ -28,6 +27,5 @@ export default defineConfig({
   integrations: [
     mdx(),
     solid(),
-    markdoc(undefined),
   ],
 });

src/components/markdown/Lyrics.astro

@@ -1,11 +1,18 @@
 ---
-import Ruby from "../Ruby.astro";
-import { transform } from "../../../utils/songs/parse";
+import Ruby from "./Ruby.astro";
+import { transform } from "../../utils/songs/parse";
 
-const data = await Astro.slots.render('default');
-const lyrics = transform(data, true);
+
+interface Props {
+  markdown?: boolean;
+  song?: string;
+}
+
+const data = Astro.props.song || await Astro.slots.render('default');
+const markdown = Astro.props.markdown;
+
+const lyrics = transform(data, markdown);
 const cols = lyrics.length ? Object.keys(lyrics[0]) : [];
-
 ---
 
 <table class="c-lyrics">

src/pages/songs/[...slug].astro

@@ -1,9 +1,10 @@
 ---
 import Base from "../../layouts/Base.astro";
 import Song from "../../components/markdown/Song.astro";
+import Lyrics from "../../components/markdown/Lyrics.astro";
 import { CollectionEntry, getCollection } from "astro:content";
 import { ALBUMS } from "../../utils/songs/data";
-import Lyrics from "../../components/markdown/lyrics/Lyrics.astro";
+
 
 export async function getStaticPaths() {
   return (await getCollection('songs'))
@@ -19,7 +20,6 @@ interface Props {
 }
 
 const { cat, song } = Astro.props;
-const { Content } = await song.render();
 
 /** Other versions of this song */
 const other = Object.keys(song.data.album)
@@ -41,7 +41,7 @@ const metadata = {
       <header class="p-header">
         <h1 class="p-header__heading">{song.data.title}</h1>
       </header>
-      <Lyrics markdown={true}>{song.body}</Lyrics>
+      <Lyrics song={song.body} />
     </article>
 
     <aside class="l-song__aside">

src/pages/songs/[cat].astro

@@ -2,7 +2,7 @@
 import Base from "../../layouts/Base.astro";
 import Header from '../../components/headers/Base.astro';
 import { CollectionEntry, getCollection } from 'astro:content';
-import { ALBUMS, getAllCats } from "../../utils/songs";
+import { ALBUMS, getAllCats } from "../../utils/songs/data";
 
 
 export async function getStaticPaths() {

src/pages/songs/index.astro

@@ -1,7 +1,7 @@
 ---
 import List from "../../layouts/List.astro";
 import { getCollection } from 'astro:content';
-import { ALBUMS, getAllCats } from "../../utils/songs";
+import { ALBUMS, getAllCats } from "../../utils/songs/data";
 
 
 const pages = [...getAllCats(await getCollection('songs'))]