envs

Dockerfile

@@ -2,7 +2,17 @@ FROM node:lts AS base
 WORKDIR /app
 
 COPY package.json package-lock.json ./
-COPY config.yaml ./
+
+ARG POCKETBASE_URL
+ARG PUBLIC_DESCRIPTION
+ARG PUBLIC_TITLE
+ARG PUBLIC_USEICONS
+
+ENV POCKETBASE_URL=${POCKETBASE_URL}
+ENV POCKETBASE_URL=${POCKETBASE_URL}
+ENV PUBLIC_DESCRIPTION=${PUBLIC_DESCRIPTION}
+ENV PUBLIC_TITLE=${PUBLIC_TITLE}
+ENV PUBLIC_USEICONS=${PUBLIC_USEICONS}
 
 FROM base AS prod-deps
 RUN npm ci --omit=dev
@@ -19,7 +29,6 @@ RUN npm run build
 FROM base AS runtime
 COPY --from=prod-deps /app/node_modules ./node_modules
 COPY --from=build /app/dist ./dist
-COPY --from=build /app/config.yaml ./config.yaml
 
 ARG PORT=4321
 ENV HOST=0.0.0.0

compose.yml

@@ -0,0 +1,16 @@
+services:
+  app:
+    build: 
+      context: .
+      dockerfile: Dockerfile
+      args:
+        - POCKETBASE_URL=https://pb.data.lio.systems
+        - PUBLIC_DESCRIPTION="This is a rather long description to live on the landing and sidebar"
+        - PUBLIC_TITLE=Phobos.Docker.Gallery
+        - PUBLIC_USEICONS=true
+    ports:
+      - 4321:4321
+    # environment:
+    #   - PUBLIC_TITLE=Astro Gallery
+    #   - PUBLIC_DESCRIPTION=This is my Gallery Site
+    #   - PUBLIC_USEICONS=true

package-lock.json

@@ -26,6 +26,7 @@
       },
       "devDependencies": {
         "@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"
@@ -1851,6 +1852,15 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/node": {
+      "version": "20.14.12",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.12.tgz",
+      "integrity": "sha512-r7wNXakLeSsGT0H1AU863vS2wa5wBOK4bWMjZz2wj+8nBx+m5PeIn0k8AloSLpRuiwdRQZwarZqHE4FNArPuJQ==",
+      "devOptional": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -6598,6 +6608,12 @@
       "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.5.3.tgz",
       "integrity": "sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg=="
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "devOptional": true
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",

package.json

@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@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/IndexSidebar.astro

@@ -2,7 +2,7 @@
 import { Image } from "astro:assets";
 import Social from "./Social.astro";
 import pb from "../lib/pb";
-import c from "../../config.yaml";
+
 
 const avatarRec = await pb
   .collection("images")
@@ -14,8 +14,8 @@ const socials = await pb.collection("socials").getFullList();
 const config = {
   // icon,
   socials,
-  title: c.title,
+  title: import.meta.env.PUBLIC_TITLE,
-  description: c.description,
+  description: import.meta.env.PUBLIC_DESCRIPTION,
 };
 ---
 

src/components/Lightbox.astro

@@ -14,10 +14,9 @@
   for (const trig of lbTriggers) {
     trig.addEventListener("click", () => {
       const T = trig.getElementsByTagName("img")[0];
-      const url = new URL(T.src)
+      const url = new URL(T.src);
-      const noThumb = url.href.replaceAll(url.search, '')
+      const noThumb = url.href.replaceAll(url.search, "");
       portal.src = noThumb;
-      // console.log();
       if (!T.alt) desc.classList.add("hidden");
       else desc.classList.remove("hidden");
       desc.innerHTML = T.alt;
@@ -36,16 +35,12 @@
   }
 
   lightbox.addEventListener("click", () => {
-    // console.log('cli');
-
     lightbox.classList.remove("is-active");
     document.documentElement.classList.remove("scrollIsLocked");
   });
 
   document.addEventListener("keydown", (e) => {
     if (e.key === "Escape") {
-      // console.log(e);
-
       lightbox.classList.remove("is-active");
       document.documentElement.classList.remove("scrollIsLocked");
     }

src/components/Sidebar.astro

@@ -2,7 +2,7 @@
 import { Image } from "astro:assets";
 import Social from "./Social.astro";
 import pb from "../lib/pb";
-import c from "../../config.yaml";
+
 
 
 const avatarRec = await pb
@@ -14,8 +14,8 @@ const socials = await pb.collection("socials").getFullList();
 const config = {
   icon,
   socials,
-  title: c.title,
+  title: import.meta.env.PUBLIC_TITLE,
-  description: c.description,
+  description: import.meta.env.PUBLIC_DESCRIPTION,
 };
 ---
 

src/components/Social.astro

@@ -1,9 +1,9 @@
 ---
 import { Boolify } from "../lib/boolify";
-import c from "../../config.yaml";
+
 
 const { href, text, icon } = Astro.props;
-const useIcons = Boolify(c.useIcons);
+const useIcons = Boolify(import.meta.env.PUBLIC_USEICONS);
 ---
 
 {

src/layouts/CharacterList.astro

@@ -2,7 +2,7 @@
 import Sidebar from "../components/Sidebar.astro";
 
 import pb from "../lib/pb";
-import c from "../../config.yaml";
+
 
 const avatarRec = await pb
   .collection("images")
@@ -11,7 +11,6 @@ const backgroundRec = await pb
   .collection("images")
   .getFirstListItem("useAsBackground=true").catch(() => null);
 
-console.log(avatarRec);
 
 const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
 const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgroundRec.file) : null;
@@ -21,8 +20,8 @@ const config = {
   icon,
   socials,
   background,
-  title: c.title,
+  title: import.meta.env.PUBLIC_TITLE,
-  description: c.description,
+  description: import.meta.env.PUBLIC_DESCRIPTION,
 };
 
 export const prerender = false;

src/layouts/Gallery.astro

@@ -2,7 +2,7 @@
 import Lightbox from "../components/Lightbox.astro";
 import Sidebar from "../components/Sidebar.astro";
 import pb from "../lib/pb";
-import c from "../../config.yaml";
+
 
 export const prerender = false;
 
@@ -21,8 +21,8 @@ const config = {
   icon,
   socials,
   background,
-  title: c.title,
+  title: import.meta.env.PUBLIC_TITLE,
-  description: c.description,
+  description: import.meta.env.PUBLIC_DESCRIPTION,
 };
 ---
 

src/layouts/Index.astro

@@ -1,6 +1,6 @@
 ---
 import pb from "../lib/pb";
-import c from "../../config.yaml";
+
 
 export const prerender = false
 const backgroundRec = await pb.collection('images').getFirstListItem('useAsBackground=true').catch(() => null);
@@ -17,7 +17,7 @@ const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgrou
     <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>{c.title}</title>
+    <title>{import.meta.env.PUBLIC_TITLE}</title>
   </head>
   <body>
     <slot />

src/pages/index.astro

@@ -1,6 +1,8 @@
 ---
 import Sidebar from "../components/IndexSidebar.astro";
 import IndexLayout from "../layouts/Index.astro";
+
+console.log(import.meta);
 ---
 
 <IndexLayout>