nuxt-og-image 2.0.0-beta.4 → 2.0.0-beta.40

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

@@ -1,29 +1,56 @@
 import { withBase } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
-import { defineEventHandler, getQuery, sendRedirect } from "h3";
-import { fetchOptions, renderIsland, useHostname } from "../utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
+import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
+import { hash } from "ohash";
+import { fetchOptions, useHostname } from "../utils.mjs";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const { fonts, defaults } = useRuntimeConfig()["nuxt-og-image"];
-  const path = getQuery(e).path || "/";
-  const scale = getQuery(e).scale;
-  const mode = getQuery(e).mode || "light";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
+  const scale = query.scale;
+  const mode = query.mode || "light";
   let options;
-  if (getQuery(e).options)
-    options = JSON.parse(getQuery(e).options);
+  if (query.options) {
+    try {
+      options = JSON.parse(query.options);
+    } catch {
+    }
+  }
   if (!options)
     options = await fetchOptions(e, path);
-  if (options.provider === "browser" && !options.component)
-    return sendRedirect(e, withBase(path, useHostname(e)));
-  const island = await renderIsland(options);
+  if (options.provider === "browser" && !options.component) {
+    const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
+    return sendRedirect(e, withBase(pathWithoutBase, useHostname(e)));
+  }
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Nuxt OG Image trying to render an invalid component. Received options ${JSON.stringify(options)}`
+    });
+  }
+  const hashId = hash([options.component, options]);
+  const island = await $fetch(`/__nuxt_island/${options.component}:${hashId}`, {
+    params: {
+      props: JSON.stringify(options)
+    }
+  });
   const head = createHeadCore();
   head.push(island.head);
+  let defaultFontFamily = "sans-serif";
+  const firstFont = fonts[0];
+  if (firstFont) {
+    if (typeof firstFont === "string")
+      defaultFontFamily = firstFont.split(":")[0];
+    else
+      defaultFontFamily = firstFont.name;
+  }
   head.push({
     style: [
       {
         // default font is the first font family
-        innerHTML: `body { font-family: '${fonts[0].split(":")[0].replace("+", " ")}', sans-serif;  }`
+        innerHTML: `body { font-family: '${defaultFontFamily.replace("+", " ")}', sans-serif;  }`
       },
       scale ? {
         innerHTML: `body {
@@ -43,7 +70,18 @@ img.emoji {
    vertical-align: -0.1em;
 }
 `
-      } : {}
+      } : {},
+      ...fonts.filter((font) => typeof font === "object").map((font) => {
+        const { name, weight, path: path2 } = font;
+        return `
+          @font-face {
+            font-family: '${name}';
+            font-style: normal;
+            font-weight: ${weight};
+            src: url('${path2}') format('truetype');
+          }
+          `;
+      })
     ],
     meta: [
       {
@@ -70,7 +108,7 @@ img.emoji {
         rel: "stylesheet"
       },
       // have to add each weight as their own stylesheet
-      ...fonts.map((font) => {
+      ...fonts.filter((font) => typeof font === "string").map((font) => {
         const [name, weight] = font.split(":");
         return {
           href: `https://fonts.googleapis.com/css2?family=${name}:wght@${weight}&display=swap`,

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

@@ -1,17 +1,20 @@
-import { createError, defineEventHandler, getHeaders, getQuery } from "h3";
-import { extractOgImageOptions, useHostname } from "../utils.mjs";
-import { getRouteRules, useRuntimeConfig } from "#internal/nitro";
+import { createError, defineEventHandler, getQuery } from "h3";
+import { withoutBase } from "ufo";
+import { extractOgImageOptions } from "../utils.mjs";
+import { getRouteRules } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const query = getQuery(e);
-  const path = query.path || "/";
-  const fetchOptions = process.dev || process.env.prerender ? {
-    headers: getHeaders(e)
-  } : {
-    baseURL: useHostname(e)
-  };
-  const html = await globalThis.$fetch(path, {
-    ...fetchOptions
-  });
+  const path = withoutBase(query.path || "/", useRuntimeConfig().app.baseURL);
+  let html;
+  try {
+    html = await globalThis.$fetch(path);
+  } catch (err) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Failed to read the path ${path} for og-image extraction. ${err.message}.`
+    });
+  }
   const extractedPayload = extractOgImageOptions(html);
   if (!extractedPayload) {
     throw createError({
@@ -20,8 +23,10 @@ export default defineEventHandler(async (e) => {
     });
   }
   e.node.req.url = path;
+  const oldRouteRules = e.context._nitro.routeRules;
   e.context._nitro.routeRules = void 0;
   const routeRules = getRouteRules(e)?.ogImage;
+  e.context._nitro.routeRules = oldRouteRules;
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
@@ -32,8 +37,6 @@ export default defineEventHandler(async (e) => {
     // use route rules
     ...routeRules || {},
     // use provided data
-    ...extractedPayload,
-    // use query data
-    ...query
+    ...extractedPayload
   };
 });

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

@@ -2,8 +2,10 @@ import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "image/svg+xml");
   const provider = await useProvider(options.provider);

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

@@ -2,8 +2,10 @@ import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "application/json");
   const provider = await useProvider(options.provider);

package/dist/runtime/nitro/util-hostname.d.ts

@@ -0,0 +1,2 @@
+import type { H3Event } from 'h3';
+export declare function useHostname(e: H3Event): string;

package/dist/runtime/nitro/util-hostname.mjs

@@ -0,0 +1,15 @@
+import { getRequestHost, getRequestProtocol } from "h3";
+import { withBase } from "ufo";
+import { useRuntimeConfig } from "#imports";
+export function useHostname(e) {
+  const base = useRuntimeConfig().app.baseURL;
+  let host = getRequestHost(e);
+  if (host === "localhost")
+    host = process.env.NITRO_HOST || process.env.HOST || host;
+  const protocol = getRequestProtocol(e);
+  const useHttp = process.dev || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
+  let port = host.includes(":") ? host.split(":").pop() : false;
+  if ((process.dev || process.env.prerender || host.includes("localhost")) && !port)
+    port = process.env.NITRO_PORT || process.env.PORT;
+  return withBase(base, `http${useHttp ? "" : "s"}://${host.includes(":") ? host.split(":")[0] : host}${port ? `:${port}` : ""}`);
+}

