nuxt-og-image 0.3.4 → 0.4.2

package/README.md

@@ -10,7 +10,7 @@
 
 
 <p align="center">
-Generate social share images for your pre-rendered Nuxt v3 app.
+Generate dynamic social share images for you Nuxt v3 app.
 </p>
 
 <p align="center">
@@ -18,7 +18,7 @@ Generate social share images for your pre-rendered Nuxt v3 app.
 <tbody>
 <td align="center">
 <img width="800" height="0" /><br>
-<i>Status:</i> Early Access</b> <br>
+<i>Status:</i> 🤫 Early Access - Active Development 🤫</b> <br>
 <sup> Please report any issues 🐛</sup><br>
 <sub>Made possible by my <a href="https://github.com/sponsors/harlan-zw">Sponsor Program 💖</a><br> Follow me <a href="https://twitter.com/harlan_zw">@harlan_zw</a> 🐦 • Join <a href="https://discord.gg/275MBUBvgP">Discord</a> for help</sub><br>
 <img width="800" height="0" />
@@ -29,19 +29,33 @@ Generate social share images for your pre-rendered Nuxt v3 app.
 
 ## Features
 
-- 🔄 Configure using route rules
-- 📸 Generates site screenshots
-- 🎨 OR build your own template with Vue (powered by Nuxt islands)
+- 🧙 Generate images for your entire site in minutes with minimal config
+- 🎨 Build your own template with Vue (powered by Nuxt Islands)
+- 📸 OR just generates page screenshots
 
 ## Install
 
