coryd.dev-astro/src/pages/music/artists/[slug].astro

---
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}
  pageUrl={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}`}
            data-astro-prefetch
          >
            {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 class="concerts">
            {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>