cloudcommerce 0.8.4 → 0.8.5

package/packages/storefront/dist/server/chunks/pages/{all.090434f8.mjs → all.857ce59d.mjs}

@@ -17,8 +17,7 @@ import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRende
 /* empty css                           */import { EventEmitter } from 'node:events';
 import fs, { readFileSync } from 'node:fs';
 import config from '@cloudcommerce/config';
-/* empty css                               */import { resolve as resolve$1 } from 'path';
-import { useScroll, useElementHover, useDebounceFn, useTimeout, promiseTimeout } from '@vueuse/core';
+/* empty css                               */import { useScroll, useElementHover, useDebounceFn, useTimeout, promiseTimeout } from '@vueuse/core';
 import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
 
 const _export_sfc = (sfc, props) => {
@@ -791,35 +790,19 @@ async function getPicture(params) {
   };
 }
 
-const $$Astro$e = createAstro("https://ecom2-002.web.app");
-const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$e, $$props, $$slots);
-  Astro2.self = $$Picture;
-  const tryImageSize = (src2) => {
-    let dimensions = {};
-    if (typeof src2 === "string" && src2.startsWith("/")) {
-      const { STOREFRONT_BASE_DIR } = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":true,"SITE":"\"https://ecom2-002.web.app\""},{STOREFRONT_BASE_DIR:process.env.STOREFRONT_BASE_DIR,}));
-      try {
-        dimensions = sizeOf(resolve$1(STOREFRONT_BASE_DIR, `public${src2}`));
-      } catch (e) {
-        dimensions = {};
-      }
-    }
-    return dimensions;
-  };
-  const getAspectRatio = (src2) => {
-    if (typeof src2 === "string") {
-      src2 = tryImageSize(src2);
-    }
-    if (src2.width) {
-      return src2.height ? src2.width / src2.height : 1;
-    }
-    return 0;
-  };
+const getAspectRatio = (src, tryImageSize) => {
+  if (typeof src === "string") {
+    src = tryImageSize(src);
+  } else if (src.width) {
+    return src.height ? src.width / src.height : 1;
+  }
+  return 0;
+};
+const useSSRPicture = async (params) => {
   const {
     src,
     alt,
-    sizes,
+    sizes: propSizes,
     widths,
     aspectRatio: propAspectRatio,
     fit,
@@ -829,17 +812,60 @@ const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
     loading = "lazy",
     decoding = "async",
     hasImg = true,
+    tryImageSize,
+    getPicture,
     ...attrs
-  } = Astro2.props;
-  let aspectRatio = propAspectRatio;
-  if ((!attrs.width || !attrs.height) && !aspectRatio && typeof src === "string") {
+  } = params;
+  let aspectRatio;
+  if (propAspectRatio) {
+    if (typeof propAspectRatio === "number") {
+      aspectRatio = propAspectRatio;
+    } else {
+      const [width, height] = propAspectRatio.split(":");
+      aspectRatio = Number(width) / Number(height);
+    }
+  } else if ((!attrs.width || !attrs.height) && typeof src === "string") {
     const { width, height } = tryImageSize(src);
     if (height) {
-      aspectRatio = getAspectRatio({ width, height });
+      aspectRatio = getAspectRatio({ width, height }, tryImageSize);
       attrs.width = width;
       attrs.height = height;
     }
   }
+  let sizes = propSizes || "";
+  if (!sizes && attrs.class) {
+    const classNames = attrs.class.split(" ");
+    const classRegex = /^(\w+:)?max-w-\[(\w+)\]$/;
+    let nextSize;
+    [
+      [""],
+      ["sm", 640],
+      ["md", 768],
+      ["lg", 1024],
+      ["xl", 1280],
+      ["2xl", 1536]
+    ].forEach(([breakpoint, minWidth]) => {
+      const className = classNames.find((_class) => {
+        return _class.startsWith(breakpoint ? `${breakpoint}:max-w-[` : "max-w-[");
+      });
+      if (className) {
+        if (nextSize) {
+          if (sizes)
+            sizes += ", ";
+          sizes += `(max-width: ${minWidth - 1}px) ${nextSize}`;
+        }
+        nextSize = className.replace(classRegex, "$2");
+      }
+    });
+    if (nextSize) {
+      if (sizes)
+        sizes += ", ";
+      sizes += nextSize;
+    }
+  }
+  if (!sizes && widths.length === 1) {
+    sizes = `${widths[0] / 2}px`;
+  }
   const { image, sources } = await getPicture({
     src,
     widths,
@@ -850,8 +876,6 @@ const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
     position,
     alt
   });
-  const imgSrc = `${image.src}&V=${process.env.DEPLOY_RAND}`;
-  delete image.src;
   delete image.width;
   delete image.height;
   const pictureAttrs = {};
@@ -861,9 +885,56 @@ const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
     delete pictureAttrs.width;
     delete pictureAttrs.height;
   }
