nuxt-og-image 1.3.1 → 1.4.0

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

@@ -0,0 +1,11 @@
+import { defineEventHandler, getQuery, setHeader } from "h3";
+import { withBase } from "ufo";
+import { fetchOptions, useHostname } from "../utils.mjs";
+import { useProvider } from "#nuxt-og-image/provider";
+export default defineEventHandler(async (e) => {
+  const path = getQuery(e).path || "/";
+  const options = await fetchOptions(e, path);
+  setHeader(e, "Content-Type", "image/svg+xml");
+  const provider = await useProvider(options.provider);
+  return provider.createSvg(withBase(path, useHostname(e)), options);
+});

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

@@ -0,0 +1,11 @@
+import { defineEventHandler, getQuery, setHeader } from "h3";
+import { withBase } from "ufo";
+import { fetchOptions, useHostname } from "../utils.mjs";
+import { useProvider } from "#nuxt-og-image/provider";
+export default defineEventHandler(async (e) => {
+  const path = getQuery(e).path || "/";
+  const options = await fetchOptions(e, path);
+  setHeader(e, "Content-Type", "application/json");
+  const provider = await useProvider(options.provider);
+  return provider.createVNode(withBase(path, useHostname(e)), options);
+});

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

@@ -1,8 +1,16 @@
+/// <reference types="node" />
 import type { H3Event } from 'h3';
 import type { OgImageOptions } from '../../types';
-export declare function fetchOptions(path: string): Promise<OgImageOptions>;
+export declare function wasmLoader(key: any, fallback: string, baseUrl: string): {
+    loaded(): Promise<boolean>;
+    load(): 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): string;
+export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
+export declare function readPublicAssetBase64(file: string): Promise<string | undefined>;

package/dist/runtime/nitro/utils.mjs

@@ -1,17 +1,82 @@
-import { joinURL, withQuery } from "ufo";
-import { getRequestHeader } from "h3";
-export function fetchOptions(path) {
-  return $fetch(joinURL(path, "__og_image__/options"));
+import { existsSync, promises as fsp } from "fs";
+import { getQuery, getRequestHeader } from "h3";
+import { join } from "pathe";
+import { assetDirs } from "#nuxt-og-image/config";
+export function wasmLoader(key, fallback, baseUrl) {
+  let promise;
+  let loaded = false;
+  return {
+    async loaded() {
+      if (loaded)
+        return true;
+      if (typeof promise !== "undefined")
+        await promise;
+      return false;
+    },
+    async load() {
+      promise = promise || new Promise(async (resolve) => {
+        let wasm;
+        try {
+          wasm = await key;
+          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();
+        }
+        loaded = true;
+        resolve(wasm);
+      });
+      return promise;
+    }
+  };
+}
+export function fetchOptions(e, path) {
+  return globalThis.$fetch("/api/og-image-options", {
+    query: {
+      ...getQuery(e),
+      path
+    }
+  });
+}
+export function base64ToArrayBuffer(base64) {
+  const buffer = Buffer.from(base64, "base64");
+  return new Uint8Array(buffer).buffer;
 }
 export function renderIsland(payload) {
-  return $fetch(withQuery(`/__nuxt_island/${payload.component}`, {
-    props: JSON.stringify(payload)
-  }));
+  return globalThis.$fetch(`/__nuxt_island/${payload.component}`, {
+    query: { props: JSON.stringify(payload) }
+  });
 }
 export function useHostname(e) {
   const host = getRequestHeader(e, "host") || "localhost:3000";
   const protocol = getRequestHeader(e, "x-forwarded-proto") || "http";
-  if (protocol.startsWith("http"))
-    return `${protocol}://${host}`;
-  return `http${process.env.NODE_ENV === "development" ? "" : "s"}://${host}`;
+  const useHttp = process.env.NODE_ENV === "development" || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
+  return `http${useHttp ? "" : "s"}://${host}`;
+}
+const r = (base, key) => {
+  return join(base, key.replace(/:/g, "/"));
+};
+export async function readPublicAsset(file, encoding) {
+  for (const assetDir of assetDirs) {
+    const path = r(assetDir, file);
+    if (existsSync(path))
+      return await fsp.readFile(path, { encoding });
+  }
+}
+export async function readPublicAssetBase64(file) {
+  const base64 = await readPublicAsset(file, "base64");
+  if (base64) {
+    let type = "image/jpeg";
+    const ext = file.split(".").pop();
+    if (ext === "svg")
+      type = "image/svg+xml";
+    else if (ext === "png")
+      type = "image/png";
+    return `data:${type};base64,${base64}`;
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -43,26 +43,28 @@
     "pathe": "^1.1.0",
     "playwright-core": "^1.30.0",
     "radix3": "^1.0.0",
-    "satori": "^0.1.1",
+    "satori": "^0.1.2",
     "satori-html": "^0.3.2",
     "sirv": "^2.0.2",
     "std-env": "^3.3.1",
+    "svg2png-wasm": "^1.3.4",
     "tinyws": "^0.1.0",
     "twemoji": "^14.0.2",
-    "ufo": "^1.0.1"
+    "ufo": "^1.0.1",
+    "yoga-wasm-web": "^0.3.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.34.1",
-    "@nuxt/devtools-edge": "0.0.0-27912348.8f382d4",
+    "@antfu/eslint-config": "^0.35.1",
+    "@nuxt/devtools-edge": "0.0.0-27920827.b7cf3cc",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/test-utils": "3.1.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/ws": "^8.5.4",
     "bumpp": "^8.2.1",
-    "eslint": "8.32.0",
+    "eslint": "8.33.0",
     "nuxt": "npm:nuxt3@3.1.1-rc.0-27911047.7d812db",
-    "puppeteer": "^19.6.1",
-    "vitest": "^0.28.2"
+    "puppeteer": "^19.6.2",
+    "vitest": "^0.28.3"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",

package/dist/client/_nuxt/ImageLoader.be226b50.js

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