nuxt-og-image 0.4.7 → 0.5.0

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.json

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

package/dist/module.mjs

@@ -9,6 +9,11 @@ import { withBase, joinURL } from 'ufo';
 import fg from 'fast-glob';
 import { join } from 'pathe';
 
+const debugBinaryUsage = (s, error) => {
+  if (!process.dev) {
+    console.log(s, error);
+  }
+};
 async function createBrowser() {
   try {
     const playwrightCore = await import('playwright-core');
@@ -20,8 +25,7 @@ async function createBrowser() {
       headless: awsChrome.headless
     });
   } catch (e) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Skipping chrome-aws-lambda", e);
+    debugBinaryUsage("[nuxt-og-image] Skipping chrome-aws-lambda", e);
   }
   try {
     const playwrightCore = await import('playwright-core');
@@ -32,8 +36,7 @@ async function createBrowser() {
       executablePath: chromePath
     });
   } catch (e) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Skipping chrome-launcher", e);
+    debugBinaryUsage("[nuxt-og-image] Skipping chrome-launcher", e);
   }
   try {
     const playwright = await import(String("playwright"));
@@ -42,10 +45,9 @@ async function createBrowser() {
     });
   } catch (e) {
     if (!process.dev)
-      console.log("[nuxt-og-image] Playwright failed", e);
+      debugBinaryUsage("[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'
+      Missing chromium binary. Please run "npx playwright install".
     `);
   }
 }

package/dist/runtime/browserService.mjs

@@ -1,3 +1,8 @@
+const debugBinaryUsage = (s, error) => {
+  if (!process.dev) {
+    console.log(s, error);
+  }
+};
 export async function createBrowser() {
   try {
     const playwrightCore = await import("playwright-core");
@@ -9,8 +14,7 @@ export async function createBrowser() {
       headless: awsChrome.headless
     });
   } catch (e) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Skipping chrome-aws-lambda", e);
+    debugBinaryUsage("[nuxt-og-image] Skipping chrome-aws-lambda", e);
   }
   try {
     const playwrightCore = await import("playwright-core");
@@ -21,8 +25,7 @@ export async function createBrowser() {
       executablePath: chromePath
     });
   } catch (e) {
-    if (!process.dev)
-      console.log("[nuxt-og-image] Skipping chrome-launcher", e);
+    debugBinaryUsage("[nuxt-og-image] Skipping chrome-launcher", e);
   }
   try {
     const playwright = await import(String("playwright"));
@@ -31,10 +34,9 @@ export async function createBrowser() {
     });
   } catch (e) {
     if (!process.dev)
-      console.log("[nuxt-og-image] Playwright failed", e);
+      debugBinaryUsage("[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'
+      Missing chromium binary. Please run "npx playwright install".
     `);
   }
 }

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/package.json

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