113 lines
3.8 KiB
Text
113 lines
3.8 KiB
Text
---
|
|
import type { GetStaticPathsOptions } from "astro";
|
|
import { Image } from "astro:assets";
|
|
import { getCollection } from "astro:content";
|
|
import { getUnixTime, format as formatDate } from "date-fns";
|
|
import { enUS as enUSLocale } from "date-fns/locale/en-US";
|
|
import GalleryLayout from "../../layouts/GalleryLayout.astro";
|
|
|
|
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
|
|
const stories = (await getCollection("stories"))
|
|
.filter((story) => !story.data.isDraft)
|
|
.sort((a, b) => getUnixTime(b.data.pubDate) - getUnixTime(a.data.pubDate));
|
|
return paginate(stories, { pageSize: 30 });
|
|
}
|
|
const { page } = Astro.props;
|
|
const totalPages = Math.ceil(page.total / page.size);
|
|
---
|
|
|
|
<GalleryLayout pageTitle="Stories">
|
|
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Stories</h1>
|
|
<p class="my-4">My main collection of content so far.</p>
|
|
<p class="text-center font-light text-stone-950 dark:text-white">
|
|
{
|
|
page.start == page.end
|
|
? `Displaying story ${page.start + 1}`
|
|
: `Displaying stories ${page.start + 1} - ${page.end + 1}`
|
|
} / {page.total}
|
|
</p>
|
|
<div class="mx-auto mb-6 mt-2 flex w-fit rounded-lg border border-stone-400 dark:border-stone-500">
|
|
{
|
|
page.url.prev && (
|
|
<a class="text-link border-r border-stone-400 px-2 py-1 underline dark:border-stone-500" href={page.url.prev}>
|
|
Previous page
|
|
</a>
|
|
)
|
|
}
|
|
{
|
|
[...Array(totalPages).keys()].map((p) =>
|
|
p + 1 == page.currentPage ? (
|
|
<span class="border-r border-stone-400 px-4 py-1 font-semibold text-stone-900 dark:border-stone-500 dark:text-stone-50">
|
|
{p + 1}
|
|
</span>
|
|
) : (
|
|
<a class="text-link border-r border-stone-400 px-2 py-1 underline dark:border-stone-500" href={`./${p + 1}`}>
|
|
{p + 1}
|
|
</a>
|
|
),
|
|
)
|
|
}
|
|
{
|
|
page.url.next && (
|
|
<a class="text-link px-2 py-1 underline" href={page.url.next}>
|
|
Next page
|
|
</a>
|
|
)
|
|
}
|
|
</div>
|
|
<ul class="flex flex-wrap justify-center gap-4 text-center md:justify-normal">
|
|
{
|
|
page.data.map((story) => (
|
|
<li class="break-inside-avoid">
|
|
<a class="text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
|
|
{story.data.thumbnail && (
|
|
<Image
|
|
class="w-48"
|
|
src={story.data.thumbnail}
|
|
alt={`Thumbnail for ${story.data.title}`}
|
|
width={story.data.thumbnailWidth}
|
|
height={story.data.thumbnailHeight}
|
|
/>
|
|
)}
|
|
<div class="max-w-48 text-sm">
|
|
<>
|
|
<span>{story.data.title}</span>
|
|
<br />
|
|
<span class="italic">{formatDate(story.data.pubDate, "MMM d, yyyy", { locale: enUSLocale })}</span>
|
|
</>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
<div class="mx-auto my-6 flex w-fit rounded-lg border border-stone-400 dark:border-stone-500">
|
|
{
|
|
page.url.prev && (
|
|
<a class="text-link border-r border-stone-400 px-2 py-1 underline dark:border-stone-500" href={page.url.prev}>
|
|
Previous page
|
|
</a>
|
|
)
|
|
}
|
|
{
|
|
[...Array(totalPages).keys()].map((p) =>
|
|
p + 1 == page.currentPage ? (
|
|
<span class="border-r border-stone-400 px-4 py-1 font-semibold text-stone-900 dark:border-stone-500 dark:text-stone-50">
|
|
{p + 1}
|
|
</span>
|
|
) : (
|
|
<a class="text-link border-r border-stone-400 px-2 py-1 underline dark:border-stone-500" href={`./${p + 1}`}>
|
|
{p + 1}
|
|
</a>
|
|
),
|
|
)
|
|
}
|
|
{
|
|
page.url.next && (
|
|
<a class="text-link px-2 py-1 underline" href={page.url.next}>
|
|
Next page
|
|
</a>
|
|
)
|
|
}
|
|
</div>
|
|
</GalleryLayout>
|