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:da435c8fc15b54c3f4b15a504eaf4be891f0b5df
Branches Tags
autonomic-cooperative:main autonomic-cooperative:deploy-experiments autonomic-cooperative:t-work
..
compare: autonomic-cooperative:36b5ab7cd211c9bde49324ed4b71d1c0e41287d9
Branches Tags
autonomic-cooperative:main autonomic-cooperative:deploy-experiments autonomic-cooperative:t-work

7 Commits
da435c8fc1 ... 36b5ab7cd2

Author SHA1 Message Date
tobias
36b5ab7cd2 Create autonomic color theme
All checks were successful
continuous-integration/drone/push Build is passing
Details
2024-05-19 12:22:42 +02:00
tobias
03c14f0ca7 fix: Alt attr. string 2024-05-19 09:01:15 +02:00
tobias
421394a794 Add dev:build script
All checks were successful
continuous-integration/drone/push Build is passing
Details
2024-05-19 08:50:33 +02:00
tobias
a8362fa88f Add alt attribute to imgs 2024-05-19 08:50:00 +02:00
tobias
467b4bb0ad Fix typo & remove back button 2024-05-19 08:49:23 +02:00
tobias
7234cef7e1 Logo is home link 2024-05-19 08:48:18 +02:00
tobias
7ba1f78721 Add astro port to astro.config 2024-05-19 08:24:00 +02:00
12 changed files with 51 additions and 29 deletions
Expand all files Collapse all files

3
astro/astro.config.mjs
View File

