Improve styles for song lyrics page

src/components/markdown/lyrics/Lyrics.astro

@@ -7,7 +7,7 @@ const cols = Object.keys(lyrics[0]);
 
 ---
 
-<table>
+<table class="c-lyrics">
   <tr>{cols.map(col => <th>{col}</th>)}</tr>
   {lyrics.map(row =>
     <tr>{cols.map(col =>

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

@@ -1,29 +1,61 @@
 ---
 import Base from "../../layouts/Base.astro";
-import Header from '../../components/headers/Base.astro';
 import { CollectionEntry, getCollection } from "astro:content";
+import { ALBUMS } from "../../utils/songs";
 
 export async function getStaticPaths() {
   return (await getCollection('songs'))
     .map(song => Object.keys(song.data.album)
-      .map(cat => ({ params: {slug: `${cat}/${song.slug}`}, props: {song} })))
+      .map(cat => ({ params: {slug: `${cat}/${song.slug}`}, props: {song, cat} })))
     .flat()
 }
 
 
 interface Props {
+  cat: string;
   song: CollectionEntry<'songs'>;
 }
 
-const { song } = Astro.props;
+const { cat, song } = Astro.props;
 const { Content } = await song.render();
+
+const metadata = {
+  ...song.data,
+  ...song.data.album[cat],
+  ...ALBUMS[cat],
+}
+
+/** Other versions of this song */
+const other = Object.keys(song.data.album)
+  .filter(other => other != cat)
+  .map(cat => ({ cat, title: ALBUMS[cat].title }));
 ---
 
 <Base>
   <main class="l-songs-song">
     <article class="l-songs-song__page">
-      <Header title={song.data.title} />
+      <header class="p-header">
+        <h1 class="p-header__heading">{song.data.title}</h1>
+      </header>
       <Content />
     </article>
+
+    <aside class="l-songs-song__meta p-song-meta">
+      <h2>Metadata</h2>
+      <div>{metadata.circle}</div>
+      <div>{metadata.title}</div>
+      <div>{cat}</div>
+      <div>Track {metadata.track}</div>
+      <div>Composer: {metadata.composer}</div>
+      <div>Lyrics: {metadata.lyrics}</div>
+      {metadata.vocal && (
+        <div>
+          Vocal:
+          <ul>
+            {metadata.vocal.map(vocalist => <li>{vocalist}</li>)}
+          </ul>
+        </div>
+      )}
+    </aside>
   </main>
 </Base>

src/styles/components/_lyrics.scss

@@ -0,0 +1,14 @@
+.c-lyrics {
+  margin: 1em auto 1em auto;
+  border-collapse: collapse;
+
+  th, td {
+    padding: 0.2em 0.5em;
+    border: 1px solid #dbdbdb;
+    line-height: 1.6em;
+
+    p {
+      white-space: pre-line;
+    }
+  }
+}

src/styles/layouts/_songs.scss

@@ -15,9 +15,11 @@
 
 .l-songs-song {
   padding: 1.5em;
+  display: grid;
+  grid-template-columns: 1fr 16em;
 
   &__page {
-    max-width: 40em;
+    width: 40em;
     margin: 0 auto;
   }
 }

src/styles/styles.scss

@@ -9,6 +9,7 @@
 @use 'components/map';
 @use 'components/search';
 @use 'components/tab';
+@use 'components/lyrics';
 
 // Partials
 @use 'partials/nav';