71 lines
2.3 KiB
Text
71 lines
2.3 KiB
Text
---
|
|
import Layout from "@layouts/Layout.astro";
|
|
import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
|
|
import { IconArrowLeft } from "@tabler/icons-react";
|
|
import { fetchGenreByUrl } from "@utils/data/dynamic/genreByUrl.js";
|
|
import { mediaLinks } from "@utils/helpers/media.js";
|
|
import { md } from "@utils/helpers/general.js";
|
|
|
|
const genre = await fetchGenreByUrl(Astro.url.pathname);
|
|
if (!genre) return Astro.redirect("/404", 404);
|
|
|
|
const artistCount = genre.artists?.length || 0;
|
|
const connectingWords = artistCount > 1 ? "artists are" : "artist is";
|
|
const genreMediaLinks = mediaLinks(genre.artists, "artist", 5);
|
|
const pageTitle = `${genre.name} / Music`;
|
|
const description = `Discover the music genre ${genre.name}, featuring ${artistCount} artists and ${genre.total_plays} total track plays.`;
|
|
---
|
|
|
|
<Layout
|
|
pageTitle={pageTitle}
|
|
description={description}
|
|
fullUrl={Astro.url.pathname}
|
|
ogImage={genre.artists[0].image}
|
|
>
|
|
<a class="back-link" href="/music" title="Go back to the music index page">
|
|
<IconArrowLeft size={18} /> Back to music
|
|
</a>
|
|
<h2>{genre.name}</h2>
|
|
<article class="genre-focus">
|
|
{
|
|
genreMediaLinks && (
|
|
<>
|
|
<p>
|
|
My top <strong class="highlight-text">{genre.name}</strong>{" "}
|
|
{connectingWords} <span set:html={genreMediaLinks}></span> I've listened to{" "}
|
|
<strong class="highlight-text">{genre.total_plays}</strong>{" "}
|
|
tracks from this genre.
|
|
</p>
|
|
<hr />
|
|
</>
|
|
)
|
|
}
|
|
<AssociatedMedia
|
|
books={genre.books}
|
|
movies={genre.movies}
|
|
posts={genre.posts}
|
|
/>
|
|
{
|
|
genre.description && (
|
|
<>
|
|
<h3>Overview</h3>
|
|
<div data-toggle-content class="text-toggle-hidden">
|
|
<div set:html={md(genre.description)} />
|
|
<p>
|
|
<a href={genre.wiki_link}>Continue reading at Wikipedia.</a>
|
|
</p>
|
|
<p>
|
|
<em>
|
|
Wikipedia content provided under the terms of the{" "}
|
|
<a href="https://creativecommons.org/licenses/by-sa/3.0/">
|
|
Creative Commons BY-SA license
|
|
</a>
|
|
</em>
|
|
</p>
|
|
</div>
|
|
<button data-toggle-button>Show more</button>
|
|
</>
|
|
)
|
|
}
|
|
</article>
|
|
</Layout>
|