From 42ca90ee1f0aadaa09888f1c9627657abcd866b2 Mon Sep 17 00:00:00 2001 From: IwanIDev Date: Sat, 21 Mar 2026 15:43:12 +0000 Subject: feat: implement PostHeader component and add blog post route --- src/components/BlogPosts.astro | 4 ++-- src/components/PostHeader.astro | 29 ++++++++++++++++++++++++++++ src/layouts/main.astro | 15 ++++++++++++++- src/pages/posts/[...slug].astro | 42 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 87 insertions(+), 3 deletions(-) create mode 100644 src/components/PostHeader.astro create mode 100644 src/pages/posts/[...slug].astro (limited to 'src') diff --git a/src/components/BlogPosts.astro b/src/components/BlogPosts.astro index 54b7529..73f9b5c 100644 --- a/src/components/BlogPosts.astro +++ b/src/components/BlogPosts.astro @@ -1,6 +1,6 @@ --- import { getCollection } from 'astro:content'; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card"; // Fetch all blog posts from the content collection const posts = await getCollection('blog'); @@ -18,7 +18,7 @@ const sortedPosts = posts.sort((a, b) => - {post.data.title} +

{post.data.title}

{post.data.description} diff --git a/src/components/PostHeader.astro b/src/components/PostHeader.astro new file mode 100644 index 0000000..1845ec1 --- /dev/null +++ b/src/components/PostHeader.astro @@ -0,0 +1,29 @@ +--- +import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Separator } from "@/components/ui/separator"; + +interface Props { + title: string; + slug: string; + description: string; + author: string; + publishDate: Date; +} + +const { title, slug, description, author, publishDate } = Astro.props as Props; +--- + + + +
+ {author} + {publishDate.toLocaleDateString()} +
+

{title}

+ {description} + + + + + diff --git a/src/layouts/main.astro b/src/layouts/main.astro index 69b80d2..30ac84d 100644 --- a/src/layouts/main.astro +++ b/src/layouts/main.astro @@ -1,13 +1,26 @@ --- +import { ViewTransitions } from "astro:transitions"; import "@/styles/global.css" + +interface Props { + title?: string; + description?: string; +} + +const { + title = "Astro App", + description = "Astro blog" +} = Astro.props as Props; --- + - Astro App + {title} + diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro new file mode 100644 index 0000000..b68f153 --- /dev/null +++ b/src/pages/posts/[...slug].astro @@ -0,0 +1,42 @@ +--- +import { getCollection, type CollectionEntry } from "astro:content"; +import Layout from "@/layouts/main.astro"; +import { buttonVariants } from "@/components/ui/button"; +import PostHeader from "@/components/PostHeader.astro"; + +export async function getStaticPaths() { + const posts = await getCollection("blog"); + + return posts.map((post) => ({ + params: { slug: post.id }, + props: { post }, + })); +} + +interface Props { + post: CollectionEntry<"blog">; +} + +const { post } = Astro.props as Props; +const { Content } = await post.render(); +--- + + +
+ + +
+ +
+ +
+ Back to posts +
+
+ -- cgit