-
+
{songs.map(song => [
{song.frontmatter.album[cat!].track}
diff --git a/src/pages/songs/[...slug].astro b/src/pages/songs/[circle]/[cat]/[song].astro
similarity index 73%
rename from src/pages/songs/[...slug].astro
rename to src/pages/songs/[circle]/[cat]/[song].astro
index bfccf6e..9eae3ca 100644
--- a/src/pages/songs/[...slug].astro
+++ b/src/pages/songs/[circle]/[cat]/[song].astro
@@ -1,15 +1,18 @@
---
-import Base from "../../layouts/Base.astro";
-import Song from "../../components/markdown/Song.astro";
-import Lyrics from "../../components/markdown/Lyrics.astro";
+import Base from "@layouts/Base.astro";
+import Song from "@components/markdown/Song.astro";
+import Lyrics from "@components/markdown/Lyrics.astro";
import { CollectionEntry, getCollection } from "astro:content";
-import { ALBUMS } from "../../utils/songs/data";
+import { ALBUMS } from "@utils/songs/data";
export async function getStaticPaths() {
return (await getCollection('songs'))
.map(song => Object.keys(song.data.album)
- .map(cat => ({ params: {slug: `${cat}/${song.slug}`}, props: {song, cat} })))
+ .map(cat => ({
+ params: { circle: ALBUMS[cat].circle, cat, song: song.slug},
+ props: { song, cat }
+ })))
.flat()
}
diff --git a/src/pages/songs/index.astro b/src/pages/songs/index.astro
index 1d98428..6688e79 100644
--- a/src/pages/songs/index.astro
+++ b/src/pages/songs/index.astro
@@ -1,16 +1,11 @@
---
import List from "../../layouts/List.astro";
-import { getCollection } from 'astro:content';
-import { ALBUMS, getAllCats } from "../../utils/songs/data";
+import { CIRCLES } from "../../utils/songs/data";
-const pages = [...getAllCats(await getCollection('songs'))]
- .sort((a, b) => a < b ? 1 : -1)
- .map(catalog => ({
- title: `${catalog} - ${ALBUMS[catalog].title}`,
- slug: `/songs/${catalog}/`
- }));
-
+const pages = Object.keys(CIRCLES)
+ .map(slug => ({ title: CIRCLES[slug].name, slug: `/songs/${slug}/` }))
+ .sort((a, b) => a.title < b.title ? -1 : 1)
---
-
+
diff --git a/src/schema.d.ts b/src/schema.d.ts
index cdba219..e529499 100644
--- a/src/schema.d.ts
+++ b/src/schema.d.ts
@@ -1,9 +1,10 @@
/** @file src/data/circles.json */
interface CirclesSchema {
- /** Circle name */
+ /** slug */
[key: string]: {
+ name: string,
albums: {
- /** Catalog number */
+ /** catalog number */
[key: string]: {
title: string;
cover: string;
diff --git a/src/styles/components/_album.scss b/src/styles/components/_album.scss
new file mode 100644
index 0000000..faf7283
--- /dev/null
+++ b/src/styles/components/_album.scss
@@ -0,0 +1,16 @@
+.c-album {
+ padding: 0.5em;
+ background-color: white;
+ border-radius: 0.5em;
+ box-shadow: var(--shadow-l);
+ transition: box-shadow ease-in-out 0.2s;
+ text-decoration: none;
+
+ &:hover {
+ box-shadow: var(--shadow-m);
+ }
+
+ &__image {
+ width: 16em;
+ }
+}
diff --git a/src/styles/layouts/_songs.scss b/src/styles/layouts/_songs.scss
index e48eef9..487a81b 100644
--- a/src/styles/layouts/_songs.scss
+++ b/src/styles/layouts/_songs.scss
@@ -1,3 +1,14 @@
+.l-album-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2em;
+
+ &__item img {
+ width: 20em;
+ height: 20em;
+ }
+}
+
.l-songs-cat {
padding: 1.5em;
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 4942729..411faa2 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -11,6 +11,7 @@
@use 'components/tab';
@use 'components/lyrics';
@use 'components/song';
+@use 'components/album';
// Partials
@use 'partials/nav';
diff --git a/src/utils/songs/data.ts b/src/utils/songs/data.ts
index d836f39..a547c79 100644
--- a/src/utils/songs/data.ts
+++ b/src/utils/songs/data.ts
@@ -6,8 +6,10 @@ type Song = CollectionEntry<'songs'>;
interface Metadata {
[key: string]: {
+ /** Circle slug */
+ circle: string;
/** Circle name */
- circle: string,
+ name: string,
/** Album title */
title: string,
/** Path to album cover image */
@@ -16,6 +18,10 @@ interface Metadata {
}
+export function order(cat: string) {
+ return (a: Song, b: Song) => a.data.album[cat].track < b.data.album[cat].track ? -1 : 1;
+}
+
export function getAllCats(songs: Song[]): Set {
return songs.reduce(
(cats, next) => (
@@ -32,10 +38,10 @@ function createMetadata(circles: CirclesSchema): Metadata {
for (const circle of Object.keys(circles)) {
const data = circles[circle];
for (const cat of Object.keys(data.albums))
- metadata[cat] = { circle, ...data.albums[cat] }
+ metadata[cat] = { circle, name: data.name, ...data.albums[cat] }
}
return metadata;
}
-
+export const CIRCLES: CirclesSchema = circles;
export const ALBUMS: Metadata = createMetadata(circles);
diff --git a/src/utils/songs/parse.ts b/src/utils/songs/parse.ts
index 060484c..722be22 100644
--- a/src/utils/songs/parse.ts
+++ b/src/utils/songs/parse.ts
@@ -15,6 +15,7 @@ function increaseStack(data: Stack, lang: string) {
function fromMarkdown(markdown: string): Stack {
const stack: Stack = {};
+ if (!markdown) return stack;
let space = true;
let lang = '';
diff --git a/tsconfig.json b/tsconfig.json
index 274a65c..2380170 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,12 @@
"compilerOptions": {
"allowJs": true,
"jsx": "preserve",
- "jsxImportSource": "solid-js"
- }
+ "jsxImportSource": "solid-js",
+ "baseUrl": "src",
+ "paths": {
+ "@layouts/*": ["layouts/*"],
+ "@components/*": ["components/*"],
+ "@utils/*": ["utils/*"],
+ }
+ },
}
\ No newline at end of file