nuxt-og-image 0.4.7 → 0.5.2

package/README.md

@@ -18,7 +18,7 @@ Generate dynamic social share images for you Nuxt v3 app.
 <tbody>
 <td align="center">
 <img width="800" height="0" /><br>
-<i>Status:</i> 🤫 Early Access - Active Development 🤫</b> <br>
+<i>Status:</i> Early Access</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,32 +29,39 @@ Generate dynamic social share images for you Nuxt v3 app.
 
 ## Features
 
-- 🧙 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
-- 📦 Composable and component API
+- 🧙 Pre-render `og:image`'s for your entire site in minutes with minimal config
+- 🎨 Using a Vue component (powered by Nuxt Islands)
+- 📸 OR just generate screenshots
+- 📦 Choose your API: Composition or components
+
+⚠️ SSR runtime rendering is experimental. 
 
 ## 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.
+⚠️ This module is in early access. Please report any issues you find.
 
 ```bash
+# Install module
 npm install --save-dev nuxt-og-image
 # Using yarn
 yarn add --dev nuxt-og-image
 ```
 
-### Chromium Dependency
+If you don't have a chromium binary installed on your system, run `npx playwright install`.
 
-By default, this module does not install chromium binaries for you, instead relying on locally
-installed chrome.
+### CI Build
 
-If you want to use this module in a CI or SSR environment, you will need the binaries.
+If you are using this module in a CI context and the images aren't being generated,
+you should replace your build script with the following:
 
-You can either use `puppeteer` or `chrome-aws-lambda`.
+_package.json_
 
-```bash
-npm install --save-dev puppeteer # or chrome-aws-lambda
+```json
+{
+  "scripts": {
+    "build": "npx playwright install && nuxt build"
+  }
+}
 ```
 
 ## Setup
@@ -108,25 +115,6 @@ export default defineNuxtConfig({
 })
 ```  
 
-### Recommended: Enable Nuxt Islands
-
-To be able to preview the image in development and generate template images, you'll need
-to enable Nuxt Islands.
-
-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).
-
-Once that's done, you can enable the flag for islands.
-
-_nuxt.config.ts_
-
-```ts
-export default defineNuxtConfig({
-  experimental: {
-    componentIslands: true
-  },
-})
-```
-
 ## Generating Screenshots
 
 _Your page / app.vue / layout_
@@ -156,6 +144,7 @@ _Your page / app.vue / layout_
 // Choose either Composition API
 defineOgImage({
   component: 'OgImageTemplate', // Nuxt Island component
+  alt: 'My awesome image', // alt text for image
   // pass in any custom props
   myCustomTitle: 'My Title'
 })
