feat: initial commit
This commit is contained in:
commit
0ff7457679
192 changed files with 24379 additions and 0 deletions
180
src/pages/music/artists/[slug].astro
Normal file
180
src/pages/music/artists/[slug].astro
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
---
|
||||
import { parseISO, format } from "date-fns";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Modal from "@components/blocks/Modal.astro";
|
||||
import ToggleContent from "@components/utils/ToggleContent.astro";
|
||||
import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
|
||||
import icons from "@cdransf/astro-tabler-icons";
|
||||
import { fetchGlobalData } from "@utils/data/global/index.js";
|
||||
import { parseCountries } from "@utils/helpers/media.js";
|
||||
import { md } from "@utils/helpers/general.js";
|
||||
|
||||
const { artist, globals } = await fetchGlobalData(Astro, Astro.url.pathname);
|
||||
|
||||
if (!artist) return Astro.redirect("/404", 404);
|
||||
|
||||
const {
|
||||
IconArrowLeft,
|
||||
IconHeart,
|
||||
IconNeedle,
|
||||
IconMapPin,
|
||||
IconDeviceSpeaker,
|
||||
} = icons;
|
||||
const pageTitle = `${artist.name} / Music`;
|
||||
const description = artist.description || `Learn more about ${artist.name}`;
|
||||
const alt = `${artist.name} / ${parseCountries(artist.country)}`;
|
||||
const playLabel = artist.total_plays === 1 ? "play" : "plays";
|
||||
---
|
||||
|
||||
<Layout
|
||||
pageTitle={pageTitle}
|
||||
description={description}
|
||||
fullUrl={Astro.url.pathname}
|
||||
{artist.image}
|
||||
>
|
||||
<a href="/music" class="back-link">
|
||||
<div set:html={IconArrowLeft({ size: 18 })}/> Back to music
|
||||
</a>
|
||||
<article class="artist-focus">
|
||||
<div class="artist-display">
|
||||
<img
|
||||
srcset={`
|
||||
${globals.cdn_url}${artist.image}?class=w200&type=webp 200w,
|
||||
${globals.cdn_url}${artist.image}?class=w400&type=webp 400w,
|
||||
${globals.cdn_url}${artist.image}?class=w800&type=webp 800w
|
||||
`}
|
||||
sizes="(max-width: 450px) 200px,
|
||||
(max-width: 850px) 400px,
|
||||
800px"
|
||||
src={`${globals.cdn_url}${artist.image}?class=w200&type=webp`}
|
||||
alt={alt}
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
width="200"
|
||||
height="200"
|
||||
/>
|
||||
<div class="media-meta">
|
||||
<span class="title"><strong>{artist.name}</strong></span>
|
||||
<span class="sub-meta country">
|
||||
<div set:html={IconMapPin({ size: 18 })}/>
|
||||
{parseCountries(artist.country)}
|
||||
</span>
|
||||
{
|
||||
artist.favorite && (
|
||||
<span class="sub-meta favorite">
|
||||
<div set:html={IconHeart({ size: 18 })}/> This is one of my favorite artists!
|
||||
</span>
|
||||
)
|
||||
}
|
||||
{
|
||||
artist.tattoo && (
|
||||
<span class="sub-meta tattoo">
|
||||
<div set:html={IconNeedle({ size: 18 })}/> I have a tattoo inspired by this artist!
|
||||
</span>
|
||||
)
|
||||
}
|
||||
{
|
||||
artist.total_plays > 0 && (
|
||||
<span class="sub-meta">
|
||||
<strong class="highlight-text">
|
||||
{artist.total_plays} {playLabel}
|
||||
</strong>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
<span class="sub-meta">
|
||||
{artist.emoji || artist.genre_emoji}
|
||||
<a
|
||||
href={artist.genre.url}
|
||||
title={`Learn more about ${artist.genre.name}`}
|
||||
>
|
||||
{artist.genre.name}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AssociatedMedia
|
||||
artists={artist.related_artists}
|
||||
books={artist.books}
|
||||
genres={artist.genres}
|
||||
movies={artist.movies}
|
||||
posts={artist.posts}
|
||||
shows={artist.shows}
|
||||
/>
|
||||
|
||||
{
|
||||
artist.description && (
|
||||
<>
|
||||
<h2>Overview</h2>
|
||||
<ToggleContent content={md(artist.description)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
artist.concerts && (
|
||||
<>
|
||||
<div id="concerts" class="concerts media-title">
|
||||
<div set:html={IconDeviceSpeaker({ size: 18 })}/> I've seen this artist live!
|
||||
</div>
|
||||
<ul>
|
||||
{artist.concerts.map((concert, index) => (
|
||||
<li key={index}>
|
||||
On{" "}
|
||||
<strong class="highlight-text">{format(parseISO(concert.date), "MMM d, yyyy")}</strong>
|
||||
{concert.venue_name_short && (
|
||||
<>
|
||||
{" "}
|
||||
at{" "}
|
||||
{concert.venue_latitude && concert.venue_longitude ? (
|
||||
<a
|
||||
href={`https://www.openstreetmap.org/?mlat=${concert.venue_latitude}&mlon=${concert.venue_longitude}#map=18/${concert.venue_latitude}/${concert.venue_longitude}`}
|
||||
>{concert.venue_name_short}</a>
|
||||
) : (
|
||||
<span>{concert.venue_name_short}</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{concert.notes && (
|
||||
<>
|
||||
{" "}
|
||||
<Modal
|
||||
id={`modal-${index}`}
|
||||
content={`### Notes\n${concert.notes}`}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
artist.albums && (
|
||||
<>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<th>Plays</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
{artist.albums.map((album) => (
|
||||
<tr>
|
||||
<td>{album.name}</td>
|
||||
<td>{album.total_plays}</td>
|
||||
<td>{album.release_year}</td>
|
||||
</tr>
|
||||
))}
|
||||
</table>
|
||||
<p>
|
||||
<em>
|
||||
These are the albums by this artist that are in my collection, not
|
||||
necessarily a comprehensive discography.
|
||||
</em>
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</article>
|
||||
</Layout>
|
||||
Reference in a new issue