84 lines
2.6 KiB
Text
84 lines
2.6 KiB
Text
---
|
|
import { CacheHeaders, ONE_HOUR } from 'cdn-cache-control';
|
|
import Layout from "@layouts/Layout.astro";
|
|
import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
|
|
import icons from "@cdransf/astro-tabler-icons";
|
|
import { fetchGlobalData } from "@utils/data/global/index.js";
|
|
import { mediaLinks } from "@utils/helpers/media.js";
|
|
import { md } from "@utils/helpers/general.js";
|
|
import slugify from "slugify";
|
|
|
|
const { genre } = await fetchGlobalData(Astro, Astro.url.pathname);
|
|
|
|
if (!genre) return Astro.redirect("/404", 404);
|
|
|
|
const headers = new CacheHeaders()
|
|
.swr()
|
|
.ttl(ONE_HOUR)
|
|
.tag(['genre', `genre-${slugify(genre.name, { lower: true })}`]);
|
|
|
|
headers.forEach((value, key) => {
|
|
Astro.response.headers.set(key, value);
|
|
});
|
|
|
|
const { IconArrowLeft } = icons;
|
|
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}
|
|
pageUrl={Astro.url.pathname}
|
|
ogImage={genre.artists[0].image}
|
|
>
|
|
<a class="back-link" href="/music" title="Go back to the music index page">
|
|
<div set:html={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>
|