refactor: revert to old image generation image.

src/app/api/og/route.tsx

@@ -2,85 +2,75 @@ import { pb } from "@/lib/pocketbase";
 import { Script } from "@/lib/types";
 import { ImageResponse } from "next/og";
 import { NextRequest } from "next/server";
-import { ClientResponseError } from 'pocketbase';
-
-const size = {
-  width: 1200,
-  height: 630,
-};
+import { ClientResponseError } from "pocketbase";
 
 export async function GET(req: NextRequest) {
-  const title = req.nextUrl.searchParams.get("title");
+  const { searchParams } = new URL(req.url);
+  const title = searchParams.get("title");
 
   if (!title) {
     return new Response("Missing title parameter", { status: 400 });
   }
 
   try {
-    const item = await fetchScript(title);
+    const script: Script = await pb
+      .collection("proxmox_scripts")
+      .getFirstListItem(`title="${title}"`, {
+        fields: "logo,id",
+      });
+
     return new ImageResponse(
       (
         <div
           style={{
-            background: "linear-gradient(to bottom right, #4F46E5, #7C3AED)",
+            background: "rgb(30,41,59)",
+            backgroundImage:
+              "linear-gradient(67deg, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 50%, rgba(30, 41, 59, 1) 100%)",
             width: "100%",
             height: "100%",
             display: "flex",
-            alignItems: "center",
+            flexDirection: "column",
             justifyContent: "center",
+            alignItems: "center",
           }}
         >
-          <div
+          {/* <img
+            src="https://proxmox-helper-scripts.vercel.app/logo.png"
+            alt="Proxmox Helper Scripts"
             style={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: "white",
-              borderRadius: "20px",
-              padding: "40px",
-              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+              width: "75px",
+              height: "75px",
+              position: "absolute",
+              top: "10px",
+              left: "5px",
+              objectFit: "contain",
+            }}
+          /> */}
+          <img
+            src={script.logo}
+            alt={title}
+            style={{
+              maxWidth: "40%",
+              maxHeight: "40%",
+              objectFit: "contain",
+            }}
+          />
+          <p
+            style={{
+              color: "white",
+              fontSize: "64px",
+              fontWeight: "bold",
+              textAlign: "center",
+              marginTop: "20px",
             }}
           >
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                marginBottom: "20px",
-              }}
-            >
-              <img
-                src={item.logo}
-                alt={`${item.title} logo`}
-                width={150}
-                height={150}
-                style={{ marginRight: "20px" }}
-              />
-              <img
-                src="https://proxmox-helper-scripts.vercel.app/logo.png"
-                alt="Website logo"
-                width={150}
-                height={150}
-                style={{ objectFit: "contain" }}
-              />
-            </div>
-            <h1
-              style={{
-                fontSize: "60px",
-                fontWeight: "bold",
-                color: "#1F2937",
-                textAlign: "center",
-                margin: "0",
-                maxWidth: "800px",
-              }}
-            >
-              {item.title}
-            </h1>
-          </div>
+            {title}
+          </p>
         </div>
       ),
       {
-        ...size,
+        width: 1200,
+        height: 630,
       },
     );
   } catch (error) {
@@ -93,9 +83,3 @@ export async function GET(req: NextRequest) {
     return new Response("Error generating image", { status: 500 });
   }
 }
-
-async function fetchScript(title: string): Promise<Script> {
-  return await pb.collection('proxmox_scripts').getFirstListItem(`title="${title}"`, {
-    fields: "logo,id,title",
-  });
-}