Create autonomic color theme

fix: Alt attr. string
Add dev:build script
2024-05-19 12:22:42 +02:00 · 2024-05-19 09:01:15 +02:00 · 2024-05-19 08:50:33 +02:00 · 2024-05-19 08:50:00 +02:00 · 2024-05-19 08:49:23 +02:00 · 2024-05-19 08:48:18 +02:00
12 changed files with 51 additions and 29 deletions
--- a/astro/astro.config.mjs
+++ b/astro/astro.config.mjs
@ -9,6 +9,9 @@ export default defineConfig({
  build: {
    inlineStylesheets: "auto",
  },
+  server: {
+    port: 3000
+  },
  integrations: [
    tailwind({
      config: {
--- a/astro/src/components/Content.astro
+++ b/astro/src/components/Content.astro
@ -6,11 +6,11 @@ const { content } = Astro.props;
 const contentArray = getContentArray(content);
 ---

-<div>
+<article>
  {
    contentArray.map((value) => {
      if (typeof value === "string") {
-        return <article set:html={value} />;
+        return <section set:html={value} />;
      } else {
        return (
          <Image
@ -18,10 +18,10 @@ const contentArray = getContentArray(content);
            width={value.width}
            height={value.height}
            format="webp"
-            alt="hallo"
+            alt={value.alt}
          />
        );
      }
    })
  }
-</div>
+</article>
--- a/astro/src/components/Header.astro
+++ b/astro/src/components/Header.astro
@ -1,9 +1,5 @@
 ---
 const links = [
-    {
-        label: "Home",
-        link: "/home"
-    },
    {
        label: "About",
        link: "/about"
@ -22,9 +18,11 @@ const links = [

 <header class="flex justify-between py-6">
    <div>
-        <span class="font-extrabold">
-            Logo
-        </span>
+        <a href="/">
+            <span class="font-extrabold">
+                Logo
+            </span>
+        </a>
    </div>
    <nav>
        <ul class="flex gap-4 font-bold">
--- a/astro/src/global.css
+++ b/astro/src/global.css
@ -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);
+}
--- a/astro/src/layouts/BaseLayout.astro
+++ b/astro/src/layouts/BaseLayout.astro
@ -4,6 +4,7 @@ export interface Props {
  title: string;
 }
 const { title } = Astro.props;
+import "@/global.css"
 ---

 <!DOCTYPE html>
@ -30,7 +31,7 @@ const { title } = Astro.props;
      }
    </style>
  </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 />
  </body>
 </html>
--- a/astro/src/pages/index.astro
+++ b/astro/src/pages/index.astro
@ -7,7 +7,7 @@ const posts = await getPosts();

 <ContentLayout title="Paystro">
  <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">
      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
@ -26,7 +26,7 @@ const posts = await getPosts();
        posts.length > 0 ? (
          posts.map((post) => (
            <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>
                {post.publishedDate && (
                  <p>
@ -42,4 +42,4 @@ const posts = await getPosts();
      }
    </div>
  </main>
-</CLayout>
+</ContentLayout>
--- a/astro/src/pages/posts/[id].astro
+++ b/astro/src/pages/posts/[id].astro
@ -20,11 +20,10 @@ const post = id && (await getPost(id));
  post ? (
    <ContentLayout title={`Paystro | ${post.title!}`}>
      <div class="space-y-3 my-3">
-        <a href="/">BACK</a>
        <h1 class="font-bold text-5xl">{post.title}</h1>
        {post.content && <Content content={post.content} />}
      </div>
-    </CLayout>
+    </ContentLayout>
  ) : (
    <div>404</div>
  )
--- a/astro/src/utils/helpers.ts
+++ b/astro/src/utils/helpers.ts
@ -12,12 +12,13 @@ export const getContentArray = (content: any) => {
          src: node.value.filename,
          width: `${node.value.width}`,
          height: `${node.value.height}`,
+          alt: `${node.value.alt}`,
        }),
    },
  }).replaceAll("<p></p>", "<p>&nbsp;</p>");
  const htmlImageArray: (
    | string
-    | { src: string; width: number; height: number }
+    | { src: string; width: number; height: number, alt: string }
  )[] = [];
  let lastIndex = 0;
  while (true) {
@ -33,6 +34,7 @@ export const getContentArray = (content: any) => {
      src: imgTag.match(/src="(.*?)"/)![1],
      width: +imgTag.match(/width="(.*?)"/)![1],
      height: +imgTag.match(/height="(.*?)"/)![1],
+      alt: imgTag.match(/alt="(.*?)"/)![1],
    };
    htmlImageArray.push(remainingHtml, imgObject);
    lastIndex = imgEndIndex;
--- a/astro/tailwind.config.cjs
+++ b/astro/tailwind.config.cjs
@ -7,11 +7,12 @@ module.exports = {
    },
    extend: {
      colors: {
-        gray: {
-          DEFAULT: "#111111",
-          light: "#888888",
-          dark: "#222222",
-        },
+        primary: "rgba(var(--primary))",
+        secondary: "rgba(var(--secondary))",
+        tertiary: "rgba(var(--tertiary))",
+        text: "rgba(var(--text))",
+        textInverted: "rgba(var(--textInverted))",
+        background: "rgba(var(--background))",
      },
    },
  },
--- a/package.json
+++ b/package.json
@ -5,6 +5,7 @@
  "version": "1.2",
  "scripts": {
    "dev": "docker compose up",
-    "stop": "docker compose down"
+    "stop": "docker compose down",
+    "dev:build": "docker compose up --build"
  }
 }
--- a/payload/src/collections/Media.ts
+++ b/payload/src/collections/Media.ts
@ -18,6 +18,7 @@ export const Media: CollectionConfig = {
    {
      name: "alt",
      type: "text",
+      required: true
    },
  ],
 };
--- a/payload/src/collections/Posts.ts
+++ b/payload/src/collections/Posts.ts
@ -38,10 +38,7 @@ const Posts: CollectionConfig = {
    {
      name: "title",
      type: "text",
-    },
-    {
-      name: "hallo",
-      type: "text",
+      required: true
    },
    {
      name: "publishedDate",
@ -59,7 +56,7 @@ const Posts: CollectionConfig = {
            media: {
              fields: [
                {
-                  name: "imagel",
+                  name: "image",
                  type: "upload",
                  relationTo: "media",
                  required: true,
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