nuxt-og-image 1.4.9 → 1.4.11

package/README.md

@@ -31,19 +31,20 @@ Enlightened OG Image generation for Nuxt 3.
 
 ℹ️ Looking for a complete SEO solution? Check out [Nuxt SEO Kit](https://github.com/harlan-zw/nuxt-seo-kit).
 
-## Demos
+## Features
 
-- [Vercel Edge Demo](https://nuxt-og-image-playground.vercel.app/)
-- [StackBlitz - Alpine Theme](https://stackblitz.com/edit/github-hgunsf?file=package.json) (visit `/__og_image__`)
+- ✨ Turn your Vue components into `og:image` templates
+- 🎨 Design them in the OG Image Playground with full HMR
+- ▲ Render using [Satori](https://github.com/vercel/satori): Tailwind classes, Google fonts, emoji support and more!
+- 🤖 Or prerender using the Browser: Supporting painless, complex templates
+- 📸 Feeling lazy? Just generate screenshots for every page: hide elements, wait for animations, and more
+- ⚙️ Works on the edge: Vercel Edge and Cloudflare Workers
 
-## Features
+## Demos
 
-- 🎨 Design your `og:image` in the OG Image Playground with full HMR
-- ▲ Blazing fast [Satori](https://github.com/vercel/satori) provider: Tailwind classes, Google fonts, emoji support and more!
-- 🤖 Browser provider: Supporting painless, complex templates
-- ✨ Prerendering enabled for static images
-- 📸 Feeling lazy? Just generate screenshots with options for hiding elements, waiting for animations, and more
-- ⚙️ Satori support in Vercel Edge and Cloudflare Workers
+- [Vercel Edge Demo](https://nuxt-og-image-playground.vercel.app/)
+- [StackBlitz - Minimal Playground Example](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=pages/index.vue)
+- [StackBlitz - Alpine Theme](https://stackblitz.com/edit/github-hgunsf?file=package.json)
 
 ## Install
 

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "1.4.9"
+  "version": "1.4.11"
 }

package/dist/runtime/composables/defineOgImage.mjs

@@ -37,9 +37,13 @@ export function defineOgImage(options = {}) {
       e.res.setHeader("x-nitro-prerender", `${route === "/" ? "" : route}/__og_image__/og.png`);
     const meta = [
       {
-        property: "twitter:card",
+        name: "twitter:card",
         content: "summary_large_image"
       },
+      {
+        name: "twitter:image:src",
+        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, host)
+      },
       {
         property: "og:image",
         content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, host)

package/dist/runtime/nitro/renderers/satori/index.mjs

@@ -10,6 +10,12 @@ import { fonts, satoriOptions } from "#nuxt-og-image/config";
 import loadSvg2png from "#nuxt-og-image/svg2png";
 import loadSatori from "#nuxt-og-image/satori";
 const satoriFonts = [];
+let fontLoadPromise = null;
+function loadFonts(fonts2) {
+  if (fontLoadPromise)
+    return fontLoadPromise;
+  return fontLoadPromise = Promise.all(fonts2.map((font) => loadFont(font)));
+}
 export default {
   name: "satori",
   createPng: async function createPng(baseUrl, options) {
@@ -39,10 +45,8 @@ export default {
   },
   createSvg: async function createSvg(baseUrl, options) {
     const vnodes = await this.createVNode(baseUrl, options);
-    if (!satoriFonts.length) {
-      for (const font of fonts)
-        satoriFonts.push(await loadFont(new URL(baseUrl), font));
-    }
+    if (!satoriFonts.length)
+      satoriFonts.push(...await loadFonts(fonts));
     const satori = await loadSatori();
     return await satori(vnodes, {
       ...satoriOptions,

package/dist/runtime/nitro/renderers/satori/utils.d.ts

@@ -1,5 +1,5 @@
 import type { ParsedURL } from 'ufo';
 import type { SatoriTransformer, VNode } from '../../../../types';
-export declare function loadFont(url: URL, font: string): Promise<any>;
+export declare function loadFont(font: string): Promise<any>;
 export declare function walkSatoriTree(url: ParsedURL, node: VNode, plugins: SatoriTransformer[]): Promise<void>;
 export declare function defineSatoriTransformer(transformer: (url: ParsedURL) => SatoriTransformer): (url: ParsedURL) => SatoriTransformer;

package/dist/runtime/nitro/renderers/satori/utils.mjs

@@ -1,7 +1,7 @@
 import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
 import { useStorage } from "#internal/nitro";
 const cachedFonts = {};
-export async function loadFont(url, font) {
+export async function loadFont(font) {
   if (cachedFonts[font])
     return cachedFonts[font];
   let data;
@@ -14,7 +14,7 @@ export async function loadFont(url, font) {
   if (name === "Inter" && ["400", "700"].includes(weight)) {
     const data2 = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
     if (data2)
-      return cachedFonts[font] = { name: font, data: data2, style: "normal" };
+      return cachedFonts[font] = { name, weight: Number(weight), data: data2, style: "normal" };
   }
   if (!data) {
     const fontUrl = await globalThis.$fetch("/api/og-image-font", {
@@ -25,7 +25,7 @@ export async function loadFont(url, font) {
     });
   }
   await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
-  return cachedFonts[font] = { name, weight, data, style: "normal" };
+  return cachedFonts[font] = { name, weight: Number(weight), data, style: "normal" };
 }
 export async function walkSatoriTree(url, node, plugins) {
   if (!node.props?.children)

package/package.json

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