put desc into embeds

.dockerignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

Dockerfile

@@ -0,0 +1,30 @@
+FROM node:lts AS base
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+
+FROM base AS prod-deps
+RUN npm ci --omit=dev
+
+FROM base AS build-deps
+RUN npm ci
+
+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

astro.config.mjs

@@ -12,6 +12,6 @@ export default defineConfig({
     mode: "standalone",
   }),
   vite: {
-    plugins: [yaml()],
+    plugins: [yaml()]
   },
 });

compose.yml

@@ -0,0 +1,53 @@
+services:
+  app:
+    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}}"
+  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
+    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: {}

config.json

@@ -1,7 +0,0 @@
-{
-  "title": "Gallery",
-  "description": "this is a description",
-  "icon": "https://common.himbo.cat/avatars/lio/drip.jpg",
-  "background": "https://javacat.io/siteBG2-min.png",
-  "socials": [{ "name": "bsky", "url": "https://pogcha.mp" }]
-}

package.json

@@ -1,29 +1,37 @@
 {
-  "name": "",
+  "name": "phobos",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
+    "dev": "dotenvx run -- astro dev",
-    "start": "astro dev",
+    "start": "dotenvx run -- astro dev",
-    "build": "astro check && astro build",
+    "build": "astro check && dotenvx run -- astro build",
-    "preview": "astro preview",
+    "preview": "dotenvx run -- astro preview",
     "astro": "astro"
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
-    "@astrojs/node": "^8.2.5",
+    "@astrojs/node": "^8.3.2",
-    "@astrojs/react": "^3.4.0",
+    "@astrojs/react": "^3.6.0",
     "@astrojs/tailwind": "^5.1.0",
+    "@dotenvx/dotenvx": "^1.6.4",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.9.1",
+    "astro": "^4.12.2",
-    "pocketbase": "^0.21.2",
+    "nanostores": "^0.10.3",
+    "pocketbase": "^0.21.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "rimraf": "^6.0.1",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   },
   "devDependencies": {
-    "@rollup/plugin-yaml": "^4.1.2"
+    "@rollup/plugin-yaml": "^4.1.2",
+    "@types/node": "^20.14.12",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "sass": "^1.77.3"
   }
-}
+}

src/components/Card.astro

@@ -1,61 +1,30 @@
 ---
