nuxt-og-image 0.2.0 → 0.3.4

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "0.2.0"
+  "version": "0.3.4"
 }

package/dist/module.mjs

@@ -8,26 +8,15 @@ import { toRouteMatcher, createRouter } from 'radix3';
 import { withBase } from 'ufo';
 import fg from 'fast-glob';
 
-async function createLambdaBrowser() {
-  try {
-    const playwright = await import('playwright-core');
-    const awsChrome = await import('chrome-aws-lambda');
-    return await playwright.chromium.launch({
-      args: awsChrome.args,
-      executablePath: await awsChrome.executablePath,
-      headless: awsChrome.headless
-    });
-  } catch (e) {
-  }
-  return false;
-}
 async function createBrowser() {
-  const lambdaBrowser = await createLambdaBrowser();
-  if (lambdaBrowser)
-    return lambdaBrowser;
-  const playwright = await import('playwright');
+  if (!process.env.AWS_LAMBDA_FUNCTION_NAME)
+    process.env.AWS_LAMBDA_FUNCTION_NAME = "test";
+  const playwright = await import('playwright-core');
+  const awsChrome = await import('chrome-aws-lambda');
   return await playwright.chromium.launch({
-    chromiumSandbox: true
+    args: awsChrome.args,
+    executablePath: await awsChrome.executablePath,
+    headless: awsChrome.headless
   });
 }
 async function screenshot(browser, url, options) {
@@ -108,6 +97,10 @@ declare module 'nitropack' {
       name: "defineOgImage",
       from: resolve("./runtime/composables/defineOgImage")
     });
+    addImports({
+      name: "defineOgImageScreenshot",
+      from: resolve("./runtime/composables/defineOgImage")
+    });
     await addComponent({
       name: "OgImage",
       filePath: resolve("./runtime/components/OgImage.vue"),
@@ -125,6 +118,8 @@ declare module 'nitropack' {
         let html = ctx.contents;
         if (!html)
           return;
+        if (!html.includes('id="nuxt-og-image-payload"'))
+          return;
         const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
         if (routeRules.ogImage === false)
           return;
@@ -165,7 +160,7 @@ declare module 'nitropack' {
             });
           })).trim();
           const browser = await createBrowser();
