From 7d2f0822fa68bab99b2e37ebfb841f78fbfd9243 Mon Sep 17 00:00:00 2001 From: tobias Date: Sun, 19 May 2024 17:08:00 +0200 Subject: [PATCH] Create nice layout for post list --- astro/src/components/Post.astro | 38 +++++++++++++++++++++++++++ astro/src/components/Posts.astro | 20 ++++++++++++++ astro/src/layouts/BaseLayout.astro | 2 +- astro/src/layouts/ContentLayout.astro | 8 +++--- astro/src/pages/index.astro | 29 +++++--------------- payload/src/collections/Posts.ts | 26 +++++++++++++++++- 6 files changed, 94 insertions(+), 29 deletions(-) create mode 100644 astro/src/components/Post.astro create mode 100644 astro/src/components/Posts.astro diff --git a/astro/src/components/Post.astro b/astro/src/components/Post.astro new file mode 100644 index 0000000..0ce9947 --- /dev/null +++ b/astro/src/components/Post.astro @@ -0,0 +1,38 @@ +--- +import { Image } from "@astrojs/image/components"; + +const { post } = Astro.props; +--- + +
+ {post.thumbnail.alt} + +
+
+

{post.title}

+ {post.publishedDate && ( +

+ {new Date(post.publishedDate).toLocaleDateString("de-DE")} +

+ )} +
+ {post.summary &&

+ {post.summary} +

} +
+ +
+ \ No newline at end of file diff --git a/astro/src/components/Posts.astro b/astro/src/components/Posts.astro new file mode 100644 index 0000000..7ea4b60 --- /dev/null +++ b/astro/src/components/Posts.astro @@ -0,0 +1,20 @@ +--- +import Post from "@/components/Post.astro" + +const { posts } = Astro.props; +--- + +
+

Posts

+
+ { + posts.length > 0 ? ( + posts.map((post) => ( + + )) + ) : ( +

No posts available

+ ) + } +
+
diff --git a/astro/src/layouts/BaseLayout.astro b/astro/src/layouts/BaseLayout.astro index 0dcc458..f85fe5f 100644 --- a/astro/src/layouts/BaseLayout.astro +++ b/astro/src/layouts/BaseLayout.astro @@ -31,7 +31,7 @@ import "@/global.css" } - + diff --git a/astro/src/layouts/ContentLayout.astro b/astro/src/layouts/ContentLayout.astro index a69f623..e862702 100644 --- a/astro/src/layouts/ContentLayout.astro +++ b/astro/src/layouts/ContentLayout.astro @@ -8,8 +8,8 @@ const { title } = Astro.props;
-
- -
-