Improve song lists

src/content/config.ts

@@ -29,10 +29,13 @@ export const collections = {
   songs: defineCollection({
     schema: z.object({
       title: z.string(),
+      composer: z.string().optional(),
+      lyrics: z.string().optional(),
       album: z.record(
         z.string(),
         z.object({
-          track: z.number()
+          track: z.number(),
+          vocal: z.array(z.string()).optional()
         })
       )
     })

src/content/songs/black-eyes.mdoc

@@ -1,8 +1,12 @@
 ---
 title: Black Eyes
+composer: Kirin (EastNewSound)
+lyrics: Mei Ayakura
 album:
   ARCD0051:
     track: 7
+    vocal:
+      - Mei Ayakura
 ---
 
 {% lyrics %}

src/data/circles.json

@@ -0,0 +1,9 @@
+{
+  "Alstroemeria Records": {
+    "albums": {
+      "ARCD0051": {
+        "title": "Engaged Dancehall"
+      }
+    }
+  }
+}

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

@@ -1,6 +1,7 @@
 ---
-import Lyrics from "../../layouts/Lyrics.astro";
+import Base from "../../layouts/Base.astro";
-import { getCollection } from "astro:content";
+import Header from '../../components/headers/Base.astro';
+import { CollectionEntry, getCollection } from "astro:content";
 
 export async function getStaticPaths() {
   return (await getCollection('songs'))
@@ -9,10 +10,20 @@ export async function getStaticPaths() {
     .flat()
 }
 
+
+interface Props {
+  song: CollectionEntry<'songs'>;
+}
+
 const { song } = Astro.props;
 const { Content } = await song.render();
 ---
 
-<Lyrics frontmatter={song.data}>
+<Base>
-  <Content />
+  <main class="l-songs-song">
-</Lyrics>
+    <article class="l-songs-song__page">
+      <Header title={song.data.title} />
+      <Content />
+    </article>
+  </main>
+</Base>

src/pages/songs/[cat].astro

@@ -1,7 +1,8 @@
 ---
-import List from "../../layouts/List.astro";
+import Base from "../../layouts/Base.astro";
-import { getCollection } from 'astro:content';
+import Header from '../../components/headers/Base.astro';
-import { getAllCats } from "../../utils/songs";
+import { CollectionEntry, getCollection } from 'astro:content';
+import { ALBUMS, getAllCats } from "../../utils/songs";
 
 
 export async function getStaticPaths() {
@@ -13,12 +14,33 @@ export async function getStaticPaths() {
     props: { 
       songs: songs
         .filter(entry => cat in entry.data.album)
-        .map(song => ({ title: song.data.title, slug: `/songs/${cat}/${song.slug}/` })) }
+        .map(song => ({ frontmatter: song.data, slug: `/songs/${cat}/${song.slug}/` }))
+    }
   }))
 }
 
+interface Props {
+  songs: Array<{
+    frontmatter: CollectionEntry<'songs'>['data'],
+    slug: string,
+  }>
+}
+
 const { cat } = Astro.params;
 const { songs } = Astro.props;
+const album = ALBUMS[cat!];
 ---
 
-<List title={cat!} pages={songs} />
+<Base>
+  <main class="l-songs-cat">
+    <article class="l-songs-cat__article">
+      <Header title={`${cat} - ${album.title}`} />
+      <div class="l-songs-cat__list">
+        {songs.map(song => [
+          <span>{song.frontmatter.album[cat!].track}</span>
+          <a href={song.slug}>{song.frontmatter.title}</a>
+        ])}
+      </div>
+    </article>
+  </main>
+</Base>

src/pages/songs/index.astro

@@ -1,13 +1,16 @@
 ---
 import List from "../../layouts/List.astro";
 import { getCollection } from 'astro:content';
-import { getAllCats } from "../../utils/songs";
+import { ALBUMS, getAllCats } from "../../utils/songs";
 
 
 const pages = [...getAllCats(await getCollection('songs'))]
   .sort((a, b) => a < b ? 1 : -1)
-  .map(catalog => ({ title: catalog, slug: `/songs/${catalog}/` }));
+  .map(catalog => ({
+    title: `${catalog} - ${ALBUMS[catalog].title}`,
+    slug: `/songs/${catalog}/`
+  }));
 
 ---
 
-<List title="Songs" pages={pages} />
+<List title="Albums" pages={pages} />

src/schema.d.ts

@@ -0,0 +1,12 @@
+/** @file src/data/circles.json */
+interface CirclesSchema {
+  /** Circle name */
+  [key: string]: {
+    albums: {
+      /** Catalog number */
+      [key: string]: {
+        title: string;
+      }
+    }
+  }
+}

src/styles/layouts/_lyrics.scss

@@ -1,8 +0,0 @@
-.l-lyrics {
-  display: flex;
-  padding: 2em 0;
-
-  &__page {
-    margin: 0 auto;
-  }
-}

src/styles/layouts/_songs.scss

@@ -0,0 +1,23 @@
+.l-songs-cat {
+  padding: 1.5em;
+
+  &__article {
+    max-width: 40em;
+    margin: 0 auto;
+  }
+
+  &__list {
+    display: grid;
+    grid-template-columns: 3em 1fr;
+  }
+}
+
+
+.l-songs-song {
+  padding: 1.5em;
+
+  &__page {
+    max-width: 40em;
+    margin: 0 auto;
+  }
+}

src/styles/styles.scss

@@ -32,4 +32,4 @@
 @use 'layouts/home';
 @use 'layouts/pages';
 @use 'layouts/article';
-@use 'layouts/lyrics';
+@use 'layouts/songs';

src/utils/songs.ts

@@ -1,8 +1,16 @@
+import circles from "../data/circles.json";
 import type { CollectionEntry } from "astro:content";
 
 
 type Song = CollectionEntry<'songs'>;
 
+interface Metadata {
+  [key: string]: {
+    circle: string,
+    title: string
+  }
+}
+
 
 export function getAllCats(songs: Song[]): Set<string> {
   return songs.reduce(
@@ -13,3 +21,20 @@ export function getAllCats(songs: Song[]): Set<string> {
     new Set<string>()
   );
 }
+
+function createMetadata(circles: CirclesSchema): Metadata {
+  const metadata: Metadata = {};
+
+  for (const circle of Object.keys(circles)) {
+    const data = circles[circle];
+    for (const cat of Object.keys(data.albums))
+      metadata[cat] = {
+        circle,
+        title: data.albums[cat].title,
+      }
+  }
+  return metadata;
+}
+
+
+export const ALBUMS: Metadata = createMetadata(circles);