+⚠️ This module is still in development. Please get in touch with me over [Twitter](https://twitter.com/harlan_zw) or Discord if you are going to attempt to use this.
+
 ```bash
 npm install --save-dev nuxt-og-image
-
 # Using yarn
 yarn add --dev nuxt-og-image
 ```
 
+### Chromium Dependency
+
+By default, this module does not install chromium binaries for you, instead relying on locally
+installed chrome.
+
+If you want to use this module in a CI or SSR environment, you will need the binaries.
+
+You can either use `puppeteer` or `chrome-aws-lambda`.
+
+```bash
+npm install --save-dev puppeteer # or chrome-aws-lambda
+```
+
 ## Setup
 
 _nuxt.config.ts_
@@ -54,7 +68,29 @@ export default defineNuxtConfig({
 })
 ```
 
-To have routes included for og:image creation automatically, they need to be pre-rendered by Nitro.
+### Add your host name
+
+The `og:image` meta tag requires the full URL, so you must provide your site host.
+
+_nuxt.config.ts_
+
+```ts
+export default defineNuxtConfig({
+  // Recommended 
+  runtimeConfig: {
+    siteUrl: 'https://example.com',
+  },
+  // OR
+  ogImage: {
+    host: 'https://example.com',
+  },
+})
+```
+
+### Pre-render routes
+
+While the module is in early access, you should ensure that you pre-render any pages you want to 
+generate images for.
 
 ```ts
 export default defineNuxtConfig({
@@ -71,38 +107,73 @@ export default defineNuxtConfig({
 })
 ```  
 
-## Default Behaviour
+### Recommended: Enable Nuxt Islands
 
-By default, all pre-rendered routes will generate an og:image of a screenshot of the page.
+To be able to preview the image in development and generate template images, you'll need
+to enable Nuxt Islands.
 
-## Using a template
+If you're using Nuxt 3.0.0, you will need to switch to the [edge-release channel](https://nuxt.com/docs/guide/going-further/edge-channel#edge-release-channel).
 
-You can create your own template to use for generating og:image. This is done with 
-Nuxt islands.
+Once that's done, you can enable the flag for islands.
 
-### Requirements
+_nuxt.config.ts_
 
-To use this feature you will need to opt in to the edge channel, see [the instructions](https://nuxt.com/docs/guide/going-further/edge-channel#edge-release-channel).
+```ts
+export default defineNuxtConfig({
+  experimental: {
+    componentIslands: true
+  },
+})
+```
 
-The `componentIslands` experimental feature is required for this module to work and will is enabled for you.
+## Generating Screenshots
 
-### Setup
+```vue
+<script lang="ts" setup>
+defineOgImageScreenshot()
+</script>
+<template>
+  <div>
+    <!-- Your page / app.vue / layout -->
+  </div>
+</template>
+```
+
+## Generating Template Images
+
+The template image generator is powered by Nuxt Islands. This means that you can use any Vue
+component you want to generate your images.
+
+```vue
+<script lang="ts" setup>
+defineOgImage({
+  component: 'OgImage', // Nuxt Island component
+  // pass in any custom props
+  myCustomTitle: 'My Title'
+})
+</script>
+<template>
+  <div>
+    <!-- Your page / app.vue / layout -->
+  </div>
+</template>
+```
 
-#### Create the Island component
+### Creating your own template
 
-Firstly, you're going to create the Vue component to be used to render the og:image.
+Create a new component with `.island.vue` as the suffix, such as `components/Banner.island.vue`.
 
-Create the file at `components/islands/OgImageDefault.vue`.
+Use the below template to test it works, then modify it how you like.
 
 ```vue
 <script setup lang="ts">
 const props = defineProps({
-  // payload props
+  // these will always be provided
   path: String,
   title: String,
   description: String,
-  // add your own props here
-  myCustomProp: String
+  // anything custom comes here
+  backgroundImage: String
 })
 </script>
 
@@ -125,143 +196,50 @@ const props = defineProps({
   align-items: center;
   justify-content: center;
   color: white;
-  font-weight: bold;
-  font-family: sans-serif;
   background: linear-gradient(to bottom, #30e8bf, #ff8235);
 }
 
 h1 {
   font-size: 4rem;
-  margin: 0;
 }
 </style>
 ```
 
-#### Configure the payload
-
-Within a page 
+Make sure you reference this component when using `defineOgImage` and any props to pass.
 
-### Set host
-
-You'll need to provide the host of your site in order to generate the sitemap.xml.
-
-```ts
-export default defineNuxtConfig({
-  // Recommended 
-  runtimeConfig: {
-    siteUrl: 'https://example.com',
-  },
-  // OR 
-  sitemap: {
-    hostname: 'https://example.com',
-  },
-})
-```
-
-
-## Route Rules
-
-To change the behavior of the sitemap, you can use route rules. Route rules are provided as [Nitro route rules](https://v3.nuxtjs.org/docs/directory-structure/nitro/#route-rules).
-
-_nuxt.config.ts_
-
-```ts
-export default defineNuxtConfig({
-  routeRules: {
-    // Don't add any /secret/** URLs to the sitemap  
-    '/secret/**': { index: false },
-    // modify the sitemap entry for specific URLs
-    '/about': { sitemap: { changefreq: 'daily', priority: 0.3 } }
-  }
+```vue
+<script lang="ts" setup>
+defineOgImage({
+  component: 'Banner', 
+  backgroundImage: 'https://example.com/my-background-image.jpg',
 })
+</script>
 ```
 
-The following options are available for each route rule:
+## Previewing Images
 
-- `index`: Whether to include the route in the sitemap.xml. Defaults to `true`.
-- `sitemap.changefreq`: The change frequency of the route.
-- `sitemap.priority`: The priority of the route. 
+Once you have defined the og:image using the composable, you can preview the image by visiting
+the following URLs:
+- `/your-path/__og-image` Renders the HTML output
+- `/your-path/og-image.png` Renders the og:image
 
 ## Module Config
 
-If you need further control over the sitemap URLs, you can provide config on the `sitemap` key.
-
 ### `host`
 
 - Type: `string`
 - Default: `undefined`
 - Required: `true`
 
-The host of your site. This is required to generate the sitemap.xml.
+The host of your site. This is required to generate the absolute path of the og:image.
 
-### `trailingSlash`
+### `runtimeImages`
 
 - Type: `boolean`
-- Default: `false`
-
-Whether to add a trailing slash to the URLs in the sitemap.xml.
-
-### `enabled`
-
-- Type: `boolean`
-- Default: `true`
-
-Whether to generate the sitemap.xml.
-
-### `include`
-
-- Type: `string[]`
-- Default: `undefined`
-
-Filter routes that match the given rules.
+- Default: `process.dev`
 
-```ts
-export default defineNuxtConfig({
-  sitemap: {
-    include: [
-      '/my-hidden-url'
-    ]
-  }
-})
-```
-
-### `exclude`
-
-- Type: `string[]`
-- Default: `undefined`
-
-Filter routes that match the given rules.
-
-```ts
-export default defineNuxtConfig({
-  sitemap: {
-    exclude: [
-        '/my-secret-section/**'
-    ]
-  }
-})
-```
-
-Additional config extends [sitemap.js](https://github.com/ekalinin/sitemap.js).
-
-## Examples
-
-### Add custom routes without pre-rendering
-
-```ts
-export default defineNuxtConfig({
-  hooks: {
-      'sitemap:generate': (ctx) => {
-          // add custom URLs
-          ctx.urls.push({
-              url: '/my-custom-url',
-              changefreq: 'daily',
-              priority: 0.3
-          })
-      }
-  }
-})
-```
+Allows you to generate images at runtime in production. This uses a headless browser to generate images
+and may have deployment issues.
 
 ## Sponsors
 
@@ -271,6 +249,11 @@ export default defineNuxtConfig({
   </a>
 </p>
 
+## Credits
+
+- Pooya Parsa [Kachick](https://github.com/unjs/kachik)
+- Nuxt Team
+
 
 ## License
 

package/dist/module.d.ts

@@ -25,7 +25,6 @@ declare module 'nitropack' {
 }
 
 interface ModuleOptions extends ScreenshotOptions {
-    defaultIslandComponent: string;
     /**
      * The directory within `public` where the og images will be stored.
      *
@@ -41,10 +40,6 @@ interface ModuleOptions extends ScreenshotOptions {
      */
     runtimeImages: boolean;
 }
-declare const HtmlRendererRoute = "__og_image";
-declare const PayloadScriptId = "nuxt-og-image-payload";
-declare const MetaOgImageContentPlaceholder = "__NUXT_OG_IMAGE_PLACEHOLDER__";
-declare const LinkPrerenderId = "nuxt-og-image-screenshot-path";
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { HtmlRendererRoute, LinkPrerenderId, MetaOgImageContentPlaceholder, ModuleOptions, PayloadScriptId, _default as default };
+export { ModuleOptions, _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -5,19 +5,43 @@ import { hash } from 'ohash';
 import chalk from 'chalk';
 import defu from 'defu';
 import { toRouteMatcher, createRouter } from 'radix3';
-import { withBase } from 'ufo';
+import { withBase, joinURL } from 'ufo';
 import fg from 'fast-glob';
+import { join } from 'pathe';
 
 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
-  });
+  try {
+    const playwrightCore = await import('playwright-core');
+    process.env.AWS_LAMBDA_FUNCTION_NAME = process.env.AWS_LAMBDA_FUNCTION_NAME || "RUNTIME_HACK";
+    const awsChrome = await import(String("chrome-aws-lambda"));
+    return await playwrightCore.chromium.launch({
+      args: awsChrome.args,
+      executablePath: await awsChrome.executablePath,
+      headless: awsChrome.headless
+    });
+  } catch (e) {
+  }
+  try {
+    const playwrightCore = await import('playwright-core');
+    const { Launcher } = await import('chrome-launcher');
+    const chromePath = Launcher.getFirstInstallation();
+    return await playwrightCore.chromium.launch({
+      headless: true,
+      executablePath: chromePath
+    });
+  } catch (e) {
+  }
+  try {
+    const playwright = await import(String("playwright"));
+    return await playwright.chromium.launch({
+      headless: true
+    });
+  } catch (e) {
+    throw new Error(`
+      Missing chromium binary. You need either 'playwright' or 'chrome-aws-lambda'.
+      Please run 'yarn add --dev playwright' or 'npm install --save-dev playwright'
+    `);
+  }
 }
 async function screenshot(browser, url, options) {
   const page = await browser.newPage({
@@ -46,6 +70,15 @@ const HtmlRendererRoute = "__og_image";
 const PayloadScriptId = "nuxt-og-image-payload";
 const MetaOgImageContentPlaceholder = "__NUXT_OG_IMAGE_PLACEHOLDER__";
 const LinkPrerenderId = "nuxt-og-image-screenshot-path";
+const DefaultRuntimeImageSuffix = "og-image.png";
+const Constants = {
+  HtmlRendererRoute,
+  PayloadScriptId,
+  MetaOgImageContentPlaceholder,
+  LinkPrerenderId,
+  DefaultRuntimeImageSuffix
+};
+
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -106,19 +139,32 @@ declare module 'nitropack' {
       filePath: resolve("./runtime/components/OgImage.vue"),
       island: true
     });
+    const runtimeDir = resolve("./runtime");
+    nuxt.options.build.transpile.push(runtimeDir);
+    const constScript = Object.entries(Constants).map(([k, v]) => `export const ${k} = '${v}'`).join("\n");
+    nuxt.options.alias["#nuxt-og-image/constants"] = addTemplate({
+      filename: "nuxt-og-image-constants.mjs",
+      getContents: () => constScript
+    }).dst;
+    nuxt.hooks.hook("nitro:config", (nitroConfig) => {
+      nitroConfig.externals = defu(nitroConfig.externals || {}, {
+        inline: [runtimeDir]
+      });
+      nitroConfig.virtual["#nuxt-og-image/constants"] = constScript;
+    });
     nuxt.hooks.hook("nitro:init", async (nitro) => {
       let entries = [];
       const _routeRulesMatcher = toRouteMatcher(
         createRouter({ routes: nitro.options.routeRules })
       );
-      const outputPath = `${nitro.options.output.dir}/public/${config.outputDir}`;
+      const outputPath = join(nitro.options.output.publicDir, config.outputDir);
       nitro.hooks.hook("prerender:generate", async (ctx) => {
         if (ctx.route.includes(".") || ctx.route.endsWith(HtmlRendererRoute))
           return;
         let html = ctx.contents;
         if (!html)
           return;
-        if (!html.includes('id="nuxt-og-image-payload"'))
+        if (!html.includes(`id="${PayloadScriptId}"`))
           return;
         const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
         if (routeRules.ogImage === false)
@@ -129,8 +175,8 @@ declare module 'nitropack' {
         const entry = {
           fileName,
           absoluteUrl,
-          outputPath: `${nitro.options.output.dir}/public/${config.outputDir}/${fileName}`,
-          linkingHtml: ctx.fileName,
+          outputPath: joinURL(nitro.options.output.publicDir, config.outputDir, fileName),
+          linkingHtml: joinURL(nitro.options.output.publicDir, ctx.fileName),
           route: ctx.route,
           hasPayload: screenshotPath,
           routeRules: routeRules.ogImage || "",
@@ -149,7 +195,8 @@ declare module 'nitropack' {
           await mkdir(outputPath, { recursive: true });
         } catch (e) {
         }
-        const previewProcess = execa("npx", ["serve", `${nitro.options.output.dir}/public`]);
+        const previewProcess = execa("npx", ["serve", nitro.options.output.publicDir]);
+        let browser = null;
         try {
           previewProcess.stderr?.pipe(process.stderr);
           const host = (await new Promise((resolve2) => {
@@ -159,39 +206,42 @@ declare module 'nitropack' {
               }
             });
           })).trim();
-          const browser = await createBrowser();
-          nitro.logger.info(`Generating ${entries.length} og:images...`);
-          try {
+          browser = await createBrowser();
+          if (browser) {
+            nitro.logger.info(`Generating ${entries.length} og:images...`);
             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);
+              let hasError = false;
+              try {
+                const imgBuffer = await screenshot(browser, `${host}${entry.screenshotPath}`, config);
+                await writeFile(entry.outputPath, imgBuffer);
+              } catch (e) {
+                hasError = true;
+                console.error(e);
+              }
               const generateTimeMS = Date.now() - start;
-              nitro.logger.log(chalk.gray(
+              nitro.logger.log(chalk[hasError ? "red" : "gray"](
                 `  ${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) {
-            console.error(e);
-          } finally {
-            await browser.close();
           }
         } catch (e) {
           console.error(e);
         } finally {
+          await browser?.close();
           previewProcess.kill();
         }
-        for (const entry of entries.filter((e) => e.hasPayload)) {
-          const html = await readFile(`${nitro.options.output.dir}/public${entry.linkingHtml}`, "utf-8");
+        for (const entry of entries) {
+          const html = await readFile(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}/public${entry.linkingHtml}`, newHtml, { encoding: "utf-8" });
+            await writeFile(entry.linkingHtml, newHtml, { encoding: "utf-8" });
           }
         }
-        const ogImageFolders = await fg([`**/${HtmlRendererRoute}`], { cwd: nitro.options.output.dir, onlyDirectories: true });
+        const ogImageFolders = await fg([`**/${HtmlRendererRoute}`], { cwd: nitro.options.output.publicDir, onlyDirectories: true });
         for (const ogImageFolder of ogImageFolders)
-          await rm(`${nitro.options.output.dir}/${ogImageFolder}`, { recursive: true, force: true });
+          await rm(join(nitro.options.output.publicDir, ogImageFolder), { recursive: true, force: true });
         entries = [];
       };
       nitro.hooks.hook("rollup:before", async () => {
@@ -204,4 +254,4 @@ declare module 'nitropack' {
   }
 });
 
-export { HtmlRendererRoute, LinkPrerenderId, MetaOgImageContentPlaceholder, PayloadScriptId, module as default };
+export { module as default };

package/dist/runtime/browserService.d.ts

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

package/dist/runtime/browserService.mjs

@@ -0,0 +1,56 @@
+export async function createBrowser() {
+  try {
+    const playwrightCore = await import("playwright-core");
+    process.env.AWS_LAMBDA_FUNCTION_NAME = process.env.AWS_LAMBDA_FUNCTION_NAME || "RUNTIME_HACK";
+    const awsChrome = await import(String("chrome-aws-lambda"));
+    return await playwrightCore.chromium.launch({
+      args: awsChrome.args,
+      executablePath: await awsChrome.executablePath,
+      headless: awsChrome.headless
+    });
+  } catch (e) {
+  }
+  try {
+    const playwrightCore = await import("playwright-core");
+    const { Launcher } = await import("chrome-launcher");
+    const chromePath = Launcher.getFirstInstallation();
+    return await playwrightCore.chromium.launch({
+      headless: true,
+      executablePath: chromePath
+    });
+  } catch (e) {
+  }
+  try {
+    const playwright = await import(String("playwright"));
+    return await playwright.chromium.launch({
+      headless: true
+    });
+  } catch (e) {
+    throw new Error(`
+      Missing chromium binary. You need either 'playwright' or 'chrome-aws-lambda'.
+      Please run 'yarn add --dev playwright' or 'npm install --save-dev playwright'
+    `);
+  }
+}
+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.d.ts

@@ -1,8 +1,3 @@
-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";
 export interface OgImagePayload {
     runtime?: boolean;
     title?: string;

package/dist/runtime/composables/defineOgImage.mjs

@@ -1,10 +1,6 @@
 import { useServerHead } from "@vueuse/head";
 import { useRouter } from "#imports";
-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";
+import { DefaultRuntimeImageSuffix, HtmlRendererRoute, LinkPrerenderId, MetaOgImageContentPlaceholder, PayloadScriptId } from "#nuxt-og-image/constants";
 export function defineOgImageScreenshot() {
   defineOgImage();
 }
@@ -16,7 +12,7 @@ export function defineOgImage(options = {}) {
       meta: [
         {
           property: "og:image",
-          content: () => options.runtime ? `${route}/${RuntimeImageSuffix}` : MetaOgImageContentPlaceholder
+          content: () => options.runtime ? `${route}/${DefaultRuntimeImageSuffix}` : MetaOgImageContentPlaceholder
         }
       ],
       link: options.component ? [

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

@@ -1,5 +1,3 @@
-export declare const HtmlRendererRoute = "__og_image";
-export declare const PayloadScriptId = "nuxt-og-image-payload";
 export declare const extractOgPayload: (html: string) => any;
 export declare const inferOgPayload: (html: string) => Record<string, any>;
 declare const _default: import("h3").EventHandler<string | undefined>;

package/dist/runtime/nitro/html.mjs

@@ -1,9 +1,8 @@
-import { withoutTrailingSlash, withQuery } from "ufo";
+import { withQuery, withoutTrailingSlash } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, getQuery } from "h3";
-export const HtmlRendererRoute = "__og_image";
-export const PayloadScriptId = "nuxt-og-image-payload";
+import { HtmlRendererRoute, PayloadScriptId } from "#nuxt-og-image/constants";
 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,9 +1,3 @@
 /// <reference types="node" />
-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 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,43 +1,10 @@
 import { defineEventHandler, getRequestHeader, setHeader } from "h3";
-export const HtmlRendererRoute = "__og_image";
-export const RuntimeImageSuffix = "og-image.png";
-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();
-}
-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
-  });
-}
+import { createBrowser, screenshot } from "../browserService.mjs";
+import { DefaultRuntimeImageSuffix, HtmlRendererRoute } from "#nuxt-og-image/constants";
 export default defineEventHandler(async (e) => {
-  if (!e.path?.endsWith(RuntimeImageSuffix))
+  if (!e.path?.endsWith(DefaultRuntimeImageSuffix))
     return;
-  const path = e.path.replace(RuntimeImageSuffix, HtmlRendererRoute);
+  const path = e.path.replace(DefaultRuntimeImageSuffix, HtmlRendererRoute);
   const host = getRequestHeader(e, "host") || "localhost:3000";
   const browser = await createBrowser();
   setHeader(e, "Content-Type", "image/png");

package/dist/types.d.ts

@@ -7,4 +7,4 @@ declare module '@nuxt/schema' {
 }
 
 
-export { HtmlRendererRoute, LinkPrerenderId, MetaOgImageContentPlaceholder, ModuleOptions, PayloadScriptId, default } from './module'
+export { ModuleOptions, default } from './module'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "0.3.4",
+  "version": "0.4.2",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -28,21 +28,16 @@
   "dependencies": {
     "@nuxt/kit": "3.0.0",
     "chalk": "^5.2.0",
-    "chrome-aws-lambda": "^10.1.0",
+    "chrome-launcher": "^0.15.1",
     "defu": "^6.1.1",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.12",
     "ohash": "^1.0.0",
+    "pathe": "^1.0.0",
     "playwright-core": "^1.28.1",
     "radix3": "^1.0.0",
     "ufo": "^1.0.1"
   },
-  "unbuild": {
-    "externals": [
-      "playwright-core",
-      "chrome-aws-lambda"
-    ]
-  },
   "devDependencies": {
     "@antfu/eslint-config": "^0.33.1",
     "@nuxt/kit": "3.0.0",
@@ -52,7 +47,6 @@
     "bumpp": "^8.2.1",
     "eslint": "8.29.0",
     "nuxt": "npm:nuxt3@latest",
-    "pathe": "^1.0.0",
     "puppeteer": "^19.4.0",
     "vitest": "^0.25.5"
   },