package/dist/runtime/nitro/utils-pure.d.ts

@@ -1,2 +1,3 @@
-export declare function extractOgImageOptions(html: string): false | Record<string, any>;
-export declare function stripOgImageOptions(html: string): string;
+import type { OgImageOptions } from '../../types';
+export declare function decodeHtml(html: string): string;
+export declare function extractOgImageOptions(html: string): OgImageOptions | false;

package/dist/runtime/nitro/utils-pure.mjs

@@ -1,8 +1,12 @@
-function decodeHtmlEntities(obj) {
+export function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
+    return String.fromCharCode(parseInt(int));
+  });
+}
+function decodeObjectHtmlEntities(obj) {
   Object.entries(obj).forEach(([key, value]) => {
-    if (typeof value === "string") {
-      obj[key] = value.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/");
-    }
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
   });
   return obj;
 }
@@ -26,10 +30,7 @@ export function extractOgImageOptions(html) {
       else
         options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
     }
-    return decodeHtmlEntities(options);
+    return decodeObjectHtmlEntities(options);
   }
   return false;
 }
-export function stripOgImageOptions(html) {
-  return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
-}

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

@@ -1,17 +1,15 @@
 /// <reference types="node" />
+import { Buffer } from 'node:buffer';
 import type { H3Event } from 'h3';
 import type { OgImageOptions } from '../../types';
