nuxt-og-image 0.5.2 → 0.5.4

package/README.md

@@ -34,7 +34,7 @@ Generate dynamic social share images for you Nuxt v3 app.
 - 📸 OR just generate screenshots
 - 📦 Choose your API: Composition or components
 
-⚠️ SSR runtime rendering is experimental. 
+🔨 Edge rendering is coming soon!
 
 ## Install
 
@@ -97,8 +97,7 @@ export default defineNuxtConfig({
 
 ### 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.
+While the module is in early access, only pre-rendered routes are supported.
 
 ```ts
 export default defineNuxtConfig({
@@ -250,7 +249,7 @@ the following URLs:
 
 The host of your site. This is required to generate the absolute path of the og:image.
 
-### `runtimeImages`
+### `serverSideRender`
 
 - Type: `boolean`
 - Default: `process.dev`

package/dist/module.d.ts

@@ -38,7 +38,7 @@ interface ModuleOptions extends ScreenshotOptions {
     /**
      * Are we edge-side rendering images.
      */
-    edgeSideRender: boolean;
+    serverSideRender: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -81,7 +81,7 @@ const module = defineNuxtModule({
       height: 630,
       defaultIslandComponent: "OgImageTemplate",
       outputDir: "_og-images",
-      edgeSideRender: nuxt.options.dev || (process.env.NITRO_PRESET || "").includes("edge")
+      serverSideRender: nuxt.options.dev || (process.env.NITRO_PRESET || "").includes("edge")
     };
   },
   async setup(config, nuxt) {
@@ -107,7 +107,7 @@ declare module 'nitropack' {
       addServerHandler({
         handler: resolve("./runtime/nitro/html")
       });
-      if (config.edgeSideRender) {
+      if (config.serverSideRender) {
         addServerHandler({
           handler: resolve("./runtime/nitro/image")
         });
@@ -147,8 +147,9 @@ declare module 'nitropack' {
       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";
+        ["puppeteer", "bufferutil", "utf-8-validate"].forEach((name) => {
+          nitroConfig.alias[name] = "unenv/runtime/mock/proxy";
+        });
       }
     });
     nuxt.hooks.hook("nitro:init", async (nitro) => {
@@ -243,7 +244,7 @@ declare module 'nitropack' {
         for (const entry of cleanupEntries) {
           try {
             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");
+            const newHtml = html.replace("__OG_IMAGE_SCREENSHOT_ALT", `Web page screenshot of ${entry.route}.`).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(entry.linkingHtml, newHtml, { encoding: "utf-8" });
             }

package/dist/runtime/composables/defineOgImage.mjs

@@ -2,28 +2,33 @@ import { useServerHead } from "@vueuse/head";
 import { useRouter } from "#imports";
 import { DefaultRuntimeImageSuffix, HtmlRendererRoute, LinkPrerenderId, MetaOgImageContentPlaceholder, PayloadScriptId } from "#nuxt-og-image/constants";
 export function defineOgImageScreenshot() {
-  defineOgImage();
+  defineOgImage({
+    alt: "__OG_IMAGE_SCREENSHOT_ALT"
+  });
 }
 export function defineOgImage(options = {}) {
   if (process.server) {
     const router = useRouter();
     const route = router?.currentRoute?.value?.path || "";
+    const meta = [
+      {
+        property: "twitter:card",
+        content: "summary_large_image"
+      },
+      {
+        property: "og:image",
+        content: () => options.runtime ? `${route}/${DefaultRuntimeImageSuffix}` : MetaOgImageContentPlaceholder
+      }
+    ];
+    if (options.alt) {
+      meta.push({
+        property: "og:image:alt",
+        content: options.alt
+      });
+    }
     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 ? [
+      meta,
+      link: !options.runtime && options.component ? [
         {
           id: LinkPrerenderId,
           rel: "prerender",

package/package.json

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