start some basic og image generation

pages/api/og/avatar.ts

@@ -0,0 +1,14 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import db from "@/lib/db";
+import { fetchTeamAvatar } from "../teams/avatar";
+
+export default async function getStatus(
+  req: NextApiRequest,
+  res: NextApiResponse
+): Promise<void> {
+  const fetchAvatar = await fetchTeamAvatar(req);
+  const avatar = fetchAvatar.avatar;
+
+  res.setHeader('Content-Type', 'image/jpeg');
+  res.end(Buffer.from(avatar, 'base64'));
+}

pages/api/og/image.tsx

@@ -0,0 +1,77 @@
+import { ImageResponse } from "next/server";
+import { API_URL } from "@/lib/constants";
+
+export const config = {
+  runtime: "edge",
+};
+
+const InterFont = fetch(
+  new URL("/public/fonts/Inter-Bold.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+
+export default async function handler(request: Request) {
+  const url = new URL(request.url);
+  const team = url.searchParams.get("team");
+
+  const { teamData, avatar } = await fetch(
+    `${API_URL}/api/og/team?team=${team}`
+  ).then((res) => res.json());
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#141414",
+        }}
+      >
+        <div tw="flex relative">
+          <div tw="flex flex-col md:flex-row w-full py-12 px-12 md:items-center justify-between">
+            <h2 tw="flex flex-col font-bold tracking-tight text-gray-900 text-left">
+              <div tw="flex">
+                {/*  eslint-disable-next-line @next/next/no-img-element*/}
+                <img
+                  src={
+                    avatar
+                      ? `${API_URL}/api/og/avatar?team=${team}`
+                      : `https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${
+                          teamData.website?.startsWith("https")
+                            ? teamData.website
+                            : `https://${teamData.website?.slice(7)}`
+                        }/&size=64`
+                  }
+                  tw="mr-5"
+                  alt="Scout Machine Logo"
+                  height="40"
+                  width="40"
+                />
+                <span tw="text-5xl text-[#a6a6a6] mb-2">
+                  {teamData.team_number}
+                </span>
+              </div>
+              <span tw="text-7xl text-white">
+                {teamData.nickname}
+              </span>
+            </h2>
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: "Typewriter",
+          data: await InterFont,
+          style: "normal",
+        },
+      ],
+    }
+  );
+}

pages/api/og/team.ts

@@ -0,0 +1,19 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import db from "@/lib/db";
+import { fetchTeamAvatar } from "../teams/avatar";
+
+export default async function getStatus(
+  req: NextApiRequest,
+  res: NextApiResponse
+): Promise<void> {
+  const { team } = req.query;
+  const avatar = await fetchTeamAvatar(req);
+
+  const teamData = await db.team.findUnique({
+    where: {
+      team_number: Number(team),
+    },
+  });
+
+  res.status(200).json({ teamData, avatar: avatar.avatar });
+}

pages/team/[team]/wrap.tsx

@@ -0,0 +1,58 @@
+import { GetServerSideProps, GetServerSidePropsContext } from "next";
+import { NextRouter, useRouter } from "next/router";
+import db from "@/lib/db";
+
+export default function LiveFieldViewPage({ teamMatches }: any) {
+  const router: NextRouter = useRouter();
+  console.log(teamMatches);
+
+  return <h1>Testing</h1>;
+}
+
+export const getServerSideProps: GetServerSideProps = async (
+  context: GetServerSidePropsContext
+): Promise<{ props: any }> => {
+  const { team }: any = context.params;
+
+  const teamMatches = await db.match.findMany({
+    where: {
+      event_key: {
+        contains: "2023",
+      },
+      OR: [
+        {
+          alliances: {
+            path: ["red", "team_keys"],
+            array_contains: `frc${team}`,
+          },
+        },
+        {
+          alliances: {
+            path: ["blue", "team_keys"],
+            array_contains: `frc${team}`,
+          },
+        },
+      ],
+    },
+  });
+
+  const highestScoringMatches = teamMatches
+    .sort((a: any, b: any) => {
+      const scoreA = a.alliances.red.score + a.alliances.blue.score;
+      const scoreB = b.alliances.red.score + b.alliances.blue.score;
+      return scoreB - scoreA;
+    })
+    .slice(0, 2);
+
+  return {
+    props: {
+      teamMatches: JSON.parse(
+        JSON.stringify(
+          highestScoringMatches,
+          (key: string, value) =>
+            typeof value === "bigint" ? value.toString() : value // return everything else unchanged
+        )
+      ),
+    },
+  };
+};

tsconfig.json

@@ -18,7 +18,7 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/api/og/image.tsx"],
   "exclude": ["node_modules"],
   "typedocOptions": {
     "entryPoints": [