-interface Props {
+import pb from "../lib/pb";
-	title: string;
+
-	body: string;
+const { href, title, body, image } = Astro.props;
-	href: string;
+let imageURL;
+
+if (image) {
+  imageURL = pb.files.getUrl(image, image.file);
 }
-
-const { href, title, body } = Astro.props;
 ---
 
-<li class="link-card">
+<div class="relative max-w-xl mx-auto mt-20 h-32 w-55">
-	<a href={href}>
+  <a href={href} class="block">
-		<h2>
+    {
-			{title}
+      image && (
-			<span>&rarr;</span>
+        <img
-		</h2>
+          class="h-32 w-64 object-cover rounded-md"
-		<p>
+          src={imageURL}
-			{body}
+          alt={`Cover for ${title}`}
-		</p>
+        />
-	</a>
+      )
-</li>
+    }
-<style>
+
-	.link-card {
+    <div class="absolute inset-0 bg-[#111111] opacity-50 rounded-md"></div>
-		list-style: none;
+    <div class="absolute inset-0 inline-flex flex-col items-center justify-center">
-		display: flex;
+      <h2 class="text-white text-3xl font-bold">{title}</h2>
-		padding: 1px;
+      <span class="text-white">{body}</span>
-		background-color: #23262d;
+    </div>
-		background-image: none;
+  </a>
-		background-size: 400%;
+</div>
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
-</style>

src/components/Image.astro

@@ -1,14 +1,62 @@
 ---
-import { Image as AstroImage } from "astro:assets";
+const { src, alt, nsfw, artist } = Astro.props;
-const { src, alt } = Astro.props;
+const showNsfw = Astro.url.searchParams.has('nsfw') || false;
 ---
 
-<AstroImage
+<div>
-  src={src}
+  { (nsfw && showNsfw) ? (
-  alt={alt}
+    <div class="overflow-hidden rounded-lg" data-nsfw={`${nsfw}`}>
-  inferSize={true}
+      <div
-  format="avif"
+        data-lightbox="true"
-  quality={50}
+        id="parent"
-  class="rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg max-w-48"
+        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`
-  loading="lazy"
+      >
-/>
+        <img src={src} alt={`${alt !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" /> 
+        {
+          alt && (
+            <div
+              id="info"
+              class="absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity"
+            >
+              {alt}
+            </div>
+          )
+        }
+      </div>
+    </div>
+    ): null }
+    
+    { !nsfw ? (   
+      <div class="overflow-hidden rounded-lg" data-nsfw={`${nsfw}`}>
+        <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`
+        >
+          <img src={src} alt={`${alt !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" /> 
+          {
+            alt && (
+              <div
+                id="info"
+                class="absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity"
+              >
+                {alt}
+              </div>
+            )
+          }
+        </div>
+      </div>
+      ): null }
+    
+</div>
+
+<style>
+  #parent:hover > #info {
+    opacity: 70;
+  }
+
+  #info {
+    background-color: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(5px);
+  }
+</style>

src/components/IndexSidebar.astro

@@ -0,0 +1,82 @@
+---
+import { Image } from "astro:assets";
+import Social from "./Social.astro";
+import pb from "../lib/pb";
+import c from "../lib/config";
+
+
+const avatarRec = await pb
+  .collection("images")
+  .getFirstListItem("useAsAvatar=true").catch(() => null);
+
+const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file, { thumb: avatarRec.thumb }) : null;
+const socials = await pb.collection("socials").getFullList();
+
+const config = {
+  // icon,
+  socials,
+  title: c.TITLE,
+  description: c.DESCRIPTION,
+};
+---
+
+<aside>
+  <div class="p-4">
+    <a href="/">
+      {
+        icon && (
+          <Image class={"icon"} src={icon} width={10} height={10} alt={""} />
+        )
+      }
+      <h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
+    >
+    <p class="pt-4 max-w-[50rem] text-wrap">{config.description}</p>
+    <br />
+    <div class="flex flex-col">
+      <h1 class="font-bold text-2xl pt-4">Socials</h1>
+      <div id="socials" class="flex gap-4 columns-2 md:columns-4 pt-4">
+        {
+          config.socials &&
+            config.socials.map((s) => (
+              <Social href={s.url} text={s.name} icon={s.icon} />
+            ))
+        }
+      </div>
+      <!-- Links to Subpages -->
+      <br />
+      <br />
+      <div class="text-2xl">
+        <h1 class="font-bold text-2xl pt-4">Pages</h1>
+        <div
+          id="pages"
+          class="flex gap-4 columns-2 md:columns-4 self-center pt-4"
+        >
+          <ul>
+            {
+              [
+                { page: "Characters", url: "/characters" },
+                // { page: "Comics", url: "/comics" },
+              ].map((s) => (
+                <a href={s.url}>
+                  {/* <img src={s.icon} alt={s.name} /> */}
+                  <li class="hover:underline">{s.page}</li>
+                </a>
+              ))
+            }
+          </ul>
+        </div>
+      </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

@@ -0,0 +1,104 @@
+<figure class="place-content-center app-lightbox backdrop-blur-md">
+  <img class="portal" />
+  <figcaption class="desc rounded font-bold backdrop-blur-sm"></figcaption>
+</figure>
+
+<script>
+  // @ts-nocheck
+  const lbTriggers = document.querySelectorAll('[data-lightbox="true"]');
+  const lightbox = document.querySelector(".app-lightbox");
+  let portal = lightbox.querySelector(".portal");
+  let desc = lightbox.querySelector(".desc");
+  let artist = lightbox.querySelector("#artist");
+  // eslint-disable-next-line no-restricted-syntax
+  for (const trig of lbTriggers) {
+    trig.addEventListener("click", () => {
+      const T = trig.getElementsByTagName("img")[0];
+      const url = new URL(T.src);
+      const noThumb = url.href.replaceAll(url.search, "");
+      portal.src = noThumb;
+      if (!T.alt) desc.classList.add("hidden");
+      else desc.classList.remove("hidden");
+      desc.innerHTML = T.alt;
+
+      setTimeout(() => {
+        // Adapt size attribute dynamically
+
+        const img = portal;
+        const ratio = img.naturalWidth / img.naturalHeight;
+        img.sizes = `${window.innerHeight * ratio}px`;
+      }, 352);
+
+      lightbox.classList.add("is-active");
+      document.documentElement.classList.add("scrollIsLocked");
+    });
+  }
+
+  lightbox.addEventListener("click", () => {
+    lightbox.classList.remove("is-active");
+    document.documentElement.classList.remove("scrollIsLocked");
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      lightbox.classList.remove("is-active");
+      document.documentElement.classList.remove("scrollIsLocked");
+    }
+  });
+</script>
+
+<style lang="scss">
+  .app-lightbox {
+    position: fixed;
+    margin: auto auto;
+    padding: 2rem;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    cursor: zoom-out;
+    background-color: var(--bg-color, hsla(0, 0%, 0%, 0.623));
+    opacity: 0;
+    transition: opacity 0.35s;
+
+    &.is-active {
+      pointer-events: initial;
+      opacity: 1;
+    }
+  }
+
+  :global([data-lightbox]) {
+    cursor: zoom-in;
+  }
+
+  .portal {
+    display: flex;
+
+    margin: auto auto;
+    padding: 2rem;
+    max-width: 90%;
+    max-height: 90%;
+    transition:
+      opacity 0.35s,
+      transform 0.35s;
+    transform: scale(0.2);
+
+    :global(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .is-active & {
+      transform: scale(1);
+    }
+  }
+
+  .desc {
+    max-width: 50%;
+    margin: auto auto;
+    padding: 1rem;
+  }
+</style>

src/components/Sidebar.astro

@@ -1,26 +1,58 @@
 ---
 import { Image } from "astro:assets";
-import config from "../../config.json";
+import Social from "./Social.astro";
+import pb from "../lib/pb";
+import c from "../lib/config";
 
-const {class} = Astro.props
+
+
+const avatarRec = await pb
+  .collection("images")
+  .getFirstListItem("useAsAvatar=true").catch(() => null);
+const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
+const socials = await pb.collection("socials").getFullList();
+
+const config = {
+  icon,
+  socials,
+  title: c.TITLE,
+  description: c.DESCRIPTION,
+};
 ---
 
 <aside>
-<div>
+  <div class="p-4">
-  <h1>{config.title}</h1>
+    <a href="/">
-  <p class="text-red-500 md:text-black">awa</p>
+      {
-
+        config.icon && (
-  <Image class={"icon"} src={config.icon} alt={""} inferSize />
+          <Image
-</div>
+            class={"icon"}
+            src={config.icon}
+            alt={"Icon"}
+            width={50}
+            height={50}
+          />
+        )
+      }
+      <h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
+    >
+    <p class="pt-4">{config.description}</p>
+    {
+      config.socials &&
+        config.socials.map((s) => (
+          <Social href={s.url} text={s.name} image={s.icon} alt={s.name} />
+        ))
+    }
+  </div>
 </aside>
 
 <style>
   img.icon {
     width: 10rem;
-    height: 10rem;
+      height: 10rem;
-    margin: 50px auto;
+      margin: 0 auto;
-    object-fit: cover;
+      object-fit: cover;
-    object-position: center;
+      object-position: center;
-    border-radius: 100%;
+      border-radius: 50%;
   }
 </style>

src/components/Social.astro

@@ -0,0 +1,23 @@
+---
+import { Boolify } from "../lib/boolify";
+import c from "../lib/config";
+
+
+const { href, text, icon } = Astro.props;
+const useIcons = Boolify(c.USEICONS);
+---
+
+{
+  useIcons && (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      <i class={`fa${(icon ? icon : text.toLowerCase()) == "envelope" ? '' : '-brands'} fa-${icon ? icon : text.toLowerCase()} fa-2xl`} />
+    </a>
+  )
+}
+{
+  !useIcons && (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      {text}
+    </a>
+  )
+}

src/config.d.ts

@@ -1,9 +1,25 @@
 declare module "*config.yaml" {
+  const value: {
+    [x: string]: any;
+    title?: string;
+    description?: string;
+    icon?: string;
+    background?: string;
+    socials: {
+      name: string;
+      url: string;
+      icon?: string;
+    }[];
+  };
+  export default value;
+}
+declare module "*config.yml" {
   const value: {
     title?: string;
     description?: string;
     icon?: string;
     background?: string;
+    socialIcons?: boolean;
     socials: {
       name: string;
       link: string;

src/layouts/CharacterList.astro

@@ -0,0 +1,63 @@
+---
+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);
+const backgroundRec = await pb
+  .collection("images")
+  .getFirstListItem("useAsBackground=true").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 socials = await pb.collection("socials").getFullList();
+
+const config = {
+  icon,
+  socials,
+  background,
+  title: c.TITLE,
+  description: c.DESCRIPTION,
+};
+
+export const prerender = false;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content={config.description} />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <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"
+    >
+      <Sidebar />
+    </div>
+    <slot />
+  </body>
+</html>
+<style define:vars={{ background: `url(${config.background})` }}>
+  .container {
+    width: calc(100% - 25rem);
+  }
+  body {
+    font-family: system-ui, sans-serif;
+    background: var(--background);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-attachment: fixed;
+    color: whitesmoke;
+  }
+</style>

src/layouts/Gallery.astro

@@ -0,0 +1,71 @@
+---
+import Lightbox from "../components/Lightbox.astro";
+import Sidebar from "../components/Sidebar.astro";
+import pb from "../lib/pb";
+import c from "../lib/config";
+
+
+export const prerender = false;
+
+const avatarRec = await pb
+  .collection("images")
+  .getFirstListItem("useAsAvatar=true").catch(() => null);
+const backgroundRec = await pb
+  .collection("images")
+  .getFirstListItem("useAsBackground=true").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 socials = await pb.collection("socials").getFullList();
+
+const config = {
+  icon,
+  socials,
+  background,
+  title: c.TITLE,
+  description: c.DESCRIPTION,
+};
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content={config.description} />  
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{config.title}</title>
+  </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"
+    >
+      <Sidebar />
+    </div>
+    <div
+      class="container float-none xl:float-right xl:box-border transition-all"
+    >
+      <slot />
+    </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;
+    background: var(--background);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-attachment: fixed;
+    color: whitesmoke;
+  }
+</style>

src/layouts/Index.astro

@@ -0,0 +1,46 @@
+---
+import config from "../lib/config";
+import pb from "../lib/pb";
+
+
+export const prerender = false
+const backgroundRec = await pb.collection('images').getFirstListItem('useAsBackground=true').catch(() => null);
+const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgroundRec.file) : null;
+
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content={config.DESCRIPTION} />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <meta name="generator" content={Astro.generator} />
+    <title>{config.TITLE}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style define:vars={{ background: `url(${background})` }}>
+  .container {
+    width: calc(100% - 25rem);
+  }
+  body {
+    font-family: system-ui, sans-serif;
+    background: var(--background);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-attachment: fixed;
+    color: whitesmoke;
+    /* backdrop-filter: brightness(0.5); */
+    /* width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0; */
+  }
+</style>

src/layouts/Layout.astro

@@ -1,67 +0,0 @@
----
-import config from "../../config.json";
-import Sidebar from "../components/Sidebar.astro";
-
-const { title, background } = config;
----
-
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-  </head>
-  <body>
-    <div
-      class="relative container left-60  p-8 box-border mx-auto transition-all"
-    >
-      <div
-        class="fixed left-0 top-0 w-96 bg-[#ffffff59] h-full pt-8 z-[9999] box-border"
-      >
-        <Sidebar />
-      </div>
-      <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);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-attachment: fixed;
-  }
-  /*
-   :root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
-
-	code {
-		font-family:
-			Menlo,
-			Monaco,
-			Lucida Console,
-			Liberation Mono,
-			DejaVu Sans Mono,
-			Bitstream Vera Sans Mono,
-			Courier New,
-			monospace;
-	} */
-</style>

