@djangocfg/nextjs 2.1.5 → 2.1.7

package/dist/og-image/index.mjs

@@ -0,0 +1,823 @@
+// src/og-image/route.tsx
+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;
+      }
+    } 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);
+          }
+        }
+        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/components/DefaultTemplate.tsx
+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__ */ React.createElement(
+    "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
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ React.createElement(
+    "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"
+      }
+    },
+    gridOverlay,
+    (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "16px"
+        }
+      },
+      showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: logo,
+          alt: "Logo",
+          width: logoSize,
+          height: logoSize,
+          style: {
+            borderRadius: "8px"
+          }
+        }
+      ),
+      showSiteName && siteName && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: siteNameSize,
+            fontWeight: 600,
+            color: siteNameColor,
+            letterSpacing: "-0.02em"
+          }
+        },
+        siteName
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "24px",
+          flex: 1,
+          justifyContent: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "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"
+          }
+        },
+        title
+      ),
+      description && /* @__PURE__ */ React.createElement(
+        "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"
+          }
+        },
+        description
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          width: "100%",
+          height: "4px",
+          background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
+          borderRadius: "2px"
+        }
+      }
+    )
+  );
+}
+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__ */ React.createElement(
+    "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
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ React.createElement(
+    "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"
+      }
+    },
+    gridOverlay,
+    (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "16px"
+        }
+      },
+      showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: logo,
+          alt: "Logo",
+          width: logoSize,
+          height: logoSize,
+          style: {
+            borderRadius: "8px"
+          }
+        }
+      ),
+      showSiteName && siteName && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: siteNameSize,
+            fontWeight: 600,
+            color: siteNameColor,
+            letterSpacing: "-0.02em"
+          }
+        },
+        siteName
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "24px",
+          flex: 1,
+          justifyContent: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: calculatedTitleSize,
+            fontWeight: titleWeight,
+            color: titleColor,
+            lineHeight: 1.1,
+            letterSpacing: "-0.03em",
+            maxWidth: "100%",
+            wordWrap: "break-word"
+          }
+        },
+        title
+      ),
+      description && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: descriptionSize,
+            fontWeight: 400,
+            color: descriptionColor,
+            lineHeight: 1.5,
+            letterSpacing: "-0.01em",
+            maxWidth: "90%"
+          }
+        },
+        description
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          width: "100%",
+          height: "4px",
+          background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
+          borderRadius: "2px"
+        }
+      }
+    )
+  );
+}
+
+// src/og-image/route.tsx
+function createOgImageHandler(config) {
+  const {
+    template: Template = DefaultTemplate,
+    defaultProps = {},
+    fonts: fontConfig = [],
+    size = { width: 1200, height: 630 },
+    debug = false
+  } = config;
+  async function GET(req) {
+    let searchParams = new URLSearchParams();
+    if (req.nextUrl?.searchParams && req.nextUrl.searchParams.size > 0) {
+      searchParams = req.nextUrl.searchParams;
+    } else if (req.nextUrl?.search && req.nextUrl.search.length > 1) {
+      searchParams = new URLSearchParams(req.nextUrl.search);
+    } else {
+      try {
+        const url = new URL(req.url);
+        if (url.searchParams.size > 0) {
+          searchParams = url.searchParams;
+        }
+      } catch (error) {
+      }
+      if (searchParams.size === 0 && req.url) {
+        const queryIndex = req.url.indexOf("?");
+        if (queryIndex !== -1) {
+          const queryString = req.url.substring(queryIndex + 1);
+          searchParams = new URLSearchParams(queryString);
+        }
+      }
+      if (searchParams.size === 0) {
+        const customParams = req.headers.get("x-og-search-params");
+        if (customParams) {
+          searchParams = new URLSearchParams(customParams);
+        }
+      }
+    }
+    let title = defaultProps.title || "Untitled";
+    let subtitle = defaultProps.subtitle || "";
+    let description = defaultProps.description || subtitle;
+    const dataParam = searchParams.get("data");
+    let decodedParams = {};
+    if (dataParam) {
+      try {
+        const paramsObj = { data: dataParam };
+        for (const [key, value] of searchParams.entries()) {
+          if (key !== "data") {
+            paramsObj[key] = value;
+          }
+        }
+        decodedParams = parseOgImageData(paramsObj);
+        if (decodedParams.title && typeof decodedParams.title === "string" && decodedParams.title.trim() !== "") {
+          title = decodedParams.title.trim();
+        }
+        if (decodedParams.subtitle && typeof decodedParams.subtitle === "string" && decodedParams.subtitle.trim() !== "") {
+          subtitle = decodedParams.subtitle.trim();
+        }
+        if (decodedParams.description && typeof decodedParams.description === "string" && decodedParams.description.trim() !== "") {
+          description = decodedParams.description.trim();
+        }
+      } catch (error) {
+      }
+    }
+    if (!title || title === "Untitled") {
+      const titleParam = searchParams.get("title");
+      if (titleParam) {
+        title = titleParam;
+      }
+    }
+    if (!subtitle) {
+      const subtitleParam = searchParams.get("subtitle");
+      if (subtitleParam) {
+        subtitle = subtitleParam;
+      }
+    }
+    if (!description || description === subtitle) {
+      const descParam = searchParams.get("description");
+      if (descParam) {
+        description = descParam;
+      }
+    }
+    let fonts = [];
+    if (fontConfig.length > 0) {
+      fonts = await loadGoogleFonts(fontConfig);
+    }
+    const parseValue = (value, type = "string") => {
+      if (value === void 0 || value === null || value === "") {
+        return void 0;
+      }
+      if (type === "number") {
+        const num = Number(value);
+        return isNaN(num) ? void 0 : num;
+      }
+      if (type === "boolean") {
+        if (typeof value === "boolean") return value;
+        if (typeof value === "string") {
+          return value.toLowerCase() === "true" || value === "1";
+        }
+        return Boolean(value);
+      }
+      return String(value);
+    };
+    const templateProps = {
+      ...defaultProps,
+      // Content
+      title,
+      subtitle,
+      description,
+      // Override with decoded params if present
+      siteName: decodedParams.siteName || defaultProps.siteName,
+      logo: decodedParams.logo || defaultProps.logo,
+      // Background
+      backgroundType: decodedParams.backgroundType || defaultProps.backgroundType,
+      gradientStart: decodedParams.gradientStart || defaultProps.gradientStart,
+      gradientEnd: decodedParams.gradientEnd || defaultProps.gradientEnd,
+      backgroundColor: decodedParams.backgroundColor || defaultProps.backgroundColor,
+      // Typography - Title
+      titleSize: parseValue(decodedParams.titleSize, "number") ?? defaultProps.titleSize,
+      titleWeight: parseValue(decodedParams.titleWeight, "number") ?? defaultProps.titleWeight,
+      titleColor: decodedParams.titleColor || defaultProps.titleColor,
+      // Typography - Description
+      descriptionSize: parseValue(decodedParams.descriptionSize, "number") ?? defaultProps.descriptionSize,
+      descriptionColor: decodedParams.descriptionColor || defaultProps.descriptionColor,
+      // Typography - Site Name
+      siteNameSize: parseValue(decodedParams.siteNameSize, "number") ?? defaultProps.siteNameSize,
+      siteNameColor: decodedParams.siteNameColor || defaultProps.siteNameColor,
+      // Layout
+      padding: parseValue(decodedParams.padding, "number") ?? defaultProps.padding,
+      logoSize: parseValue(decodedParams.logoSize, "number") ?? defaultProps.logoSize,
+      // Visibility flags
+      showLogo: parseValue(decodedParams.showLogo, "boolean") ?? defaultProps.showLogo,
+      showSiteName: parseValue(decodedParams.showSiteName, "boolean") ?? defaultProps.showSiteName
+    };
+    return new ImageResponse(
+      /* @__PURE__ */ React.createElement(Template, { ...templateProps }),
+      {
+        width: size.width,
+        height: size.height,
+        fonts,
+        debug: debug || process.env.NODE_ENV === "development"
+      }
+    );
+  }
+  return {
+    GET,
+    runtime: "edge"
+  };
+}
+function createOgImageDynamicRoute(config) {
+  const handler = createOgImageHandler(config);
+  const isStaticBuild = typeof process !== "undefined" && process.env.NEXT_PUBLIC_STATIC_BUILD === "true";
+  async function GET(request, context) {
+    if (isStaticBuild) {
+      return new Response("OG Image generation is not available in static export mode", {
+        status: 404,
+        headers: { "Content-Type": "text/plain" }
+      });
+    }
+    const params = await context.params;
+    const dataParam = params.data;
+    const url = new URL(request.url);
+    url.searchParams.set("data", dataParam);
+    const modifiedRequest = new NextRequest(url.toString(), {
+      method: request.method,
+      headers: request.headers
+    });
+    return handler.GET(modifiedRequest);
+  }
+  async function generateStaticParams() {
+    return [];
+  }
+  return {
+    GET,
+    generateStaticParams
+  };
+}
+export {
+  DefaultTemplate,
+  LightTemplate,
+  createFontLoader,
+  createOgImageDynamicRoute,
+  createOgImageHandler,
+  createOgImageMetadataGenerator,
+  createOgImageUrlBuilder,
+  decodeBase64,
+  encodeBase64,
+  generateOgImageMetadata,
+  generateOgImageUrl,
+  getAbsoluteOgImageUrl,
+  loadGoogleFont,
+  loadGoogleFonts,
+  parseOgImageData,
+  parseOgImageUrl
+};
+//# sourceMappingURL=index.mjs.map