Add dev:build script

astro/astro.config.mjs

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

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>

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

astro/src/pages/index.astro

@@ -42,4 +42,4 @@ const posts = await getPosts();
       }
     </div>
   </main>
-</CLayout>
+</ContentLayout>

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>
   )

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) {

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

payload/src/collections/Media.ts

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

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,