nuxt-og-image 2.1.3 → 2.2.2

package/dist/runtime/composables/defineOgImage.mjs

@@ -20,7 +20,7 @@ export function defineOgImageStatic(options = {}) {
 export function defineOgImageCached(options = {}) {
   const { defaults } = useRuntimeConfig()["nuxt-og-image"];
   if (!defaults.cacheTtl && !options.cacheTtl)
-    options.cacheTtl = 60 * 60 * 24 * 7;
+    options.cacheTtl = 60 * 60 * 24 * 1e3 * 7;
   return defineOgImage({
     cache: true,
     ...options
@@ -37,7 +37,30 @@ export function defineOgImageDynamic(options = {}) {
   return defineOgImageWithoutCache(options);
 }
 export async function defineOgImage(_options = {}) {
-  if (process.server) {
+  if (import.meta.server) {
+    if (_options.url) {
+      const type = _options.url.endsWith(".png") ? "image/png" : "image/jpeg";
+      const meta2 = [
+        { property: "og:image", content: _options.url },
+        { property: "og:image:type", content: type },
+        { name: "twitter:card", content: "summary_large_image" },
+        { name: "twitter:image:src", content: _options.url }
+      ];
+      if (_options.width) {
+        meta2.push({ property: "og:image:width", content: _options.width });
+        meta2.push({ name: "twitter:image:width", content: _options.width });
+      }
+      if (_options.height) {
+        meta2.push({ property: "og:image:height", content: _options.height });
+        meta2.push({ name: "twitter:image:height", content: _options.height });
+      }
+      if (_options.alt) {
+        meta2.push({ property: "og:image:alt", content: _options.alt });
+        meta2.push({ name: "twitter:image:alt", content: _options.alt });
+      }
+      useServerHead({ meta: meta2 });
+      return;
+    }
     const { defaults } = useRuntimeConfig()["nuxt-og-image"];
     const options = normaliseOgImageOptions(_options);
     const optionsWithDefault = defu(options, defaults);

package/dist/runtime/nitro/middleware/og.png.mjs

@@ -52,8 +52,8 @@ export default defineEventHandler(async (e) => {
     }
   }
   if (png) {
-    if (cacheEnabled) {
-      setHeader(e, "Cache-Control", "public, max-age=31536000");
+    if (cacheEnabled && options.cacheTtl) {
+      setHeader(e, "Cache-Control", `public, max-age=${Math.round(options.cacheTtl / 1e3)}`);
     } else {
       setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
       setHeader(e, "Pragma", "no-cache");

package/dist/runtime/nitro/renderers/browser.mjs

@@ -17,11 +17,15 @@ const BrowserRenderer = {
     let res = null;
     if (browser) {
       try {
-        res = await screenshot(browser, {
-          ...options,
-          host: options.requestOrigin,
-          path: `/api/og-image-html?path=${options.path}`
-        });
+        if (options.html) {
+          res = await screenshot(browser, options);
+        } else {
+          res = await screenshot(browser, {
+            ...options,
+            host: options.requestOrigin,
+            path: `/api/og-image-html?path=${options.path}`
+          });
+        }
       } finally {
         await browser.close();
       }

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

@@ -23,13 +23,13 @@ const SatoriRenderer = {
     return pngCreator(svg, options);
   },
   createVNode: async function createVNode(options) {
-    const html = await globalThis.$fetch("/api/og-image-html", {
+    const html = options.html || await globalThis.$fetch("/api/og-image-html", {
       params: {
         path: options.path,
         options: JSON.stringify(options)
       }
     });
-    const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || "";
+    const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || html;
     const satoriTree = convertHtmlToSatori(body);
     await walkSatoriTree(satoriTree, [
       emojis,

package/dist/runtime/nitro/routes/html.mjs

@@ -59,6 +59,12 @@ export default defineEventHandler(async (e) => {
     });
   } catch (e2) {
   }
+  const googleFonts = {};
+  fonts.filter((font) => !font.path).forEach((font) => {
+    if (!googleFonts[font.name])
+      googleFonts[font.name] = [];
+    googleFonts[font.name].push(font);
+  });
   head.push({
     style: [
       {
@@ -119,9 +125,9 @@ img.emoji {
         rel: "stylesheet"
       },
       // have to add each weight as their own stylesheet
-      ...fonts.filter((font) => !font.path).map((font) => {
+      ...Object.entries(googleFonts).map(([name, fonts2]) => {
         return {
-          href: `https://fonts.googleapis.com/css2?family=${font.name}:wght@${font.weight}&display=swap`,
+          href: `https://fonts.googleapis.com/css2?family=${name}:wght@${fonts2.map((f) => f.weight).join(";")}&display=swap`,
           rel: "stylesheet"
         };
       })

package/dist/runtime/nitro/utils.mjs

@@ -45,7 +45,7 @@ export async function fetchOptionsCached(e, path) {
   ].join(":");
   const { cachedItem, update } = await useNitroCache(e, "nuxt-og-image", {
     key,
-    // allow internal requests to be cached
+    // allow internal requests to be cached for 5 seconds
     cacheTtl: 5 * 1e3,
     cache: !process.dev,
     headers: false

package/dist/runtime/types.d.ts

@@ -25,12 +25,19 @@ export interface ScreenshotOptions {
 }
 export interface OgImageOptions extends Partial<ScreenshotOptions> {
     provider?: 'browser' | 'satori';
+    /**
+     * Provide a static HTML template to render the OG Image instead of a component.
+     */
+    html?: string;
     title?: string;
     description?: string;
     component?: string | null;
     alt?: string;
     cache?: boolean;
     cacheKey?: string;
+    /**
+     * The time to live of the cache in milliseconds.
+     */
     cacheTtl?: number;
     /**
      * @deprecated Use `cache` instead

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.1.3",
-  "packageManager": "pnpm@8.9.0",
+  "version": "2.2.2",
+  "packageManager": "pnpm@8.9.2",
   "description": "Enlightened OG Image generation for Nuxt.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -27,15 +27,16 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "^3.7.4",
-    "@resvg/resvg-js": "^2.4.1",
-    "@resvg/resvg-wasm": "^2.4.1",
-    "@types/fs-extra": "^11.0.2",
+    "@nuxt/kit": "^3.8.0",
+    "@resvg/resvg-js": "^2.6.0",
+    "@resvg/resvg-wasm": "^2.6.0",
+    "@twemoji/api": "^14.0.2",
+    "@types/fs-extra": "^11.0.3",
     "birpc": "0.2.14",
     "chalk": "^5.3.0",
     "chrome-launcher": "^1.1.0",
     "css-inline": "^0.11.0",
-    "defu": "^6.1.2",
+    "defu": "^6.1.3",
     "execa": "^8.0.1",
     "fast-glob": "^3.3.1",
     "flatted": "^3.2.9",
@@ -43,8 +44,8 @@
     "globby": "^13.2.2",
     "image-size": "^1.0.2",
     "launch-editor": "^2.6.1",
-    "nuxt-site-config": "^1.5.4",
-    "nuxt-site-config-kit": "^1.5.4",
+    "nuxt-site-config": "^1.5.5",
+    "nuxt-site-config-kit": "^1.5.5",
     "nypm": "^0.3.3",
     "ofetch": "^1.3.3",
     "ohash": "^1.1.3",
@@ -64,19 +65,19 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "1.0.0-beta.27",
-    "@nuxt/devtools": "1.0.0-beta.1",
+    "@antfu/eslint-config": "1.0.0-beta.29",
+    "@nuxt/devtools": "1.0.0",
     "@nuxt/module-builder": "^0.5.2",
-    "@nuxt/test-utils": "3.7.4",
+    "@nuxt/test-utils": "3.8.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@types/ws": "^8.5.7",
+    "@types/ws": "^8.5.8",
     "bumpp": "^9.2.0",
-    "eslint": "8.51.0",
+    "eslint": "8.52.0",
     "jest-image-snapshot": "^6.2.0",
-    "nuxt": "^3.7.4",
-    "nuxt-icon": "^0.5.0",
+    "nuxt": "^3.8.0",
+    "nuxt-icon": "0.6.1",
     "playwright": "^1.39.0",
-    "sass": "^1.69.3",
+    "sass": "^1.69.5",
     "vitest": "^0.34.6"
   },
   "scripts": {

package/dist/client/_nuxt/IconCSS.3e8abf01.js

@@ -1 +0,0 @@
-import{g as l,H as _,I as d,n as o,o as f,c as m,s as S,_ as g}from"./entry.e59cdd76.js";const x=l({__name:"IconCSS",props:{name:{type:String,required:!0},size:{type:String,default:""}},setup(r){const n=r;_(e=>({"77a740e2":u.value}));const s=d(),p=o(()=>{var e;return((((e=s.nuxtIcon)==null?void 0:e.aliases)||{})[n.name]||n.name).replace(/^i-/,"")}),u=o(()=>`url('https://api.iconify.design/${p.value.replace(":","/")}.svg')`),a=o(()=>{var t,c,i;if(!n.size&&typeof((t=s.nuxtIcon)==null?void 0:t.size)=="boolean"&&!((c=s.nuxtIcon)!=null&&c.size))return;const e=n.size||((i=s.nuxtIcon)==null?void 0:i.size)||"1em";return String(Number(e))===e?`${e}px`:e});return(e,t)=>(f(),m("span",{style:S({width:a.value,height:a.value})},null,4))}});const z=g(x,[["__scopeId","data-v-d83431fd"]]);export{z as default};

package/dist/client/_nuxt/IconCSS.940a18a7.css

@@ -1 +0,0 @@
-span[data-v-d83431fd]{background-color:currentColor;display:inline-block;-webkit-mask-image:var(--77a740e2);mask-image:var(--77a740e2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle}