Add basic lyrics support
This commit is contained in:
parent
9a8d9c3e28
commit
5c73b9acb2
|
@ -3,6 +3,17 @@ import { transform } from "./transform";
|
||||||
|
|
||||||
const html = await Astro.slots.render('default');
|
const html = await Astro.slots.render('default');
|
||||||
const lyrics = transform(html);
|
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>
|
||||||
|
|
|
@ -62,26 +62,26 @@ function reduceStack(stack: Stack): Verse[] {
|
||||||
return verses.reverse();
|
return verses.reverse();
|
||||||
}
|
}
|
||||||
|
|
||||||
function toHtml(verses: Verse[]): string {
|
// function toHtml(verses: Verse[]): string {
|
||||||
const keys = Object.keys(verses[0]);
|
// const keys = Object.keys(verses[0]);
|
||||||
const head = keys.map(lang => `<th>${lang}</th>`);
|
// const head = keys.map(lang => `<th>${lang}</th>`);
|
||||||
const rows = verses.map(verse =>
|
// const rows = verses.map(verse =>
|
||||||
`<tr>${keys.map(lang =>
|
// `<tr>${keys.map(lang =>
|
||||||
`<td>${verse[lang].map(line =>
|
// `<td>${verse[lang].map(line =>
|
||||||
`<span>${line}</span><br/>`).join('')}
|
// `<span>${line}</span><br/>`).join('')}
|
||||||
</td>`).join('')}
|
// </td>`).join('')}
|
||||||
</tr>`
|
// </tr>`
|
||||||
)
|
// )
|
||||||
.join('');
|
// .join('');
|
||||||
|
|
||||||
return [
|
// return [
|
||||||
"<table>",
|
// "<table>",
|
||||||
`<tr>${head.join('')}</tr>`,
|
// `<tr>${head.join('')}</tr>`,
|
||||||
rows,
|
// rows,
|
||||||
"</table>",
|
// "</table>",
|
||||||
].join('');
|
// ].join('');
|
||||||
}
|
// }
|
||||||
|
|
||||||
export function transform(html: string) {
|
export function transform(html: string) {
|
||||||
return toHtml(reduceStack(toStack(html)));
|
return reduceStack(toStack(html));
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
---
|
---
|
||||||
title: Black Eyes
|
title: Black Eyes
|
||||||
date: 2023-04-25
|
|
||||||
---
|
---
|
||||||
import Lyrics from '../../components/lyrics/Lyrics.astro';
|
import Lyrics from '../../components/lyrics/Lyrics.astro';
|
||||||
|
|
||||||
|
@ -30,4 +29,5 @@ import Lyrics from '../../components/lyrics/Lyrics.astro';
|
||||||
- fdsfadsf
|
- fdsfadsf
|
||||||
- test
|
- test
|
||||||
- test
|
- test
|
||||||
|
|
||||||
</Lyrics>
|
</Lyrics>
|
|
@ -1,12 +1,25 @@
|
||||||
---
|
---
|
||||||
import Base from "./Base.astro";
|
import Base from "./Base.astro";
|
||||||
|
import Header from '../components/headers/Base.astro';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
frontmatter: {
|
||||||
|
title: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const {frontmatter: {
|
||||||
|
title
|
||||||
|
}} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base>
|
<Base>
|
||||||
<main class="l_pages">
|
<main class="l-lyrics">
|
||||||
<article class="l_pages__list">
|
<article class="l-lyrics__page">
|
||||||
<slot/>
|
<Header title={title} />
|
||||||
|
<section class="markdown">
|
||||||
|
<slot/>
|
||||||
|
</section>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
</Base>
|
</Base>
|
||||||
|
|
|
@ -3,7 +3,7 @@ import Lyrics from "../../layouts/Lyrics.astro";
|
||||||
import { getCollection } from "astro:content";
|
import { getCollection } from "astro:content";
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
return (await getCollection('lyrics'))
|
return (await getCollection('songs'))
|
||||||
.map(entry => ({params: {slug: entry.slug}, props: {entry}}));
|
.map(entry => ({params: {slug: entry.slug}, props: {entry}}));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,6 +11,6 @@ const { entry } = Astro.props;
|
||||||
const { Content } = await entry.render();
|
const { Content } = await entry.render();
|
||||||
---
|
---
|
||||||
|
|
||||||
<Lyrics>
|
<Lyrics frontmatter={entry.data}>
|
||||||
<Content />
|
<Content />
|
||||||
</Lyrics>
|
</Lyrics>
|
14
src/pages/songs/index.astro
Normal file
14
src/pages/songs/index.astro
Normal file
|
@ -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} />
|
8
src/styles/layouts/_lyrics.scss
Normal file
8
src/styles/layouts/_lyrics.scss
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
.l-lyrics {
|
||||||
|
display: flex;
|
||||||
|
padding: 2em 0;
|
||||||
|
|
||||||
|
&__page {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
|
@ -32,3 +32,4 @@
|
||||||
@use 'layouts/home';
|
@use 'layouts/home';
|
||||||
@use 'layouts/pages';
|
@use 'layouts/pages';
|
||||||
@use 'layouts/article';
|
@use 'layouts/article';
|
||||||
|
@use 'layouts/lyrics';
|
||||||
|
|
Loading…
Reference in a new issue