nuxt-og-image 1.0.0-beta.10 → 1.0.0-beta.12

package/README.md

@@ -34,17 +34,10 @@ Enlightened OG Image generation for Nuxt 3.
 
 ## Features
 
-## 🎨 Designer - Satori & Browser
-
 - 🎨 Design your `og:image` in the Og Image Playground with full HMR
-- Dynamically serve on the edge using Satori
-- Prerender static images using Satori or the browser
-
-## Screenshots - Browser
-
-- 📸 OR just generate screenshots
-- ⚙️ Screenshot options to hide elements, wait for animations, and more
-
+- ▲ Blazing fast Satori provider: Tailwind classes, Google fonts, emojis
+- 🤖 Alternative Browser provider for painless, complex templates OR just generate screenshots
+- 📸 Feeling lazy? Just generate screenshots, hide elements, wait for animations, and more
 
 ## Install
 

package/dist/module.d.ts

@@ -39,9 +39,7 @@ interface ModuleOptions {
     host: string;
     defaults: OgImageOptions;
     experimentalNitroBrowser: boolean;
-    satoriFonts: Array<Partial<SatoriOptions['fonts'][number]> & {
-        publicPath: string;
-    }>;
+    fonts: `${string}:${number}`[];
     satoriOptions: Partial<SatoriOptions>;
     forcePrerender: boolean;
 }

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "1.0.0-beta.10"
+  "version": "1.0.0-beta.12"
 }

package/dist/module.mjs

@@ -179,25 +179,14 @@ const module = defineNuxtModule({
         width: 1200,
         height: 630
       },
-      satoriFonts: [
-        {
-          name: "Inter",
-          weight: 400,
-          style: "normal",
-          publicPath: "/inter-latin-ext-400-normal.woff"
-        },
-        {
-          name: "Inter",
-          weight: 700,
-          style: "normal",
-          publicPath: "/inter-latin-ext-700-normal.woff"
-        }
-      ],
+      fonts: [],
       satoriOptions: {}
     };
   },
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
+    if (!config.fonts.length)
+      config.fonts = ["Inter:400", "Inter:700"];
     const distResolve = (p) => {
       const cwd = resolve(".");
       if (cwd.endsWith("/dist"))
@@ -233,6 +222,10 @@ export {}
         handler: resolve(`./runtime/nitro/routes/__og_image__/${type}`)
       });
     });
+    addServerHandler({
+      route: "/api/og-image-font",
+      handler: resolve("./runtime/nitro/routes/__og_image__/font")
+    });
     if (nuxt.options.dev) {
       const playgroundDir = distResolve("./client");
       const {
@@ -274,8 +267,6 @@ export {}
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
         inline: [runtimeDir]
       });
