From fc50aa24019c93a879398a61043be101c575ac69 Mon Sep 17 00:00:00 2001
From: Maciej Jur <maciej@kamoshi.org>
Date: Sat, 29 Apr 2023 22:01:36 +0200
Subject: [PATCH] Improve layout

---
 src/components/songs/Info.astro             | 70 +++------------------
 src/components/songs/SongInfo.astro         | 61 ++++++++++++++++++
 src/layouts/Lyrics.astro                    | 25 --------
 src/pages/songs/[circle].astro              |  2 +-
 src/pages/songs/[circle]/[cat].astro        | 17 +++--
 src/pages/songs/[circle]/[cat]/[song].astro | 14 +++--
 src/styles/layouts/_songs.scss              | 31 +++++----
 7 files changed, 105 insertions(+), 115 deletions(-)
 create mode 100644 src/components/songs/SongInfo.astro
 delete mode 100644 src/layouts/Lyrics.astro

diff --git a/src/components/songs/Info.astro b/src/components/songs/Info.astro
index 3999246..ae8d3ec 100644
--- a/src/components/songs/Info.astro
+++ b/src/components/songs/Info.astro
@@ -1,71 +1,19 @@
 ---
 interface Props {
-  metadata: {
-    cover: string;
-    title: string;
-    cat: string;
-    track: number;
-    name: string;
-    composer?: string;
-    lyrics?: string;
-    vocal?: string[];
-    other: Array<{
-      cat: string;
-    }>;
-    origin?: string[]
-  }
+  image: string;
+  title: string;
+  small: string;
 }
 
-const { metadata } = Astro.props;
+const { image, title, small } = Astro.props;
 ---
 
 <section class="c-song">
-  <a href={metadata.cover}><img src={metadata.cover} /></a>
+  <a href={image}><img src={image} /></a>
   <div class="c-song__title">
-    <h2 class="c-song__heading">{metadata.title}</h2>
-    <span class="c-song__cat">{metadata.cat}</span>
+    <h2 class="c-song__heading">{title}</h2>
+    <span class="c-song__cat">{small}</span>
   </div>
-  
-  <table class="c-song__table">
-    <tr>
-      <td>Track</td>
-      <td>{metadata.track}</td>
-    </tr>
-    <tr>
-      <td>Circle</td>
-      <td>{metadata.name}</td>
-    </tr>
-    <tr>
-      <td>Composer</td>
-      <td>{metadata.composer}</td>
-    </tr>
-    <tr>
-      <td>Lyrics</td>
-      <td>{metadata.lyrics}</td>
-    </tr>
-    {!!metadata.vocal?.length &&
-      <tr>
-        <td>Vocal</td>
-        <td>
-          <ul>{metadata.vocal.map(vocalist => <li>{vocalist}</li>)}</ul>
-        </td>
-      </tr>
-    }
-    {!!metadata.origin?.length &&
-      <tr>
-        <td>Origin</td>
-        <td>
-          <ul>{metadata.origin.map(title => <li>{title}</li>)}</ul>
-        </td>
-      </tr>
-    }
-    {!!metadata.other?.length &&
-      <tr>
-        <td>Other versions</td>
-        <td>
-          <ul>{metadata.other.map(version => <li>{version.cat}</li>)}</ul>
-        </td>
-      </tr>
-    }
-  </table>
+
+  <slot />
 </section>
diff --git a/src/components/songs/SongInfo.astro b/src/components/songs/SongInfo.astro
new file mode 100644
index 0000000..d16921c
--- /dev/null
+++ b/src/components/songs/SongInfo.astro
@@ -0,0 +1,61 @@
+---
+interface Props {
+  metadata: {
+    cover: string;
+    title: string;
+    track: number;
+    name: string;
+    composer?: string;
+    lyrics?: string;
+    vocal?: string[];
+    other: Array<{
+      cat: string;
+    }>;
+    origin?: string[]
+  }
+}
+
+const { metadata } = Astro.props;
+---
+<table class="c-song__table">
+  <tr>
+    <td>Track</td>
+    <td>{metadata.track}</td>
+  </tr>
+  <tr>
+    <td>Circle</td>
+    <td>{metadata.name}</td>
+  </tr>
+  <tr>
+    <td>Composer</td>
+    <td>{metadata.composer}</td>
+  </tr>
+  <tr>
+    <td>Lyrics</td>
+    <td>{metadata.lyrics}</td>
+  </tr>
+  {!!metadata.vocal?.length &&
+    <tr>
+      <td>Vocal</td>
+      <td>
+        <ul>{metadata.vocal.map(vocalist => <li>{vocalist}</li>)}</ul>
+      </td>
+    </tr>
+  }
+  {!!metadata.origin?.length &&
+    <tr>
+      <td>Origin</td>
+      <td>
+        <ul>{metadata.origin.map(title => <li>{title}</li>)}</ul>
+      </td>
+    </tr>
+  }
+  {!!metadata.other?.length &&
+    <tr>
+      <td>Other versions</td>
+      <td>
+        <ul>{metadata.other.map(version => <li>{version.cat}</li>)}</ul>
+      </td>
+    </tr>
+  }
+</table>
diff --git a/src/layouts/Lyrics.astro b/src/layouts/Lyrics.astro
deleted file mode 100644
index 8f6097f..0000000
--- a/src/layouts/Lyrics.astro
+++ /dev/null
@@ -1,25 +0,0 @@
----
-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-lyrics">
-    <article class="l-lyrics__page">
-      <Header title={title} />
-      <section class="markdown">
-        <slot/>
-      </section>
-    </article>
-  </main>
-</Base>
diff --git a/src/pages/songs/[circle].astro b/src/pages/songs/[circle].astro
index 83e737b..3e95e2c 100644
--- a/src/pages/songs/[circle].astro
+++ b/src/pages/songs/[circle].astro
@@ -1,6 +1,6 @@
 ---
 import Base from "@layouts/Base.astro";