+  return {
+    sizes,
+    aspectRatio,
+    sources,
+    pictureAttrs,
+    imgAttrs: !hasImg ? null : {
+      ...image,
+      loading,
+      decoding,
+      ...attrs
+    }
+  };
+};
+
+const $$Astro$e = createAstro("https://ecom2-002.web.app");
+const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$e, $$props, $$slots);
+  Astro2.self = $$Picture;
+  const deployRand = process.env.DEPLOY_RAND || "_";
+  const getImageFilepath = (src) => {
+    const { STOREFRONT_BASE_DIR } = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":true,"SITE":"\"https://ecom2-002.web.app\""},{STOREFRONT_BASE_DIR:process.env.STOREFRONT_BASE_DIR,SSR:true,}));
+    return resolve(STOREFRONT_BASE_DIR, `public${src}`);
+  };
+  const tryImageSize = (src) => {
+    let dimensions = {};
+    if (typeof src === "string" && src.startsWith("/")) {
+      try {
+        dimensions = sizeOf(getImageFilepath(src));
+      } catch (e) {
+        dimensions = {};
+      }
+    }
+    return dimensions;
+  };
+  const {
+    sizes,
+    sources,
+    pictureAttrs,
+    imgAttrs
+  } = await useSSRPicture({
+    ...Astro2.props,
+    tryImageSize,
+    getPicture
+  });
+  if (imgAttrs) {
+    imgAttrs.src += `&V=${deployRand}`;
+  }
   return renderTemplate`${maybeRenderHead($$result)}<picture${spreadAttributes(pictureAttrs)}>
-  ${sources.map((attrs2) => renderTemplate`<source${addAttribute(attrs2.type, "type")}${addAttribute(attrs2.srcset.replace(/\s(\w+)$/, `&V=${process.env.DEPLOY_RAND} $1`), "srcset")}${addAttribute(sizes, "sizes")}>`)}
-  ${hasImg && renderTemplate`<img${spreadAttributes(image)}${addAttribute(loading, "loading")}${addAttribute(decoding, "decoding")}${addAttribute(imgSrc, "src")}${spreadAttributes(attrs)}>`}
+  ${sources.map((attrs) => renderTemplate`<source${addAttribute(attrs.type, "type")}${addAttribute(attrs.srcset.replace(/\s(\w+)$/, `&V=${deployRand} $1`), "srcset")}${addAttribute(sizes, "sizes")}>`)}
+  ${imgAttrs && renderTemplate`<img${spreadAttributes(imgAttrs)}>`}
 </picture>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/Picture.astro");
 
@@ -3246,7 +3317,7 @@ const $$Pages = createComponent(async ($$result, $$props, $$slots) => {
   const { pageContext, title } = Astro2.props;
   const { settings } = pageContext;
   return renderTemplate`${renderComponent($$result, "Base", $$Base, { "pageContext": pageContext, "title": title }, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["header"], renderTemplate`
-    ${renderComponent($$result2, "Header", $$PagesHeader, { "pageContext": pageContext }, { "logo-picture": ($$result3) => renderTemplate`${renderComponent($$result3, "Picture", $$Picture, { "slot": "logo-picture", "src": settings.logo, "alt": settings.name, "widths": [300], "sizes": "150px", "fetchpriority": "high", "loading": "eager", "class": "hover:drop-shadow-sm" })}` })}
+    ${renderComponent($$result2, "Header", $$PagesHeader, { "pageContext": pageContext }, { "logo-picture": ($$result3) => renderTemplate`${renderComponent($$result3, "Picture", $$Picture, { "slot": "logo-picture", "src": settings.logo, "alt": settings.name, "widths": [300], "fetchpriority": "high", "loading": "eager", "class": "hover:drop-shadow-sm max-w-[150px]" })}` })}
   `)}${renderSlot($$result2, $$slots["default"])}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Pages.astro");
 

