nuxt-og-image 3.0.0-rc.26 → 3.0.0-rc.28

package/dist/runtime/core/renderers/satori/plugins/imageSrc.mjs

@@ -8,55 +8,54 @@ import { useNitroOrigin } from "#imports";
 export default defineSatoriTransformer([
   // fix <img src="">
   {
-    filter: (node) => node.type === "img",
+    filter: (node) => node.type === "img" && node.props?.src,
     transform: async (node, { e }) => {
-      const src = node.props?.src;
-      const isRelative = src?.startsWith("/");
-      if (src) {
-        let updated = false;
-        let dimensions;
-        let imageBuffer;
-        let valid = true;
+      const src = node.props.src;
+      const isRelative = src.startsWith("/");
+      let dimensions;
+      let imageBuffer;
+      if (isRelative) {
         if (import.meta.prerender || import.meta.dev) {
           const key = `root:public${src.replace("./", ":").replace("/", ":")}`;
-          if (await useStorage().hasItem(key)) {
+          if (await useStorage().hasItem(key))
             imageBuffer = await useStorage().getItemRaw(key);
-            updated = !!imageBuffer;
-          }
-        }
-        if (!import.meta.prerender && !updated) {
+        } else {
           imageBuffer = await e.$fetch(src, {
             baseURL: useNitroOrigin(e),
             responseType: "arrayBuffer"
           }).catch(() => {
-            valid = false;
           });
-          valid = !!imageBuffer;
         }
-        if (valid) {
-          node.props.src = toBase64Image(src, imageBuffer);
-          try {
-            const imageSize = sizeOf(Buffer.from(imageBuffer));
-            dimensions = { width: imageSize.width, height: imageSize.height };
-          } catch (e2) {
-          }
-          updated = true;
-        }
-        if (dimensions?.width && dimensions?.height) {
-          const naturalAspectRatio = dimensions.width / dimensions.height;
-          if (node.props.width && !node.props.height) {
-            node.props.height = Math.round(node.props.width / naturalAspectRatio);
-          } else if (node.props.height && !node.props.width) {
-            node.props.width = Math.round(node.props.height * naturalAspectRatio);
-          } else if (!node.props.width && !node.props.height) {
-            node.props.width = dimensions.width;
-            node.props.height = dimensions.height;
-          }
+      } else {
+        imageBuffer = await $fetch(src, {
+          responseType: "arrayBuffer"
+        }).catch(() => {
+        });
+      }
+      if (imageBuffer)
+        imageBuffer = Buffer.from(imageBuffer);
+      if (imageBuffer) {
+        node.props.src = toBase64Image(src, imageBuffer);
+        try {
+          const imageSize = sizeOf(imageBuffer);
+          dimensions = { width: imageSize.width, height: imageSize.height };
+        } catch (e2) {
         }
-        if (!updated && isRelative) {
-          node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
+      }
+      if (dimensions?.width && dimensions?.height) {
+        const naturalAspectRatio = dimensions.width / dimensions.height;
+        if (node.props.width && !node.props.height) {
+          node.props.height = Math.round(node.props.width / naturalAspectRatio);
+        } else if (node.props.height && !node.props.width) {
+          node.props.width = Math.round(node.props.height * naturalAspectRatio);
+        } else if (!node.props.width && !node.props.height) {
+          node.props.width = dimensions.width;
+          node.props.height = dimensions.height;
         }
       }
+      if (node.props.src.startsWith("/")) {
+        node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
+      }
     }
   },
   // fix style="background-image: url('')"
@@ -64,11 +63,21 @@ export default defineSatoriTransformer([
     filter: (node) => node.props?.style?.backgroundImage?.includes("url("),
     transform: async (node, { e }) => {
       const backgroundImage = node.props.style.backgroundImage;
-      if (backgroundImage) {
-        const src = backgroundImage.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
-        const isRelative = src?.startsWith("/");
-        if (isRelative)
+      const src = backgroundImage.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
+      const isRelative = src?.startsWith("/");
+      if (isRelative) {
+        if (import.meta.prerender || import.meta.dev) {
+          const key = `root:public${src.replace("./", ":").replace("/", ":")}`;
+          if (await useStorage().hasItem(key)) {
+            const imageBuffer = await useStorage().getItemRaw(key);
+            if (imageBuffer) {
+              const base64 = toBase64Image(src, Buffer.from(imageBuffer));
+              node.props.style.backgroundImage = `url(${base64})`;
+            }
+          }
+        } else {
           node.props.style.backgroundImage = `url(${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()})`;
+        }
       }
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "3.0.0-rc.26",
+  "version": "3.0.0-rc.28",
   "packageManager": "pnpm@8.14.1",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
@@ -33,11 +33,17 @@
     "virtual.d.ts"
   ],
   "dependencies": {
-    "@css-inline/css-inline": "^0.12.1",
-    "@css-inline/css-inline-wasm": "^0.12.1",
+    "flatted": "^3.2.9",
+    "json-editor-vue": "^0.12.0",
+    "nuxt-icon": "^0.6.8",
+    "shikiji": "^0.10.0-beta.9",
+    "splitpanes": "^3.1.5",
+    "vanilla-jsoneditor": "^0.21.3",
+    "@css-inline/css-inline": "^0.13.0",
+    "@css-inline/css-inline-wasm": "^0.13.0",
     "@iconify-json/noto": "^1.1.18",
     "@nuxt/devtools-kit": "^1.0.8",
-    "@nuxt/kit": "^3.9.1",
+    "@nuxt/kit": "^3.9.3",
     "@resvg/resvg-js": "^2.6.0",
     "@resvg/resvg-wasm": "^2.6.0",
     "@unocss/core": "^0.58.3",
@@ -46,16 +52,16 @@
     "chrome-launcher": "^1.1.0",
     "defu": "^6.1.4",
     "execa": "^8.0.1",
-    "floating-vue": "5.0.3",
+    "floating-vue": "5.2.0",
     "image-size": "^1.1.1",
-    "nuxt-site-config": "^2.2.5",
-    "nuxt-site-config-kit": "^2.2.5",
+    "nuxt-site-config": "^2.2.7",
+    "nuxt-site-config-kit": "^2.2.7",
     "nypm": "^0.3.4",
     "ofetch": "^1.3.3",
     "ohash": "^1.1.3",
     "pathe": "^1.1.2",
     "pkg-types": "^1.0.3",
-    "playwright-core": "^1.40.1",
+    "playwright-core": "^1.41.1",
     "radix3": "^1.1.0",
     "satori": "0.10.11",
     "satori-html": "^0.3.2",
@@ -66,27 +72,39 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.6.2",
+    "@antfu/eslint-config": "2.6.3",
     "@img/sharp-linux-x64": "0.33.2",
     "@nuxt/content": "^2.10.0",
     "@nuxt/devtools": "1.0.8",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/test-utils": "3.9.0",
-    "@nuxt/ui": "^2.12.0",
+    "@nuxt/test-utils": "3.10.0",
+    "@nuxt/ui": "^2.12.3",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/i18n": "8.0.0",
-    "@nuxtjs/tailwindcss": "^6.10.4",
+    "@nuxtjs/tailwindcss": "^6.11.0",
     "@unocss/nuxt": "^0.58.3",
-    "bumpp": "^9.2.1",
+    "bumpp": "^9.3.0",
     "eslint": "8.56.0",
     "jest-image-snapshot": "^6.4.0",
-    "nuxt": "^3.9.1",
+    "nuxt": "^3.9.3",
     "nuxt-icon": "0.6.8",
-    "playwright": "^1.40.1",
-    "sass": "^1.69.7",
+    "playwright": "^1.41.1",
+    "sass": "^1.70.0",
     "sharp": "^0.33.2",
     "typescript": "^5.3.3",
-    "vitest": "^1.2.0"
+    "vitest": "^1.2.1",
+    "@headlessui/vue": "^1.7.17",
+    "@iconify-json/carbon": "^1.1.27",
+    "@iconify-json/logos": "^1.1.42",
+    "@iconify-json/ri": "^1.1.19",
+    "@iconify-json/tabler": "^1.1.104",
+    "@nuxt/devtools-ui-kit": "^1.0.8",
+    "@nuxtjs/color-mode": "^3.3.2",
+    "@unocss/preset-icons": "^0.58.3",
+    "@unocss/preset-uno": "^0.58.3",
+    "@unocss/runtime": "^0.58.3",
+    "@vueuse/nuxt": "^10.7.2",
+    "unocss": "^0.58.3"
   },
   "build": {
     "externals": [

package/dist/client/_nuxt/IconCSS.6oz918NR.css

@@ -1 +0,0 @@
-span[data-v-f7bd87a9]{background-color:currentColor;display:inline-block;-webkit-mask-image:var(--1b6a0df6);mask-image:var(--1b6a0df6);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle}

package/dist/client/_nuxt/builds/meta/3ca7da46-fb9e-4d74-a5c1-713506e57638.json

@@ -1 +0,0 @@
-{"id":"3ca7da46-fb9e-4d74-a5c1-713506e57638","timestamp":1705207550933,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}