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 => )} {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 })); ---
-
+
+

{song.data.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';
{col}