src/lib/boolify.ts

@@ -0,0 +1,17 @@
+var BoolArray = [true, false, 'true', 'false', 1, 0];
+const isBoolean = function (arg: any) {
+    if (BoolArray.indexOf(arg) === -1) {
+        return false;
+    } else {
+        return true;
+    }
+}
+const Boolify = function (arg: any) {
+    if (BoolArray.indexOf(arg) === -1) {
+        return null;
+    } else {
+        return (arg == true || arg == 'true' || arg == 1) ? true : false;
+    }
+}
+
+export { isBoolean, Boolify };

src/lib/config.ts

@@ -0,0 +1,8 @@
+export default {
+  TITLE: import.meta.env.PUBLIC_TITLE || process.env.PUBLIC_TITLE,
+  DESCRIPTION:
+    import.meta.env.PUBLIC_DESCRIPTION || process.env.PUBLIC_DESCRIPTION,
+  USEICONS: import.meta.env.PUBLIC_USEICONS || process.env.PUBLIC_USEICONS,
+  POCKETBASE:
+    import.meta.env.PUBLIC_POCKETBASE_URL || process.env.PUBLIC_POCKETBASE_URL,
+};

src/lib/pb.ts

@@ -0,0 +1,6 @@
+import PB from "pocketbase";
+import config from "./config";
+const pb = new PB(config.POCKETBASE)
+
+
+export default pb

