@djangocfg/nextjs 2.1.42 → 2.1.43

package/dist/og-image/index.mjs

@@ -2,312 +2,177 @@
 import { ImageResponse } from "next/og";
 import { NextRequest } from "next/server";
 
-// src/og-image/utils/fonts.ts
-async function loadGoogleFont(font, text, weight = 700) {
-  let url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weight}`;
-  if (text) {
-    url += `&text=${encodeURIComponent(text)}`;
-  }
-  try {
-    const css = await fetch(url, {
-      headers: {
-        // Required to get TTF format instead of WOFF2
-        "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"
-      }
-    }).then((res) => res.text());
-    const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
-    if (!resource || !resource[1]) {
-      throw new Error(`Failed to parse font URL from CSS for font: ${font}`);
-    }
-    const response = await fetch(resource[1]);
-    if (response.status !== 200) {
-      throw new Error(`Failed to fetch font data: HTTP ${response.status}`);
-    }
-    return await response.arrayBuffer();
-  } catch (error) {
-    console.error(`Error loading Google Font "${font}":`, error);
-    throw new Error(`Failed to load font "${font}": ${error instanceof Error ? error.message : "Unknown error"}`);
-  }
-}
-async function loadGoogleFonts(fonts) {
-  const fontConfigs = await Promise.all(
-    fonts.map(async ({ family, weight = 700, style = "normal", text }) => {
-      const data = await loadGoogleFont(family, text, weight);
-      return {
-        name: family,
-        weight,
-        style,
-        data
-      };
-    })
-  );
-  return fontConfigs;
-}
-function createFontLoader() {
-  const cache = /* @__PURE__ */ new Map();
-  return {
-    /**
-     * Load a font with caching
-     */
-    async load(family, weight = 700, text) {
-      const cacheKey = `${family}-${weight}-${text || "all"}`;
-      if (!cache.has(cacheKey)) {
-        cache.set(cacheKey, loadGoogleFont(family, text, weight));
-      }
-      return cache.get(cacheKey);
-    },
-    /**
-     * Clear the cache
-     */
-    clear() {
-      cache.clear();
-    },
-    /**
-     * Get cache size
-     */
-    size() {
-      return cache.size;
-    }
-  };
-}
-
-// src/og-image/utils/url.ts
-var DEFAULT_OG_IMAGE_BASE_URL = "https://djangocfg.com/api/og";
-function encodeBase64(str) {
-  if (typeof Buffer !== "undefined") {
-    return Buffer.from(str, "utf-8").toString("base64");
-  }
-  return btoa(unescape(encodeURIComponent(str)));
-}
-function decodeBase64(str) {
-  if (typeof Buffer !== "undefined") {
-    return Buffer.from(str, "base64").toString("utf-8");
-  }
-  try {
-    const binaryString = atob(str);
-    return decodeURIComponent(
-      binaryString.split("").map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)).join("")
-    );
-  } catch (error) {
-    return decodeURIComponent(escape(atob(str)));
-  }
-}
-function generateOgImageUrl(params, options = {}) {
-  const {
-    baseUrl = DEFAULT_OG_IMAGE_BASE_URL,
-    useBase64 = true
-  } = options;
-  if (useBase64) {
-    const cleanParams = {};
-    Object.entries(params).forEach(([key, value]) => {
-      if (value !== void 0 && value !== null && value !== "") {
-        cleanParams[key] = value;
-      }
-    });
-    const jsonString = JSON.stringify(cleanParams);
-    const base64Data = encodeBase64(jsonString);
-    return `${baseUrl}/${base64Data}`;
-  } else {
-    const searchParams = new URLSearchParams();
-    Object.entries(params).forEach(([key, value]) => {
-      if (value !== void 0 && value !== null && value !== "") {
-        searchParams.append(key, String(value));
-      }
-    });
-    const query = searchParams.toString();
-    return query ? `${baseUrl}?${query}` : baseUrl;
-  }
-}
-function getAbsoluteOgImageUrl(relativePath, siteUrl) {
-  if (relativePath.startsWith("http://") || relativePath.startsWith("https://")) {
-    return relativePath;
-  }
-  const cleanSiteUrl = siteUrl.replace(/\/$/, "");
-  const cleanPath = relativePath.startsWith("/") ? relativePath : `/${relativePath}`;
-  return `${cleanSiteUrl}${cleanPath}`;
-}
-function createOgImageUrlBuilder(defaults = {}, options = {}) {
-  return (params) => {
-    return generateOgImageUrl(
-      { ...defaults, ...params },
-      options
-    );
-  };
-}
-function parseOgImageUrl(url) {
-  try {
-    const urlObj = new URL(url, "http://dummy.com");
-    const params = {};
-    urlObj.searchParams.forEach((value, key) => {
-      params[key] = value;
-    });
-    return params;
-  } catch {
-    return {};
-  }
-}
-function parseOgImageData(searchParams) {
-  try {
-    let params;
-    if (searchParams instanceof URLSearchParams) {
-      params = {};
-      for (const [key, value] of searchParams.entries()) {
-        params[key] = value;
+// src/og-image/components/DefaultTemplate.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DefaultTemplate({
+  title,
+  description,
+  siteName,
+  logo,
+  // Visibility flags
+  showLogo = true,
+  showSiteName = true,
+  // Background customization
+  backgroundType = "gradient",
+  gradientStart = "#667eea",
+  gradientEnd = "#764ba2",
+  backgroundColor = "#ffffff",
+  // Typography - Title
+  titleSize,
+  titleWeight = 800,
+  titleColor = "white",
+  // Typography - Description
+  descriptionSize = 32,
+  descriptionColor = "rgba(255, 255, 255, 0.85)",
+  // Typography - Site Name
+  siteNameSize = 28,
+  siteNameColor = "rgba(255, 255, 255, 0.95)",
+  // Layout
+  padding = 80,
+  logoSize = 48,
+  // Dev mode
+  devMode = false
+}) {
+  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);
+  const backgroundStyle = backgroundType === "gradient" ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : backgroundColor;
+  const gridOverlay = devMode ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundImage: `
+          linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)
+        `,
+        backgroundSize: "20px 20px",
+        pointerEvents: "none",
+        zIndex: 10
       }
-    } else {
-      params = searchParams;
-    }
-    if (process.env.NODE_ENV === "development") {
-      console.log("[parseOgImageData] Input params keys:", Object.keys(params));
-      console.log("[parseOgImageData] Input params:", params);
     }
-    const dataParam = params.data;
-    if (dataParam && typeof dataParam === "string" && dataParam.trim() !== "") {
-      if (process.env.NODE_ENV === "development") {
-        console.log("[parseOgImageData] Found data param, length:", dataParam.length);
-      }
-      try {
-        const decoded = decodeBase64(dataParam);
-        if (process.env.NODE_ENV === "development") {
-          console.log("[parseOgImageData] Decoded string:", decoded.substring(0, 100));
-        }
-        const parsed = JSON.parse(decoded);
-        if (process.env.NODE_ENV === "development") {
-          console.log("[parseOgImageData] Parsed JSON:", parsed);
-        }
-        const result2 = {};
-        for (const [key, value] of Object.entries(parsed)) {
-          if (value !== void 0 && value !== null) {
-            result2[key] = String(value);
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        background: backgroundStyle,
+        padding: `${padding}px`,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        position: "relative"
+      },
+      children: [
+        gridOverlay,
+        (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "16px"
+            },
+            children: [
+              showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: logo,
+                  alt: "Logo",
+                  width: logoSize,
+                  height: logoSize,
+                  style: {
+                    borderRadius: "8px"
+                  }
+                }
+              ),
+              showSiteName && siteName && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: siteNameSize,
+                    fontWeight: 600,
+                    color: siteNameColor,
+                    letterSpacing: "-0.02em"
+                  },
+                  children: siteName
+                }
+              )
+            ]
           }
-        }
-        if (process.env.NODE_ENV === "development") {
-          console.log("[parseOgImageData] Result:", result2);
-        }
-        return result2;
-      } catch (decodeError) {
-        console.error("[parseOgImageData] Error decoding/parsing data param:", decodeError);
-        if (decodeError instanceof Error) {
-          console.error("[parseOgImageData] Error message:", decodeError.message);
-        }
-      }
-    } else {
-      if (process.env.NODE_ENV === "development") {
-        console.log("[parseOgImageData] No data param found or empty");
-      }
-    }
-    const result = {};
-    for (const [key, value] of Object.entries(params)) {
-      if (key !== "data" && value !== void 0 && value !== null) {
-        result[key] = Array.isArray(value) ? value[0] : String(value);
-      }
-    }
-    if (process.env.NODE_ENV === "development") {
-      console.log("[parseOgImageData] Fallback result:", result);
-    }
-    return result;
-  } catch (error) {
-    console.error("[parseOgImageData] Unexpected error:", error);
-    return {};
-  }
-}
-
-// src/og-image/utils/metadata.ts
-function extractTitle(metadata) {
-  if (typeof metadata.title === "string") {
-    return metadata.title;
-  }
-  if (metadata.title) {
-    if ("default" in metadata.title) {
-      return metadata.title.default;
-    }
-    if ("absolute" in metadata.title) {
-      return metadata.title.absolute;
-    }
-  }
-  return "";
-}
-function extractDescription(metadata) {
-  if (typeof metadata.description === "string") {
-    return metadata.description;
-  }
-  return "";
-}
-function getSiteUrl() {
-  if (typeof process !== "undefined" && process.env.NEXT_PUBLIC_SITE_URL) {
-    return process.env.NEXT_PUBLIC_SITE_URL;
-  }
-  return "";
-}
-function generateOgImageMetadata(metadata, ogImageParams, options = {}) {
-  const {
-    ogImageBaseUrl = "https://djangocfg.com/api/og",
-    siteUrl: providedSiteUrl,
-    defaultParams = {},
-    useBase64 = true
-  } = options;
-  const siteUrl = providedSiteUrl && providedSiteUrl !== "undefined" ? providedSiteUrl : getSiteUrl();
-  const extractedTitle = extractTitle(metadata);
-  const extractedDescription = extractDescription(metadata);
-  const finalOgImageParams = {
-    ...defaultParams,
-    title: ogImageParams?.title || extractedTitle || defaultParams.title || "",
-    description: ogImageParams?.description || extractedDescription || defaultParams.description || "",
-    ...ogImageParams
-  };
-  const imageAlt = finalOgImageParams.title || finalOgImageParams.siteName;
-  const relativeOgImageUrl = generateOgImageUrl(
-    finalOgImageParams,
-    { baseUrl: ogImageBaseUrl, useBase64 }
-  );
-  const ogImageUrl = siteUrl ? getAbsoluteOgImageUrl(relativeOgImageUrl, siteUrl) : relativeOgImageUrl;
-  const existingOgImages = metadata.openGraph?.images ? Array.isArray(metadata.openGraph.images) ? metadata.openGraph.images : [metadata.openGraph.images] : [];
-  const existingTwitterImages = metadata.twitter?.images ? Array.isArray(metadata.twitter.images) ? metadata.twitter.images : [metadata.twitter.images] : [];
-  const finalMetadata = {
-    ...metadata,
-    openGraph: {
-      ...metadata.openGraph,
-      images: [
-        ...existingOgImages,
-        {
-          url: ogImageUrl,
-          width: 1200,
-          height: 630,
-          alt: imageAlt
-        }
-      ]
-    },
-    twitter: {
-      ...metadata.twitter,
-      card: "summary_large_image",
-      images: [
-        ...existingTwitterImages,
-        {
-          url: ogImageUrl,
-          alt: imageAlt
-        }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "24px",
+              flex: 1,
+              justifyContent: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: calculatedTitleSize,
+                    fontWeight: titleWeight,
+                    color: titleColor,
+                    lineHeight: 1.1,
+                    letterSpacing: "-0.03em",
+                    textShadow: backgroundType === "gradient" ? "0 2px 20px rgba(0, 0, 0, 0.2)" : "none",
+                    maxWidth: "100%",
+                    wordWrap: "break-word"
+                  },
+                  children: title
+                }
+              ),
+              description && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: descriptionSize,
+                    fontWeight: 400,
+                    color: descriptionColor,
+                    lineHeight: 1.5,
+                    letterSpacing: "-0.01em",
+                    maxWidth: "90%",
+                    display: "-webkit-box",
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden"
+                  },
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              width: "100%",
+              height: "4px",
+              background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
+              borderRadius: "2px"
+            }
+          }
+        )
       ]
     }
-  };
-  if (!finalMetadata.metadataBase && siteUrl) {
-    if (siteUrl.startsWith("http://") || siteUrl.startsWith("https://")) {
-      try {
-        finalMetadata.metadataBase = new URL(siteUrl);
-      } catch (e) {
-      }
-    }
-  }
-  return finalMetadata;
-}
-function createOgImageMetadataGenerator(options) {
-  return (metadata, ogImageParams) => {
-    return generateOgImageMetadata(metadata, ogImageParams, options);
-  };
+  );
 }
-
-// src/og-image/components/DefaultTemplate.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function DefaultTemplate({
+function LightTemplate({
   title,
   description,
   siteName,
@@ -315,21 +180,21 @@ function DefaultTemplate({
   // Visibility flags
   showLogo = true,
   showSiteName = true,
-  // Background customization
-  backgroundType = "gradient",
+  // Background customization (defaults to light theme)
+  backgroundType = "solid",
   gradientStart = "#667eea",
   gradientEnd = "#764ba2",
   backgroundColor = "#ffffff",
   // Typography - Title
   titleSize,
   titleWeight = 800,
-  titleColor = "white",
+  titleColor = "#111",
   // Typography - Description
   descriptionSize = 32,
-  descriptionColor = "rgba(255, 255, 255, 0.85)",
+  descriptionColor = "#666",
   // Typography - Site Name
   siteNameSize = 28,
-  siteNameColor = "rgba(255, 255, 255, 0.95)",
+  siteNameColor = "#111",
   // Layout
   padding = 80,
   logoSize = 48,
@@ -431,7 +296,6 @@ function DefaultTemplate({
                     color: titleColor,
                     lineHeight: 1.1,
                     letterSpacing: "-0.03em",
-                    textShadow: backgroundType === "gradient" ? "0 2px 20px rgba(0, 0, 0, 0.2)" : "none",
                     maxWidth: "100%",
                     wordWrap: "break-word"
                   },
@@ -447,11 +311,7 @@ function DefaultTemplate({
                     color: descriptionColor,
                     lineHeight: 1.5,
                     letterSpacing: "-0.01em",
-                    maxWidth: "90%",
-                    display: "-webkit-box",
-                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: "vertical",
-                    overflow: "hidden"
+                    maxWidth: "90%"
                   },
                   children: description
                 }
@@ -475,168 +335,308 @@ function DefaultTemplate({
     }
   );
 }
-function LightTemplate({
-  title,
-  description,
-  siteName,
-  logo,
-  // Visibility flags
-  showLogo = true,
-  showSiteName = true,
-  // Background customization (defaults to light theme)
-  backgroundType = "solid",
-  gradientStart = "#667eea",
-  gradientEnd = "#764ba2",
-  backgroundColor = "#ffffff",
-  // Typography - Title
-  titleSize,
-  titleWeight = 800,
-  titleColor = "#111",
-  // Typography - Description
-  descriptionSize = 32,
-  descriptionColor = "#666",
-  // Typography - Site Name
-  siteNameSize = 28,
-  siteNameColor = "#111",
-  // Layout
-  padding = 80,
-  logoSize = 48,
-  // Dev mode
-  devMode = false
-}) {
-  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);
-  const backgroundStyle = backgroundType === "gradient" ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : backgroundColor;
-  const gridOverlay = devMode ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundImage: `
-          linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)
-        `,
-        backgroundSize: "20px 20px",
-        pointerEvents: "none",
-        zIndex: 10
+
+// src/og-image/utils/fonts.ts
+async function loadGoogleFont(font, text, weight = 700) {
+  let url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weight}`;
+  if (text) {
+    url += `&text=${encodeURIComponent(text)}`;
+  }
+  try {
+    const css = await fetch(url, {
+      headers: {
+        // Required to get TTF format instead of WOFF2
+        "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"
+      }
+    }).then((res) => res.text());
+    const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
+    if (!resource || !resource[1]) {
+      throw new Error(`Failed to parse font URL from CSS for font: ${font}`);
+    }
+    const response = await fetch(resource[1]);
+    if (response.status !== 200) {
+      throw new Error(`Failed to fetch font data: HTTP ${response.status}`);
+    }
+    return await response.arrayBuffer();
+  } catch (error) {
+    console.error(`Error loading Google Font "${font}":`, error);
+    throw new Error(`Failed to load font "${font}": ${error instanceof Error ? error.message : "Unknown error"}`);
+  }
+}
+async function loadGoogleFonts(fonts) {
+  const fontConfigs = await Promise.all(
+    fonts.map(async ({ family, weight = 700, style = "normal", text }) => {
+      const data = await loadGoogleFont(family, text, weight);
+      return {
+        name: family,
+        weight,
+        style,
+        data
+      };
+    })
+  );
+  return fontConfigs;
+}
+function createFontLoader() {
+  const cache = /* @__PURE__ */ new Map();
+  return {
+    /**
+     * Load a font with caching
+     */
+    async load(family, weight = 700, text) {
+      const cacheKey = `${family}-${weight}-${text || "all"}`;
+      if (!cache.has(cacheKey)) {
+        cache.set(cacheKey, loadGoogleFont(family, text, weight));
+      }
+      return cache.get(cacheKey);
+    },
+    /**
+     * Clear the cache
+     */
+    clear() {
+      cache.clear();
+    },
+    /**
+     * Get cache size
+     */
+    size() {
+      return cache.size;
+    }
+  };
+}
+
+// src/og-image/utils/url.ts
+var DEFAULT_OG_IMAGE_BASE_URL = "https://djangocfg.com/api/og";
+function encodeBase64(str) {
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(str, "utf-8").toString("base64");
+  }
+  return btoa(unescape(encodeURIComponent(str)));
+}
+function decodeBase64(str) {
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(str, "base64").toString("utf-8");
+  }
+  try {
+    const binaryString = atob(str);
+    return decodeURIComponent(
+      binaryString.split("").map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)).join("")
+    );
+  } catch (error) {
+    return decodeURIComponent(escape(atob(str)));
+  }
+}
+function generateOgImageUrl(params, options = {}) {
+  const {
+    baseUrl = DEFAULT_OG_IMAGE_BASE_URL,
+    useBase64 = true
+  } = options;
+  if (useBase64) {
+    const cleanParams = {};
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== void 0 && value !== null && value !== "") {
+        cleanParams[key] = value;
+      }
+    });
+    const jsonString = JSON.stringify(cleanParams);
+    const base64Data = encodeBase64(jsonString);
+    return `${baseUrl}/${base64Data}`;
+  } else {
+    const searchParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== void 0 && value !== null && value !== "") {
+        searchParams.append(key, String(value));
+      }
+    });
+    const query = searchParams.toString();
+    return query ? `${baseUrl}?${query}` : baseUrl;
+  }
+}
+function getAbsoluteOgImageUrl(relativePath, siteUrl) {
+  if (relativePath.startsWith("http://") || relativePath.startsWith("https://")) {
+    return relativePath;
+  }
+  const cleanSiteUrl = siteUrl.replace(/\/$/, "");
+  const cleanPath = relativePath.startsWith("/") ? relativePath : `/${relativePath}`;
+  return `${cleanSiteUrl}${cleanPath}`;
+}
+function createOgImageUrlBuilder(defaults = {}, options = {}) {
+  return (params) => {
+    return generateOgImageUrl(
+      { ...defaults, ...params },
+      options
+    );
+  };
+}
+function parseOgImageUrl(url) {
+  try {
+    const urlObj = new URL(url, "http://dummy.com");
+    const params = {};
+    urlObj.searchParams.forEach((value, key) => {
+      params[key] = value;
+    });
+    return params;
+  } catch {
+    return {};
+  }
+}
+function parseOgImageData(searchParams) {
+  try {
+    let params;
+    if (searchParams instanceof URLSearchParams) {
+      params = {};
+      for (const [key, value] of searchParams.entries()) {
+        params[key] = value;
       }
+    } else {
+      params = searchParams;
     }
-  ) : null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        height: "100%",
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        justifyContent: "space-between",
-        background: backgroundStyle,
-        padding: `${padding}px`,
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        position: "relative"
-      },
-      children: [
-        gridOverlay,
-        (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "16px"
-            },
-            children: [
-              showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
-              /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: logo,
-                  alt: "Logo",
-                  width: logoSize,
-                  height: logoSize,
-                  style: {
-                    borderRadius: "8px"
-                  }
-                }
-              ),
-              showSiteName && siteName && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: siteNameSize,
-                    fontWeight: 600,
-                    color: siteNameColor,
-                    letterSpacing: "-0.02em"
-                  },
-                  children: siteName
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: "24px",
-              flex: 1,
-              justifyContent: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: calculatedTitleSize,
-                    fontWeight: titleWeight,
-                    color: titleColor,
-                    lineHeight: 1.1,
-                    letterSpacing: "-0.03em",
-                    maxWidth: "100%",
-                    wordWrap: "break-word"
-                  },
-                  children: title
-                }
-              ),
-              description && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: descriptionSize,
-                    fontWeight: 400,
-                    color: descriptionColor,
-                    lineHeight: 1.5,
-                    letterSpacing: "-0.01em",
-                    maxWidth: "90%"
-                  },
-                  children: description
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              width: "100%",
-              height: "4px",
-              background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
-              borderRadius: "2px"
-            }
+    if (process.env.NODE_ENV === "development") {
+      console.log("[parseOgImageData] Input params keys:", Object.keys(params));
+      console.log("[parseOgImageData] Input params:", params);
+    }
+    const dataParam = params.data;
+    if (dataParam && typeof dataParam === "string" && dataParam.trim() !== "") {
+      if (process.env.NODE_ENV === "development") {
+        console.log("[parseOgImageData] Found data param, length:", dataParam.length);
+      }
+      try {
+        const decoded = decodeBase64(dataParam);
+        if (process.env.NODE_ENV === "development") {
+          console.log("[parseOgImageData] Decoded string:", decoded.substring(0, 100));
+        }
+        const parsed = JSON.parse(decoded);
+        if (process.env.NODE_ENV === "development") {
+          console.log("[parseOgImageData] Parsed JSON:", parsed);
+        }
+        const result2 = {};
+        for (const [key, value] of Object.entries(parsed)) {
+          if (value !== void 0 && value !== null) {
+            result2[key] = String(value);
           }
-        )
-      ]
+        }
+        if (process.env.NODE_ENV === "development") {
+          console.log("[parseOgImageData] Result:", result2);
+        }
+        return result2;
+      } catch (decodeError) {
+        console.error("[parseOgImageData] Error decoding/parsing data param:", decodeError);
+        if (decodeError instanceof Error) {
+          console.error("[parseOgImageData] Error message:", decodeError.message);
+        }
+      }
+    } else {
+      if (process.env.NODE_ENV === "development") {
+        console.log("[parseOgImageData] No data param found or empty");
+      }
+    }
+    const result = {};
+    for (const [key, value] of Object.entries(params)) {
+      if (key !== "data" && value !== void 0 && value !== null) {
+        result[key] = Array.isArray(value) ? value[0] : String(value);
+      }
+    }
+    if (process.env.NODE_ENV === "development") {
+      console.log("[parseOgImageData] Fallback result:", result);
+    }
+    return result;
+  } catch (error) {
+    console.error("[parseOgImageData] Unexpected error:", error);
+    return {};
+  }
+}
+
+// src/og-image/utils/metadata.ts
+function extractTitle(metadata) {
+  if (typeof metadata.title === "string") {
+    return metadata.title;
+  }
+  if (metadata.title) {
+    if ("default" in metadata.title) {
+      return metadata.title.default;
+    }
+    if ("absolute" in metadata.title) {
+      return metadata.title.absolute;
     }
+  }
+  return "";
+}
+function extractDescription(metadata) {
+  if (typeof metadata.description === "string") {
+    return metadata.description;
+  }
+  return "";
+}
+function getSiteUrl() {
+  if (typeof process !== "undefined" && process.env.NEXT_PUBLIC_SITE_URL) {
+    return process.env.NEXT_PUBLIC_SITE_URL;
+  }
+  return "";
+}
+function generateOgImageMetadata(metadata, ogImageParams, options = {}) {
+  const {
+    ogImageBaseUrl = "https://djangocfg.com/api/og",
+    siteUrl: providedSiteUrl,
+    defaultParams = {},
+    useBase64 = true
+  } = options;
+  const siteUrl = providedSiteUrl && providedSiteUrl !== "undefined" ? providedSiteUrl : getSiteUrl();
+  const extractedTitle = extractTitle(metadata);
+  const extractedDescription = extractDescription(metadata);
+  const finalOgImageParams = {
+    ...defaultParams,
+    title: ogImageParams?.title || extractedTitle || defaultParams.title || "",
+    description: ogImageParams?.description || extractedDescription || defaultParams.description || "",
+    ...ogImageParams
+  };
+  const imageAlt = finalOgImageParams.title || finalOgImageParams.siteName;
+  const relativeOgImageUrl = generateOgImageUrl(
+    finalOgImageParams,
+    { baseUrl: ogImageBaseUrl, useBase64 }
   );
+  const ogImageUrl = siteUrl ? getAbsoluteOgImageUrl(relativeOgImageUrl, siteUrl) : relativeOgImageUrl;
+  const existingOgImages = metadata.openGraph?.images ? Array.isArray(metadata.openGraph.images) ? metadata.openGraph.images : [metadata.openGraph.images] : [];
+  const existingTwitterImages = metadata.twitter?.images ? Array.isArray(metadata.twitter.images) ? metadata.twitter.images : [metadata.twitter.images] : [];
+  const finalMetadata = {
+    ...metadata,
+    openGraph: {
+      ...metadata.openGraph,
+      images: [
+        ...existingOgImages,
+        {
+          url: ogImageUrl,
+          width: 1200,
+          height: 630,
+          alt: imageAlt
+        }
+      ]
+    },
+    twitter: {
+      ...metadata.twitter,
+      card: "summary_large_image",
+      images: [
+        ...existingTwitterImages,
+        {
+          url: ogImageUrl,
+          alt: imageAlt
+        }
+      ]
+    }
+  };
+  if (!finalMetadata.metadataBase && siteUrl) {
+    if (siteUrl.startsWith("http://") || siteUrl.startsWith("https://")) {
+      try {
+        finalMetadata.metadataBase = new URL(siteUrl);
+      } catch (e) {
+      }
+    }
+  }
+  return finalMetadata;
+}
+function createOgImageMetadataGenerator(options) {
+  return (metadata, ogImageParams) => {
+    return generateOgImageMetadata(metadata, ogImageParams, options);
+  };
 }
 
 // src/og-image/route.tsx