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

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,7 @@ 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 { fetchOptions, useHostname } from "../utils.mjs";
 import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
@@ -40,11 +41,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 +57,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 +73,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,10 +111,9 @@ 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"
         };
       })
@@ -121,6 +123,6 @@ img.emoji {
   return `<!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>`;
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.43",
+  "version": "2.0.0-beta.45",
   "packageManager": "pnpm@8.6.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -41,6 +41,7 @@
     "globby": "^13.1.4",
     "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",