-export declare function wasmLoader(key: any, fallback: string, baseUrl: string): {
-    loaded(): boolean | Promise<any>;
-    load(): Promise<any>;
+export * from './util-hostname';
+export declare function wasmLoader(asyncModuleLoad: Promise<any> | Buffer | string, fallback: string): {
+    load(options: {
+        baseUrl: string;
+    }): Promise<any>;
 };
 export declare function fetchOptions(e: H3Event, path: string): Promise<OgImageOptions>;
 export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
-export declare function renderIsland(payload: OgImageOptions): Promise<{
-    html: string;
-    head: any;
-}>;
-export declare function useHostname(e: H3Event): any;
 export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
 export declare function readPublicAssetBase64(file: string): Promise<string | undefined>;
 export * from './utils-pure';

package/dist/runtime/nitro/utils.mjs

@@ -1,77 +1,80 @@
 import { existsSync, promises as fsp } from "node:fs";
-import { getHeaders, getQuery, getRequestHeader } from "h3";
+import { Buffer } from "node:buffer";
+import { getQuery } from "h3";
 import { join } from "pathe";
-import { useRuntimeConfig } from "#internal/nitro";
-export function wasmLoader(key, fallback, baseUrl) {
+import { prefixStorage } from "unstorage";
+import { useRuntimeConfig, useStorage } from "#imports";
+export * from "./util-hostname.mjs";
+export function wasmLoader(asyncModuleLoad, fallback) {
   let promise;
-  let loaded = false;
+  let wasm;
   return {
-    loaded() {
-      if (loaded)
-        return true;
+    async load(options) {
       if (typeof promise !== "undefined")
         return promise;
-      return false;
-    },
-    async load() {
+      if (wasm)
+        return wasm;
       promise = promise || new Promise(async (resolve) => {
-        let wasm;
         try {
-          wasm = await key;
+          wasm = await asyncModuleLoad;
           if (typeof wasm === "string")
             wasm = void 0;
         } catch (e) {
         }
-        if (!wasm)
-          wasm = await readPublicAsset(fallback);
         if (!wasm) {
-          const url = new URL(baseUrl);
-          wasm = await (await fetch(`${url.origin}${fallback}`)).arrayBuffer();
+          wasm = await readPublicAsset(fallback, "base64");
+          if (wasm)
+            wasm = Buffer.from(wasm, "base64");
+        }
+        if (!wasm) {
+          const url = new URL(options.baseUrl);
+          wasm = await (await globalThis.$fetch(fallback, { baseURL: url.origin })).arrayBuffer();
+          wasm = Buffer.from(wasm);
         }
-        loaded = true;
         resolve(wasm);
       });
       return promise;
     }
   };
 }
-export function fetchOptions(e, path) {
-  const fetchOptions2 = process.dev || process.env.prerender ? {
-    headers: getHeaders(e)
-  } : {
-    baseURL: useHostname(e)
+export async function fetchOptions(e, path) {
+  const { runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
+  const cache = runtimeCacheStorage || process.env.prerender ? prefixStorage(useStorage(), "og-image-cache:options") : false;
+  let options;
+  if (cache && await cache.hasItem(path)) {
+    const cachedValue = await cache.getItem(path);
+    if (cachedValue && cachedValue.value && cachedValue.expiresAt < Date.now())
+      options = cachedValue.value;
+    else
+      await cache.removeItem(path);
+  }
+  if (!options) {
+    options = await globalThis.$fetch("/api/og-image-options", {
+      query: {
+        path
+      },
+      responseType: "json"
+    });
+    if (cache) {
+      await cache.setItem(path, {
+        value: options,
+        expiresAt: Date.now() + (options.static ? 60 * 60 * 1e3 : 5 * 1e3)
+      });
+    }
+  }
+  return {
+    ...options,
+    // use query data
+    ...getQuery(e)
   };
-  return globalThis.$fetch("/api/og-image-options", {
-    query: {
-      ...getQuery(e),
-      path
-    },
-    ...fetchOptions2
-  });
 }
 export function base64ToArrayBuffer(base64) {
   const buffer = Buffer.from(base64, "base64");
   return new Uint8Array(buffer).buffer;
 }
-export function renderIsland(payload) {
-  return globalThis.$fetch(`/__nuxt_island/${payload.component}`, {
-    query: { props: JSON.stringify(payload) }
-  });
-}
-export function useHostname(e) {
-  const config = useRuntimeConfig()["nuxt-og-image"];
-  if (!process.dev && config.siteUrl)
-    return config.siteUrl;
-  const host = getRequestHeader(e, "host") || process.env.NITRO_HOST || process.env.HOST || "localhost";
-  const protocol = getRequestHeader(e, "x-forwarded-proto") || "http";
-  const useHttp = process.env.NODE_ENV === "development" || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
-  const port = host.includes(":") ? host.split(":").pop() : process.env.NITRO_PORT || process.env.PORT;
-  const base = useRuntimeConfig().app.baseURL;
-  return `http${useHttp ? "" : "s"}://${host.includes(":") ? host.split(":")[0] : host}${port ? `:${port}` : ""}${base}`;
-}
-const r = (base, key) => {
+function r(base, key) {
   return join(base, key.replace(/:/g, "/"));
-};
+}
 export async function readPublicAsset(file, encoding) {
   const { assetDirs } = useRuntimeConfig()["nuxt-og-image"];
   for (const assetDir of assetDirs) {

package/dist/types.d.ts

@@ -7,5 +7,11 @@ declare module '@nuxt/schema' {
   interface NuxtHooks extends ModuleHooks {}
 }
 
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['ogImage']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['ogImage']?: ModuleOptions }
+  interface NuxtHooks extends ModuleHooks {}
+}
+
 
 export { ModuleHooks, ModuleOptions, default } from './module'

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.4",
-  "packageManager": "pnpm@7.8.0",
+  "version": "2.0.0-beta.40",
+  "packageManager": "pnpm@8.1.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
   "homepage": "https://github.com/harlan-zw/nuxt-og-image#readme",
@@ -26,45 +26,55 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "3.3.1",
+    "@nuxt/kit": "^3.4.3",
+    "@resvg/resvg-js": "^2.4.1",
+    "@resvg/resvg-wasm": "^2.4.1",
     "@types/fs-extra": "^11.0.1",
-    "birpc": "^0.2.10",
+    "birpc": "^0.2.11",
     "chalk": "^5.2.0",
-    "chrome-launcher": "^0.15.1",
+    "chrome-launcher": "^0.15.2",
     "defu": "^6.1.2",
     "execa": "^7.1.1",
     "fast-glob": "^3.2.12",
     "flatted": "^3.2.7",
     "fs-extra": "^11.1.1",
+    "globby": "^13.1.4",
     "launch-editor": "^2.6.0",
-    "ohash": "^1.0.0",
+    "nuxt-icon": "^0.4.0",
+    "nypm": "^0.2.0",
+    "ofetch": "^1.0.1",
+    "ohash": "^1.1.2",
     "pathe": "^1.1.0",
-    "playwright-core": "^1.31.2",
-    "radix3": "^1.0.0",
-    "satori": "0.4.4",
+    "playwright-core": "^1.33.0",
+    "radix3": "^1.0.1",
+    "satori": "0.7.4",
     "satori-html": "^0.3.2",
-    "sirv": "^2.0.2",
-    "std-env": "^3.3.2",
+    "sirv": "^2.0.3",
+    "std-env": "^3.3.3",
     "svg2png-wasm": "^1.3.4",
     "tinyws": "^0.1.0",
     "twemoji": "^14.0.2",
-    "ufo": "^1.1.1",
+    "ufo": "^1.1.2",
     "ws": "^8.13.0",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.37.0",
-    "@nuxt/devtools-edge": "0.2.5-27992993.59d3c52",
-    "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/test-utils": "3.3.1",
+    "@antfu/eslint-config": "^0.38.6",
+    "@nuxt/devtools-edge": "0.4.5-28053684.ddd2e41",
+    "@nuxt/module-builder": "^0.3.1",
+    "@nuxt/test-utils": "3.4.3",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/ws": "^8.5.4",
-    "bumpp": "^9.0.0",
-    "eslint": "8.36.0",
+    "bumpp": "^9.1.0",
+    "eslint": "8.40.0",
     "jest-image-snapshot": "^6.1.0",
-    "nuxt": "^3.3.1",
-    "puppeteer": "^19.7.5",
-    "vitest": "^0.29.7"
+    "nuxt": "^3.4.3",
+    "vitest": "^0.31.0"
+  },
+  "resolutions": {
+    "nitropack": "npm:nitropack-edge@2.4.0-28027501.1cf01bf",
+    "unstorage": "^1.5.0",
+    "unenv": "^1.4.1"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",
@@ -75,6 +85,6 @@
     "dev:build": "nuxi build .playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare .playground",
     "release": "bumpp package.json --commit --push --tag",
-    "test": "pnpm lint"
+    "test": "vitest"
   }
 }

package/dist/client/_nuxt/IconCSS.a041aca0.js

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

package/dist/client/_nuxt/ImageLoader.9bf39d71.js

@@ -1 +0,0 @@
-import{a as m,r as c,m as u,w as r,f as d,s as _,o as f,h as g,i as y,j as v}from"./entry.74018bda.js";const h=m({__name:"ImageLoader",props:{src:String,aspectRatio:Number,description:String},setup(a){const s=a,n=c(),o=c(0);function i(e){const t=n.value,p=Date.now();t.src="",o.value=0,t.style.opacity="0",t.onload=()=>{t.style.opacity="1",o.value=Date.now()-p},t.src=e}u(()=>{r(()=>s.src,e=>{i(e)},{immediate:!0})});const l=d(()=>s.description.replace("%s",o.value.toString()));return r(l,e=>{_.value=e}),(e,t)=>(f(),g("img",{ref_key:"image",ref:n,class:"max-h-full border-1 border-light-500 rounded",style:y({aspectRatio:a.aspectRatio})},null,4))}}),x=v(h,[["__scopeId","data-v-23ec6856"]]);export{x as _};