137 lines
4.1 KiB
Text
137 lines
4.1 KiB
Text
---
|
|
import { Image } from "astro:assets";
|
|
import { type CollectionEntry, getCollection, render } from "astro:content";
|
|
import Breadcrumbs from "@/components/Breadcrumbs.astro";
|
|
import PostNavigation from "@/components/PostNavigation.astro";
|
|
import TableOfContents from "@/components/TableOfContents.astro";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import Layout from "@/layouts/Layout.astro";
|
|
import { formatDate, readingTime } from "@/lib/utils";
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = (await getCollection("blog"))
|
|
.filter((post) => !post.data.draft)
|
|
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
|
|
return posts.map((post) => ({
|
|
params: { id: post.id },
|
|
props: post,
|
|
}));
|
|
}
|
|
type Props = CollectionEntry<"blog">;
|
|
|
|
const posts = (await getCollection("blog"))
|
|
.filter((post) => !post.data.draft)
|
|
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
|
|
|
|
function getPostIndex(id: string): number {
|
|
return posts.findIndex((post) => post.id === id);
|
|
}
|
|
|
|
function getPrevPost(id: string): Props | null {
|
|
const postIndex = getPostIndex(id);
|
|
return postIndex !== -1 && postIndex < posts.length - 1
|
|
? posts[postIndex + 1]
|
|
: null;
|
|
}
|
|
|
|
function getNextPost(id: string): Props | null {
|
|
const postIndex = getPostIndex(id);
|
|
return postIndex > 0 ? posts[postIndex - 1] : null;
|
|
}
|
|
|
|
const currentPostId = Astro.params.id;
|
|
const nextPost = getNextPost(currentPostId);
|
|
const prevPost = getPrevPost(currentPostId);
|
|
|
|
const post = Astro.props;
|
|
const { Content, headings } = await render(post);
|
|
---
|
|
|
|
<Layout title={post.data.title} description={post.data.description}>
|
|
<section
|
|
class="grid grid-cols-[minmax(0px,1fr)_min(var(--breakpoint-md),100%)_minmax(0px,1fr)] gap-y-6 *:px-4"
|
|
>
|
|
<Breadcrumbs
|
|
items={[
|
|
{ href: '/blog', label: 'Blog', icon: 'lucide:archive' },
|
|
{ label: post.data.title, icon: 'lucide:file-text' },
|
|
]}
|
|
class="col-start-2"
|
|
/>
|
|
{
|
|
post.data.image && (
|
|
<Image
|
|
src={post.data.image}
|
|
alt={post.data.title}
|
|
width={1200}
|
|
height={630}
|
|
class="col-span-full mx-auto w-full max-w-[1000px] object-cover"
|
|
/>
|
|
)
|
|
}
|
|
<section class="col-start-2 flex flex-col gap-y-6 text-center">
|
|
<div class="flex flex-col gap-y-4">
|
|
<h1 class="text-4xl leading-tight font-medium text-pretty sm:text-5xl">
|
|
{post.data.title}
|
|
</h1>
|
|
|
|
<div
|
|
class="text-muted-foreground flex flex-wrap items-center justify-center gap-2 text-sm"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<span>{formatDate(post.data.date)}</span>
|
|
<Separator orientation="vertical" className="h-4!" />
|
|
<span>{readingTime(post.body!)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<PostNavigation prevPost={prevPost} nextPost={nextPost} />
|
|
</section>
|
|
|
|
{headings.length > 0 && <TableOfContents headings={headings} />}
|
|
|
|
<article class="prose col-start-2 max-w-none">
|
|
<Content />
|
|
</article>
|
|
</section>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="group fixed right-8 bottom-8 z-50 hidden"
|
|
id="scroll-to-top"
|
|
title="Scroll to top"
|
|
aria-label="Scroll to top"
|
|
>
|
|
<Icon
|
|
name="lucide:arrow-up"
|
|
class="mx-auto size-4 transition-all group-hover:-translate-y-0.5"
|
|
/>
|
|
</Button>
|
|
|
|
<script>
|
|
document.addEventListener('astro:page-load', () => {
|
|
const scrollToTopButton = document.getElementById('scroll-to-top')
|
|
const footer = document.querySelector('footer')
|
|
|
|
if (scrollToTopButton && footer) {
|
|
scrollToTopButton.addEventListener('click', () => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
})
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const footerRect = footer.getBoundingClientRect()
|
|
const isFooterVisible = footerRect.top <= window.innerHeight
|
|
|
|
scrollToTopButton.classList.toggle(
|
|
'hidden',
|
|
window.scrollY <= 300 || isFooterVisible,
|
|
)
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
</Layout>
|