Add basic lyrics support

src/components/lyrics/Lyrics.astro

@@ -3,6 +3,17 @@ import { transform } from "./transform";
 
 const html = await Astro.slots.render('default');
 const lyrics = transform(html);
+const cols = Object.keys(lyrics[0]);
+
 ---
 
-<section class="lyrics" set:html={lyrics}></section>
+<table>
+  <tr>{cols.map(col => <th>{col}</th>)}</tr>
+  {lyrics.map(row =>
+    <tr>{cols.map(col =>
+      <td>
+        {row[col].map(line => <span>{line}</span><br/>)}
+      </td>
+    )}</tr>
+  )}
+</table>

src/components/lyrics/transform.ts

@@ -62,26 +62,26 @@ function reduceStack(stack: Stack): Verse[] {
   return verses.reverse();
 }
 
-function toHtml(verses: Verse[]): string {
-  const keys = Object.keys(verses[0]);
-  const head = keys.map(lang => `<th>${lang}</th>`);
-  const rows = verses.map(verse =>
-    `<tr>${keys.map(lang =>
-      `<td>${verse[lang].map(line =>
-          `<span>${line}</span><br/>`).join('')}
-        </td>`).join('')}
-      </tr>`
-    )
-    .join('');
+// function toHtml(verses: Verse[]): string {
+//   const keys = Object.keys(verses[0]);
+//   const head = keys.map(lang => `<th>${lang}</th>`);
+//   const rows = verses.map(verse =>
+//     `<tr>${keys.map(lang =>
+//       `<td>${verse[lang].map(line =>
+//           `<span>${line}</span><br/>`).join('')}
+//         </td>`).join('')}
+//       </tr>`
+//     )
+//     .join('');
 
-  return [
-    "<table>",
-    `<tr>${head.join('')}</tr>`,
-    rows,
-    "</table>",
-  ].join('');
-}
+//   return [
+//     "<table>",
+//     `<tr>${head.join('')}</tr>`,
+//     rows,
+//     "</table>",
+//   ].join('');
+// }
 
 export function transform(html: string) {
-  return toHtml(reduceStack(toStack(html)));
+  return reduceStack(toStack(html));
 }

src/content/songs/black-eyes.mdx

@@ -1,6 +1,5 @@
 ---
 title: Black Eyes
-date: 2023-04-25
 ---
 import Lyrics from '../../components/lyrics/Lyrics.astro';
 
@@ -30,4 +29,5 @@ import Lyrics from '../../components/lyrics/Lyrics.astro';
 - fdsfadsf
 - test
 - test
+
 </Lyrics>

src/layouts/Lyrics.astro

@@ -1,12 +1,25 @@
 ---
 import Base from "./Base.astro";
+import Header from '../components/headers/Base.astro';
 
+interface Props {
+  frontmatter: {
+    title: string;
+  };
+}
+
+const {frontmatter: {
+  title
+}} = Astro.props;
 ---
 
 <Base>
-  <main class="l_pages">
-    <article class="l_pages__list">
-      <slot/>
+  <main class="l-lyrics">
+    <article class="l-lyrics__page">
+      <Header title={title} />
+      <section class="markdown">
+        <slot/>
+      </section>
     </article>
   </main>
 </Base>

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

@@ -3,7 +3,7 @@ import Lyrics from "../../layouts/Lyrics.astro";
 import { getCollection } from "astro:content";
 
 export async function getStaticPaths() {
-  return (await getCollection('lyrics'))
+  return (await getCollection('songs'))
     .map(entry => ({params: {slug: entry.slug}, props: {entry}}));
 }
 
@@ -11,6 +11,6 @@ const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
 
-<Lyrics>
+<Lyrics frontmatter={entry.data}>
   <Content />
 </Lyrics>

src/pages/songs/index.astro

@@ -0,0 +1,14 @@
+---
+import List from "../../layouts/List.astro";
+import { getCollection } from 'astro:content';
+
+const posts = (await getCollection('songs'))
+  .sort((a, b) => a.data.date < b.data.date ? 1 : -1)
+  .map(entry => ({
+    title: entry.data.title,
+    slug: `/songs/${entry.slug}/`,
+  }))
+
+---
+
+<List title="Posts" pages={posts} />

src/styles/layouts/_lyrics.scss

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

src/styles/styles.scss

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