autonomic-cooperative/astro-payload-test
0
0
Fork 0
generated from autonomic-cooperative/astro-payload-template
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create nice layout for post list
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
tobias 2024-05-19 17:08:00 +02:00
parent 456db37eb6
commit 7d2f0822fa
6 changed files with 94 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
astro/src/components/Post.astro Normal file
View File

@ -0,0 +1,38 @@
---
import { Image } from "@astrojs/image/components";
const { post } = Astro.props;
---
<a
class="py-4 border-secondary decoration-transparent"
href={`/posts/${post.id}/`}
>
<article class="flex px-5 py-3 gap-8">
<Image
src={post.thumbnail.url}
height="150"
aspectRatio="1"
format="webp"
alt={post.thumbnail.alt}
/>
<div class="flex flex-col gap-4">
<div class="flex justify-between w-full">
<h3 class="">{post.title}</h3>
{post.publishedDate && (
<p class="font-light">
{new Date(post.publishedDate).toLocaleDateString("de-DE")}
</p>
)}
</div>
{post.summary && <p>
{post.summary}
</p>}
</div>
<!-- {post.author.name && (
<p>
{post.author.name}
</p>
)} -->
</article>
</a>

20
astro/src/components/Posts.astro Normal file
View File

@ -0,0 +1,20 @@
---
import Post from "@/components/Post.astro"
const { posts } = Astro.props;
---
<div class="flex flex-col">
<h2 class="text-secondary mb-4">Posts</h2>
<div class="border-y-2 flex flex-col divide-y-2 border-secondary divide-secondary">
{
posts.length > 0 ? (
posts.map((post) => (
<Post post={post}/>
))
) : (
<p>No posts available</p>
)
}
</div>
</div>

2
astro/src/layouts/BaseLayout.astro
View File

@ -31,7 +31,7 @@ import "@/global.css"
} }
</style> </style>
</head> </head>
<body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 text-primary bg-background"> <body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-4 text-primary bg-background">
<slot /> <slot />
</body> </body>
</html> </html>

8
astro/src/layouts/ContentLayout.astro
View File

@ -8,8 +8,8 @@ const { title } = Astro.props;
<BaseLayout title={title}> <BaseLayout title={title}>
<Header/> <Header/>
<main class="flex-grow"> <main class="flex-grow">
<slot/> <slot/>
</main> </main>
<Footer/> <Footer/>
</BaseLayout> </BaseLayout>

29
astro/src/pages/index.astro
View File

@ -1,4 +1,5 @@
--- ---
import Posts from "@/components/Posts.astro";
import ContentLayout from "@/layouts/ContentLayout.astro"; import ContentLayout from "@/layouts/ContentLayout.astro";
import { getPosts } from "@/utils/payload"; import { getPosts } from "@/utils/payload";
@ -6,7 +7,7 @@ const posts = await getPosts();
--- ---
<ContentLayout title="Paystro"> <ContentLayout title="Paystro">
<main class="" > <main class="flex flex-col gap-4" >
<h1 class="">Paystro</h1> <h1 class="">Paystro</h1>
<p class="mt-3"> <p class="mt-3">
Paystro is a pre-configured setup for Astro and Payloadcms that makes it Paystro is a pre-configured setup for Astro and Payloadcms that makes it
@ -20,26 +21,8 @@ const posts = await getPosts();
reverse proxy. This setup provides a secure and scalable production reverse proxy. This setup provides a secure and scalable production
environment for your website. environment for your website.
</p> </p>
<h2 class="mt-6 font-bold text-2xl">Posts</h2> <section class="mt-4">
<div class="flex gap-4 mt-3 flex-wrap"> <Posts posts={posts}/>
{ </section>
posts.length > 0 ? ( </main>
posts.map((post) => (
<a href={`/posts/${post.id}/`}>
<article class="bg-secondary text-textInverted px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
<h3 class="font-bold text-lg">{post.title}</h3>
{post.publishedDate && (
<p>
{new Date(post.publishedDate).toLocaleDateString("de-DE")}
</p>
)}
</article>
</a>
))
) : (
<p>Add Posts in Payloadcms</p>
)
}
</div>
</main>
</ContentLayout> </ContentLayout>

26
payload/src/collections/Posts.ts
View File

@ -40,11 +40,25 @@ const Posts: CollectionConfig = {
type: "text", type: "text",
required: true required: true
}, },
{
name: "summary",
type: "text",
required: false
},
{ {
name: "publishedDate", name: "publishedDate",
type: "date", type: "date",
required: false,
admin: {
position: "sidebar",
}
},
{
name: "thumbnail",
type: "upload",
relationTo: "media",
required: true,
}, },
{ {
name: "content", name: "content",
type: "richText", type: "richText",
@ -67,6 +81,16 @@ const Posts: CollectionConfig = {
}, },
}, },
}, },
{
name: "author",
type: 'relationship',
relationTo: 'users',
hasMany: false,
required: false,
admin: {
position: "sidebar",
},
},
{ {
name: "status", name: "status",
type: "select", type: "select",