.dockerignore

@@ -1,4 +1,3 @@
 .DS_Store
 node_modules
 dist
-./pocketbase

.gitignore

@@ -22,4 +22,3 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
-pocketbase/

Dockerfile

@@ -13,11 +13,18 @@ FROM build-deps AS build
 
 COPY . .
 
+ARG POCKETBASE_URL
+ENV POCKETBASE_URL=${POCKETBASE_URL}
+
 RUN npm run build
 
 FROM base AS runtime
 COPY --from=prod-deps /app/node_modules ./node_modules
 COPY --from=build /app/dist ./dist
 
-EXPOSE 4321
+ARG PORT=4321
-CMD ["node", "./dist/server/entry.mjs"] 
+ENV HOST=0.0.0.0
+ENV PORT=${PORT}
+ENV POCKETBASE_URL=${POCKETBASE_URL}
+EXPOSE ${PORT}
+CMD node ./dist/server/entry.mjs

compose.yml

@@ -3,15 +3,51 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        PUBLIC_POCKETBASE_URL: ${PUBLIC_POCKETBASE_URL}
+        PUBLIC_TITLE: ${PUBLIC_TITLE}
+        PUBLIC_DESCRIPTION: ${PUBLIC_DESCRIPTION}
+        PUBLIC_USEICONS: ${PUBLIC_USEICONS}
     env_file: .env
-    ports:
+    networks:
-      - 4321:4321
+      - caddy
+    labels:
+      caddy: lion.gay
+      caddy.reverse_proxy: "{{upstreams 4321}}"
   pocketbase:
     image: ghcr.io/muchobien/pocketbase:latest
     container_name: pocketbase-gallery
     restart: unless-stopped
-    ports:
+    networks:
-      - "8090:8090"
+      - caddy
     volumes:
-      - ./pocketbase/pb_data:/pb_data
+      - /opt/pocketbase/pb_data:/pb_data
-      - ./pocketbase/pb_public:/pb_public
+      - /opt/pocketbase/pb_public:/pb_public
+    labels:
+      caddy: pocket.fangs.app
+      caddy.reverse_proxy: "{{upstreams 8090}}"
+  caddy:
+    container_name: "caddy-gallery"
+    image: videah/caddy-proxy:latest
+    ports:
+      - "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

@@ -1,5 +1,6 @@
 ---
 import pb from "../lib/pb";
+
 const { href, title, body, image } = Astro.props;
 let imageURL;
 
