phobos specific compose

compose.yml

@@ -4,20 +4,43 @@ services:
       context: .
       dockerfile: Dockerfile
       args:
-        PUBLIC_POCKETBASE_URL: https://pb.data.lio.systems
-        PUBLIC_TITLE: Astro Gallery
-        PUBLIC_DESCRIPTION: This is my Gallery Site
-        PUBLIC_USEICONS: true
+        PUBLIC_POCKETBASE_URL: ${PUBLIC_POCKETBASE_URL}
+        PUBLIC_TITLE: ${PUBLIC_TITLE}
+        PUBLIC_DESCRIPTION: ${PUBLIC_DESCRIPTION}
+        PUBLIC_USEICONS: ${PUBLIC_USEICONS}
+    env_file: .env
+    labels:
+      caddy: lion.gay
+      caddy.reverse_proxy: "{{upstreams 4321}}"
+  pocketbase:
+    image: ghcr.io/muchobien/pocketbase:latest
+    container_name: pocketbase
+    restart: unless-stopped
+    labels:
+      caddy: pocket.fangs.app
+      caddy.reverse_proxy: "{{upstreams 8090}}"
+  caddy:
+    container_name: "caddy"
+    image: videah/caddy-proxy:latest
     ports:
-      - 4321:4321
-    env_file:
-      - .env
-      # - PUBLIC_POCKETBASE_URL=https://pb.data.lio.systems
-      # - PUBLIC_TITLE=Astro Gallery
-      # - PUBLIC_DESCRIPTION=This is my Gallery Site
-      # - PUBLIC_USEICONS=true
-    # build:
-    #   context: .
-    #   dockerfile: Dockerfile
-    #   args:
-    #     PUBLIC_HOST: http://localhost:4321
+      - "80:80"
+      - "443:443"
+      - "443:443/udp"
+    environment:
+      - CADDY_INGRESS_NETWORKS=caddy
+    networks:
+      - caddy
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - caddy_data:/data
+    restart: unless-stopped
+    labels:
+      caddy.email: "caddy@lion.gay"
+      caddy.encode: zstd gzip
+
+networks:
+  caddy:
+    external: true
+
+volumes:
+  caddy_data: {}

src/components/Card.astro

@@ -9,7 +9,7 @@ if (image) {
 }
 ---
 
-<div class="relative max-w-xl mx-auto mt-20 h-32 w-64">
+<div class="relative max-w-xl mx-auto mt-20 h-32 w-55">
   <a href={href} class="block">
     {
       image && (

src/pages/characters/index.astro

@@ -15,7 +15,7 @@ export const prerender = false;
   <div class="flex flex-col">
     <h1 class="text-3xl text-center pt-8">Characters</h1>
     <div
-      class="grid grid-cols-2 xl:grid-cols-4 gap-4 columns-2 md:columns-4 self-center"
+      class="grid grid-cols-2 xl:grid-cols-4 gap-4 columns-2 md:columns-4 self-center p-4"
     >
       {
         [...characters].map((c) => (