nuxt-og-image 2.0.0-beta.43 → 2.0.0-beta.46

package/dist/runtime/nitro/renderers/satori/plugins/emojis.mjs

@@ -1,13 +1,28 @@
 import { defineSatoriTransformer } from "../utils.mjs";
+function isEmojiFilter(node) {
+  return node.type === "img" && node.props?.class?.includes("emoji");
+}
 export default defineSatoriTransformer(() => {
-  return {
-    filter: (node) => node.type === "img" && node.props?.class?.includes("emoji"),
-    transform: async (node) => {
-      node.props.style = node.props.style || {};
-      node.props.style.height = "1em";
-      node.props.style.width = "1em";
-      node.props.style.margin = "0 .05em 0 .1em";
-      node.props.style.verticalAlign = "0.1em";
+  return [
+    // need to make sure parent div has flex for the emoji to render inline
+    {
+      filter: (node) => node.type === "div" && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
+      transform: async (node) => {
+        node.props.style = node.props.style || {};
+        node.props.style.display = "flex";
+        node.props.style.alignItems = "center";
+      }
+    },
+    {
+      filter: isEmojiFilter,
+      transform: async (node) => {
+        node.props.style = node.props.style || {};
+        node.props.style.height = "1em";
+        node.props.style.width = "1em";
+        node.props.style.margin = "0 .3em 0 .3em";
+        node.props.style.verticalAlign = "0.1em";
+        node.props.class = "";
+      }
     }
-  };
+  ];
 });

package/dist/runtime/nitro/renderers/satori/plugins/encoding.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/flex.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/imageSrc.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

package/dist/runtime/nitro/renderers/satori/plugins/twClasses.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer | import("../../../../../types").SatoriTransformer[];
 export default _default;

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

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

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

@@ -16,7 +16,7 @@ export async function loadFont(baseURL, font) {
   if (!data && name === "Inter" && ["400", "700"].includes(weight)) {
     data = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
   }
-  if (typeof font === "object") {
+  if (font.path) {
     data = await readPublicAsset(font.path);
     if (!data) {
       try {
@@ -49,7 +49,7 @@ export async function walkSatoriTree(url, node, plugins) {
   }
   for (const child of node.props.children || []) {
     if (child) {
-      for (const plugin of plugins) {
+      for (const plugin of plugins.flat()) {
         if (plugin.filter(child))
           await plugin.transform(child);
       }

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

@@ -3,6 +3,8 @@ import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
 import { hash } from "ohash";
+import twemoji from "twemoji";
+import inlineCss from "inline-css";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
@@ -40,11 +42,15 @@ export default defineEventHandler(async (e) => {
   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;
+  if (firstFont)
+    defaultFontFamily = firstFont.name;
+  let html = island.html;
+  try {
+    html = twemoji.parse(html, {
+      folder: "svg",
+      ext: ".svg"
+    });
+  } catch (e2) {
   }
   head.push({
     style: [
@@ -52,9 +58,9 @@ export default defineEventHandler(async (e) => {
         // default font is the first font family
         innerHTML: `body { font-family: '${defaultFontFamily.replace("+", " ")}', sans-serif;  }`
       },
-      scale ? {
+      {
         innerHTML: `body {
-    transform: scale(${scale});
+    transform: scale(${scale || 1});
     transform-origin: top left;
     max-height: 100vh;
     position: relative;
@@ -68,17 +74,15 @@ img.emoji {
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
-}
-`
-      } : {},
-      ...fonts.filter((font) => typeof font === "object").map((font) => {
-        const { name, weight, path: path2 } = font;
+}`
+      },
+      ...fonts.filter((font) => font.path).map((font) => {
         return `
           @font-face {
-            font-family: '${name}';
+            font-family: '${font.name}';
             font-style: normal;
-            font-weight: ${weight};
-            src: url('${path2}') format('truetype');
+            font-weight: ${font.weight};
+            src: url('${font.path}') format('truetype');
           }
           `;
       })
@@ -108,19 +112,44 @@ img.emoji {
         rel: "stylesheet"
       },
       // have to add each weight as their own stylesheet
-      ...fonts.filter((font) => typeof font === "string").map((font) => {
-        const [name, weight] = font.split(":");
+      ...fonts.filter((font) => !font.path).map((font) => {
         return {
-          href: `https://fonts.googleapis.com/css2?family=${name}:wght@${weight}&display=swap`,
+          href: `https://fonts.googleapis.com/css2?family=${font.name}:wght@${font.weight}&display=swap`,
           rel: "stylesheet"
         };
       })
     ]
   });
   const headChunk = await renderSSRHead(head);
-  return `<!DOCTYPE html>
+  let htmlTemplate = `<!DOCTYPE html>
 <html ${headChunk.htmlAttrs}>
 <head>${headChunk.headTags}</head>
-<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="position: relative; display: flex; margin: 0 auto; width: 1200px; height: 630px;">${island.html}</div>${headChunk.bodyTags}</body>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="position: relative; display: flex; margin: 0 auto; width: 1200px; height: 630px;">${html}</div>${headChunk.bodyTags}</body>
 </html>`;
+  const stylesheets = htmlTemplate.match(/<link rel="stylesheet" href=".*">/g);
+  if (stylesheets) {
+    for (const stylesheet of stylesheets) {
+      const href = stylesheet.match(/<link rel="stylesheet" href="(.*)">/)[1];
+      try {
+        if (stylesheet.includes("@nuxt/ui-templates")) {
+          htmlTemplate = htmlTemplate.replace(stylesheet, "");
+        } else {
+          const css = (await (await $fetch(href, {
+            baseURL: useHostname(e)
+          })).text()).replace(/\/\/# sourceMappingURL=.*/, "");
+          htmlTemplate = htmlTemplate.replace(stylesheet, `<style>${css}</style>`);
+        }
+      } catch {
+      }
+    }
+  }
+  try {
+    htmlTemplate = inlineCss(htmlTemplate, {
+      url: useHostname(e),
+      applyLinkTags: false,
+      removeLinkTags: false
+    });
+  } catch {
+  }
+  return htmlTemplate;
 });

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

@@ -1,12 +1,17 @@
 import { getRequestHost, getRequestProtocol } from "h3";
-import { withBase } from "ufo";
+import { withBase, withoutProtocol } 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);
+  let protocol = getRequestProtocol(e);
+  if (process.env.NUXT_VITE_NODE_OPTIONS) {
+    const envHost = JSON.parse(process.env.NUXT_VITE_NODE_OPTIONS).baseURL.replace("__nuxt_vite_node__", "");
+    host = withoutProtocol(envHost);
+    protocol = envHost.includes("https") ? "https" : "http";
+  }
   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)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.43",
+  "version": "2.0.0-beta.46",
   "packageManager": "pnpm@8.6.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -26,7 +26,7 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "^3.5.2",
+    "@nuxt/kit": "^3.5.3",
     "@resvg/resvg-js": "^2.4.1",
     "@resvg/resvg-wasm": "^2.4.1",
     "@types/fs-extra": "^11.0.1",
@@ -39,15 +39,17 @@
     "flatted": "^3.2.7",
     "fs-extra": "^11.1.1",
     "globby": "^13.1.4",
+    "inline-css": "^4.0.2",
     "launch-editor": "^2.6.0",
     "nuxt-icon": "^0.4.1",
+    "nuxt-site-config": "^0.2.1",
     "nypm": "^0.2.0",
     "ofetch": "^1.0.1",
     "ohash": "^1.1.2",
     "pathe": "^1.1.1",
     "playwright-core": "^1.34.3",
     "radix3": "^1.0.1",
-    "satori": "0.9.1",
+    "satori": "0.10.1",
     "satori-html": "^0.3.2",
     "sirv": "^2.0.3",
     "std-env": "^3.3.3",
@@ -59,16 +61,16 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.4",
-    "@nuxt/devtools-edge": "0.5.5-28092324.8333e19",
+    "@antfu/eslint-config": "^0.39.5",
+    "@nuxt/devtools-edge": "0.5.5-28099668.306c6a5",
     "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/test-utils": "3.5.2",
+    "@nuxt/test-utils": "3.5.3",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/ws": "^8.5.4",
-    "bumpp": "^9.1.0",
+    "bumpp": "^9.1.1",
     "eslint": "8.42.0",
     "jest-image-snapshot": "^6.1.0",
-    "nuxt": "^3.5.2",
+    "nuxt": "^3.5.3",
     "vitest": "^0.31.4"
   },
   "resolutions": {