@ewanc26/og 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -48,33 +48,82 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// ../../node_modules/.pnpm/tsup@8.5.1_jiti@2.6.1_postcss@8.5.8_typescript@5.9.3/node_modules/tsup/assets/cjs_shims.js
+var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.tagName.toUpperCase() === "SCRIPT" ? document.currentScript.src : new URL("main.js", document.baseURI).href;
+var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
+
 // src/generate.ts
 var import_satori = __toESM(require("satori"), 1);
 var import_resvg_js = require("@resvg/resvg-js");
 
 // src/fonts.ts
-var import_promises = require("fs/promises");
+var import_promises2 = require("fs/promises");
 var import_node_fs = require("fs");
+var import_node_path2 = require("path");
+var import_node_url2 = require("url");
+
+// src/fonts-data.ts
+var import_promises = require("fs/promises");
 var import_node_path = require("path");
 var import_node_url = require("url");
 var import_meta = {};
 function getModuleDir() {
-  if (typeof import_meta !== "undefined" && import_meta.url) {
-    return (0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(import_meta.url));
+  if (typeof import_meta !== "undefined" && importMetaUrl) {
+    return (0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(importMetaUrl));
   }
   if (typeof __dirname !== "undefined") {
     return __dirname;
   }
   return (0, import_node_path.resolve)(process.cwd(), "node_modules/@ewanc26/og/dist");
 }
+async function loadEmbeddedFonts() {
+  const moduleDir = getModuleDir();
+  const paths = [
+    {
+      heading: (0, import_node_path.resolve)(moduleDir, "fonts/Inter-Bold.ttf"),
+      body: (0, import_node_path.resolve)(moduleDir, "fonts/Inter-Regular.ttf")
+    },
+    {
+      heading: (0, import_node_path.resolve)(moduleDir, "../fonts/Inter-Bold.ttf"),
+      body: (0, import_node_path.resolve)(moduleDir, "../fonts/Inter-Regular.ttf")
+    }
+  ];
+  for (const p of paths) {
+    try {
+      const [headingBuf, bodyBuf] = await Promise.all([
+        (0, import_promises.readFile)(p.heading),
+        (0, import_promises.readFile)(p.body)
+      ]);
+      return {
+        heading: headingBuf.buffer.slice(headingBuf.byteOffset, headingBuf.byteOffset + headingBuf.byteLength),
+        body: bodyBuf.buffer.slice(bodyBuf.byteOffset, bodyBuf.byteOffset + bodyBuf.byteLength)
+      };
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
+
+// src/fonts.ts
+var import_meta2 = {};
+function getModuleDir2() {
+  if (typeof import_meta2 !== "undefined" && importMetaUrl) {
+    return (0, import_node_path2.dirname)((0, import_node_url2.fileURLToPath)(importMetaUrl));
+  }
+  if (typeof __dirname !== "undefined") {
+    return __dirname;
+  }
+  return (0, import_node_path2.resolve)(process.cwd(), "node_modules/@ewanc26/og/dist");
+}
 function getFontsDir() {
   const candidates = [
     // Standard: fonts next to dist
-    (0, import_node_path.resolve)(getModuleDir(), "../fonts"),
+    (0, import_node_path2.resolve)(getModuleDir2(), "../fonts"),
     // Vercel serverless: fonts inside dist
-    (0, import_node_path.resolve)(getModuleDir(), "fonts"),
+    (0, import_node_path2.resolve)(getModuleDir2(), "fonts"),
     // Fallback: node_modules path
-    (0, import_node_path.resolve)(process.cwd(), "node_modules/@ewanc26/og/fonts")
+    (0, import_node_path2.resolve)(process.cwd(), "node_modules/@ewanc26/og/fonts")
   ];
   for (const dir of candidates) {
     if ((0, import_node_fs.existsSync)(dir)) {
@@ -85,47 +134,35 @@ function getFontsDir() {
 }
 var BUNDLED_FONTS = {
   get heading() {
-    return (0, import_node_path.resolve)(getFontsDir(), "Inter-Bold.ttf");
+    return (0, import_node_path2.resolve)(getFontsDir(), "Inter-Bold.ttf");
   },
   get body() {
-    return (0, import_node_path.resolve)(getFontsDir(), "Inter-Regular.ttf");
+    return (0, import_node_path2.resolve)(getFontsDir(), "Inter-Regular.ttf");
   }
 };
-var FONT_FALLBACKS = {
-  heading: "https://github.com/rsms/inter/raw/refs/heads/main/docs/font-files/Inter-Bold.ttf",
-  body: "https://github.com/rsms/inter/raw/refs/heads/main/docs/font-files/Inter-Regular.ttf"
-};
+function toArrayBuffer(buf) {
+  return buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength);
+}
 async function loadFonts(config) {
   const headingPath = config?.heading ?? BUNDLED_FONTS.heading;
   const bodyPath = config?.body ?? BUNDLED_FONTS.body;
   const [heading, body] = await Promise.all([
-    loadFontFileWithFallback(headingPath, FONT_FALLBACKS.heading),
-    loadFontFileWithFallback(bodyPath, FONT_FALLBACKS.body)
+    loadFontFile(headingPath),
+    loadFontFile(bodyPath)
   ]);
   return { heading, body };
 }
-async function loadFontFileWithFallback(path, fallbackUrl) {
+async function loadFontFile(source) {
   try {
-    return await loadFontFile(path);
+    const buffer = await (0, import_promises2.readFile)(source);
+    return toArrayBuffer(buffer);
   } catch (error) {
-    console.warn(`Failed to load local font at ${path}, trying CDN fallback:`, error);
-    try {
-      return await loadFontFile(fallbackUrl);
-    } catch (fallbackError) {
-      throw new Error(`Failed to load font from both local path (${path}) and CDN (${fallbackUrl}): ${fallbackError}`);
-    }
-  }
-}
-async function loadFontFile(source) {
-  if (source.startsWith("http://") || source.startsWith("https://")) {
-    const response = await fetch(source);
-    if (!response.ok) {
-      throw new Error(`Failed to load font from URL: ${source}`);
+    const embedded = await loadEmbeddedFonts();
+    if (embedded) {
+      return source.includes("Bold") ? embedded.heading : embedded.body;
     }
-    return response.arrayBuffer();
+    throw new Error(`Failed to load font from ${source}`);
   }
-  const buffer = await (0, import_promises.readFile)(source);
-  return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
 }
 function createSatoriFonts(fonts) {
   return [
@@ -270,6 +307,7 @@ function blogTemplate({
   description,
   siteName,
   colors,
+  noiseDataUrl,
   width,
   height
 }) {
@@ -277,6 +315,7 @@ function blogTemplate({
     type: "div",
     props: {
       style: {
+        position: "relative",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -286,51 +325,83 @@ function blogTemplate({
         backgroundColor: colors.background
       },
       children: [
-        {
-          type: "h1",
-          props: {
-            style: {
-              fontSize: 64,
-              fontWeight: 700,
-              color: colors.text,
-              letterSpacing: "-0.02em",
-              margin: 0,
-              textAlign: "center",
-              lineHeight: 1.1,
-              maxWidth: 1e3
-            },
-            children: title
-          }
-        },
-        description ? {
-          type: "p",
+        noiseDataUrl ? {
+          type: "img",
           props: {
+            src: noiseDataUrl,
+            width,
+            height,
             style: {
-              fontSize: 28,
-              fontWeight: 400,
-              color: colors.accent,
-              marginTop: 28,
-              marginBottom: 0,
-              textAlign: "center",
-              lineHeight: 1.4,
-              maxWidth: 900
-            },
-            children: description
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width,
+              height
+            }
           }
         } : null,
         {
-          type: "p",
+          type: "div",
           props: {
             style: {
-              fontSize: 24,
-              fontWeight: 400,
-              color: colors.accent,
-              marginTop: 56,
-              marginBottom: 0,
-              textAlign: "center",
-              opacity: 0.7
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              width,
+              height,
+              padding: "0 60px"
             },
-            children: siteName
+            children: [
+              {
+                type: "h1",
+                props: {
+                  style: {
+                    fontSize: 64,
+                    fontWeight: 700,
+                    color: colors.text,
+                    letterSpacing: "-0.02em",
+                    margin: 0,
+                    textAlign: "center",
+                    lineHeight: 1.1,
+                    maxWidth: 1e3
+                  },
+                  children: title
+                }
+              },
+              description ? {
+                type: "p",
+                props: {
+                  style: {
+                    fontSize: 28,
+                    fontWeight: 400,
+                    color: colors.accent,
+                    marginTop: 28,
+                    marginBottom: 0,
+                    textAlign: "center",
+                    lineHeight: 1.4,
+                    maxWidth: 900
+                  },
+                  children: description
+                }
+              } : null,
+              {
+                type: "p",
+                props: {
+                  style: {
+                    fontSize: 24,
+                    fontWeight: 400,
+                    color: colors.accent,
+                    marginTop: 56,
+                    marginBottom: 0,
+                    textAlign: "center",
+                    opacity: 0.7
+                  },
+                  children: siteName
+                }
+              }
+            ].filter(Boolean)
           }
         }
       ].filter(Boolean)
@@ -345,12 +416,13 @@ function profileTemplate({
   siteName,
   image,
   colors,
+  noiseDataUrl,
   width,
   height
 }) {
-  const children = [];
+  const contentChildren = [];
   if (image) {
-    children.push({
+    contentChildren.push({
       type: "img",
       props: {
         src: image,
@@ -364,7 +436,7 @@ function profileTemplate({
       }
     });
   }
-  children.push({
+  contentChildren.push({
     type: "h1",
     props: {
       style: {
@@ -381,7 +453,7 @@ function profileTemplate({
     }
   });
   if (description) {
-    children.push({
+    contentChildren.push({
       type: "p",
       props: {
         style: {
@@ -398,7 +470,7 @@ function profileTemplate({
       }
     });
   }
-  children.push({
+  contentChildren.push({
     type: "p",
     props: {
       style: {
@@ -417,6 +489,7 @@ function profileTemplate({
     type: "div",
     props: {
       style: {
+        position: "relative",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -425,7 +498,39 @@ function profileTemplate({
         height,
         backgroundColor: colors.background
       },
-      children
+      children: [
+        noiseDataUrl ? {
+          type: "img",
+          props: {
+            src: noiseDataUrl,
+            width,
+            height,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width,
+              height
+            }
+          }
+        } : null,
+        {
+          type: "div",
+          props: {
+            style: {
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              width,
+              height,
+              padding: "0 60px"
+            },
+            children: contentChildren
+          }
+        }
+      ].filter(Boolean)
     }
   };
 }
@@ -436,6 +541,7 @@ function defaultTemplate({
   description,
   siteName,
   colors,
+  noiseDataUrl,
   width,
   height
 }) {
@@ -443,6 +549,7 @@ function defaultTemplate({
     type: "div",
     props: {
       style: {
+        position: "relative",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -452,48 +559,80 @@ function defaultTemplate({
         backgroundColor: colors.background
       },
       children: [
-        {
-          type: "h1",
+        noiseDataUrl ? {
+          type: "img",
           props: {
+            src: noiseDataUrl,
+            width,
+            height,
             style: {
-              fontSize: 72,
-              fontWeight: 700,
-              color: colors.text,
-              letterSpacing: "-0.02em",
-              margin: 0,
-              textAlign: "center"
-            },
-            children: title
-          }
-        },
-        description ? {
-          type: "p",
-          props: {
-            style: {
-              fontSize: 32,
-              fontWeight: 400,
-              color: colors.accent,
-              marginTop: 24,
-              marginBottom: 0,
-              textAlign: "center",
-              maxWidth: 900
-            },
-            children: description
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width,
+              height
+            }
           }
         } : null,
         {
-          type: "p",
+          type: "div",
           props: {
             style: {
-              fontSize: 28,
-              fontWeight: 400,
-              color: colors.accent,
-              marginTop: 64,
-              marginBottom: 0,
-              textAlign: "center",
-              opacity: 0.7
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              width,
+              height,
+              padding: "0 60px"
             },
-            children: siteName
+            children: [
+              {
+                type: "h1",
+                props: {
+                  style: {
+                    fontSize: 72,
+                    fontWeight: 700,
+                    color: colors.text,
+                    letterSpacing: "-0.02em",
+                    margin: 0,
+                    textAlign: "center"
+                  },
+                  children: title
+                }
+              },
+              description ? {
+                type: "p",
+                props: {
+                  style: {
+                    fontSize: 32,
+                    fontWeight: 400,
+                    color: colors.accent,
+                    marginTop: 24,
+                    marginBottom: 0,
+                    textAlign: "center",
+                    maxWidth: 900
+                  },
+                  children: description
+                }
+              } : null,
+              {
+                type: "p",
+                props: {
+                  style: {
+                    fontSize: 28,
+                    fontWeight: 400,
+                    color: colors.accent,
+                    marginTop: 64,
+                    marginBottom: 0,
+                    textAlign: "center",
+                    opacity: 0.7
+                  },
+                  children: siteName
+                }
+              }
+            ].filter(Boolean)
           }
         }
       ].filter(Boolean)
@@ -621,6 +760,8 @@ function createOgEndpoint(options) {
     const description = url.searchParams.get("description") ?? void 0;
     const image = url.searchParams.get("image") ?? void 0;
     const noiseSeed = url.searchParams.get("seed") ?? void 0;
+    const templateParam = url.searchParams.get("template");
+    const resolvedTemplate = templateParam ?? template;
     if (!title) {
       return new Response("Missing title parameter", { status: 400 });
     }
@@ -631,7 +772,7 @@ function createOgEndpoint(options) {
           description,
           siteName,
           image,
-          template,
+          template: resolvedTemplate,
           colors,
           fonts,
           noise,
@@ -642,8 +783,9 @@ function createOgEndpoint(options) {
         cacheMaxAge
       );
     } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
       console.error("Failed to generate OG image:", error);
-      return new Response("Failed to generate image", { status: 500 });
+      return new Response(`Failed to generate image: ${errorMessage}`, { status: 500 });
     }
   };
 }