nuxt-og-image 0.0.1 → 0.0.3

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "0.0.1"
+  "version": "0.0.3"
 }

package/dist/module.mjs

@@ -107,7 +107,7 @@ declare module 'nitropack' {
       name: "defineOgImage",
       from: resolve("./runtime/composables/defineOgImage")
     });
-    addComponent({
+    await addComponent({
       name: "OgImage",
       filePath: resolve("./runtime/components/OgImage.vue"),
       island: true
@@ -134,7 +134,9 @@ declare module 'nitropack' {
           fileName,
           absoluteUrl,
           outputPath: `${nitro.options.output.dir}/public/${config.outputDir}/${fileName}`,
+          linkingHtml: ctx.fileName,
           route: ctx.route,
+          hasPayload: screenshotPath,
           routeRules: routeRules.ogImage || "",
           screenshotPath: screenshotPath || ctx.route
         };
@@ -164,21 +166,16 @@ declare module 'nitropack' {
           const browser = await createBrowser();
           nitro.logger.info(`Generating ${entries.length} og:image screenshots`);
           try {
-            const imageGenPromises = entries.map(async (entry, index) => {
-              return new Promise((resolve2) => {
-                const start = Date.now();
-                screenshot(browser, `${host}${entry.screenshotPath}`, config).then((imgBuffer) => {
-                  writeFile(entry.outputPath, imgBuffer).then(() => {
-                    const generateTimeMS = Date.now() - start;
-                    nitro.logger.log(chalk.gray(
-                      `  ${index === entries.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${config.outputDir}/${entry.fileName} (${generateTimeMS}ms)`
-                    ));
-                    resolve2();
-                  });
-                });
-              });
-            });
-            await Promise.all(imageGenPromises);
+            for (const k in entries) {
+              const entry = entries[k];
+              const start = Date.now();
+              const imgBuffer = await screenshot(browser, `${host}${entry.screenshotPath}`, config);
+              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)`
+              ));
+            }
           } catch (e) {
             console.error(e);
           } finally {
@@ -189,12 +186,11 @@ declare module 'nitropack' {
         } finally {
           previewProcess.kill();
         }
-        const htmlFiles = await fg(["**/*.html"], { cwd: nitro.options.output.dir });
-        for (const htmlFile of htmlFiles) {
-          const html = await readFile(`${nitro.options.output.dir}/${htmlFile}`, "utf-8");
+        for (const entry of entries.filter((e) => e.hasPayload)) {
+          const html = await readFile(`${nitro.options.output.dir}/public${entry.linkingHtml}`, "utf-8");
           const newHtml = html.replace(new RegExp(`<link id="${LinkPrerenderId}" rel="prerender" href="(.*?)">`), "").replace(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.*?)<\/script>`), "").replace("\n\n", "\n");
           if (html !== newHtml) {
-            await writeFile(`${nitro.options.output.dir}/${htmlFile}`, newHtml, { encoding: "utf-8" });
+            await writeFile(`${nitro.options.output.dir}/public${entry.linkingHtml}`, newHtml, { encoding: "utf-8" });
           }
         }
         const ogImageFolders = await fg([`**/${HtmlRendererRoute}`], { cwd: nitro.options.output.dir, onlyDirectories: true });

package/dist/runtime/browserService.d.ts

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

package/dist/runtime/browserService.mjs

@@ -0,0 +1,44 @@
+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
+  });
+  await page.setViewportSize({
+    width: options.width,
+    height: options.height
+  });
+  await page.goto(url, {
+    timeout: 1e4,
+    waitUntil: "networkidle"
+  });
+  if (options.mask) {
+    await page.evaluate((mask) => {
+      for (const el of document.querySelectorAll(mask))
+        el.style.display = "none";
+    }, options.mask);
+  }
+  if (options.selector)
+    await page.locator(options.selector).screenshot();
+  return await page.screenshot();
+}

package/dist/runtime/composables/defineOgImage.mjs

@@ -5,7 +5,7 @@ import {
   MetaOgImageContentPlaceholder,
   PayloadScriptId,
   RuntimeImageSuffix
-} from "../../const";
+} from "../const";
 export function defineOgImage(options) {
   if (process.server) {
     const router = useRouter();

package/dist/runtime/const.d.ts

@@ -0,0 +1,5 @@
+export declare const HtmlRendererRoute = "__og_image";
+export declare const RuntimeImageSuffix = "og-image.png";
+export declare const PayloadScriptId = "nuxt-og-image-payload";
+export declare const MetaOgImageContentPlaceholder = "__NUXT_OG_IMAGE_PLACEHOLDER__";
+export declare const LinkPrerenderId = "nuxt-og-image-screenshot-path";

package/dist/runtime/const.mjs

@@ -0,0 +1,5 @@
+export const HtmlRendererRoute = "__og_image";
+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";

package/dist/runtime/nitro/html.mjs

@@ -2,7 +2,7 @@ import { withQuery } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, getQuery } from "h3";
-import { HtmlRendererRoute, PayloadScriptId } from "../../const";
+import { HtmlRendererRoute, PayloadScriptId } from "../const.mjs";
 export const extractOgPayload = (html) => {
   const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
   if (payload) {

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

@@ -1,3 +1,2 @@
-/// <reference types="node" />
-declare const _default: import("h3").EventHandler<Buffer | undefined>;
+declare const _default: import("h3").EventHandler<any>;
 export default _default;

package/dist/runtime/nitro/image.mjs

@@ -1,5 +1,5 @@
 import { defineEventHandler, getRequestHeader, setHeader } from "h3";
-import { HtmlRendererRoute, RuntimeImageSuffix } from "../../const";
+import { HtmlRendererRoute, RuntimeImageSuffix } from "../const.mjs";
 import { createBrowser, screenshot } from "../../browserService";
 export default defineEventHandler(async (e) => {
   if (!e.path?.endsWith(RuntimeImageSuffix))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",