diff --git a/src/components/markdown/lyrics/Lyrics.astro b/src/components/markdown/lyrics/Lyrics.astro
index 7e61f35..9379530 100644
--- a/src/components/markdown/lyrics/Lyrics.astro
+++ b/src/components/markdown/lyrics/Lyrics.astro
@@ -7,7 +7,7 @@ const cols = Object.keys(lyrics[0]);
---
-
+
{cols.map(col => {col} | )}
{lyrics.map(row =>
{cols.map(col =>
diff --git a/src/pages/songs/[...slug].astro b/src/pages/songs/[...slug].astro
index b5929e6..b196181 100644
--- a/src/pages/songs/[...slug].astro
+++ b/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 }));
---
-
+
+
+
diff --git a/src/styles/components/_lyrics.scss b/src/styles/components/_lyrics.scss
new file mode 100644
index 0000000..f56d1c7
--- /dev/null
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/layouts/_songs.scss b/src/styles/layouts/_songs.scss
index f4729cb..14aff9c 100644
--- a/src/styles/layouts/_songs.scss
+++ b/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;
}
}
\ No newline at end of file
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index e98850a..516a36a 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -9,6 +9,7 @@
@use 'components/map';
@use 'components/search';
@use 'components/tab';
+@use 'components/lyrics';
// Partials
@use 'partials/nav';