generated from autonomic-cooperative/astro-payload-template
Create nice layout for post list
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
tobias
parent
456db37eb6
commit
7d2f0822fa
38
astro/src/components/Post.astro
Normal file
38
astro/src/components/Post.astro
Normal 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
20
astro/src/components/Posts.astro
Normal 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>
|
||||
|
|
@ -31,7 +31,7 @@ import "@/global.css"
|
|||
}
|
||||
</style>
|
||||
</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 />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ const { title } = Astro.props;
|
|||
|
||||
<BaseLayout title={title}>
|
||||
<Header/>
|
||||
<main class="flex-grow">
|
||||
<slot/>
|
||||
</main>
|
||||
<Footer/>
|
||||
<main class="flex-grow">
|
||||
<slot/>
|
||||
</main>
|
||||
<Footer/>
|
||||
</BaseLayout>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
import Posts from "@/components/Posts.astro";
|
||||
import ContentLayout from "@/layouts/ContentLayout.astro";
|
||||
import { getPosts } from "@/utils/payload";
|
||||
|
||||
|
|
@ -6,7 +7,7 @@ const posts = await getPosts();
|
|||
---
|
||||
|
||||
<ContentLayout title="Paystro">
|
||||
<main class="" >
|
||||
<main class="flex flex-col gap-4" >
|
||||
<h1 class="">Paystro</h1>
|
||||
<p class="mt-3">
|
||||
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
|
||||
environment for your website.
|
||||
</p>
|
||||
<h2 class="mt-6 font-bold text-2xl">Posts</h2>
|
||||
<div class="flex gap-4 mt-3 flex-wrap">
|
||||
{
|
||||
posts.length > 0 ? (
|
||||
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>
|
||||
<section class="mt-4">
|
||||
<Posts posts={posts}/>
|
||||
</section>
|
||||
</main>
|
||||
</ContentLayout>
|
||||
|
|
|
|||
|
|
@ -40,11 +40,25 @@ const Posts: CollectionConfig = {
|
|||
type: "text",
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: "summary",
|
||||
type: "text",
|
||||
required: false
|
||||
},
|
||||
{
|
||||
name: "publishedDate",
|
||||
type: "date",
|
||||
required: false,
|
||||
admin: {
|
||||
position: "sidebar",
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "thumbnail",
|
||||
type: "upload",
|
||||
relationTo: "media",
|
||||
required: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: "content",
|
||||
type: "richText",
|
||||
|
|
@ -67,6 +81,16 @@ const Posts: CollectionConfig = {
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "author",
|
||||
type: 'relationship',
|
||||
relationTo: 'users',
|
||||
hasMany: false,
|
||||
required: false,
|
||||
admin: {
|
||||
position: "sidebar",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
type: "select",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user