kamov/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Improve layout

Browse source
This commit is contained in:
Maciej Jur 2023-04-29 22:01:36 +02:00
parent e53d0ab030
commit fc50aa2401
7 changed files with 105 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/components/songs/Info.astro
View file

@ -1,71 +1,19 @@
--- ---
interface Props { interface Props {
metadata: { image: string;
cover: string;
title: string; title: string;
cat: string; small: string;
track: number;
name: string;
composer?: string;
lyrics?: string;
vocal?: string[];
other: Array<{
cat: string;
}>;
origin?: string[]
}
} }
const { metadata } = Astro.props; const { image, title, small } = Astro.props;
--- ---
<section class="c-song"> <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"> <div class="c-song__title">
<h2 class="c-song__heading">{metadata.title}</h2> <h2 class="c-song__heading">{title}</h2>
<span class="c-song__cat">{metadata.cat}</span> <span class="c-song__cat">{small}</span>
</div> </div>
<table class="c-song__table"> <slot />
<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>
</section> </section>

61
src/components/songs/SongInfo.astro Normal file
View file

@ -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>

25
src/layouts/Lyrics.astro
View file

@ -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>

2
src/pages/songs/[circle].astro
View file

@ -1,6 +1,6 @@
--- ---
import Base from "@layouts/Base.astro"; 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 Header from "@components/headers/Base.astro";
import { CIRCLES } from "@utils/songs/data"; import { CIRCLES } from "@utils/songs/data";

17
src/pages/songs/[circle]/[cat].astro
View file

@ -3,6 +3,7 @@ import Base from "@layouts/Base.astro";
import Header from '@components/headers/Base.astro'; import Header from '@components/headers/Base.astro';
import { CollectionEntry, getCollection } from 'astro:content'; import { CollectionEntry, getCollection } from 'astro:content';
import { ALBUMS, getAllCats, order } from "@utils/songs/data"; import { ALBUMS, getAllCats, order } from "@utils/songs/data";
import Info from "@components/songs/Info.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
@ -30,21 +31,25 @@ interface Props {
}> }>
} }
const { cat } = Astro.params; const cat = Astro.params.cat!;
const { songs } = Astro.props; const songs = Astro.props.songs;
const album = ALBUMS[cat!]; const album = ALBUMS[cat];
--- ---
<Base> <Base>
<main class="l-songs-cat"> <main class="l-songs-aside">
<article class="l-songs-cat__article"> <article class="l-songs-aside__page">
<Header title={album.title} /> <Header title={album.title} />
<div class="l-songs-cat__list"> <div class="l-songs-cat__list">
{songs.map(song => [ {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> <a href={song.slug}>{song.frontmatter.title}</a>
])} ])}
</div> </div>
</article> </article>
<aside>
<Info image={album.cover} title={album.title} small={cat}/>
</aside>
</main> </main>
</Base> </Base>

14
src/pages/songs/[circle]/[cat]/[song].astro
View file

@ -1,7 +1,8 @@
--- ---
import Base from "@layouts/Base.astro"; import Base from "@layouts/Base.astro";
import Song from "@components/markdown/Song.astro"; import Info from "@components/songs/Info.astro";
import Lyrics from "@components/markdown/Lyrics.astro"; import SongInfo from "@components/songs/SongInfo.astro";
import Lyrics from "@components/songs/Lyrics.astro";
import { CollectionEntry, getCollection } from "astro:content"; import { CollectionEntry, getCollection } from "astro:content";
import { ALBUMS } from "@utils/songs/data"; import { ALBUMS } from "@utils/songs/data";
@ -33,14 +34,13 @@ const metadata = {
...song.data, ...song.data,
...song.data.album[cat], ...song.data.album[cat],
...ALBUMS[cat], ...ALBUMS[cat],
cat,
other other
} }
--- ---
<Base> <Base>
<main class="l-song"> <main class="l-songs-aside">
<article class="l-song__page"> <article class="l-songs-aside__page">
<header class="p-header"> <header class="p-header">
<h1 class="p-header__heading">{song.data.title}</h1> <h1 class="p-header__heading">{song.data.title}</h1>
</header> </header>
@ -48,7 +48,9 @@ const metadata = {
</article> </article>
<aside class="l-song__aside"> <aside class="l-song__aside">
<Song metadata={metadata} /> <Info image={metadata.cover} title={metadata.title} small={cat}>
<SongInfo metadata={metadata} />
</Info>
</aside> </aside>
</main> </main>
</Base> </Base>

31
src/styles/layouts/_songs.scss
View file

@ -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 { .l-songs-circle {
padding: 1.5em; padding: 1.5em;
@ -20,19 +35,3 @@
grid-template-columns: 3em 1fr; 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;
}
}