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

Compare commits

base: autonomic-cooperative:36b5ab7cd211c9bde49324ed4b71d1c0e41287d9
Branches Tags
autonomic-cooperative:main autonomic-cooperative:deploy-experiments autonomic-cooperative:t-work
...
compare: autonomic-cooperative:7d2f0822fa68bab99b2e37ebfb841f78fbfd9243
Branches Tags
autonomic-cooperative:main autonomic-cooperative:deploy-experiments autonomic-cooperative:t-work

2 Commits
36b5ab7cd2 ... 7d2f0822fa

Author SHA1 Message Date
tobias
7d2f0822fa Create nice layout for post list
All checks were successful
continuous-integration/drone/push Build is passing
Details
2024-05-19 17:08:00 +02:00
tobias
456db37eb6 Configure reasonable-ish CSS defaults 2024-05-19 15:33:37 +02:00
11 changed files with 150 additions and 43 deletions
Expand all files Collapse all files

3
astro/src/components/Content.astro
View File

@ -5,8 +5,6 @@ import { getImageSrc } from "@/utils/payload";
const { content } = Astro.props; const { content } = Astro.props;
const contentArray = getContentArray(content); const contentArray = getContentArray(content);
--- ---
<article>
{ {
contentArray.map((value) => { contentArray.map((value) => {
if (typeof value === "string") { if (typeof value === "string") {
@ -24,4 +22,3 @@ const contentArray = getContentArray(content);
} }
}) })
} }
</article>

8
astro/src/components/Header.astro
View File

@ -18,16 +18,16 @@ const links = [
<header class="flex justify-between py-6"> <header class="flex justify-between py-6">
<div> <div>
<a href="/"> <a href="/" class="decoration-transparent">
<span class="font-extrabold"> <span class="text-2xl font-extrabold ">
Logo Logo
</span> </span>
</a> </a>
</div> </div>
<nav> <nav>
<ul class="flex gap-4 font-bold"> <ul class="flex gap-4 font-bold list-none">
{links.map((item, index) => ( {links.map((item, index) => (
<li> <li class="decoration-transparent">
<a href={item.link}>{item.label}</a> <a href={item.link}>{item.label}</a>
</li> </li>
))} ))}

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>

44
astro/src/global.css
View File

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.autonomic { .autonomic {
/* Palette */ /* Palette */
/* RGBA instead of hex so that opacity will work */ /* RGBA instead of hex so that opacity will work */
@ -15,5 +19,45 @@
--text: var(--shocking-pink); --text: var(--shocking-pink);
--textInverted: var(--absolute-white); --textInverted: var(--absolute-white);
--link: var(--shamrock-green);
--background: var(--white); --background: var(--white);
} }
@layer components {
:root {
@apply ring-secondary;
}
h1 {
@apply text-5xl font-bold;
}
h2 {
@apply text-4xl font-semibold;
}
h3 {
@apply text-2xl font-semibold;
}
h4, h5, h6 {
@apply text-xl font-semibold;
}
p, span, li, a {
@apply text-xl;
}
a {
@apply text-link underline;
}
ol {
@apply list-decimal;
}
ul {
@apply list-disc;
}
}

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 font-plex 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>

33
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,9 +7,9 @@ const posts = await getPosts();
--- ---
<ContentLayout title="Paystro"> <ContentLayout title="Paystro">
<main class="" > <main class="flex flex-col gap-4" >
<h1 class="font-bold text-5xl text-">Paystro</h1> <h1 class="">Paystro</h1>
<p class="mt-3 text-lg"> <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
easy to get started with building your website. With Paystro, you'll have easy to get started with building your website. With Paystro, you'll have
a complete development environment that you can run locally using Docker. a complete development environment that you can run locally using Docker.
@ -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>

6
astro/src/pages/posts/[id].astro
View File

@ -19,10 +19,10 @@ const post = id && (await getPost(id));
{ {
post ? ( post ? (
<ContentLayout title={`Paystro | ${post.title!}`}> <ContentLayout title={`Paystro | ${post.title!}`}>
<div class="space-y-3 my-3"> <article class="space-y-3 my-3 max-w-prose">
<h1 class="font-bold text-5xl">{post.title}</h1> <h1 class="">{post.title}</h1>
{post.content && <Content content={post.content} />} {post.content && <Content content={post.content} />}
</div> </article>
</ContentLayout> </ContentLayout>
) : ( ) : (
<div>404</div> <div>404</div>

1
astro/tailwind.config.cjs
View File

@ -12,6 +12,7 @@ module.exports = {
tertiary: "rgba(var(--tertiary))", tertiary: "rgba(var(--tertiary))",
text: "rgba(var(--text))", text: "rgba(var(--text))",
textInverted: "rgba(var(--textInverted))", textInverted: "rgba(var(--textInverted))",
link: "rgba(var(--link))",
background: "rgba(var(--background))", background: "rgba(var(--background))",
}, },
}, },

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",