@@ -168,6 +157,25 @@ defineOgImage({
 </template>
 ```
 
+### Requirements
+
+To be able to preview the image in development and generate template images, you'll need
+to enable Nuxt Islands.
+
+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).
+
+Once that's done, you can enable the flag for islands.
+
+_nuxt.config.ts_
+
+```ts
+export default defineNuxtConfig({
+  experimental: {
+    componentIslands: true
+  },
+})
+```
+
 ### Creating your own template
 
 Create a new component with `.island.vue` as the suffix, such as `components/Banner.island.vue`.
@@ -250,6 +258,9 @@ The host of your site. This is required to generate the absolute path of the og:
 Allows you to generate images at runtime in production. This uses a headless browser to generate images
 and may have deployment issues.
 
+⚠️ This is experimental and will likely not work in all environments.
+
+
 ## Examples
 
 - [Unhead Docs](https://github.com/unjs/unhead/tree/main/docs)

package/dist/module.d.ts

@@ -36,9 +36,9 @@ interface ModuleOptions extends ScreenshotOptions {
      */
     host: string;
     /**
-     * Should images be allowed to generated at runtime.
+     * Are we edge-side rendering images.
      */
-    runtimeImages: boolean;
+    edgeSideRender: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "0.4.7"
+  "version": "0.5.2"
 }

package/dist/module.mjs

@@ -11,29 +11,14 @@ import { join } from 'pathe';
 
 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) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Skipping chrome-aws-lambda", e);
-  }
-  try {
-    const playwrightCore = await import('playwright-core');
-    const { Launcher } = await import('chrome-launcher');
+    const playwrightCore = await import(String("playwright-core"));
+    const { Launcher } = await import(String("chrome-launcher"));
     const chromePath = Launcher.getFirstInstallation();
     return await playwrightCore.chromium.launch({
       headless: true,
       executablePath: chromePath
     });
   } catch (e) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Skipping chrome-launcher", e);
   }
   try {
     const playwright = await import(String("playwright"));
@@ -41,14 +26,9 @@ async function createBrowser() {
       headless: true
     });
   } catch (e) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Playwright failed", 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({
     colorScheme: options.colorScheme
@@ -101,12 +81,13 @@ const module = defineNuxtModule({
       height: 630,
       defaultIslandComponent: "OgImageTemplate",
       outputDir: "_og-images",
-      runtimeImages: nuxt.options.dev
+      edgeSideRender: nuxt.options.dev || (process.env.NITRO_PRESET || "").includes("edge")
     };
   },
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     nuxt.options.experimental.componentIslands = true;
+    const isEdge = (process.env.NITRO_PRESET || "").includes("edge");
     addTemplate({
       filename: "nuxt-og-image.d.ts",
       getContents: () => {
@@ -126,7 +107,7 @@ declare module 'nitropack' {
       addServerHandler({
         handler: resolve("./runtime/nitro/html")
       });
-      if (config.runtimeImages) {
+      if (config.edgeSideRender) {
         addServerHandler({
           handler: resolve("./runtime/nitro/image")
         });
@@ -164,6 +145,11 @@ declare module 'nitropack' {
         inline: [runtimeDir]
       });
       nitroConfig.virtual["#nuxt-og-image/constants"] = constScript;
+      nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/browsers/${isEdge ? "lambda" : "default"}'`;
+      if (isEdge) {
+        nitroConfig.alias.puppeteer = "unenv/runtime/mock/proxy-cjs";
+        nitroConfig.alias.ws = "unenv/runtime/mock/proxy-cjs";
+      }
     });
     nuxt.hooks.hook("nitro:init", async (nitro) => {
       let entries = [];

package/dist/runtime/{browserService.d.ts → browserUtil.d.ts}

@@ -1,5 +1,4 @@
 /// <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/browserUtil.mjs

@@ -0,0 +1,22 @@
+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/browsers/default.d.ts

@@ -0,0 +1 @@
+export declare function createBrowser(): Promise<any>;

package/dist/runtime/browsers/default.mjs

@@ -0,0 +1,19 @@
+export async function createBrowser() {
+  try {
+    const playwrightCore = await import(String("playwright-core"));
+    const { Launcher } = await import(String("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) {
+  }
+}

package/dist/runtime/browsers/lambda.d.ts

@@ -0,0 +1 @@
+export declare function createBrowser(): Promise<import("puppeteer-core").Browser>;

package/dist/runtime/browsers/lambda.mjs

@@ -0,0 +1,9 @@
+import edgeChromium from "chrome-aws-lambda";
+import puppeteer from "puppeteer-core";
+export async function createBrowser() {
+  return puppeteer.launch({
+    args: edgeChromium.args,
+    executablePath: await edgeChromium.executablePath,
+    headless: true
+  });
+}

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

@@ -3,6 +3,7 @@ export interface OgImagePayload {
     title?: string;
     description?: string;
     component?: string;
+    alt?: string;
     [key: string]: any;
 }
 export declare function defineOgImageScreenshot(): void;

package/dist/runtime/composables/defineOgImage.mjs

@@ -10,10 +10,18 @@ export function defineOgImage(options = {}) {
     const route = router?.currentRoute?.value?.path || "";
     useServerHead({
       meta: [
+        {
+          property: "twitter:card",
+          content: "summary_large_image"
+        },
         {
           property: "og:image",
           content: () => options.runtime ? `${route}/${DefaultRuntimeImageSuffix}` : MetaOgImageContentPlaceholder
-        }
+        },
+        options.alt ? {
+          property: "og:image:alt",
+          content: options.alt
+        } : {}
       ],
       link: options.component ? [
         {

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

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

package/dist/runtime/nitro/image.mjs

@@ -1,12 +1,15 @@
-import { defineEventHandler, getRequestHeader, setHeader } from "h3";
-import { createBrowser, screenshot } from "../browserService.mjs";
+import { createError, defineEventHandler, getRequestHeader, setHeader } from "h3";
+import { screenshot } from "../browserUtil.mjs";
 import { DefaultRuntimeImageSuffix, HtmlRendererRoute } from "#nuxt-og-image/constants";
+import { createBrowser } from "#nuxt-og-image/browser";
 export default defineEventHandler(async (e) => {
   if (!e.path?.endsWith(DefaultRuntimeImageSuffix))
     return;
   const path = e.path.replace(DefaultRuntimeImageSuffix, HtmlRendererRoute);
   const host = getRequestHeader(e, "host") || "localhost:3000";
   const browser = await createBrowser();
+  if (!browser)
+    return createError("Could not create browser");
   setHeader(e, "Content-Type", "image/png");
   return await screenshot(browser, `http${host.startsWith("localhost") ? "" : "s"}://${host}/${path}`, {
     width: 1200,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "0.4.7",
+  "version": "0.5.2",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -34,7 +34,6 @@
     "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"
   },
@@ -47,6 +46,7 @@
     "bumpp": "^8.2.1",
     "eslint": "8.29.0",
     "nuxt": "npm:nuxt3@latest",
+    "playwright-core": "^1.28.1",
     "puppeteer": "^19.4.0",
     "vitest": "^0.25.5"
   },

package/dist/runtime/browserService.mjs

@@ -1,62 +0,0 @@
-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) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Skipping chrome-aws-lambda", 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) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Skipping chrome-launcher", e);
-  }
-  try {
-    const playwright = await import(String("playwright"));
-    return await playwright.chromium.launch({
-      headless: true
-    });
-  } catch (e) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Playwright failed", 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();
-}