chore: misc

.dockerignore

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

.gitignore

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

Dockerfile

@@ -13,18 +13,11 @@ 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
 
-ARG PORT=4321
-ENV HOST=0.0.0.0
-ENV PORT=${PORT}
-ENV POCKETBASE_URL=${POCKETBASE_URL}
-EXPOSE ${PORT}
-CMD node ./dist/server/entry.mjs
+EXPOSE 4321
+CMD ["node", "./dist/server/entry.mjs"] 

compose.yml

@@ -3,51 +3,15 @@ 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
-    networks:
-      - caddy
-    labels:
-      caddy: lion.gay
-      caddy.reverse_proxy: "{{upstreams 4321}}"
+    ports:
+      - 4321:4321
   pocketbase:
     image: ghcr.io/muchobien/pocketbase:latest
     container_name: pocketbase-gallery
     restart: unless-stopped
-    networks:
-      - caddy
-    volumes:
-      - /opt/pocketbase/pb_data:/pb_data
-      - /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
+      - "8090:8090"
     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: {}
+      - ./pocketbase/pb_data:/pb_data
+      - ./pocketbase/pb_public:/pb_public

src/components/Card.astro

@@ -1,6 +1,5 @@
 ---
 import pb from "../lib/pb";
-
 const { href, title, body, image } = Astro.props;
 let imageURL;
 
@@ -10,11 +9,12 @@ if (image) {
 ---
 
 <div class="relative max-w-xl mx-auto mt-20 h-32 w-55">
-  <a href={href} class="block">
+  <a href={href} class="block backdrop-blur-md rounded-md h-32 w-64">
     {
       image && (
         <img
-          class="h-32 w-64 object-cover rounded-md"
+          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=`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`
+          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' 
         >
-          <img src={src} alt={`${alt !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" /> 
+          <img class="rounded-lg" 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">
-    <a href="/">
+  <div class="p-4 backdrop-blur-md backdrop-brightness-50 rounded-lg ">
+    <a href="/" >
       {
         icon && (
-          <Image class={"icon"} src={icon} width={10} height={10} alt={""} />
+          <Image class={"w-40 h-40 mx-auto object-cover object-center rounded-full"} src={icon} width={10} height={10} alt={""} />
         )
       }
       <h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
@@ -68,15 +68,4 @@ 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"></figcaption>
+  <figcaption class="desc rounded font-bold backdrop-blur-sm bg-black/50"></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 0.35s;
+    transition: opacity ease-in-out 0.35s;
 
     &.is-active {
       pointer-events: initial;
@@ -83,7 +83,7 @@
     transition:
       opacity 0.35s,
       transform 0.35s;
-    transform: scale(0.2);
+    transform: scale(0.5);
 
     :global(img) {
       width: 100%;

src/env.d.ts

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

src/layouts/CharacterList.astro

@@ -4,17 +4,21 @@ 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").catch(() => null);
+  .getFirstListItem("useAsAvatar=true", { requestKey: null })
+  .catch(() => null);
 const backgroundRec = await pb
   .collection("images")
-  .getFirstListItem("useAsBackground=true").catch(() => null);
+  .getFirstListItem("useAsBackground=true", { requestKey: null })
+  .catch(() => null);
 
-
-const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
-const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgroundRec.file) : null;
+const icon = avatarRec
+  ? await pb.files.getUrl(avatarRec, avatarRec.file)
+  : null;
+const background = backgroundRec
+  ? await pb.files.getUrl(backgroundRec, backgroundRec.file)
+  : null;
 const socials = await pb.collection("socials").getFullList();
 
 const config = {
@@ -39,19 +43,24 @@ export const prerender = false;
     <title>{config.title}</title>
   </head>
   <body>
-    <div
-      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"
+<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"
     >
       <Sidebar />
     </div>
-    <slot />
+    <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 {
+
+
+body {
     font-family: system-ui, sans-serif;
     background: var(--background);
     background-size: cover;

src/layouts/Gallery.astro

@@ -39,25 +39,23 @@ const config = {
   </head>
   <body>
     <Lightbox />
-    <div
-      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"
+    <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"
     >
       <Sidebar />
     </div>
     <div
-      class="container float-none xl:float-right xl:box-border transition-all"
+      class="max-w-fit ml-auto mr-auto 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>
-    <slot />
+  <body class="flex h-screen">
+    <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,28 +6,52 @@ import Card from "../../components/Card.astro";
 const characters = await pb
   .collection("characters")
   // @ts-ignore
-  .getFullList({ expand: ["icon"], filter: `(hidden = false)` });
+  .getFullList({ expand: ["icon"], filter: `(hidden = false)`, requestKey: null });
 
 export const prerender = false;
 ---
 
 <CharacterList>
   <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 p-4"
-    >
-      {
-        [...characters].map((c) => (
-          // @ts-ignore
-          <Card
-            href={`/characters/${c.slug}`}
-            image={c.expand ? c.expand.icon : null}
-            title={c.name}
-            body={c.body}
-          />
-        ))
-      }
-    </div>
+  <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 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">
+    {
+      // @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
+        <Card
+          href={`/characters/${c.slug}`}
+          image={c.expand ? c.expand.icon : null}
+          title={c.name}
+          body={c.body}
+        />
+      ))
+    }
   </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 ">
-    <div class=" flex gap-4 columns-2 md:columns-4 self-center">
+  <div class="flex flex-col items-center justify-centerß">
+    <div class="mx-auto my-auto">
       <Sidebar />
     </div>
   </div>