@ -9,6 +9,9 @@ export default defineConfig({
build: { build: {
inlineStylesheets: "auto", inlineStylesheets: "auto",
}, },
server: {
port: 3000
},
integrations: [ integrations: [
tailwind({ tailwind({
config: { config: {

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

@ -6,11 +6,11 @@ const { content } = Astro.props;
const contentArray = getContentArray(content); const contentArray = getContentArray(content);
--- ---
<div> <article>
{ {
contentArray.map((value) => { contentArray.map((value) => {
if (typeof value === "string") { if (typeof value === "string") {
return <article set:html={value} />; return <section set:html={value} />;
} else { } else {
return ( return (
<Image <Image
@ -18,10 +18,10 @@ const contentArray = getContentArray(content);
width={value.width} width={value.width}
height={value.height} height={value.height}
format="webp" format="webp"
alt="hallo" alt={value.alt}
/> />
); );
} }
}) })
} }
</div> </article>

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

@ -1,9 +1,5 @@
--- ---
const links = [ const links = [
{
label: "Home",
link: "/home"
},
{ {
label: "About", label: "About",
link: "/about" link: "/about"
@ -22,9 +18,11 @@ const links = [
<header class="flex justify-between py-6"> <header class="flex justify-between py-6">
<div> <div>
<a href="/">
<span class="font-extrabold"> <span class="font-extrabold">
Logo Logo
</span> </span>
</a>
</div> </div>
<nav> <nav>
<ul class="flex gap-4 font-bold"> <ul class="flex gap-4 font-bold">

19
astro/src/global.css Normal file
View File

@ -0,0 +1,19 @@
.autonomic {
/* Palette */
/* RGBA instead of hex so that opacity will work */
--absolute-white: 255, 255, 255;
--white: 243, 252, 248;
--shocking-pink: 253, 0, 159;
--shamrock-green: 0, 198, 88;
--bubblegum-pink: 255, 133, 203;
--bright-orange: 255, 96, 21;
/* Use these in tailwind.config.cjs */
--primary: var(--shocking-pink);
--secondary: var(--shamrock-green);
--tertiary: var(--bright-orange);
--text: var(--shocking-pink);
--textInverted: var(--absolute-white);
--background: var(--white);
}

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

@ -4,6 +4,7 @@ export interface Props {
title: string; title: string;
} }
const { title } = Astro.props; const { title } = Astro.props;
import "@/global.css"
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -30,7 +31,7 @@ const { title } = Astro.props;
} }
</style> </style>
</head> </head>
<body class="min-h-screen flex flex-col mx-auto max-w-7xl bg-gray px-6 py-8 font-plex text-gray-200"> <body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 font-plex text-primary bg-background">
<slot /> <slot />
</body> </body>
</html> </html>

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

@ -7,7 +7,7 @@ const posts = await getPosts();
<ContentLayout title="Paystro"> <ContentLayout title="Paystro">
<main class="" > <main class="" >
<h1 class="font-bold text-5xl">Paystro</h1> <h1 class="font-bold text-5xl text-">Paystro</h1>
<p class="mt-3 text-lg"> <p class="mt-3 text-lg">
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
@ -26,7 +26,7 @@ const posts = await getPosts();
posts.length > 0 ? ( posts.length > 0 ? (
posts.map((post) => ( posts.map((post) => (
<a href={`/posts/${post.id}/`}> <a href={`/posts/${post.id}/`}>
<article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform"> <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> <h3 class="font-bold text-lg">{post.title}</h3>
{post.publishedDate && ( {post.publishedDate && (
<p> <p>
@ -42,4 +42,4 @@ const posts = await getPosts();
} }
</div> </div>
</main> </main>
</CLayout> </ContentLayout>

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

@ -20,11 +20,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"> <div class="space-y-3 my-3">
<a href="/">BACK</a>
<h1 class="font-bold text-5xl">{post.title}</h1> <h1 class="font-bold text-5xl">{post.title}</h1>
{post.content && <Content content={post.content} />} {post.content && <Content content={post.content} />}
</div> </div>
</CLayout> </ContentLayout>
) : ( ) : (
<div>404</div> <div>404</div>
) )

4
astro/src/utils/helpers.ts
View File

@ -12,12 +12,13 @@ export const getContentArray = (content: any) => {
src: node.value.filename, src: node.value.filename,
width: `${node.value.width}`, width: `${node.value.width}`,
height: `${node.value.height}`, height: `${node.value.height}`,
alt: `${node.value.alt}`,
}), }),
}, },
}).replaceAll("<p></p>", "<p>&nbsp;</p>"); }).replaceAll("<p></p>", "<p>&nbsp;</p>");
const htmlImageArray: ( const htmlImageArray: (
| string | string
| { src: string; width: number; height: number } | { src: string; width: number; height: number, alt: string }
)[] = []; )[] = [];
let lastIndex = 0; let lastIndex = 0;
while (true) { while (true) {
@ -33,6 +34,7 @@ export const getContentArray = (content: any) => {
src: imgTag.match(/src="(.*?)"/)![1], src: imgTag.match(/src="(.*?)"/)![1],
width: +imgTag.match(/width="(.*?)"/)![1], width: +imgTag.match(/width="(.*?)"/)![1],
height: +imgTag.match(/height="(.*?)"/)![1], height: +imgTag.match(/height="(.*?)"/)![1],
alt: imgTag.match(/alt="(.*?)"/)![1],
}; };
htmlImageArray.push(remainingHtml, imgObject); htmlImageArray.push(remainingHtml, imgObject);
lastIndex = imgEndIndex; lastIndex = imgEndIndex;

11
astro/tailwind.config.cjs
View File

@ -7,11 +7,12 @@ module.exports = {
}, },
extend: { extend: {
colors: { colors: {
gray: { primary: "rgba(var(--primary))",
DEFAULT: "#111111", secondary: "rgba(var(--secondary))",
light: "#888888", tertiary: "rgba(var(--tertiary))",
dark: "#222222", text: "rgba(var(--text))",
}, textInverted: "rgba(var(--textInverted))",
background: "rgba(var(--background))",
}, },
}, },
}, },

3
package.json
View File

@ -5,6 +5,7 @@
"version": "1.2", "version": "1.2",
"scripts": { "scripts": {
"dev": "docker compose up", "dev": "docker compose up",
"stop": "docker compose down" "stop": "docker compose down",
"dev:build": "docker compose up --build"
} }
} }

1
payload/src/collections/Media.ts
View File

@ -18,6 +18,7 @@ export const Media: CollectionConfig = {
{ {
name: "alt", name: "alt",
type: "text", type: "text",
required: true
}, },
], ],
}; };

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

@ -38,10 +38,7 @@ const Posts: CollectionConfig = {
{ {
name: "title", name: "title",
type: "text", type: "text",
}, required: true
{
name: "hallo",
type: "text",
}, },
{ {
name: "publishedDate", name: "publishedDate",
@ -59,7 +56,7 @@ const Posts: CollectionConfig = {
media: { media: {
fields: [ fields: [
{ {
name: "imagel", name: "image",
type: "upload", type: "upload",
relationTo: "media", relationTo: "media",
required: true, required: true,