-      nitroConfig.publicAssets = nitroConfig.publicAssets || [];
-      nitroConfig.publicAssets.push({ dir: resolve("./runtime/public"), maxAge: 31536e3 });
       nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/nitro/browsers/${isEdge ? "lambda" : "default"}'`;
       nitroConfig.virtual["#nuxt-og-image/provider"] = `
       import satori from '${runtimeDir}/nitro/providers/satori'

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

@@ -3,12 +3,12 @@ import satori from "satori";
 import { parseURL } from "ufo";
 import { Resvg } from "@resvg/resvg-js";
 import twemoji from "twemoji";
-import { parseFont, walkSatoriTree } from "./utils.mjs";
+import { loadFont, walkSatoriTree } from "./utils.mjs";
 import imageSrc from "./plugins/imageSrc.mjs";
 import twClasses from "./plugins/twClasses.mjs";
 import flex from "./plugins/flex.mjs";
 import emojis from "./plugins/emojis.mjs";
-import { satoriFonts, satoriOptions } from "#nuxt-og-image/config";
+import { fonts, satoriOptions } from "#nuxt-og-image/config";
 export default {
   name: "satori",
   createPng: async function createPng(baseUrl, options) {
@@ -26,8 +26,8 @@ export default {
       ext: ".svg"
     });
     satoriOptions.fonts = satoriOptions.fonts || [];
-    for (const font of satoriFonts)
-      satoriOptions.fonts.push(await parseFont(url, font));
+    for (const font of fonts)
+      satoriOptions.fonts.push(await loadFont(url, font));
     const satoriTree = convertHtmlToSatori(emojiedFont);
     await walkSatoriTree(url, satoriTree, [
       emojis(url),

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

@@ -1,10 +1,5 @@
-import type { SatoriOptions } from 'satori';
 import type { ParsedURL } from 'ufo';
 import type { SatoriTransformer, VNode } from '../../../../types';
-export declare function parseFont(url: ParsedURL, font: SatoriOptions['fonts'][number] & {
-    publicPath?: string;
-}): Promise<import("satori").Font & {
-    publicPath?: string | undefined;
-}>;
+export declare function loadFont(url: ParsedURL, 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/providers/satori/utils.mjs

@@ -1,19 +1,24 @@
-import { fileURLToPath } from "node:url";
-import { promises as fsp } from "node:fs";
-import { dirname, resolve } from "pathe";
-import { withBase } from "ufo";
-import { getAsset } from "#internal/nitro/virtual/public-assets";
-export async function parseFont(url, font) {
-  if (typeof font.publicPath === "string") {
-    const file = getAsset(font.publicPath);
-    if (file) {
-      const serverDir = dirname(fileURLToPath(import.meta.url));
-      font.data = await fsp.readFile(resolve(serverDir, file.path));
-    }
-    if (!font.data)
-      font.data = await (await $fetch(withBase(font.publicPath, `${url.protocol}//${url.host}`))).arrayBuffer();
+import { useStorage } from "#internal/nitro";
+const cachedFonts = {};
+export async function loadFont(url, font) {
+  if (cachedFonts[font])
+    return cachedFonts[font];
+  const [name, weight] = font.split(":");
+  const fontUrl = await $fetch("/api/og-image-font", {
+    query: { name, weight }
+  });
+  let data;
+  const storageKey = `nuxt-og-image:font:${font}`;
+  const hasStoredFont = await useStorage().hasItem(storageKey);
+  if (!hasStoredFont) {
+    data = await $fetch(fontUrl, {
+      responseType: "arrayBuffer"
+    });
+    await useStorage().setItem(storageKey, data);
+  } else {
+    data = await useStorage().getItem(storageKey);
   }
-  return font;
+  return cachedFonts[font] = { name, weight, data, style: "normal" };
 }
 export async function walkSatoriTree(url, node, plugins) {
   if (!node.props?.children)

package/dist/runtime/nitro/routes/__og_image__/font.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/nitro/routes/__og_image__/font.mjs

@@ -0,0 +1,14 @@
+import { getQuery } from "h3";
+import { defineCachedEventHandler } from "#internal/nitro";
+export default defineCachedEventHandler(async (e) => {
+  const { name, weight } = getQuery(e);
+  const css = await await $fetch(`https://fonts.googleapis.com/css2?family=${name || "Inter"}:wght@${weight || 400}`, {
+    headers: {
+      "User-Agent": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
+    }
+  });
+  const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
+  if (!resource)
+    return;
+  return resource[1];
+});

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

@@ -3,7 +3,7 @@ import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, getQuery, sendRedirect } from "h3";
 import { fetchOptions, renderIsland, useHostname } from "../../utils.mjs";
-import { defaults } from "#nuxt-og-image/config";
+import { defaults, fonts } from "#nuxt-og-image/config";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("__og_image__/html"))
@@ -19,7 +19,7 @@ export default defineEventHandler(async (e) => {
   head.push({
     style: [
       {
-        innerHTML: "body { font-family: 'Inter', sans-serif;  }"
+        innerHTML: `body { font-family: '${fonts[0].split(":")[0].replace("+", " ")}', sans-serif;  }`
       },
       scale ? {
         innerHTML: `body {
@@ -58,10 +58,13 @@ img.emoji {
         href: "https://cdn.jsdelivr.net/npm/gardevoir",
         rel: "stylesheet"
       },
-      {
-        href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
-        rel: "stylesheet"
-      }
+      ...fonts.map((font) => {
+        const [name, weight] = font.split(":");
+        return {
+          href: `https://fonts.googleapis.com/css2?family=${name}:wght@${weight}&display=swap`,
+          rel: "stylesheet"
+        };
+      })
     ]
   });
   const headChunk = await renderSSRHead(head);

package/package.json

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