Add fallback for img src's

Re autonomic-cooperative/astro-payload-template#22

.drone.yml

@@ -14,7 +14,20 @@ steps:
       registry: git.autonomic.zone
       context: astro
       dockerfile: astro/Dockerfile
-  - name: publish payload container
+  - name: publish payload dev container
+    image: plugins/docker
+    settings:
+      username: 3wordchant
+      password:
+        from_secret: git_autonomic_zone_token_3wc
+      # NOTE: edit this if you want your image called something else
+      repo: git.autonomic.zone/autonomic-cooperative/astro-payload-test-payload-dev
+      auto_tag: true
+      registry: git.autonomic.zone
+      context: payload
+      dockerfile: payload/Dockerfile
+      target: dev
+  - name: publish payload prod container
     image: plugins/docker
     settings:
       username: 3wordchant
@@ -46,7 +59,7 @@ steps:
       DRONE_URL: "https://drone.autonomic.zone"
       PAYLOAD_URL: "https://admin.paystro.swarm-demo.autonomic.zone"
     depends_on:
-      - publish payload container
+      - publish payload prod container
 trigger:
   branch:
     - main

astro/src/components/Content.astro

@@ -12,7 +12,7 @@ const contentArray = getContentArray(content);
       } else {
         return (
           <Image
-            src={getImageSrc(value.src)}
+            src={getImageSrc(value.src) || "/not-found.png"}
             width={value.width}
             height={value.height}
             format="webp"

astro/src/components/Post.astro

@@ -8,10 +8,10 @@ const { post } = Astro.props;
     href={`/posts/${post.id}/`}
 >
     <article class="flex px-5 py-3 gap-8">
-        <Image
-        src={post.thumbnail.url}
-        height="150"
-        aspectRatio="1"
+      <Image
+        src={post.thumbnail.url || "/not-found"}
+        height={150}
+        aspectRatio={1}
         format="webp"
         alt={post.thumbnail.alt}
       />

docker-compose.yml

@@ -19,11 +19,12 @@ services:
       - payload
 
   payload:
-    image: git.autonomic.zone/autonomic-cooperative/astro-payload-test-payload:latest
+    image: git.autonomic.zone/autonomic-cooperative/astro-payload-test-payload-dev:latest
     container_name: ${NAME}-payload
     restart: unless-stopped
     build:
       context: payload
+      target: dev
     environment:
       DEV: 1
       NAME: ${NAME}
@@ -31,15 +32,11 @@ services:
       PAYLOAD_URL: "http://localhost:${PAYLOAD_PORT}"
       PAYLOAD_PORT: ${PAYLOAD_PORT}
       PAYLOAD_SECRET: ${PAYLOAD_SECRET}
-      MONGODB_USER:
-      MONGODB_HOST: mongo
-      MONGODB_PASSWORD:
-      MONGODB_PORT: 27017
+      MONGODB_URI: "mongodb://$MONGODB_USER:$MONGODB_PASSWORD@mongo:27017"
     volumes:
       - ./payload/src:/base/src
-      - ./astro/src/types.ts:/types.ts
-    volumes:
-      - payload_media:/prod/dist/media
+      # - ./astro/src/types.ts:/types.ts
+      - payload_media:/base/src/media
     ports:
       - ${PAYLOAD_PORT}:${PAYLOAD_PORT}
     networks:

package.json

@@ -4,8 +4,8 @@
   "license": "AGPL-3.0-or-later",
   "version": "1.2",
   "scripts": {
-    "dev": "docker compose up",
+    "dev": "docker compose up --build",
     "stop": "docker compose down",
-    "dev:build": "docker compose up --build"
+    "dev:nobuild": "docker compose up"
   }
 }

payload/Dockerfile

@@ -9,7 +9,6 @@ ENV NODE_ENV=development
 EXPOSE 3001
 CMD ["yarn","dev"]
 
-
 FROM base AS build
 ENV NODE_ENV=production
 WORKDIR /build