-import Grid from "@components/markdown/AlbumGrid.astro";
+import Grid from "@components/songs/AlbumGrid.astro";
 import Header from "@components/headers/Base.astro";
 import { CIRCLES } from "@utils/songs/data";
 
diff --git a/src/pages/songs/[circle]/[cat].astro b/src/pages/songs/[circle]/[cat].astro
index a44b998..bd7f8a3 100644
--- a/src/pages/songs/[circle]/[cat].astro
+++ b/src/pages/songs/[circle]/[cat].astro
@@ -3,6 +3,7 @@ import Base from "@layouts/Base.astro";
 import Header from '@components/headers/Base.astro';
 import { CollectionEntry, getCollection } from 'astro:content';
 import { ALBUMS, getAllCats, order } from "@utils/songs/data";
+import Info from "@components/songs/Info.astro";
 
 
 export async function getStaticPaths() {
@@ -30,21 +31,25 @@ interface Props {
   }>
 }
 
-const { cat } = Astro.params;
-const { songs } = Astro.props;
-const album = ALBUMS[cat!];
+const cat = Astro.params.cat!;
+const songs = Astro.props.songs;
+const album = ALBUMS[cat];
 ---
 
 <Base>
-  <main class="l-songs-cat">
-    <article class="l-songs-cat__article">
+  <main class="l-songs-aside">
+    <article class="l-songs-aside__page">
       <Header title={album.title} />
       <div class="l-songs-cat__list">
         {songs.map(song => [
-          <span>{song.frontmatter.album[cat!].track}</span>
+          <span>{song.frontmatter.album[cat].track}</span>
           <a href={song.slug}>{song.frontmatter.title}</a>
         ])}
       </div>
     </article>
+
+    <aside>
+      <Info image={album.cover} title={album.title} small={cat}/>
+    </aside>
   </main>
 </Base>
diff --git a/src/pages/songs/[circle]/[cat]/[song].astro b/src/pages/songs/[circle]/[cat]/[song].astro
index 9eae3ca..2212ace 100644
--- a/src/pages/songs/[circle]/[cat]/[song].astro
+++ b/src/pages/songs/[circle]/[cat]/[song].astro
@@ -1,7 +1,8 @@
 ---
 import Base from "@layouts/Base.astro";
-import Song from "@components/markdown/Song.astro";
-import Lyrics from "@components/markdown/Lyrics.astro";
+import Info from "@components/songs/Info.astro";
+import SongInfo from "@components/songs/SongInfo.astro";
+import Lyrics from "@components/songs/Lyrics.astro";
 import { CollectionEntry, getCollection } from "astro:content";
 import { ALBUMS } from "@utils/songs/data";
 
@@ -33,14 +34,13 @@ const metadata = {
   ...song.data,
   ...song.data.album[cat],
   ...ALBUMS[cat],
-  cat,
   other
 }
 ---
 
 <Base>
-  <main class="l-song">
-    <article class="l-song__page">
+  <main class="l-songs-aside">
+    <article class="l-songs-aside__page">
       <header class="p-header">
         <h1 class="p-header__heading">{song.data.title}</h1>
       </header>
@@ -48,7 +48,9 @@ const metadata = {
     </article>
 
     <aside class="l-song__aside">
-      <Song metadata={metadata} />
+      <Info image={metadata.cover} title={metadata.title} small={cat}>
+        <SongInfo metadata={metadata} />
+      </Info>
     </aside>
   </main>
 </Base>
diff --git a/src/styles/layouts/_songs.scss b/src/styles/layouts/_songs.scss
index 13d35a1..1d4e318 100644
--- a/src/styles/layouts/_songs.scss
+++ b/src/styles/layouts/_songs.scss
@@ -1,3 +1,18 @@
+.l-songs-aside {
+  padding: 1.5em;
+
+  &__page {
+    width: 40em;
+    margin: 0 auto;
+  }
+
+  @media (min-width: 65em) {
+    display: grid;
+    column-gap: 1em;
+    grid-template-columns: 1fr 20em;
+  }
+}
+
 .l-songs-circle {
   padding: 1.5em;
 
@@ -20,19 +35,3 @@
     grid-template-columns: 3em 1fr;
   }
 }
-
-
-.l-song {
-  padding: 1.5em;
-
-  &__page {
-    max-width: 40em;
-    margin: 0 auto;
-  }
-
-  @media (min-width: 50em) {
-    display: grid;
-    column-gap: 1em;
-    grid-template-columns: 1fr 20em;
-  }
-}