nuxt-og-image 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/module.mjs

@@ -4,12 +4,13 @@ import { execa } from 'execa';
 import chalk from 'chalk';
 import defu from 'defu';
 import { toRouteMatcher, createRouter } from 'radix3';
-import { joinURL } from 'ufo';
+import { withBase, joinURL } from 'ufo';
 import { resolve, relative } from 'pathe';
 import { tinyws } from 'tinyws';
 import sirv from 'sirv';
 import { pathExists, copy, mkdirp } from 'fs-extra';
 import { provider } from 'std-env';
+import { $fetch } from 'ofetch';
 import playwrightCore from 'playwright-core';
 import { existsSync } from 'node:fs';
 import { createBirpcGroup } from 'birpc';
@@ -69,6 +70,9 @@ async function screenshot(browser, options) {
       waitUntil: "networkidle"
     });
   }
+  const screenshotOptions = {
+    timeout: 1e4
+  };
   if (options.delay)
     await page.waitForTimeout(options.delay);
   if (options.mask) {
@@ -78,8 +82,8 @@ async function screenshot(browser, options) {
     }, options.mask);
   }
   if (options.selector)
-    return await page.locator(options.selector).screenshot();
-  return await page.screenshot();
+    return await page.locator(options.selector).screenshot(screenshotOptions);
+  return await page.screenshot(screenshotOptions);
 }
 
 function setupPlaygroundRPC(nuxt, config) {
@@ -113,7 +117,7 @@ function setupPlaygroundRPC(nuxt, config) {
   const birpc = createBirpcGroup(serverFunctions, []);
   nuxt.hook("builder:watch", (e, path) => {
     if (e === "change")
-      birpc.boardcast.refresh.asEvent(path);
+      birpc.broadcast.refresh.asEvent(path);
   });
   const middleware = async (req, res) => {
     if (req.ws) {
@@ -164,13 +168,15 @@ function getBodyJson(req) {
   });
 }
 
-function decodeHtmlEntities(obj) {
+function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
+    return String.fromCharCode(parseInt(int));
+  });
+}
+function decodeObjectHtmlEntities(obj) {
   Object.entries(obj).forEach(([key, value]) => {
-    if (typeof value === "string") {
-      obj[key] = value.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
-        return String.fromCharCode(parseInt(int));
-      });
-    }
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
   });
   return obj;
 }
@@ -194,7 +200,7 @@ function extractOgImageOptions(html) {
       else
         options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
     }
-    return decodeHtmlEntities(options);
+    return decodeObjectHtmlEntities(options);
   }
   return false;
 }
@@ -444,21 +450,6 @@ export async function useProvider(provider) {
         await nuxt.callHook("og-image:prerenderScreenshots", screenshotQueue);
         if (screenshotQueue.length === 0)
           return;
-        for (const entry of screenshotQueue) {
-          if (entry.route && Object.keys(entry).length === 1) {
-            const html = await $fetch(entry.route);
-            const extractedOptions = extractOgImageOptions(html);
-            const routeRules = defu({}, ..._routeRulesMatcher.matchAll(entry.route).reverse());
-            Object.assign(entry, {
-              // @ts-expect-error runtime
-              path: extractedOptions.component ? `/api/og-image-html?path=${entry.route}` : entry.route,
-              ...extractedOptions,
-              ...routeRules.ogImage || {}
-            });
-          }
-          if (entry.component)
-            entry.html = await $fetch(entry.path);
-        }
         nitro.logger.info("Ensuring chromium install for og:image generation...");
         const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
           stdio: "inherit"
@@ -485,6 +476,21 @@ export async function useProvider(provider) {
           browser = await createBrowser();
           if (browser) {
             nitro.logger.info(`Prerendering ${screenshotQueue.length} og:image screenshots...`);
+            for (const entry of screenshotQueue) {
+              if (entry.route && Object.keys(entry).length === 1) {
+                const html = await $fetch(entry.route, { baseURL: withBase(nuxt.options.app.baseURL, host) });
+                const extractedOptions = extractOgImageOptions(html);
+                const routeRules = defu({}, ..._routeRulesMatcher.matchAll(entry.route).reverse());
+                Object.assign(entry, {
+                  // @ts-expect-error runtime
+                  path: extractedOptions.component ? `/api/og-image-html?path=${entry.route}` : entry.route,
+                  ...extractedOptions,
+                  ...routeRules.ogImage || {}
+                });
+              }
+              if (entry.component)
+                entry.html = await $fetch(entry.path, { baseURL: withBase(nuxt.options.app.baseURL, host) });
+            }
             for (const k in screenshotQueue) {
               const entry = screenshotQueue[k];
               const start = Date.now();
@@ -522,7 +528,7 @@ export async function useProvider(provider) {
         }
         screenshotQueue = [];
       };
-      if (!nuxt.options._prepare) {
+      if (nuxt.options._generate) {
         nitro.hooks.hook("rollup:before", async () => {
           await captureScreenshots();
         });

package/dist/runtime/browserUtil.mjs

@@ -21,6 +21,9 @@ export async function screenshot(browser, options) {
       waitUntil: "networkidle"
     });
   }
+  const screenshotOptions = {
+    timeout: 1e4
+  };
   if (options.delay)
     await page.waitForTimeout(options.delay);
   if (options.mask) {
@@ -30,6 +33,6 @@ export async function screenshot(browser, options) {
     }, options.mask);
   }
   if (options.selector)
-    return await page.locator(options.selector).screenshot();
-  return await page.screenshot();
+    return await page.locator(options.selector).screenshot(screenshotOptions);
+  return await page.screenshot(screenshotOptions);
 }

package/dist/runtime/nitro/middleware/playground.mjs

@@ -1,11 +1,12 @@
 import { defineEventHandler } from "h3";
-import { parseURL, withoutTrailingSlash } from "ufo";
+import { parseURL, withBase, withoutTrailingSlash } from "ufo";
 import { fetchOptions } from "../utils.mjs";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const path = withoutTrailingSlash(parseURL(e.path).pathname);
   if (!path.endsWith("/__og_image__"))
     return;
-  const basePath = path.replace("/__og_image__", "");
+  const basePath = withBase(path.replace("/__og_image__", ""), useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, basePath === "" ? "/" : basePath);
   if (!options)
     return `The route ${basePath} has not been set up for og:image generation.`;
@@ -22,5 +23,5 @@ export default defineEventHandler(async (e) => {
   }
 </style>
 <title>OG Image Playground</title>
-<iframe src="/__nuxt_og_image__/client/?&path=${basePath}"></iframe>`;
+<iframe src="/__nuxt_og_image__/client?&path=${basePath}&base=${useRuntimeConfig().app.baseURL}"></iframe>`;
 });

