library resources

packages/imagetools_3/astroViteConfigs.js

@@ -1,12 +1,12 @@
 export default {
-  "environment": "dev",
+  "environment": "build",
   "isSsrBuild": false,
   "projectBase": "",
   "publicDir": "C:\\Users\\zx\\Desktop\\polymech\\library.polymech\\public\\",
   "rootDir": "C:\\Users\\zx\\Desktop\\polymech\\library.polymech\\",
-  "mode": "dev",
-  "outDir": "dist",
-  "assetsDir": "/_astro",
+  "mode": "production",
+  "outDir": "C:\\Users\\zx\\Desktop\\polymech\\library.polymech\\dist\\",
+  "assetsDir": "_astro",
   "sourcemap": false,
   "assetFileNames": "/_astro/[name]@[width].[hash][extname]"
 }

packages/polymech/src/components/RelativeGallery.astro

@@ -5,7 +5,7 @@ import fs from "node:fs";
 import { glob } from "glob";
 import { globBase, pathInfo } from "@polymech/commons";
 import { GalleryImage } from "@/base/images.js";
-import { resolveImagePath } from "@/utils/path-resolution";
+import { resolveImagePath } from "../utils/path-resolution";
 
 export interface Props {
   images?: GalleryImage[];

packages/polymech/src/components/RelativeImage.astro

@@ -1,7 +1,6 @@
 ---
 import { Img } from "imagetools/components";
-import { resolveImagePath } from '@/utils/path-resolution';
-
+import { resolveImagePath } from "../utils/path-resolution";
 export interface Props {
   src: string;
   alt: string;
@@ -10,7 +9,7 @@ export interface Props {
   class?: string;
   entryPath?: string;
   lightbox?: boolean;
-  preset?: 'small' | 'medium' | 'large';
+  preset?: "small" | "medium" | "large";
   [key: string]: any;
 }
 
@@ -32,14 +31,25 @@ const {
 } = Astro.props;
 
 const resolvedSrc = resolveImagePath(src, entryPath, Astro.url);
-const imgProps = { alt, width, height, format, placeholder, objectFit, loading, sizes };
-Object.keys(imgProps).forEach(key => imgProps[key] === undefined && delete imgProps[key]);
+const imgProps = {
+  alt,
+  width,
+  height,
+  format,
+  placeholder,
+  objectFit,
+  loading,
+  sizes,
+};
+Object.keys(imgProps).forEach(
+  (key) => imgProps[key] === undefined && delete imgProps[key],
+);
 
 // Define preset styles
 const presetStyles = {
   small: "flex justify-center my-4 mx-auto w-[200px]",
   medium: "flex justify-center my-4 mx-auto w-[600px]",
-  large: "flex justify-center my-4 mx-auto w-[800px]"
+  large: "flex justify-center my-4 mx-auto w-[800px]",
 };
 
 const containerClass = preset ? presetStyles[preset] : "w-full h-full";
@@ -47,54 +57,53 @@ const buttonClass = preset ? "w-full h-full" : "w-full h-full";
 const imgClass = preset ? "w-full h-auto object-contain" : "";
 ---
 
-{preset ? (
+{
+  preset ? (
     <div class={containerClass}>
-    <button 
-      class:list={[buttonClass, { 'lightbox-enabled': lightbox }]}
-    >
+      <button class:list={[buttonClass, { "lightbox-enabled": lightbox }]}>
         <Img
           src={resolvedSrc}
           {...imgProps}
           attributes={{
             img: {
-          class: [imgClass, className].filter(Boolean).join(' ') || undefined
-        }    
-      }
-      } />
+              class:
+                [imgClass, className].filter(Boolean).join(" ") || undefined,
+            },
+          }}
+        />
       </button>
     </div>
   ) : (
-  <button 
-    class:list={["w-full h-full", { 'lightbox-enabled': lightbox }]}
-  >
+    <button class:list={["w-full h-full", { "lightbox-enabled": lightbox }]}>
       <Img
         src={resolvedSrc}
         {...imgProps}
         attributes={{
           img: {
-        ...(className && { class: className })
-      }    
-    }
-    } />
+            ...(className && { class: className }),
+          },
+        }}
+      />
     </button>
-)}
+  )
+}
 
 <script define:vars={{ lightbox, preset }}>
   const button = preset
-    ? document.currentScript.previousElementSibling.querySelector('button')
+    ? document.currentScript.previousElementSibling.querySelector("button")
     : document.currentScript.previousElementSibling;
 
   function getHighestResSrc(img) {
     let highestResSrc = img.src;
-    const srcset = img.getAttribute('srcset');
+    const srcset = img.getAttribute("srcset");
 
     if (srcset) {
       let maxWidth = 0;
-      srcset.split(',').forEach(s => {
+      srcset.split(",").forEach((s) => {
         const parts = s.trim().split(/\s+/);
         const url = parts[0];
         const widthStr = parts[1];
-        if (widthStr && widthStr.endsWith('w')) {
+        if (widthStr && widthStr.endsWith("w")) {
           const width = parseInt(widthStr.slice(0, -1), 10);
           if (width > maxWidth) {
             maxWidth = width;
@@ -106,27 +115,29 @@ const imgClass = preset ? "w-full h-auto object-contain" : "";
     return highestResSrc;
   }
 
-  button.addEventListener('click', (event) => {
+  button.addEventListener("click", (event) => {
     if (!lightbox) return;
 
-    const triggerImage = event.currentTarget.querySelector('img');
+    const triggerImage = event.currentTarget.querySelector("img");
     if (!triggerImage) return;
 
-    const allImages = Array.from(document.querySelectorAll('.lightbox-enabled img')).map(img => ({
+    const allImages = Array.from(
+      document.querySelectorAll(".lightbox-enabled img"),
+    ).map((img) => ({
       src: getHighestResSrc(img),
-      alt: img.getAttribute('alt')
+      alt: img.getAttribute("alt"),
     }));
 
     const triggerSrc = getHighestResSrc(triggerImage);
-    const currentIndex = allImages.findIndex(img => img.src === triggerSrc);
+    const currentIndex = allImages.findIndex((img) => img.src === triggerSrc);
 
     if (currentIndex === -1) return;
 
-    const lightboxEvent = new CustomEvent('open-lightbox', {
+    const lightboxEvent = new CustomEvent("open-lightbox", {
       detail: {
         images: allImages,
-        currentIndex: currentIndex
-      }
+        currentIndex: currentIndex,
+      },
     });
 
     window.dispatchEvent(lightboxEvent);