Files
atridotdad/src/pages/post/[...slug].astro
Atridad Lahiji dce37681af
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m39s
Opengraph
2026-02-07 00:28:33 -07:00

83 lines
2.8 KiB
Plaintext

---
import { getCollection, render, type CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";
import Layout from "../../layouts/Layout.astro";
export const prerender = true;
export async function getStaticPaths() {
const posts = await getCollection("posts");
return posts.map((post: CollectionEntry<"posts">) => ({
params: { slug: post.id },
props: { post },
}));
}
const { post }: { post: CollectionEntry<"posts"> } = Astro.props;
const { Content } = await render(post);
---
<Layout
title={post.data.title}
description={post.data.description}
ogType="article"
>
<div class="w-full p-4 md:p-8">
<div class="max-w-3xl mx-auto">
<div class="p-4 md:p-8">
<h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
{post.data.title}
</h1>
<div class="flex flex-wrap items-center gap-4 mb-6">
<div
class="flex items-center flex-row gap-2 text-base-content opacity-75"
>
<Icon name="mdi:clock" class="text-xl" />
<time datetime={post.data.pubDate.toISOString()}>
{
new Date(post.data.pubDate).toLocaleDateString(
"en-us",
{
month: "long",
day: "numeric",
year: "numeric",
},
)
}
</time>
</div>
{/* Back button */}
<a
href="/posts"
class="btn btn-outline btn-primary btn-sm font-bold"
>
<Icon name="mdi:arrow-left" class="text-lg" />
Back
</a>
</div>
{
post.data.tags && post.data.tags.length > 0 && (
<div class="flex gap-2 flex-wrap mb-6">
{post.data.tags.map((tag: string) => (
<div class="badge badge-primary font-bold">
<Icon name="mdi:tag" class="text-lg" />
{tag}
</div>
))}
</div>
)
}
<article
class="prose prose-lg dark:prose-invert max-w-none mt-6"
>
<Content />
</article>
</div>
</div>
</div>
</Layout>