-          nitro.logger.info(`Generating ${entries.length} og:image screenshots`);
+          nitro.logger.info(`Generating ${entries.length} og:images...`);
           try {
             for (const k in entries) {
               const entry = entries[k];
@@ -174,7 +169,7 @@ declare module 'nitropack' {
               await writeFile(entry.outputPath, imgBuffer);
               const generateTimeMS = Date.now() - start;
               nitro.logger.log(chalk.gray(
-                `  ${Number(k) === entries.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${config.outputDir}/${entry.fileName} (${generateTimeMS}ms)`
+                `  ${Number(k) === entries.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${config.outputDir}/${entry.fileName} (${generateTimeMS}ms) ${Math.round(Number(k) / (entries.length - 1) * 100)}%`
               ));
             }
           } catch (e) {

package/dist/runtime/composables/defineOgImage.d.ts

@@ -10,4 +10,5 @@ export interface OgImagePayload {
     component?: string;
     [key: string]: any;
 }
+export declare function defineOgImageScreenshot(): void;
 export declare function defineOgImage(options?: OgImagePayload): void;

package/dist/runtime/composables/defineOgImage.mjs

@@ -5,21 +5,25 @@ export const RuntimeImageSuffix = "og-image.png";
 export const PayloadScriptId = "nuxt-og-image-payload";
 export const MetaOgImageContentPlaceholder = "__NUXT_OG_IMAGE_PLACEHOLDER__";
 export const LinkPrerenderId = "nuxt-og-image-screenshot-path";
+export function defineOgImageScreenshot() {
+  defineOgImage();
+}
 export function defineOgImage(options = {}) {
   if (process.server) {
     const router = useRouter();
+    const route = router?.currentRoute?.value?.path || "";
     useServerHead({
       meta: [
         {
           property: "og:image",
-          content: () => options.runtime ? `${router.currentRoute.value.path}/${RuntimeImageSuffix}` : MetaOgImageContentPlaceholder
+          content: () => options.runtime ? `${route}/${RuntimeImageSuffix}` : MetaOgImageContentPlaceholder
         }
       ],
       link: options.component ? [
         {
           id: LinkPrerenderId,
           rel: "prerender",
-          href: `${router.currentRoute.value.path}/${HtmlRendererRoute}`
+          href: `${route}/${HtmlRendererRoute}`
         }
       ] : [],
       script: [

package/dist/runtime/nitro/html.mjs

@@ -1,4 +1,4 @@
-import { withQuery } from "ufo";
+import { withoutTrailingSlash, withQuery } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, getQuery } from "h3";
@@ -24,8 +24,8 @@ export const inferOgPayload = (html) => {
 export default defineEventHandler(async (req) => {
   if (!req.path?.endsWith(HtmlRendererRoute))
     return;
-  const path = req.path.replace(`/${HtmlRendererRoute}`, "");
-  const html = await $fetch(path);
+  const path = req.path.replace(HtmlRendererRoute, "");
+  const html = await $fetch(withoutTrailingSlash(path));
   const payload = {
     path,
     title: "Hello World",
@@ -35,7 +35,7 @@ export default defineEventHandler(async (req) => {
     ...inferOgPayload(html),
     ...getQuery(req)
   };
-  const result = await $fetch(withQuery(`/__nuxt_island/${payload.template || "OgImage"}`, {
+  const result = await $fetch(withQuery(`/__nuxt_island/${payload.component || "OgImage"}`, {
     props: JSON.stringify(payload)
   }));
   const head = createHeadCore();

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

@@ -1,9 +1,9 @@
 /// <reference types="node" />
-import type { Browser } from 'playwright';
+import type { Browser } from 'playwright-core';
 import type { ScreenshotOptions } from '../../types';
 export declare const HtmlRendererRoute = "__og_image";
 export declare const RuntimeImageSuffix = "og-image.png";
-export declare function createBrowser(): Promise<Browser>;
 export declare function screenshot(browser: Browser, url: string, options: ScreenshotOptions): Promise<Buffer>;
+export declare function createBrowser(): Promise<Browser>;
 declare const _default: import("h3").EventHandler<Buffer | undefined>;
 export default _default;

package/dist/runtime/nitro/image.mjs

@@ -1,28 +1,6 @@
 import { defineEventHandler, getRequestHeader, setHeader } from "h3";
 export const HtmlRendererRoute = "__og_image";
 export const RuntimeImageSuffix = "og-image.png";
-async function createLambdaBrowser() {
-  try {
-    const playwright = await import("playwright-core");
-    const awsChrome = await import("chrome-aws-lambda");
-    return await playwright.chromium.launch({
-      args: awsChrome.args,
-      executablePath: await awsChrome.executablePath,
-      headless: awsChrome.headless
-    });
-  } catch (e) {
-  }
-  return false;
-}
-export async function createBrowser() {
-  const lambdaBrowser = await createLambdaBrowser();
-  if (lambdaBrowser)
-    return lambdaBrowser;
-  const playwright = await import("playwright");
-  return await playwright.chromium.launch({
-    chromiumSandbox: true
-  });
-}
 export async function screenshot(browser, url, options) {
   const page = await browser.newPage({
     colorScheme: options.colorScheme
@@ -45,6 +23,17 @@ export async function screenshot(browser, url, options) {
     await page.locator(options.selector).screenshot();
   return await page.screenshot();
 }
+export async function createBrowser() {
+  if (!process.env.AWS_LAMBDA_FUNCTION_NAME)
+    process.env.AWS_LAMBDA_FUNCTION_NAME = "test";
+  const playwright = await import("playwright-core");
+  const awsChrome = await import("chrome-aws-lambda");
+  return await playwright.chromium.launch({
+    args: awsChrome.args,
+    executablePath: await awsChrome.executablePath,
+    headless: awsChrome.headless
+  });
+}
 export default defineEventHandler(async (e) => {
   if (!e.path?.endsWith(RuntimeImageSuffix))
     return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.4",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -28,17 +28,17 @@
   "dependencies": {
     "@nuxt/kit": "3.0.0",
     "chalk": "^5.2.0",
+    "chrome-aws-lambda": "^10.1.0",
     "defu": "^6.1.1",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.12",
     "ohash": "^1.0.0",
-    "playwright": "^1.28.1",
+    "playwright-core": "^1.28.1",
     "radix3": "^1.0.0",
     "ufo": "^1.0.1"
   },
   "unbuild": {
     "externals": [
-      "playwright",
       "playwright-core",
       "chrome-aws-lambda"
     ]
@@ -50,12 +50,10 @@
     "@nuxt/test-utils": "3.0.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "bumpp": "^8.2.1",
-    "chrome-aws-lambda": "^10.1.0",
     "eslint": "8.29.0",
     "nuxt": "npm:nuxt3@latest",
     "pathe": "^1.0.0",
-    "playwright-chromium": "^1.28.1",
-    "playwright-core": "^1.28.1",
+    "puppeteer": "^19.4.0",
     "vitest": "^0.25.5"
   },
   "scripts": {