src/pages/characters/[slug].astro

@@ -0,0 +1,60 @@
+---
+import Gallery from "../../layouts/Gallery.astro";
+import Image from "../../components/Image.astro";
+import pb from "../../lib/pb";
+
+const { slug } = Astro.params;
+const imageCollection = await pb.collection("images").getFullList({
+  sort: "-created",
+  filter: `(character.slug?~"${slug}")`,
+});
+const characterDetails = await pb
+  .collection("characters")
+  .getFirstListItem(`(slug~"${slug}")`);
+const images = imageCollection.map((record) => {
+  const url = pb.files.getUrl(record, record.file, { thumb: record.thumb });
+    return {
+      url: url,
+      desc: record.description,
+      nsfw: record.nsfw,
+      artist: record.artist,
+    };
+});
+export const prerender = false;
+---
+
+<Gallery>
+  <div class="flex flex-col">
+    <div class="pb-4">
+      <h1 class="text-2xl text-center p-8">
+        <!-- <a href={`/characters`}> -->
+        {characterDetails.name}
+        <!-- </a> -->
+      </h1>
+      {
+        characterDetails.description && (
+          <div class="m-4 p-4  bg-[#11111156] backdrop-blur-md rounded-lg items-center justify-center">
+            <Fragment set:html={characterDetails.description} />
+          </div>
+        )
+      }
+    </div>
+    <div
+      class="gap-4 columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 self-center"
+    >
+      {
+        images.map((image) => (
+          <Image
+            nsfw={image?.nsfw}
+            src={image?.url}
+            alt={image?.desc}
+            artist={image?.artist}
+          />
+        ))
+      }
+    </div>
+  </div>
+</Gallery>
+
+<!-- <style>
+</style> -->

