From 9abe6ab8abeaf0e0c43475d765eb6105badea2c8 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 12 Nov 2022 14:58:26 -0800
Subject: [PATCH] Add home image

---
 packages/skin-museum-og/pages/api/og.js | 110 +++++++++++++++---------
 1 file changed, 71 insertions(+), 39 deletions(-)

diff --git a/packages/skin-museum-og/pages/api/og.js b/packages/skin-museum-og/pages/api/og.js
index 7ec135eb..345ace27 100644
--- a/packages/skin-museum-og/pages/api/og.js
+++ b/packages/skin-museum-og/pages/api/og.js
@@ -21,7 +21,33 @@ export default async function (req) {
   if (skinMd5) {
     return permalinkImage(skinMd5);
   }
-  throw new Error("Expected skin md5 or query");
+  return homeImage();
+}
+
+async function homeImage() {
+  const data = await fetchGraphql(
+    `
+    query HomeSkins {
+        skins(first:20, sort: MUSEUM){
+          nodes {
+            ... on ClassicSkin {
+              id
+              nsfw
+              filename
+              screenshot_url
+            }
+          }
+        }
+    }`,
+    {}
+  );
+  return new ImageResponse(
+    <ImageGrid skins={data.skins.nodes} title={"Winamp Skin Museum"} />,
+    {
+      width: 1200,
+      height: 600,
+    }
+  );
 }
 
 async function searchImage(query) {
@@ -30,7 +56,8 @@ async function searchImage(query) {
     query SkinSearch($query: String!) {
         skins: search_skins(query: $query, first:20){
             ... on ClassicSkin {
-                id
+              id
+              nsfw
               filename
               screenshot_url
             }
@@ -38,27 +65,37 @@ async function searchImage(query) {
     }`,
     { query }
   );
-  return new ImageResponse(
-    (
-      <Frame>
+  return new ImageResponse(<ImageGrid skins={data.skins} title={query} />, {
+    width: 1200,
+    height: 600,
+  });
+}
+
+function ImageGrid({ skins, title }) {
+  return (
+    <Frame>
+      <div
+        style={{
+          display: "flex",
+          position: "relative",
+        }}
+      >
         <div
           style={{
+            position: "absolute",
+            top: "-150px",
+            left: "-30px",
+            width: "1400px",
             display: "flex",
-            position: "relative",
+            flexWrap: "wrap",
+            transform: "rotate(-15deg)",
           }}
         >
-          <div
-            style={{
-              position: "absolute",
-              top: "-150px",
-              left: "-30px",
-              width: "1400px",
-              display: "flex",
-              flexWrap: "wrap",
-              transform: "rotate(-15deg)",
-            }}
-          >
-            {data.skins.map((skin) => {
+          {skins
+            .filter((skin) => {
+              return !skin.nsfw;
+            })
+            .map((skin) => {
               return (
                 <img
                   style={{
@@ -71,28 +108,23 @@ async function searchImage(query) {
                 />
               );
             })}
-          </div>
         </div>
-        <div
-          style={{
-            fontSize: 100,
-            flexGrow: 1,
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "center",
-            textShadow: "0px 0px 10px black",
-            backgroundColor: "rgba(0, 0, 0, 0.2)",
-          }}
-        >
-          {query}
-        </div>
-      </Frame>
-    ),
-    {
-      width: 1200,
-      height: 600,
-    }
+      </div>
+      <div
+        style={{
+          fontSize: 100,
+          flexGrow: 1,
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          textShadow: "0px 0px 10px black",
+          backgroundColor: "rgba(0, 0, 0, 0.2)",
+        }}
+      >
+        {title}
+      </div>
+    </Frame>
   );
 }