@@ -9,12 +10,11 @@ if (image) {
 ---
 
 <div class="relative max-w-xl mx-auto mt-20 h-32 w-55">
-  <a href={href} class="block backdrop-blur-md rounded-md h-32 w-64">
+  <a href={href} class="block">
     {
       image && (
         <img
           class="h-32 w-64 object-cover rounded-md"
-          // @ts-ignore
           src={imageURL}
           alt={`Cover for ${title}`}
         />

src/components/Image.astro

@@ -31,9 +31,9 @@ const showNsfw = Astro.url.searchParams.has('nsfw') || false;
         <div
           data-lightbox="true"
           id="parent"
-          class='rounded-lg relative overflow-hidden mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg w-52' 
+          class=`relative overflow-hidden rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg w-52`
         >
-          <img class="rounded-lg" src={src} alt={`${alt !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" /> 
+          <img src={src} alt={`${alt !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" /> 
           {
             alt && (
               <div

src/components/IndexSidebar.astro

@@ -21,11 +21,11 @@ const config = {
 ---
 
 <aside>
-  <div class="p-4 backdrop-blur-md backdrop-brightness-50 rounded-lg ">
+  <div class="p-4">
     <a href="/">
       {
         icon && (
-          <Image class={"w-40 h-40 mx-auto object-cover object-center rounded-full"} src={icon} width={10} height={10} alt={""} />
+          <Image class={"icon"} src={icon} width={10} height={10} alt={""} />
         )
       }
       <h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
@@ -68,4 +68,15 @@ const config = {
       </div>
     </div>
   </div>
+
+  <style>
+    img.icon {
+      width: 10rem;
+      height: 10rem;
+      margin: 0 auto;
+      object-fit: cover;
+      object-position: center;
+      border-radius: 50%;
+    }
+  </style>
 </aside>

src/components/Lightbox.astro

@@ -1,6 +1,6 @@
 <figure class="place-content-center app-lightbox backdrop-blur-md">
   <img class="portal" />
-  <figcaption class="desc rounded font-bold backdrop-blur-sm bg-black/50"></figcaption>
+  <figcaption class="desc rounded font-bold backdrop-blur-sm"></figcaption>
 </figure>
 
 <script>
@@ -61,7 +61,7 @@
     cursor: zoom-out;
     background-color: var(--bg-color, hsla(0, 0%, 0%, 0.623));
     opacity: 0;
-    transition: opacity ease-in-out 0.35s;
+    transition: opacity 0.35s;
 
     &.is-active {
       pointer-events: initial;
@@ -83,7 +83,7 @@
     transition:
       opacity 0.35s,
       transform 0.35s;
-    transform: scale(0.5);
+    transform: scale(0.2);
 
     :global(img) {
       width: 100%;

src/env.d.ts

@@ -1,2 +1 @@
-/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/CharacterList.astro

@@ -4,21 +4,17 @@ import Sidebar from "../components/Sidebar.astro";
 import pb from "../lib/pb";
 import c from "../lib/config";
 
+
 const avatarRec = await pb
   .collection("images")
-  .getFirstListItem("useAsAvatar=true", { requestKey: null })
+  .getFirstListItem("useAsAvatar=true").catch(() => null);
-  .catch(() => null);
 const backgroundRec = await pb
   .collection("images")
-  .getFirstListItem("useAsBackground=true", { requestKey: null })
+  .getFirstListItem("useAsBackground=true").catch(() => null);
-  .catch(() => null);
 
-const icon = avatarRec
+
-  ? await pb.files.getUrl(avatarRec, avatarRec.file)
+const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
-  : null;
+const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgroundRec.file) : null;
-const background = backgroundRec
-  ? await pb.files.getUrl(backgroundRec, backgroundRec.file)
-  : null;
 const socials = await pb.collection("socials").getFullList();
 
 const config = {
@@ -43,23 +39,18 @@ export const prerender = false;
     <title>{config.title}</title>
   </head>
   <body>
-<div class="xl:flex">
     <div
-      class="static xl:h-screen xl:relative  w-full xl:w-96 bg-[#11111156] backdrop-blur-md backdrop-brightness-50 h-full pt-4 box-border text-center"
+      class="xl:fixed xl:left-0 xl:top-0 w-full xl:w-96 bg-[#11111156] backdrop-blur-md h-full pt-4 box-border text-center"
     >
       <Sidebar />
     </div>
-    <div
-      class="max-w-fit ml-auto mr-auto transition-all"
-    >
     <slot />
-    </div>
-</div>
   </body>
 </html>
 <style define:vars={{ background: `url(${config.background})` }}>
-
+  .container {
-
+    width: calc(100% - 25rem);
+  }
   body {
     font-family: system-ui, sans-serif;
     background: var(--background);

src/layouts/Gallery.astro

@@ -39,23 +39,25 @@ const config = {
   </head>
   <body>
     <Lightbox />
-    <div class="xl:flex">
     <div
-      class="tatic xl:h-screen xl:relative  w-full xl:w-96 bg-[#11111156] backdrop-blur-md h-full pt-4 box-border text-center"
+      class="xl:fixed xl:left-0 xl:top-0 w-full xl:w-96 bg-[#11111156] backdrop-blur-md  h-full pt-4  box-border text-center"
     >
       <Sidebar />
     </div>
     <div
-      class="max-w-fit ml-auto mr-auto transition-all"
+      class="container float-none xl:float-right xl:box-border transition-all"
     >
       <slot />
     </div>
-    </div>
   </body>
 </html>
 
 <style define:vars={{ background: `url(${config.background})` }}>
-
+  @media screen(xl) {
+    .container {
+      width: calc(100% - 25rem);
+    }
+  }
 
   body {
     font-family: system-ui, sans-serif;

src/layouts/Index.astro

@@ -20,15 +20,15 @@ const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgrou
     <meta name="generator" content={Astro.generator} />
     <title>{config.TITLE}</title>
   </head>
-  <body class="flex h-screen">
+  <body>
-    <div class="m-auto">
     <slot />
-    </div>
   </body>
 </html>
 
 <style define:vars={{ background: `url(${background})` }}>
-
+  .container {
+    width: calc(100% - 25rem);
+  }
   body {
     font-family: system-ui, sans-serif;
     background: var(--background);

src/pages/characters/index.astro

@@ -6,7 +6,7 @@ import Card from "../../components/Card.astro";
 const characters = await pb
   .collection("characters")
   // @ts-ignore
-  .getFullList({ expand: ["icon"], filter: `(hidden = false)`, requestKey: null });
+  .getFullList({ expand: ["icon"], filter: `(hidden = false)` });
 
 export const prerender = false;
 ---
@@ -14,24 +14,9 @@ export const prerender = false;
 <CharacterList>
   <div class="flex flex-col">
     <h1 class="text-3xl text-center pt-8">Characters</h1>
-  <!-- class="grid grid-cols-2 xl:grid-cols-4 gap-4 columns-2 md:columns-4 self-center p-4" -->
+    <div
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 self-center p-4">
+      class="grid grid-cols-2 xl:grid-cols-4 gap-4 columns-2 md:columns-4 self-center p-4"
-    {
+    >
-      // @ts-ignore
-      characters.length === 0 && (
-        <div class="text-center col-span-full">
-          <p class="text-lg">No characters found.</p>
-        </div>
-      )
-    }
-    {
-      // @ts-ignore
-      characters.length === 0 && (
-        <div class="text-center col-span-full">
-          <p class="text-lg">No characters found.</p>
-        </div>
-      )
-    }
       {
         [...characters].map((c) => (
           // @ts-ignore
@@ -45,13 +30,4 @@ export const prerender = false;
       }
     </div>
   </div>
-
 </CharacterList>
-
-<style>
-@media screen(md) {
-    .container {
-      width: calc(100% - 25rem);
-    }
-  }
-</style>

src/pages/index.astro

@@ -5,8 +5,8 @@ import IndexLayout from "../layouts/Index.astro";
 ---
 
 <IndexLayout>
-  <div class="flex flex-col items-center justify-centerß">
+  <div class="flex flex-col ">
-    <div class="mx-auto my-auto">
+    <div class=" flex gap-4 columns-2 md:columns-4 self-center">
       <Sidebar />
     </div>
   </div>