nuxt-og-image 0.5.3 → 0.5.5

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.3"
+  "version": "0.5.5"
 }

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")
         });
@@ -226,6 +226,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 browser to create og:images."));
           }
         } catch (e) {
           console.error(e);
@@ -244,7 +246,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.3",
+  "version": "0.5.5",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -29,6 +29,7 @@
     "@nuxt/kit": "3.0.0",
     "chalk": "^5.2.0",
     "chrome-launcher": "^0.15.1",
+    "playwright-core": "^1.28.1",
     "defu": "^6.1.1",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.12",
@@ -46,7 +47,6 @@
     "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"
   },