nuxt-og-image 0.5.4 → 0.6.0

package/README.md

@@ -10,7 +10,7 @@
 
 
 <p align="center">
-Generate dynamic social share images for you Nuxt v3 app.
+Generate dynamic social share images for you Nuxt 3 app.
 </p>
 
 <p align="center">
@@ -27,12 +27,15 @@ Generate dynamic social share images for you Nuxt v3 app.
 </table>
 </p>
 
+ℹ️ Looking for a complete SEO solution? Check out [nuxt-seo-kit](https://github.com/harlan-zw/nuxt-seo-kit).
+
+
 ## Features
 
 - 🧙 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
+- ⚙️ Screenshot options to hide elements, wait for animations, and more
 
 🔨 Edge rendering is coming soon!
 
@@ -52,7 +55,8 @@ If you don't have a chromium binary installed on your system, run `npx playwrigh
 ### CI Build
 
 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 should may need to install a chromium binary. You can do this by running `npx playwright install` or
+`npm install playwright`.
 
 _package.json_
 
@@ -254,11 +258,119 @@ The host of your site. This is required to generate the absolute path of the og:
 - Type: `boolean`
 - Default: `process.dev`
 
-Allows you to generate images at runtime in production. This uses a headless browser to generate images
+It 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.
 
+## Screenshot Options
+
+These can be provided as module options to set defaults
+or set individually on the `OgImageScreenshot` or `OgImage` components or the `defineOgImage` or `defineOgImageScreenshot` composables.
+
+```ts
+// optionally set defaults globally
+export default defineNuxtConfig({
+  ogImage: {
+    colorScheme: 'dark',
+    mask: '.screenshot-hidden'
+  }
+})
+```
+
+### `colorScheme`
+
+- Type: `'dark' | 'light'`
+- Default: `undefined`
+- Required: `false`
+
+The color scheme to use when generating the image. This is useful for generating dark mode images.
+
+```ts
+defineOgImageScreenshot({
+  colorScheme: 'dark'
+})
+```
+
+### `selector`
+
+- Type: `string`
+- Default: `undefined`
+- Required: `false`
+
+The selector to take a screenshot of. This is useful if you want to exclude header / footer elements.
+
+```ts
+defineOgImageScreenshot({
+  mask: '.page-content'
+})
+```
+
+### `mask`
+
+- Type: `string`
+- Default: `undefined`
+- Required: `false`
+
+HTML selectors that should be removed from the image. Useful for removing popup banners or other elements that may be in the way. 
+
+```ts
+defineOgImageScreenshot({
+  mask: '.popup-banner, .cookie-banner'
+})
+```
+
+### `delay`
+
+- Type: `number`
+- Default: `undefined`
+- Required: `false`
+
+The delay to wait before taking the screenshot. This is useful if you want to wait for animations to complete.
+
+```ts
+defineOgImageScreenshot({
+  // wait 2 seconds
+  delay: 2000
+})
+```
+
+### `alt`
+
+- Type: `string`
+- Default: `Web page screenshot of {route}.`
+- Required: `false`
+
+Used to generate the `og:image:alt` meta.
+
+### `width`
+
+- Type: `number`
+- Default: `1200`
+- Required: `true`
+
+The default width of the image. This is useful if you want to generate a specific size image.
+
+```ts
+defineOgImageScreenshot({
+  width: 1500
+})
+```
+
+### `height`
+
+- Type: `number`
+- Default: `630`
+- Required: `true`
+
+The default height of the image. This is useful if you want to generate a specific size image.
+
+```ts
+defineOgImageScreenshot({
+  height: 700
+})
+```
 
 ## Examples
 
@@ -277,7 +389,6 @@ and may have deployment issues.
 - Pooya Parsa [Kachick](https://github.com/unjs/kachik)
 - Nuxt Team
 
-
 ## License
 
-MIT License © 2022-PRESENT [Harlan Wilton](https://github.com/harlan-zw)
+MIT License © 2023-PRESENT [Harlan Wilton](https://github.com/harlan-zw)

package/dist/module.d.ts

@@ -16,6 +16,10 @@ interface ScreenshotOptions {
      * @default 630
      */
     height: number;
+    /**
+     * How long to wait before taking the screenshot. Useful for waiting for animations.
+     */
+    delay?: number;
 }
 declare module 'nitropack' {
     interface NitroRouteRules {

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "0.5.4"
+  "version": "0.6.0"
 }

package/dist/module.mjs

@@ -41,6 +41,8 @@ async function screenshot(browser, url, options) {
     timeout: 1e4,
     waitUntil: "networkidle"
   });
+  if (options.delay)
+    await page.waitForTimeout(options.delay);
   if (options.mask) {
     await page.evaluate((mask) => {
       for (const el of document.querySelectorAll(mask))
@@ -48,7 +50,7 @@ async function screenshot(browser, url, options) {
     }, options.mask);
   }
   if (options.selector)
-    await page.locator(options.selector).screenshot();
+    return await page.locator(options.selector).screenshot();
   return await page.screenshot();
 }
 
@@ -65,6 +67,13 @@ const Constants = {
   DefaultRuntimeImageSuffix
 };
 
+function extractOgPayload(html) {
+  const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
+  if (payload) {
+    return JSON.parse(payload);
+  }
+  return false;
+}
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -179,7 +188,7 @@ declare module 'nitropack' {
           outputPath: joinURL(nitro.options.output.publicDir, config.outputDir, fileName),
           linkingHtml: joinURL(nitro.options.output.publicDir, ctx.fileName),
           route: ctx.route,
-          hasPayload: screenshotPath,
+          payload: extractOgPayload(ctx._contents),
           routeRules: routeRules.ogImage || "",
           screenshotPath: screenshotPath || ctx.route
         };
@@ -215,7 +224,10 @@ declare module 'nitropack' {
               const start = Date.now();
               let hasError = false;
               try {
-                const imgBuffer = await screenshot(browser, `${host}${entry.screenshotPath}`, config);
+                const imgBuffer = await screenshot(browser, `${host}${entry.screenshotPath}`, {
+                  ...config,
+                  ...entry.payload || {}
+                });
                 await writeFile(entry.outputPath, imgBuffer);
               } catch (e) {
                 hasError = true;
@@ -226,6 +238,8 @@ declare module 'nitropack' {
                 `  ${Number(k) === entries.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${config.outputDir}/${entry.fileName} (${generateTimeMS}ms) ${Math.round(Number(k) / (entries.length - 1) * 100)}%`
               ));
             }
+          } else {
+            nitro.logger.log(chalk.red("Failed to create a browser to create og:images."));
           }
         } catch (e) {
           console.error(e);

package/dist/runtime/browserUtil.mjs

@@ -10,6 +10,8 @@ export async function screenshot(browser, url, options) {
     timeout: 1e4,
     waitUntil: "networkidle"
   });
+  if (options.delay)
+    await page.waitForTimeout(options.delay);
   if (options.mask) {
     await page.evaluate((mask) => {
       for (const el of document.querySelectorAll(mask))
@@ -17,6 +19,6 @@ export async function screenshot(browser, url, options) {
     }, options.mask);
   }
   if (options.selector)
-    await page.locator(options.selector).screenshot();
+    return await page.locator(options.selector).screenshot();
   return await page.screenshot();
 }

package/dist/runtime/components/OgImage.d.ts

@@ -1,10 +1,5 @@
-declare const _default: import("vue").DefineComponent<{
-    title?: string | undefined;
-    description?: string | undefined;
-    component?: string | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    title?: string | undefined;
-    description?: string | undefined;
-    component?: string | undefined;
-}>, {}>;
+import type { OgImagePayload } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImagePayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImagePayload>>, {
+    [x: string]: any;
+}>;
 export default _default;

package/dist/runtime/components/OgImageScreenshot.d.ts

@@ -1,10 +1,6 @@
-declare const _default: import("vue").DefineComponent<{
-    title?: string | undefined;
-    description?: string | undefined;
-    component?: string | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    title?: string | undefined;
-    description?: string | undefined;
-    component?: string | undefined;
-}>, {}>;
+import type { OgImageScreenshotPayload } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageScreenshotPayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageScreenshotPayload>>, {
+    [x: string]: any;
+    [x: number]: any;
+}>;
 export default _default;

package/dist/runtime/components/OgImageScreenshot.mjs

@@ -2,8 +2,8 @@ import { defineComponent } from "vue";
 import { defineOgImageScreenshot } from "#imports";
 export default defineComponent({
   name: "OgImageScreenshot",
-  setup() {
-    defineOgImageScreenshot();
+  setup(_, { attrs }) {
+    defineOgImageScreenshot(attrs);
     return () => null;
   }
 });

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

@@ -1,10 +1,3 @@
-export interface OgImagePayload {
-    runtime?: boolean;
-    title?: string;
-    description?: string;
-    component?: string;
-    alt?: string;
-    [key: string]: any;
-}
-export declare function defineOgImageScreenshot(): void;
+import type { OgImagePayload, OgImageScreenshotPayload } from '../../types';
+export declare function defineOgImageScreenshot(options?: OgImageScreenshotPayload): void;
 export declare function defineOgImage(options?: OgImagePayload): void;

package/dist/runtime/composables/defineOgImage.mjs

@@ -1,9 +1,10 @@
 import { useServerHead } from "@vueuse/head";
 import { useRouter } from "#imports";
 import { DefaultRuntimeImageSuffix, HtmlRendererRoute, LinkPrerenderId, MetaOgImageContentPlaceholder, PayloadScriptId } from "#nuxt-og-image/constants";
-export function defineOgImageScreenshot() {
+export function defineOgImageScreenshot(options = {}) {
   defineOgImage({
-    alt: "__OG_IMAGE_SCREENSHOT_ALT"
+    alt: "__OG_IMAGE_SCREENSHOT_ALT",
+    ...options
   });
 }
 export function defineOgImage(options = {}) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -34,21 +34,21 @@
     "fast-glob": "^3.2.12",
     "ohash": "^1.0.0",
     "pathe": "^1.0.0",
+    "playwright-core": "^1.29.1",
     "radix3": "^1.0.0",
     "ufo": "^1.0.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.33.1",
+    "@antfu/eslint-config": "^0.34.0",
     "@nuxt/kit": "3.0.0",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/test-utils": "3.0.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "bumpp": "^8.2.1",
-    "eslint": "8.29.0",
+    "eslint": "8.31.0",
     "nuxt": "npm:nuxt3@latest",
-    "playwright-core": "^1.28.1",
-    "puppeteer": "^19.4.0",
-    "vitest": "^0.25.5"
+    "puppeteer": "^19.4.1",
+    "vitest": "^0.26.3"
   },
   "scripts": {
     "lint": "eslint \"**/*.{ts,vue,json,yml}\"",