nuxt-og-image 1.4.7 → 1.4.8

package/dist/module.d.ts

@@ -27,7 +27,7 @@ interface OgImageOptions extends Partial<ScreenshotOptions> {
     static?: boolean;
     title?: string;
     description?: string;
-    component?: string;
+    component?: string | null;
     alt?: string;
     [key: string]: any;
 }

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "1.4.7"
+  "version": "1.4.8"
 }

package/dist/module.mjs

@@ -46,18 +46,27 @@ async function createBrowser() {
   }
 }
 
-async function screenshot(browser, url, options) {
+async function screenshot(browser, options) {
   const page = await browser.newPage({
     colorScheme: options.colorScheme
   });
   await page.setViewportSize({
-    width: options.width,
-    height: options.height
-  });
-  await page.goto(url, {
-    timeout: 1e4,
-    waitUntil: "networkidle"
+    width: options.width || 1200,
+    height: options.height || 630
   });
+  if (options.path.startsWith("html:")) {
+    await page.evaluate((html) => {
+      document.open("text/html");
+      document.write(html);
+      document.close();
+    }, options.path.substring(5));
+    await page.waitForLoadState("networkidle");
+  } else {
+    await page.goto(`${options.host}${options.path}`, {
+      timeout: 1e4,
+      waitUntil: "networkidle"
+    });
+  }
   if (options.delay)
     await page.waitForTimeout(options.delay);
   if (options.mask) {
@@ -407,14 +416,16 @@ export default function() {
         const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
         if (!extractedOptions || routeRules.ogImage === false)
           return;
-        const options = {
-          path: ctx.route,
+        const entry = {
+          path: extractedOptions.component ? `/api/og-image-html?path=${ctx.route}` : ctx.route,
           ...extractedOptions,
           ...routeRules.ogImage || {},
           ctx
         };
-        if ((nuxt.options._generate || options.static) && options.provider === "browser")
-          screenshotQueue.push(options);
+        if (entry.component)
+          entry.path = `html:${await $fetch(entry.path)}`;
+        if ((nuxt.options._generate || entry.static) && entry.provider === "browser")
+          screenshotQueue.push(entry);
       });
       if (nuxt.options.dev)
         return;
@@ -446,7 +457,7 @@ export default function() {
           })).trim();
           browser = await createBrowser();
           if (browser) {
-            nitro.logger.info(`Pre-rendering ${screenshotQueue.length} og:image screenshots...`);
+            nitro.logger.info(`Prerendering ${screenshotQueue.length} og:image screenshots...`);
             for (const k in screenshotQueue) {
               const entry = screenshotQueue[k];
               const start = Date.now();
@@ -454,9 +465,10 @@ export default function() {
               const dirname = joinURL(nitro.options.output.publicDir, `${entry.ctx.fileName.replace("index.html", "")}__og_image__/`);
               const filename = joinURL(dirname, "/og.png");
               try {
-                const imgBuffer = await screenshot(browser, `${host}${entry.path}`, {
+                const imgBuffer = await screenshot(browser, {
                   ...config.defaults || {},
-                  ...entry || {}
+                  ...entry || {},
+                  host
                 });
                 try {
                   await mkdirp(dirname);

package/dist/runtime/browserUtil.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="node" />
 import type { Browser } from 'playwright-core';
 import type { ScreenshotOptions } from '../types';
-export declare function screenshot(browser: Browser, url: string, options: ScreenshotOptions): Promise<Buffer>;
+export declare function screenshot(browser: Browser, options: Partial<ScreenshotOptions> & Record<string, any>): Promise<Buffer>;

package/dist/runtime/browserUtil.mjs

@@ -1,15 +1,24 @@
-export async function screenshot(browser, url, options) {
+export async function screenshot(browser, options) {
   const page = await browser.newPage({
     colorScheme: options.colorScheme
   });
   await page.setViewportSize({
-    width: options.width,
-    height: options.height
-  });
-  await page.goto(url, {
-    timeout: 1e4,
-    waitUntil: "networkidle"
+    width: options.width || 1200,
+    height: options.height || 630
   });
+  if (options.path.startsWith("html:")) {
+    await page.evaluate((html) => {
+      document.open("text/html");
+      document.write(html);
+      document.close();
+    }, options.path.substring(5));
+    await page.waitForLoadState("networkidle");
+  } else {
+    await page.goto(`${options.host}${options.path}`, {
+      timeout: 1e4,
+      waitUntil: "networkidle"
+    });
+  }
   if (options.delay)
     await page.waitForTimeout(options.delay);
   if (options.mask) {

package/dist/runtime/composables/defineOgImage.mjs

@@ -9,6 +9,7 @@ export function defineOgImageScreenshot(options = {}) {
   defineOgImage({
     alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
     provider: "browser",
+    component: null,
     static: true,
     ...options
   });

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

@@ -9,10 +9,16 @@ export default {
     throw new Error("Browser provider can't create VNodes.");
   },
   createPng: async function createPng(basePath, options) {
+    const url = new URL(basePath);
     const createBrowser = await loadBrowser();
     const browser = await createBrowser();
-    if (browser)
-      return screenshot(browser, basePath, options);
+    if (browser) {
+      return screenshot(browser, {
+        ...options,
+        host: url.origin,
+        path: `/api/og-image-html?path=${url.pathname}`
+      });
+    }
     return null;
   }
 };

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

@@ -13,7 +13,7 @@ export default defineEventHandler(async (e) => {
     options = JSON.parse(getQuery(e).options);
   if (!options)
     options = await fetchOptions(e, path);
-  if (options.provider === "browser")
+  if (options.provider === "browser" && !options.component)
     return sendRedirect(e, withBase(path, useHostname(e)));
   const island = await renderIsland(options);
   const head = createHeadCore();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -41,7 +41,7 @@
     "pathe": "^1.1.0",
     "playwright-core": "^1.30.0",
     "radix3": "^1.0.0",
-    "satori": "^0.2.0",
+    "satori": "0.2.0",
     "satori-html": "^0.3.2",
     "sirv": "^2.0.2",
     "std-env": "^3.3.2",
@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.35.1",
-    "@nuxt/devtools-edge": "0.0.0-27925355.bb05ed5",
+    "@nuxt/devtools-edge": "0.0.0-27928010.c91ffe5",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/test-utils": "3.1.2",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",