package/packages/storefront/dist/server/entry.mjs

@@ -14,7 +14,7 @@ import enableDestroy from 'server-destroy';
 import { defineComponent, computed, useSSRContext, mergeProps, h as h$1, createSSRApp } from 'vue';
 import { ssrRenderSlotInner, ssrRenderAttrs, ssrRenderSlot, renderToString } from 'vue/server-renderer';
 import { img, imgSizes, i18n, formatMoney } from '@ecomplus/utils';
-/* empty css                                  */import { _ as _export_sfc, a as _page0, b as _page1, c as _page2, d as _page3, e as _page4, f as _page5 } from './chunks/pages/all.090434f8.mjs';
+/* empty css                                  */import { _ as _export_sfc, a as _page0, b as _page1, c as _page2, d as _page3, e as _page4, f as _page5 } from './chunks/pages/all.857ce59d.mjs';
 import 'mime';
 import 'cookie';
 import 'kleur/colors';
@@ -3062,7 +3062,7 @@ const _renderer1 = {
 const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.16.0_astro@2.1.2+sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js", _page0],["src/pages/index.astro", _page1],["src/pages/fallback.astro", _page2],["src/pages/app/index.astro", _page3],["src/pages/app/account.astro", _page4],["src/pages/[...slug].astro", _page5],]);
 const renderers = [Object.assign({"name":"astro:jsx","serverEntrypoint":"astro/jsx/server.js","jsxImportSource":"astro"}, { ssr: server_default }),Object.assign({"name":"@astrojs/vue","clientEntrypoint":"@astrojs/vue/client.js","serverEntrypoint":"@astrojs/vue/server.js"}, { ssr: _renderer1 }),];
 
-const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.16.0_astro@2.1.2+sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.0607a6ef.css","_astro/index.0c833781.css"],"scripts":[{"type":"external","value":"_astro/hoisted.721ad75d.js"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.0607a6ef.css"],"scripts":[{"type":"external","value":"_astro/hoisted.721ad75d.js"}],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.0607a6ef.css"],"scripts":[{"type":"external","value":"_astro/hoisted.721ad75d.js"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","prerender":false,"_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-002.web.app","base":"/","markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"pageMap":null,"propagation":[],"renderers":[],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","@@sf/components/ProductCard.vue":"_astro/ProductCard.7e891c08.js","~/components/Prices.vue":"_astro/Prices.55399c72.js","~/components/PitchBar.vue":"_astro/PitchBar.db7cd775.js","@astrojs/vue/client.js":"_astro/client.0de2f274.js","/astro/hoisted.js?q=0":"_astro/hoisted.721ad75d.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.295a6886.js","~/components/ShopHeader.vue":"_astro/ShopHeader.e93c8274.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.72e91a3e.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/index.0c833781.css","/_astro/server.1bc2fa51.css","/_astro/_...slug_.0607a6ef.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-e0d788d4.js","/_astro/PitchBar.db7cd775.js","/_astro/Prices.55399c72.js","/_astro/ProductCard.7e891c08.js","/_astro/ShopHeader.e93c8274.js","/_astro/_plugin-vue_export-helper.77ed7c18.js","/_astro/client.0de2f274.js","/_astro/firebase-app.72e91a3e.js","/_astro/format-money.ab6b71eb.js","/_astro/hoisted.721ad75d.js","/_astro/idle-callback.889bf0ea.js","/_astro/index.16f33784.js","/_astro/modules-info.06ac0727.js","/_astro/preload-helper.101896b7.js","/_astro/runtime-dom.esm-bundler.d2f39f33.js","/_astro/session-utm.72684b84.js","/_astro/workbox-window.prod.es5.295a6886.js","/admin/config.json","/assets/cms-preview.css","/assets/cms.css","/assets/cvv.png","/assets/img-placeholder.png","/assets/payments.png","/assets/ssl-safe.png","/img/icon.png","/img/large-icon.png","/img/uploads/banner1.png","/img/uploads/banner2.png","/img/uploads/banner2.webp","/img/uploads/favicon.png","/img/uploads/headless.png","/img/uploads/headphone.png","/img/uploads/headphone.webp","/img/uploads/icon.png","/img/uploads/large-icon.png","/img/uploads/logo.png","/img/uploads/logo.webp","/img/uploads/og-image.png","/img/uploads/passion.png","/img/uploads/passion.webp","/img/uploads/pwa-reliable.png","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.png","/img/uploads/rect89.webp","/img/uploads/ssl-safe.png"]}), {
+const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.16.0_astro@2.1.2+sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.3beb11c8.css","_astro/index.0c833781.css"],"scripts":[{"type":"external","value":"_astro/hoisted.541b5c05.js"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.3beb11c8.css"],"scripts":[{"type":"external","value":"_astro/hoisted.541b5c05.js"}],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.3beb11c8.css"],"scripts":[{"type":"external","value":"_astro/hoisted.541b5c05.js"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","prerender":false,"_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-002.web.app","base":"/","markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"pageMap":null,"propagation":[],"renderers":[],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","@@sf/components/ProductCard.vue":"_astro/ProductCard.7e891c08.js","~/components/Prices.vue":"_astro/Prices.55399c72.js","~/components/PitchBar.vue":"_astro/PitchBar.5d55c359.js","/astro/hoisted.js?q=0":"_astro/hoisted.541b5c05.js","@astrojs/vue/client.js":"_astro/client.0de2f274.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.dc90f814.js","~/components/ShopHeader.vue":"_astro/ShopHeader.6bbe1a17.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.d090c84e.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/index.0c833781.css","/_astro/server.1bc2fa51.css","/_astro/_...slug_.3beb11c8.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-e0d788d4.js","/_astro/PitchBar.5d55c359.js","/_astro/Prices.55399c72.js","/_astro/ProductCard.7e891c08.js","/_astro/ShopHeader.6bbe1a17.js","/_astro/_plugin-vue_export-helper.77ed7c18.js","/_astro/client.0de2f274.js","/_astro/firebase-app.d090c84e.js","/_astro/format-money.ab6b71eb.js","/_astro/hoisted.541b5c05.js","/_astro/idle-callback.889bf0ea.js","/_astro/index.ff4f0b30.js","/_astro/modules-info.06ac0727.js","/_astro/preload-helper.101896b7.js","/_astro/runtime-dom.esm-bundler.d2f39f33.js","/_astro/session-utm.72684b84.js","/_astro/workbox-window.prod.es5.dc90f814.js","/admin/config.json","/assets/cms-preview.css","/assets/cms.css","/assets/cvv.png","/assets/img-placeholder.png","/assets/payments.png","/assets/ssl-safe.png","/img/icon.png","/img/large-icon.png","/img/uploads/banner1.png","/img/uploads/banner2.png","/img/uploads/banner2.webp","/img/uploads/favicon.png","/img/uploads/headless.png","/img/uploads/headphone.png","/img/uploads/headphone.webp","/img/uploads/icon.png","/img/uploads/large-icon.png","/img/uploads/logo.png","/img/uploads/logo.webp","/img/uploads/og-image.png","/img/uploads/passion.png","/img/uploads/passion.webp","/img/uploads/pwa-reliable.png","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.png","/img/uploads/rect89.webp","/img/uploads/ssl-safe.png"]}), {
 	pageMap: pageMap,
 	renderers: renderers
 });

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -46,19 +46,19 @@
     "astro": "2.1.2",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.0.3",