package/dist/runtime/nitro/renderers/browser.mjs

@@ -1,5 +1,7 @@
+import { withBase } from "ufo";
 import { screenshot } from "../../browserUtil.mjs";
 import loadBrowser from "#nuxt-og-image/browser";
+import { useRuntimeConfig } from "#imports";
 export default {
   name: "browser",
   createSvg: async function createSvg() {
@@ -16,7 +18,7 @@ export default {
       try {
         return await screenshot(browser, {
           ...options,
-          host: url.origin,
+          host: withBase(useRuntimeConfig().app.baseURL, url.origin),
           path: `/api/og-image-html?path=${url.pathname}`
         });
       } finally {

package/dist/runtime/nitro/renderers/satori/plugins/encoding.mjs

@@ -1,9 +1,10 @@
 import { defineSatoriTransformer } from "../utils.mjs";
+import { decodeHtml } from "../../../utils-pure.mjs";
 export default defineSatoriTransformer(() => {
   return {
     filter: (node) => typeof node.props?.children === "string",
     transform: async (node) => {
-      node.props.children = node.props.children.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/");
+      node.props.children = decodeHtml(node.props.children);
     }
   };
 });

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

@@ -3,19 +3,22 @@ import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, getQuery, sendRedirect } from "h3";
 import { fetchOptions, renderIsland, useHostname } from "../utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const { fonts, defaults } = useRuntimeConfig()["nuxt-og-image"];
-  const path = getQuery(e).path || "/";
-  const scale = getQuery(e).scale;
-  const mode = getQuery(e).mode || "light";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
+  const scale = query.scale;
+  const mode = query.mode || "light";
   let options;
-  if (getQuery(e).options)
-    options = JSON.parse(getQuery(e).options);
+  if (query.options)
+    options = JSON.parse(query.options);
   if (!options)
     options = await fetchOptions(e, path);
-  if (options.provider === "browser" && !options.component)
-    return sendRedirect(e, withBase(path, useHostname(e)));
+  if (options.provider === "browser" && !options.component) {
+    const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
+    return sendRedirect(e, withBase(pathWithoutBase, useHostname(e)));
+  }
   const island = await renderIsland(options);
   const head = createHeadCore();
   head.push(island.head);

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

@@ -1,9 +1,11 @@
 import { createError, defineEventHandler, getHeaders, getQuery } from "h3";
+import { withoutBase } from "ufo";
 import { extractOgImageOptions, useHostname } from "../utils.mjs";
-import { getRouteRules, useRuntimeConfig } from "#internal/nitro";
+import { getRouteRules } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const query = getQuery(e);
-  const path = query.path || "/";
+  const path = withoutBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const fetchOptions = process.dev || process.env.prerender ? {
     headers: getHeaders(e)
   } : {

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

@@ -2,8 +2,10 @@ import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "image/svg+xml");
   const provider = await useProvider(options.provider);

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

@@ -2,8 +2,10 @@ import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "application/json");
   const provider = await useProvider(options.provider);

package/dist/runtime/nitro/utils-pure.d.ts

@@ -1,2 +1,3 @@
+export declare function decodeHtml(html: string): string;
 export declare function extractOgImageOptions(html: string): false | Record<string, any>;
 export declare function stripOgImageOptions(html: string): string;

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

@@ -1,10 +1,12 @@
-function decodeHtmlEntities(obj) {
+export function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
+    return String.fromCharCode(parseInt(int));
+  });
+}
+function decodeObjectHtmlEntities(obj) {
   Object.entries(obj).forEach(([key, value]) => {
-    if (typeof value === "string") {
-      obj[key] = value.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
-        return String.fromCharCode(parseInt(int));
-      });
-    }
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
   });
   return obj;
 }
