generated from autonomic-cooperative/astro-payload-template
Compare commits
2 Commits
36b5ab7cd2
...
7d2f0822fa
| Author | SHA1 | Date | |
|---|---|---|---|
| 7d2f0822fa | |||
| 456db37eb6 |
@ -5,8 +5,6 @@ import { getImageSrc } from "@/utils/payload";
|
||||
const { content } = Astro.props;
|
||||
const contentArray = getContentArray(content);
|
||||
---
|
||||
|
||||
<article>
|
||||
{
|
||||
contentArray.map((value) => {
|
||||
if (typeof value === "string") {
|
||||
@ -24,4 +22,3 @@ const contentArray = getContentArray(content);
|
||||
}
|
||||
})
|
||||
}
|
||||
</article>
|
||||
|
||||
@ -18,16 +18,16 @@ const links = [
|
||||
|
||||
<header class="flex justify-between py-6">
|
||||
<div>
|
||||
<a href="/">
|
||||
<span class="font-extrabold">
|
||||
<a href="/" class="decoration-transparent">
|
||||
<span class="text-2xl font-extrabold ">
|
||||
Logo
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="flex gap-4 font-bold">
|
||||
<ul class="flex gap-4 font-bold list-none">
|
||||
{links.map((item, index) => (
|
||||
<li>
|
||||
<li class="decoration-transparent">
|
||||
<a href={item.link}>{item.label}</a>
|
||||
</li>
|
||||
))}
|
||||
|
||||
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>
|
||||
@ -1,3 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.autonomic {
|
||||
/* Palette */
|
||||
/* RGBA instead of hex so that opacity will work */
|
||||
@ -15,5 +19,45 @@
|
||||
|
||||
--text: var(--shocking-pink);
|
||||
--textInverted: var(--absolute-white);
|
||||
--link: var(--shamrock-green);
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 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 />
|
||||
</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,9 +7,9 @@ const posts = await getPosts();
|
||||
---
|
||||
|
||||
<ContentLayout title="Paystro">
|
||||
<main class="" >
|
||||
<h1 class="font-bold text-5xl text-">Paystro</h1>
|
||||
<p class="mt-3 text-lg">
|
||||
<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
|
||||
easy to get started with building your website. With Paystro, you'll have
|
||||
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
|
||||
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>
|
||||
|
||||
@ -19,10 +19,10 @@ const post = id && (await getPost(id));
|
||||
{
|
||||
post ? (
|
||||
<ContentLayout title={`Paystro | ${post.title!}`}>
|
||||
<div class="space-y-3 my-3">
|
||||
<h1 class="font-bold text-5xl">{post.title}</h1>
|
||||
<article class="space-y-3 my-3 max-w-prose">
|
||||
<h1 class="">{post.title}</h1>
|
||||
{post.content && <Content content={post.content} />}
|
||||
</div>
|
||||
</article>
|
||||
</ContentLayout>
|
||||
) : (
|
||||
<div>404</div>
|
||||
|
||||
@ -12,6 +12,7 @@ module.exports = {
|
||||
tertiary: "rgba(var(--tertiary))",
|
||||
text: "rgba(var(--text))",
|
||||
textInverted: "rgba(var(--textInverted))",
|
||||
link: "rgba(var(--link))",
|
||||
background: "rgba(var(--background))",
|
||||
},
|
||||
},
|
||||
|
||||
@ -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",
|
||||
|
||||
Reference in New Issue
Block a user