src/pages/characters/index.astro

@@ -0,0 +1,33 @@
+---
+import CharacterList from "../../layouts/CharacterList.astro";
+import pb from "../../lib/pb";
+import Card from "../../components/Card.astro";
+
+const characters = await pb
+  .collection("characters")
+  // @ts-ignore
+  .getFullList({ expand: ["icon"], filter: `(hidden = false)` });
+
+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>
+  </div>
+</CharacterList>

src/pages/index.astro

@@ -1,42 +1,13 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Sidebar from "../components/IndexSidebar.astro";
-import Image from "../components/Image.astro";
+import IndexLayout from "../layouts/Index.astro";
 
-const images = [
-  "https://randomfox.ca/images/1.jpg",
-  "https://randomfox.ca/images/2.jpg",
-  "https://randomfox.ca/images/3.jpg",
-  "https://randomfox.ca/images/4.jpg",
-  "https://randomfox.ca/images/5.jpg",
-  "https://randomfox.ca/images/6.jpg",
-  "https://randomfox.ca/images/7.jpg",
-  "https://randomfox.ca/images/8.jpg",
-  "https://randomfox.ca/images/9.jpg",
-  "https://randomfox.ca/images/10.jpg",
-  "https://randomfox.ca/images/11.jpg",
-  "https://randomfox.ca/images/12.jpg",
-  "https://randomfox.ca/images/13.jpg",
-  "https://randomfox.ca/images/14.jpg",
-  "https://randomfox.ca/images/15.jpg",
-  "https://randomfox.ca/images/16.jpg",
-  "https://randomfox.ca/images/17.jpg",
-  "https://randomfox.ca/images/18.jpg",
-  "https://randomfox.ca/images/19.jpg",
-  "https://randomfox.ca/images/20.jpg",
-];
 ---
 
-<Layout>
+<IndexLayout>
-  <div class="text-center my-16 mb-32">
+  <div class="flex flex-col ">
-    ... album title and description ...
+    <div class=" flex gap-4 columns-2 md:columns-4 self-center">
-
+      <Sidebar />
-    <div class="columns-3">
-      {images.map((image) => <Image src={image} alt="" />)}
     </div>
-
-    ... rest of the page ...
   </div>
-</Layout>
+</IndexLayout>
-
-<!-- <style>
-</style> -->