-    "firebase": "^9.17.2",
+    "firebase": "^9.18.0",
     "image-size": "^1.0.2",
     "mime": "^3.0.0",
     "semver": "^7.3.8",
     "sharp": "^0.31.3",
     "tailwindcss": "^3.2.7",
-    "unocss": "^0.50.4",
-    "vite": "^4.1.4",
-    "vite-plugin-pwa": "^0.14.4",
+    "unocss": "^0.50.6",
+    "vite": "^4.2.1",
+    "vite-plugin-pwa": "^0.14.5",
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
     "@cloudcommerce/types": "workspace:*"
   }
 }

package/packages/storefront/scripts/build-prod.sh

@@ -1,19 +1,31 @@
 #!/bin/bash
 
-BUILD_OUTPUT=static BUILD_OUT_DIR=./.cloudcommerce/sf-tmp-dist npx astro build
+BUILD_OUTPUT=static \
+BUILD_OUT_DIR=./.cloudcommerce/sf-tmp-dist \
+  npx astro build
 DEPLOY_RUNTIME=serverless npx astro build
 
-mv ./.cloudcommerce/sf-tmp-dist/_astro/*.{png,jpg,jpeg,webp,avif,svg} ./dist/client/_astro/ 2>/dev/null
+mv ./.cloudcommerce/sf-tmp-dist/_astro/*.{png,jpg,jpeg,webp,avif,svg} \
+  ./dist/client/_astro/ \
+  2>/dev/null
 rm -rf ./.cloudcommerce/sf-tmp-dist
 
 identify -format "%f,%w,%h\n" \
-  ./dist/client/_astro/*.{png,jpg,jpeg,webp,avif,svg} > ./dist/server/images.dist.csv 2>/dev/null
+  ./dist/client/_astro/*.{png,jpg,jpeg,webp,avif,svg} \
+  > ./dist/server/images.dist.csv \
+  2>/dev/null
 
 identify -format "assets/%f,%w,%h\n" \
-  ./public/assets/*.{png,jpg,jpeg,webp,avif,svg} > ./dist/server/images.src.csv 2>/dev/null
+  ./public/assets/*.{png,jpg,jpeg,webp,avif,svg} \
+  > ./dist/server/images.src.csv \
+  2>/dev/null
 identify -format "img/%f,%w,%h\n" \
-  ./public/img/*.{png,jpg,jpeg,webp,avif,svg} >> ./dist/server/images.src.csv 2>/dev/null
+  ./public/img/*.{png,jpg,jpeg,webp,avif,svg} \
+  >> ./dist/server/images.src.csv \
+  2>/dev/null
 identify -format "img/uploads/%f,%w,%h\n" \
-  ./public/img/uploads/*.{png,jpg,jpeg,webp,avif,svg} >> ./dist/server/images.src.csv 2>/dev/null
+  ./public/img/uploads/*.{png,jpg,jpeg,webp,avif,svg} \
+  >> ./dist/server/images.src.csv \
+  2>/dev/null
 
 exit 0

package/packages/storefront/src/images/Picture.runtime.astro

@@ -0,0 +1,52 @@
+---
+import { join as joinPath } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { getBuiltPicture } from './get-built-picture';
+import { type PictureProps, useSSRPicture } from './use-ssr-picture';
+
+export type Props = PictureProps;
+
+const { STOREFRONT_BASE_DIR } = process.env;
+const baseDir = STOREFRONT_BASE_DIR || process.cwd();
+type OriginalImage = { filepath: string, width: number, height: number };
+const originalImages: OriginalImage[] = [];
+const manifestFilepath = joinPath(baseDir, 'dist/server/images.src.csv');
+readFileSync(manifestFilepath, 'utf-8').split(/\n/).forEach((line) => {
+  const [filepath, width, height] = line.split(',');
+  originalImages.push({
+    filepath,
+    width: Number(width),
+    height: Number(height),
+  });
+});
+
+const tryImageSize = (src: string) => {
+  let dimensions: { width?: number, height?: number } = {};
+  if (typeof src === 'string' && src.startsWith('/')) {
+    const originalImage = originalImages.find(({ filepath }) => {
+      return new RegExp(`^/${filepath}\\??.*`).test(src);
+    });
+    if (originalImage) {
+      const { width, height } = originalImage;
+      dimensions = { width, height };
+    }
+  }
+  return dimensions;
+};
+
+const {
+  sizes,
+  sources,
+  pictureAttrs,
+  imgAttrs,
+} = await useSSRPicture({
+  ...Astro.props,
+  tryImageSize,
+  getPicture: getBuiltPicture,
+});
+---
+
+<picture {...pictureAttrs}>
+  {sources.map((attrs) => <source {...attrs} sizes={sizes} />)}
+  {imgAttrs && <img {...imgAttrs} />}
+</picture>

package/packages/storefront/src/{serverless/get-image.ts → images/get-built-image.ts}

@@ -25,7 +25,7 @@ type ImageOptions = Record<string, any> & {
   width: number,
   format: OutputFormat,
 };
-const getImage = async ({ src, width, format }: ImageOptions) => {
+const getBuiltImage = async ({ src, width, format }: ImageOptions) => {
   const filename = src.replace(/^.*\//, '').replace(/.\w+(\?.*)?$/, '');
   const filenameRegExp = new RegExp(`[_.][a-z0-9]+\\.${format}$`, 'i');
   const matchFilename = (_builtImage: BuiltImage) => {
@@ -48,6 +48,6 @@ const getImage = async ({ src, width, format }: ImageOptions) => {
   return { src, width };
 };
 
-export default getImage;
+export default getBuiltImage;
 
-export { getImage };
+export { getBuiltImage };

package/packages/storefront/src/{serverless/get-picture.ts → images/get-built-picture.ts}

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'astro/types';
 // import type { ImageMetadata } from '@astrojs/image/dist/vite-plugin-astro-image';
 import type { OutputFormat, TransformOptions } from '@astrojs/image/dist/loaders/';
 import mime from 'mime';
-import getImage from './get-image';
+import getBuiltImage from './get-built-image';
 
 function removeQueryString(src: string) {
   const index = src.lastIndexOf('?');
@@ -76,7 +76,7 @@ async function resolveFormats({ src, formats }: GetPictureParams) {
   return Array.from(unique).filter(Boolean);
 }
 
-export async function getPicture(params: GetPictureParams): Promise<GetPictureResult> {
+export async function getBuiltPicture(params: GetPictureParams): Promise<GetPictureResult> {
   const {
     src,
     alt,
@@ -103,7 +103,7 @@ export async function getPicture(params: GetPictureParams): Promise<GetPictureRe
   async function getSource(format: OutputFormat) {
     const imgs = await Promise.all(
       widths.map(async (width) => {
-        const img = await getImage({
+        const img = await getBuiltImage({
           src,
           alt,
           format,

package/packages/storefront/src/images/use-ssr-picture.ts

@@ -0,0 +1,138 @@
+import type { PictureComponentRemoteImageProps } from '@astrojs/image/components/';
+import type {
+  GetPictureParams,
+  GetPictureResult,
+} from '@astrojs/image/dist/lib/get-picture';
+
+export type PictureProps = Omit<PictureComponentRemoteImageProps, 'aspectRatio' | 'sizes'> & {
+  sizes?: string;
+  aspectRatio?: PictureComponentRemoteImageProps['aspectRatio'];
+  fetchpriority?: 'high' | 'low' | 'auto';
+  hasImg?: boolean;
+};
+
+export type ImageSize = { width?: number, height?: number };
+
+export type TryImageSize = (src: string) => ImageSize;
+
+const getAspectRatio = (src: string | ImageSize, tryImageSize: TryImageSize) => {
+  if (typeof src === 'string') {
+    src = tryImageSize(src);
+  } else if (src.width) {
+    return src.height ? src.width / src.height : 1;
+  }
+  return 0;
+};
+
+export type UsePictureParams = PictureProps & {
+  tryImageSize: TryImageSize;
+  getPicture: (params: GetPictureParams) => Promise<GetPictureResult>;
+};
+
+const useSSRPicture = async (params: UsePictureParams) => {
+  const {
+    src,
+    alt,
+    sizes: propSizes,
+    widths,
+    aspectRatio: propAspectRatio,
+    fit,
+    background,
+    position,
+    formats = ['avif', 'webp'],
+    loading = 'lazy',
+    decoding = 'async',
+    hasImg = true,
+    tryImageSize,
+    getPicture,
+    ...attrs
+  } = params;
+
+  let aspectRatio: number;
+  if (propAspectRatio) {
+    if (typeof propAspectRatio === 'number') {
+      aspectRatio = propAspectRatio;
+    } else {
+      const [width, height] = propAspectRatio.split(':');
+      aspectRatio = Number(width) / Number(height);
+    }
+  } else if ((!attrs.width || !attrs.height) && typeof src === 'string') {
+    const { width, height } = tryImageSize(src);
+    if (height) {
+      aspectRatio = getAspectRatio({ width, height }, tryImageSize);
+      attrs.width = width;
+      attrs.height = height;
+    }
+  }
+  let sizes: string = propSizes || '';
+  if (!sizes && attrs.class) {
+    const classNames = attrs.class.split(' ');
+    const classRegex = /^(\w+:)?max-w-\[(\w+)\]$/;
+    let nextSize: string;
+    [
+      [''],
+      ['sm', 640],
+      ['md', 768],
+      ['lg', 1024],
+      ['xl', 1280],
+      ['2xl', 1536],
+    ].forEach(([breakpoint, minWidth]: [string, number | undefined]) => {
+      const className = classNames.find((_class) => {
+        return _class.startsWith(breakpoint ? `${breakpoint}:max-w-[` : 'max-w-[');
+      });
+      if (className) {
+        if (nextSize) {
+          // max-w-50px sm:max-w-[... => (max-width: 639px) 50px...
+          if (sizes) sizes += ', ';
+          sizes += `(max-width: ${(minWidth - 1)}px) ${nextSize}`;
+        }
+        nextSize = className.replace(classRegex, '$2');
+      }
+    });
+    if (nextSize) {
+      if (sizes) sizes += ', ';
+      sizes += nextSize;
+    }
+  }
+  if (!sizes && widths.length === 1) {
+    sizes = `${(widths[0] / 2)}px`;
+  }
+
+  const { image, sources } = await getPicture({
+    src,
+    widths,
+    formats,
+    aspectRatio,
+    fit,
+    background,
+    position,
+    alt,
+  });
+  delete image.width;
+  delete image.height;
+
+  const pictureAttrs: Partial<typeof attrs & { alt: string }> = {};
+  if (!hasImg) {
+    pictureAttrs['data-alt'] = alt;
+    Object.assign(pictureAttrs, attrs);
+    delete pictureAttrs.width;
+    delete pictureAttrs.height;
+  }
+
+  return {
+    sizes,
+    aspectRatio,
+    sources,
+    pictureAttrs,
+    imgAttrs: !hasImg ? null : {
+      ...image,
+      loading,
+      decoding,
+      ...attrs,
+    },
+  };
+};
+
+export default useSSRPicture;
+
+export { useSSRPicture };

package/packages/storefront/src/lib/assets/base.css

@@ -101,11 +101,6 @@ d-md {
   }
 }
 
-/* Preset width auto for responsive images (for Astro <Picture/>) */
-:where(img[sizes], source[sizes] + img) {
-  width: auto;
-}
-
 /* Fix Safari issue related to <summary> / <details> arrow */
 details > summary.list-none::-webkit-details-marker,
 details > summary.list-none::marker {