From eab836d0fe24a7cf97a277008219078816dd2d4d Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 12 Nov 2022 20:01:19 -0800
Subject: [PATCH] Hack together header image

---
 packages/skin-museum-og/pages/api/og.js | 96 +++++++++++++++++++++++++
 1 file changed, 96 insertions(+)

diff --git a/packages/skin-museum-og/pages/api/og.js b/packages/skin-museum-og/pages/api/og.js
index 345ace27..62c18364 100644
--- a/packages/skin-museum-og/pages/api/og.js
+++ b/packages/skin-museum-og/pages/api/og.js
@@ -15,6 +15,10 @@ export default async function (req) {
   const { searchParams } = req.nextUrl;
   const skinMd5 = searchParams.get("md5");
   const query = searchParams.get("query");
+  const header = searchParams.get("header");
+  if (header) {
+    return headerImage(query);
+  }
   if (query) {
     return searchImage(query);
   }
@@ -24,6 +28,29 @@ export default async function (req) {
   return homeImage();
 }
 
+async function headerImage() {
+  const data = await fetchGraphql(
+    `
+    query HomeSkins {
+        skins(first:20, sort: MUSEUM){
+          nodes {
+            ... on ClassicSkin {
+              id
+              nsfw
+              filename
+              screenshot_url
+            }
+          }
+        }
+    }`,
+    {}
+  );
+  return new ImageResponse(<HeaderGrid skins={data.skins.nodes} />, {
+    width: 1500,
+    height: 500,
+  });
+}
+
 async function homeImage() {
   const data = await fetchGraphql(
     `
@@ -71,6 +98,75 @@ async function searchImage(query) {
   });
 }
 
+function HeaderGrid({ skins, title }) {
+  return (
+    <div
+      style={{
+        background: "black",
+        color: "white",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        textAlign: "center",
+        alignItems: "center",
+        justifyContent: "center",
+        justifyContent: "space-between",
+        background: "linear-gradient(45deg,#000,#191927 66%,#000)",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          justifyItems: "center",
+          width: "100%",
+          flexGrow: 10,
+          alignItems: "stretch",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            position: "relative",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              top: "-250px",
+              left: "-30px",
+              width: "2000px",
+              display: "flex",
+              flexWrap: "wrap",
+              transform: "rotate(-15deg)",
+            }}
+          >
+            {skins
+              .filter((skin) => {
+                return !skin.nsfw;
+              })
+              .map((skin) => {
+                return (
+                  <img
+                    style={{
+                      margin: "15px",
+                    }}
+                    key={skin.id}
+                    src={skin.screenshot_url}
+                    height={String(300)}
+                    width={String(300 * aspectRatio)}
+                  />
+                );
+              })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function ImageGrid({ skins, title }) {
   return (
     <Frame>