From 5c73b9acb2e91590718b35cad9bfad2a11f253d5 Mon Sep 17 00:00:00 2001
From: Maciej Jur <maciej@kamoshi.org>
Date: Wed, 26 Apr 2023 10:33:30 +0200
Subject: [PATCH] Add basic lyrics support

---
 src/components/lyrics/Lyrics.astro           | 13 ++++++-
 src/components/lyrics/transform.ts           | 38 ++++++++++----------
 src/content/{lyrics => songs}/black-eyes.mdx |  2 +-
 src/layouts/Lyrics.astro                     | 19 ++++++++--
 src/pages/{lyrics => songs}/[...slug].astro  |  4 +--
 src/pages/songs/index.astro                  | 14 ++++++++
 src/styles/layouts/_lyrics.scss              |  8 +++++
 src/styles/styles.scss                       |  1 +
 8 files changed, 73 insertions(+), 26 deletions(-)
 rename src/content/{lyrics => songs}/black-eyes.mdx (97%)
 rename src/pages/{lyrics => songs}/[...slug].astro (80%)
 create mode 100644 src/pages/songs/index.astro
 create mode 100644 src/styles/layouts/_lyrics.scss

diff --git a/src/components/lyrics/Lyrics.astro b/src/components/lyrics/Lyrics.astro
index 5902357..7e61f35 100644
--- a/src/components/lyrics/Lyrics.astro
+++ b/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>
diff --git a/src/components/lyrics/transform.ts b/src/components/lyrics/transform.ts
index 3a76656..7e1b388 100644
--- a/src/components/lyrics/transform.ts
+++ b/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));
 }
diff --git a/src/content/lyrics/black-eyes.mdx b/src/content/songs/black-eyes.mdx
similarity index 97%
rename from src/content/lyrics/black-eyes.mdx
rename to src/content/songs/black-eyes.mdx
index ad27900..03d0af1 100644
--- a/src/content/lyrics/black-eyes.mdx
+++ b/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>
diff --git a/src/layouts/Lyrics.astro b/src/layouts/Lyrics.astro
index fd3f922..8f6097f 100644
--- a/src/layouts/Lyrics.astro
+++ b/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>
diff --git a/src/pages/lyrics/[...slug].astro b/src/pages/songs/[...slug].astro
similarity index 80%
rename from src/pages/lyrics/[...slug].astro
rename to src/pages/songs/[...slug].astro
index 98d0991..11d0a5a 100644
--- a/src/pages/lyrics/[...slug].astro
+++ b/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>
diff --git a/src/pages/songs/index.astro b/src/pages/songs/index.astro
new file mode 100644
index 0000000..4200b61
--- /dev/null
+++ b/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} />
diff --git a/src/styles/layouts/_lyrics.scss b/src/styles/layouts/_lyrics.scss
new file mode 100644
index 0000000..9e75bd0
--- /dev/null
+++ b/src/styles/layouts/_lyrics.scss
@@ -0,0 +1,8 @@
+.l-lyrics {
+  display: flex;
+  padding: 2em 0;
+
+  &__page {
+    margin: 0 auto;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 17a744d..de948d6 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -32,3 +32,4 @@
 @use 'layouts/home';
 @use 'layouts/pages';
 @use 'layouts/article';
+@use 'layouts/lyrics';