@@ -28,7 +30,7 @@ export function extractOgImageOptions(html) {
       else
         options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
     }
-    return decodeHtmlEntities(options);
+    return decodeObjectHtmlEntities(options);
   }
   return false;
 }

package/dist/runtime/nitro/utils.d.ts

@@ -11,7 +11,7 @@ export declare function renderIsland(payload: OgImageOptions): Promise<{
     html: string;
     head: any;
 }>;
-export declare function useHostname(e: H3Event): any;
+export declare function useHostname(e: H3Event): string;
 export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
 export declare function readPublicAssetBase64(file: string): Promise<string | undefined>;
 export * from './utils-pure';

package/dist/runtime/nitro/utils.mjs

@@ -1,6 +1,7 @@
 import { existsSync, promises as fsp } from "node:fs";
 import { getHeaders, getQuery, getRequestHeader } from "h3";
 import { join } from "pathe";
+import { withBase } from "ufo";
 import { useRuntimeConfig } from "#internal/nitro";
 export function wasmLoader(key, fallback, baseUrl) {
   let promise;
@@ -60,18 +61,18 @@ export function renderIsland(payload) {
 }
 export function useHostname(e) {
   const config = useRuntimeConfig()["nuxt-og-image"];
+  const base = useRuntimeConfig().app.baseURL;
   if (!process.dev && config.siteUrl)
-    return config.siteUrl;
+    return withBase(base, config.siteUrl);
   const host = getRequestHeader(e, "host") || process.env.NITRO_HOST || process.env.HOST || "localhost";
   const protocol = getRequestHeader(e, "x-forwarded-proto") || "http";
   const useHttp = process.env.NODE_ENV === "development" || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
   const port = host.includes(":") ? host.split(":").pop() : process.env.NITRO_PORT || process.env.PORT;
-  const base = useRuntimeConfig().app.baseURL;
-  return `http${useHttp ? "" : "s"}://${host.includes(":") ? host.split(":")[0] : host}${port ? `:${port}` : ""}${base}`;
+  return withBase(base, `http${useHttp ? "" : "s"}://${host.includes(":") ? host.split(":")[0] : host}${port ? `:${port}` : ""}`);
 }
-const r = (base, key) => {
+function r(base, key) {
   return join(base, key.replace(/:/g, "/"));
-};
+}
 export async function readPublicAsset(file, encoding) {
   const { assetDirs } = useRuntimeConfig()["nuxt-og-image"];
   for (const assetDir of assetDirs) {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.6",
-  "packageManager": "pnpm@7.8.0",
+  "version": "2.0.0-beta.8",
+  "packageManager": "pnpm@8.1.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
   "homepage": "https://github.com/harlan-zw/nuxt-og-image#readme",
@@ -26,7 +26,7 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "3.3.1",
+    "@nuxt/kit": "3.3.2",
     "@types/fs-extra": "^11.0.1",
     "birpc": "^0.2.10",
     "chalk": "^5.2.0",
@@ -37,10 +37,11 @@
     "flatted": "^3.2.7",
     "fs-extra": "^11.1.1",
     "launch-editor": "^2.6.0",
+    "ofetch": "^1.0.1",
     "ohash": "^1.0.0",
     "pathe": "^1.1.0",
-    "playwright-core": "^1.31.2",
-    "radix3": "^1.0.0",
+    "playwright-core": "^1.32.1",
+    "radix3": "^1.0.1",
     "satori": "0.4.4",
     "satori-html": "^0.3.2",
     "sirv": "^2.0.2",
@@ -53,18 +54,18 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.37.0",
-    "@nuxt/devtools-edge": "0.2.5-27992993.59d3c52",
+    "@antfu/eslint-config": "^0.38.2",
+    "@nuxt/devtools-edge": "0.3.1-28002813.ab4e03d",
     "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/test-utils": "3.3.1",
+    "@nuxt/test-utils": "3.3.2",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/ws": "^8.5.4",
-    "bumpp": "^9.0.0",
-    "eslint": "8.36.0",
+    "bumpp": "^9.1.0",
+    "eslint": "8.37.0",
     "jest-image-snapshot": "^6.1.0",
-    "nuxt": "^3.3.1",
-    "puppeteer": "^19.7.5",
-    "vitest": "^0.29.7"
+    "nuxt": "^3.3.2",
+    "puppeteer": "^19.8.2",
+    "vitest": "^0.29.8"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",