nuxt-og-image 2.0.28 → 2.1.0

package/dist/module.d.ts

@@ -49,7 +49,7 @@ interface RuntimeCompatibilitySchema {
     satori: false | 'default' | 'yoga-wasm';
     wasm: 'inline' | 'import' | 'fetch';
     png: 'resvg-wasm' | 'svg2png' | 'resvg-node';
-    cssInline?: 'node' | 'mock';
+    cssInline?: boolean;
     node?: boolean;
     wasmImportQuery?: string;
 }

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "2.0.28"
+  "version": "2.1.0"
 }

package/dist/module.mjs

@@ -6,7 +6,7 @@ import { execa } from 'execa';
 import chalk from 'chalk';
 import defu$1, { defu } from 'defu';
 import { toRouteMatcher, createRouter } from 'radix3';
-import { withBase, joinURL } from 'ufo';
+import { withBase, parsePath, joinURL } from 'ufo';
 import { resolve, relative, dirname } from 'pathe';
 import { tinyws } from 'tinyws';
 import sirv from 'sirv';
@@ -21,7 +21,7 @@ import { createBirpcGroup } from 'birpc';
 import { stringify, parse } from 'flatted';
 import { addDependency } from 'nypm';
 
-const version = "2.0.28";
+const version = "2.1.0";
 
 async function createBrowser() {
   if (process.dev || process.env.prerender) {
@@ -192,7 +192,7 @@ function decodeObjectHtmlEntities(obj) {
   return obj;
 }
 function extractAndNormaliseOgImageOptions(path, html, routeRules, defaults) {
-  const htmlPayload = html.match(/<script id="nuxt-og-image-options" type="application\/json">(.+?)<\/script>/)?.[1];
+  const htmlPayload = html.match(/<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/)?.[1];
   if (!htmlPayload)
     return false;
   let options;
@@ -252,7 +252,8 @@ const DefaultRuntimeCompatibility = {
   satori: "default",
   wasm: "fetch",
   png: "resvg-node",
-  node: true
+  node: true,
+  cssInline: true
 };
 const cloudflare = {
   browser: false,
@@ -629,6 +630,11 @@ declare module 'nitropack' {
         nitroConfig.publicAssets.push({ dir, maxAge: 31536e3 });
       });
       const providerPath = `${runtimeDir}/nitro/providers`;
+      nitroConfig.virtual["#nuxt-og-image/css-inline"] = `import cssInline from '${providerPath}/css-inline/${nitroCompatibility.cssInline ? "css-inline" : "mock"}'
+export default function() {
+ return cssInline
+}
+`;
       if (config.runtimeBrowser) {
         nitroConfig.virtual["#nuxt-og-image/browser"] = `
 let browser
@@ -647,11 +653,6 @@ export default function() {
 export default function() {
  return png
 }
-`;
-        nitroConfig.virtual["#nuxt-og-image/css-inline"] = `import cssInline from '${providerPath}/css-inline/${nitroCompatibility.cssInline || "mock"}'
-export default function() {
- return cssInline
-}
 `;
       }
       nitroConfig.virtual["#nuxt-og-image/provider"] = `
@@ -717,10 +718,13 @@ export async function useProvider(provider) {
           return;
         const isPageScreenshot = extractedOptions.component === "PageScreenshot";
         const entry = {
-          route: ctx.route,
+          route: parsePath(ctx.route).pathname,
+          // drop hash and query
           path: !isPageScreenshot ? `/api/og-image-html?path=${ctx.route}` : ctx.route,
           ...extractedOptions
         };
+        if (screenshotQueue.some((r) => r.route === entry.route))
+          return;
         if ((nuxt.options._generate || entry.cache) && entry.provider === "browser")
           screenshotQueue.push(entry);
       });

package/dist/runtime/components/OgImageTemplate/Fallback.vue

@@ -127,6 +127,12 @@ const siteLogo = computed(() => {
 })
 
 const MaybeIconComponent = resolveComponent('Icon')
+if (typeof props.icon === 'string' && typeof MaybeIconComponent === 'string' && process.dev) {
+  // eslint-disable-next-line no-console
+  console.warn('Please install `nuxt-icon` to use icons with the fallback OG Image component.')
+  // eslint-disable-next-line no-console
+  console.log('npm add -D nuxt-icon')
+}
 </script>
 
 <template>

package/dist/runtime/nitro/routes/html.mjs

@@ -4,7 +4,7 @@ import { createHeadCore } from "@unhead/vue";
 import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
 import { hash } from "ohash";
 import twemoji from "twemoji";
-import { defu } from "defu";
+import { createDefu } from "defu";
 import { fetchOptionsCached } from "../utils.mjs";
 import { useNitroOrigin, useRuntimeConfig } from "#imports";
 import loadCSSInline from "#nuxt-og-image/css-inline";
@@ -23,8 +23,12 @@ export default defineEventHandler(async (e) => {
     }
   }
   let options = await fetchOptionsCached(e, path);
+  const merger = createDefu((object, key, value) => {
+    if (Array.isArray(value))
+      return value;
+  });
   if (queryOptions)
-    options = defu(queryOptions, options);
+    options = merger(queryOptions, options);
   if (options.provider === "browser" && options.component === "PageScreenshot") {
     const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
     return sendRedirect(e, withBase(pathWithoutBase, nitroOrigin));

package/dist/runtime/nitro/utils-pure.mjs

@@ -12,7 +12,7 @@ function decodeObjectHtmlEntities(obj) {
   return obj;
 }
 export function extractAndNormaliseOgImageOptions(path, html, routeRules, defaults) {
-  const htmlPayload = html.match(/<script id="nuxt-og-image-options" type="application\/json">(.+?)<\/script>/)?.[1];
+  const htmlPayload = html.match(/<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/)?.[1];
   if (!htmlPayload)
     return false;
   let options;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.28",
-  "packageManager": "pnpm@8.7.5",
+  "version": "2.1.0",
+  "packageManager": "pnpm@8.8.0",
   "description": "Enlightened OG Image generation for Nuxt.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -27,31 +27,31 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "^3.7.3",
+    "@nuxt/kit": "^3.7.4",
     "@resvg/resvg-js": "^2.4.1",
     "@resvg/resvg-wasm": "^2.4.1",
-    "@types/fs-extra": "^11.0.1",
+    "@types/fs-extra": "^11.0.2",
     "birpc": "0.2.14",
     "chalk": "^5.3.0",
-    "chrome-launcher": "^1.0.0",
-    "css-inline": "^0.10.5",
+    "chrome-launcher": "^1.1.0",
+    "css-inline": "^0.11.0",
     "defu": "^6.1.2",
     "execa": "^8.0.1",
     "fast-glob": "^3.3.1",
-    "flatted": "^3.2.7",
+    "flatted": "^3.2.9",
     "fs-extra": "^11.1.1",
     "globby": "^13.2.2",
     "image-size": "^1.0.2",
     "launch-editor": "^2.6.0",
-    "nuxt-site-config": "^1.2.1",
-    "nuxt-site-config-kit": "^1.2.1",
+    "nuxt-site-config": "^1.4.0",
+    "nuxt-site-config-kit": "^1.4.0",
     "nypm": "^0.3.3",
     "ofetch": "^1.3.3",
     "ohash": "^1.1.3",
     "pathe": "^1.1.1",
-    "playwright-core": "^1.38.0",
+    "playwright-core": "^1.38.1",
     "radix3": "^1.1.0",
-    "satori": "0.10.4",
+    "satori": "0.10.8",
     "satori-html": "^0.3.2",
     "sirv": "^2.0.3",
     "std-env": "^3.4.3",
@@ -59,25 +59,25 @@
     "terminate": "^2.6.1",
     "tinyws": "^0.1.0",
     "twemoji": "^14.0.2",
-    "ufo": "^1.3.0",
-    "ws": "^8.14.1",
+    "ufo": "^1.3.1",
+    "ws": "^8.14.2",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.42.0",
-    "@nuxt/devtools": "0.8.3",
-    "@nuxt/module-builder": "^0.5.1",
-    "@nuxt/test-utils": "3.7.3",
+    "@antfu/eslint-config": "1.0.0-beta.18",
+    "@nuxt/devtools": "1.0.0-beta.0",
+    "@nuxt/module-builder": "^0.5.2",
+    "@nuxt/test-utils": "3.7.4",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@types/ws": "^8.5.5",
+    "@types/ws": "^8.5.6",
     "bumpp": "^9.2.0",
-    "eslint": "8.49.0",
+    "eslint": "8.50.0",
     "jest-image-snapshot": "^6.2.0",
-    "nuxt": "^3.7.3",
+    "nuxt": "^3.7.4",
     "nuxt-icon": "^0.5.0",
-    "playwright": "^1.38.0",
-    "sass": "^1.67.0",
-    "vitest": "^0.34.4"
+    "playwright": "^1.38.1",
+    "sass": "^1.68.0",
+    "vitest": "^0.34.6"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",