atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed tags in posts
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m15s
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2025-06-20 00:09:18 -06:00
parent a6336e293c
commit 5f7490d133
1 changed files with 60 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/pages/post/[...slug].astro
View File

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