69 lines
2.3 KiB
Text
69 lines
2.3 KiB
Text
---
|
|
import Layout from "@layouts/Layout.astro";
|
|
import Grid from "@components/media/Grid.astro";
|
|
import { fetchMusicMonth } from "@utils/data/music/month.js";
|
|
import { shuffleArray } from "@utils/helpers/general.js";
|
|
import icons from "@cdransf/astro-tabler-icons";
|
|
|
|
export const prerender = true;
|
|
|
|
export const getStaticPaths = async ({ paginate }) => {
|
|
const music = await fetchMusicMonth();
|
|
const monthlyArtists = music.month.artists;
|
|
|
|
return paginate(monthlyArtists, {
|
|
pageSize: 16,
|
|
});
|
|
};
|
|
|
|
const { IconArrowLeft } = icons;
|
|
const { page } = Astro.props;
|
|
const paginatedArtists = page.data;
|
|
const pagination = {
|
|
currentPage: page.currentPage,
|
|
totalPages: page.lastPage,
|
|
hasPrevious: page.currentPage > 1,
|
|
hasNext: page.currentPage < page.lastPage,
|
|
previousPage: page.url.prev || null,
|
|
nextPage: page.url.next || null,
|
|
pages: Array.from({ length: page.lastPage }, (_, i) => ({
|
|
number: i + 1,
|
|
href:
|
|
i === 0
|
|
? `/music/this-month/artists`
|
|
: `/music/this-month/artists/${i + 1}`,
|
|
})),
|
|
};
|
|
const pageTitle =
|
|
pagination.currentPage === 1
|
|
? "Artists I've listened to this month"
|
|
: `Artists I've listened to this month / page ${pagination.currentPage}`;
|
|
const description = "These are the artists I've been listening to this month. All of them are awesome.";
|
|
---
|
|
|
|
<Layout
|
|
pageTitle={pageTitle}
|
|
description={description}
|
|
pageUrl={Astro.url.pathname}
|
|
ogImage={shuffleArray(page.data)[0]?.artist_art}
|
|
>
|
|
<a href="/music" class="back-link">
|
|
<div set:html={IconArrowLeft({ size: 18 })}/> Back to Music
|
|
</a>
|
|
{pagination.currentPage === 1 && (
|
|
<>
|
|
<h2 class="page-title">{pageTitle}</h2>
|
|
<p>{description} Listed in descending order from most plays to least.</p>
|
|
<p><strong class="highlight-text">You can also take a look at</strong> the <a href="/music/this-month/albums">albums I've listened to this month</a>, <a href="/music/this-week/artists">the artists I've listened to this week</a> or <a href="/music/this-week/albums">the albums I've listened to this week</a>.</p>
|
|
<p><a href="/music/concerts">I keep track of the concerts I've been to too</a>.</p>
|
|
<hr />
|
|
</>
|
|
)}
|
|
<Grid
|
|
data={paginatedArtists}
|
|
pagination={pagination}
|
|
shape="square"
|
|
count={16}
|
|
loading="eager"
|
|
/>
|
|
</Layout>
|