migrate to typescript

1 files changed, 103 insertions, 0 deletions

diff --git a/pages/api/og.tsx b/pages/api/og.tsx
new file mode 100644
index 0000000..47619bc
--- /dev/null
+++ b/pages/api/og.tsx
@@ -0,0 +1,103 @@
+import { ImageResponse } from "@vercel/og";
+
+export const config = {
+  runtime: "edge",
+};
+
+const karla = fetch(
+  new URL("../../assets/Karla-MediumItalic.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+const outfit = fetch(
+  new URL("../../assets/Outfit-Regular.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+
+export default async function handler(request: any) {
+  const Karla = await karla;
+  const Outfit = await outfit;
+
+  const { searchParams } = request.nextUrl;
+  const hasTitle = searchParams.has("title");
+  const title = hasTitle
+    ? searchParams.get("title").length > 64
+      ? searchParams.get("title").slice(0, 64) + "..."
+      : searchParams.get("title")
+    : "Watch Now";
+  const image = searchParams.get("image");
+  if (!title) {
+    return new ImageResponse(<>Visit with &quot;?username=vercel&quot;</>, {
+      width: 1200,
+      height: 630,
+    });
+  }
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: "flex",
+          fontSize: "60px",
+          color: "black",
+          background: "#f6f6f6",
+          width: "100%",
+          height: "100%",
+          backgroundImage: `url(${image})`,
+        }}
+        className="relative w-[1900px] h-[400px] text-[10px]"
+      >
+        <div
+          className="w-[1900px] h-[400px]"
+          style={{
+            display: "flex",
+            width: "100%",
+            paddingLeft: 100,
+            alignItems: "center",
+            color: "white",
+            position: "relative",
+            backgroundImage: `linear-gradient(to right, rgba(0,0,0,0.93), rgba(0,0,0,0.8) , rgba(0,0,0,0.2))`,
+            filter: "brightness(20%)",
+          }}
+        >
+          <span
+            style={{
+              display: "flex",
+              position: "absolute",
+              top: 10,
+              left: 25,
+              fontSize: "40px",
+              color: "#FF7F57",
+              fontFamily: "Outfit",
+              filter: "brightness(100%)",
+            }}
+          >
+            moopa
+          </span>
+          <h1
+            style={{
+              width: "70%",
+              fontSize: "70px",
+              filter: "brightness(100%)",
+            }}
+          >
+            {title}
+          </h1>
+        </div>
+      </div>
+    ),
+    {
+      width: 1900,
+      height: 400,
+      fonts: [
+        {
+          name: "Karla",
+          data: Karla,
+          style: "normal",
+        },
+        {
+          name: "Outfit",
+          data: Outfit,
+          style: "normal",
+        },
+      ],
+    }
+  );
+}