@vercel/og 0.5.20 → 0.6.0

package/dist/figma/index.d.ts

@@ -0,0 +1,7 @@
+import { EdgeImageResponse } from 'src/index.edge.types';
+import { FigmaImageResponseProps } from 'src/types';
+declare type InternalFigmaImageResponseProps = FigmaImageResponseProps & {
+    Response: EdgeImageResponse;
+};
+export declare const FigmaImageResponse: ({ url, template, fonts, imageResponseOptions, Response, }: InternalFigmaImageResponseProps) => Promise<import("../index.edge").ImageResponse>;
+export {};

package/dist/index.edge.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
-import type { ImageResponseOptions } from './types';
+import type { ImageResponseOptions, FigmaImageResponseProps } from './types';
 export declare class ImageResponse extends Response {
     constructor(element: ReactElement, options?: ImageResponseOptions);
 }
+export declare const experimental_FigmaImageResponse: (props: FigmaImageResponseProps) => Promise<ImageResponse>;

package/dist/index.edge.js

@@ -18843,6 +18843,196 @@ async function render(satori, resvg, opts, defaultFonts, element) {
   return resvgJS.render().asPng();
 }
 
+// src/figma/index.tsx
+var FigmaImageResponse = async ({
+  url,
+  template,
+  fonts,
+  imageResponseOptions,
+  Response: Response2
+}) => {
+  const { fileId, nodeId } = parseFigmaUrl(url);
+  const figmaAPIToken = assertValue(process.env.FIGMA_PERSONAL_ACCESS_TOKEN, "Missing environment variable: `FIGMA_PERSONAL_ACCESS_TOKEN`. You can get one at https://www.figma.com/developers/api#authentication");
+  const figmaResponse = await fetch(`https://api.figma.com/v1/images/${fileId}?ids=${nodeId}&svg_outline_text=false&format=svg&svg_include_id=true`, {
+    method: "GET",
+    headers: {
+      "X-FIGMA-TOKEN": figmaAPIToken
+    },
+    cache: "no-store"
+  });
+  const figmaResponseJson = await figmaResponse.json();
+  const svgDownloadPath = figmaResponseJson.images[nodeId.replace("-", ":")];
+  const svgResponse = await fetch(svgDownloadPath, { cache: "no-store" });
+  const svg = await svgResponse.text();
+  const { width, height } = getSvgDimensions(svg);
+  const textNodes = getTextNodes(svg);
+  const textNodeAttributes = textNodes.map(parseSvgText);
+  return new Response2({
+    key: "0",
+    type: "div",
+    props: {
+      style: { display: "flex" },
+      children: [
+        {
+          type: "img",
+          props: {
+            style: { position: "absolute" },
+            alt: "",
+            width,
+            height,
+            src: svgToBase64(svg)
+          }
+        },
+        {
+          type: "div",
+          props: {
+            style: { display: "flex", position: "relative", width: "100%" },
+            children: textNodeAttributes.map((textNode) => {
+              const t = template[textNode.id];
+              let value = "";
+              if (t === void 0) {
+                value = textNode.content;
+              } else if (isComplexTemplate(t)) {
+                value = t.value;
+              } else {
+                value = t;
+              }
+              let cssProps = {};
+              let centerHorizontally = false;
+              if (isComplexTemplate(t) && t.props) {
+                const {
+                  centerHorizontally: centerHorizontallyProp,
+                  ...otherCSSProps
+                } = t.props;
+                cssProps = otherCSSProps;
+                centerHorizontally = centerHorizontallyProp || false;
+              }
+              if (centerHorizontally) {
+                const templateStyles = {
+                  color: textNode.fill,
+                  marginTop: `${parseInt(textNode.y) - parseInt(textNode.fontSize)}px`,
+                  fontWeight: textNode.fontWeight || "400",
+                  fontSize: textNode.fontSize,
+                  fontFamily: textNode.fontFamily,
+                  letterSpacing: textNode.letterSpacing,
+                  textAlign: "center",
+                  ...cssProps
+                };
+                return {
+                  type: "div",
+                  props: {
+                    style: {
+                      display: "flex",
+                      justifyContent: "center",
+                      position: "absolute",
+                      width: "100%"
+                    },
+                    children: {
+                      type: "div",
+                      props: {
+                        style: templateStyles,
+                        children: value
+                      }
+                    }
+                  }
+                };
+              }
+              return {
+                type: "div",
+                props: {
+                  style: {
+                    position: "absolute",
+                    color: textNode.fill,
+                    left: `${textNode.x}px`,
+                    top: `${parseInt(textNode.y) - parseInt(textNode.fontSize)}px`,
+                    fontWeight: textNode.fontWeight || "400",
+                    fontSize: textNode.fontSize,
+                    fontFamily: textNode.fontFamily,
+                    letterSpacing: textNode.letterSpacing,
+                    ...cssProps
+                  },
+                  children: value
+                }
+              };
+            })
+          }
+        }
+      ]
+    }
+  }, {
+    width,
+    height,
+    fonts,
+    ...imageResponseOptions
+  });
+};
+var isComplexTemplate = (template) => {
+  return typeof template !== "string" && template !== void 0 && "value" in template;
+};
+function svgToBase64(svg) {
+  const base64 = Buffer.from(svg).toString("base64");
+  return "data:image/svg+xml;base64," + base64;
+}
+function getSvgDimensions(svg) {
+  const widthMatch = svg.match(/width="(\d+)/);
+  const heightMatch = svg.match(/height="(\d+)/);
+  if (widthMatch && heightMatch) {
+    const width = parseInt(widthMatch[1], 10);
+    const height = parseInt(heightMatch[1], 10);
+    return { width, height };
+  }
+  return { width: 0, height: 0 };
+}
+function getTextNodes(svg) {
+  const regex = /<text[^>]*>(.*?)<\/text>/g;
+  let match;
+  const matches = [];
+  while ((match = regex.exec(svg)) !== null) {
+    matches.push(match[0]);
+  }
+  return matches;
+}
+function parseSvgText(svgText) {
+  var _a2, _b2, _c, _d, _e, _f2, _g, _h, _i;
+  const id = ((_a2 = svgText.match(/id="([^"]*)"/)) == null ? void 0 : _a2[1]) || "";
+  const fill = ((_b2 = svgText.match(/fill="([^"]*)"/)) == null ? void 0 : _b2[1]) || "";
+  const fontFamily = ((_c = svgText.match(/font-family="([^"]*)"/)) == null ? void 0 : _c[1]) || "";
+  const fontSize = ((_d = svgText.match(/font-size="([^"]*)"/)) == null ? void 0 : _d[1]) || "";
+  const fontWeight = ((_e = svgText.match(/font-weight="([^"]*)"/)) == null ? void 0 : _e[1]) || "";
+  const letterSpacing = ((_f2 = svgText.match(/letter-spacing="([^"]*)"/)) == null ? void 0 : _f2[1]) || "";
+  const x = ((_g = svgText.match(/<tspan[^>]*x="([^"]*)"/)) == null ? void 0 : _g[1]) || "";
+  const y = ((_h = svgText.match(/<tspan[^>]*y="([^"]*)"/)) == null ? void 0 : _h[1]) || "";
+  const content = ((_i = svgText.match(/<tspan[^>]*>([^<]*)<\/tspan>/)) == null ? void 0 : _i[1]) || "";
+  return {
+    id,
+    fill,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    x,
+    y,
+    content
+  };
+}
+function parseFigmaUrl(figmaUrl) {
+  const regex = /\/file\/([^/]+)\/[^?]+\?[^#]*node-id=([^&#]+)/;
+  const match = figmaUrl.match(regex);
+  let fileId = "";
+  let nodeId = "";
+  if (match) {
+    fileId = match[1] || "";
+    nodeId = match[2] || "";
+  }
+  return { fileId, nodeId };
+}
+function assertValue(v, errorMessage) {
+  if (v === void 0) {
+    throw new Error(errorMessage);
+  }
+  return v;
+}
+
 // src/index.edge.ts
 var initializedResvg = initWasm(resvg_wasm);
 var initializedYoga = initYoga(yoga_wasm).then((yoga2) => Rl(yoga2));
@@ -18878,8 +19068,12 @@ var ImageResponse = class extends Response {
     });
   }
 };
+var experimental_FigmaImageResponse = async (props) => {
+  return FigmaImageResponse({ ...props, Response: ImageResponse });
+};
 export {
-  ImageResponse
+  ImageResponse,
+  experimental_FigmaImageResponse
 };
 /*!
  * escape-html