feat(api): add api/v1/og route for OG Image; feat(website): update he…

…ad to use og image content (#23)

* feat(api): add api/v1/og route for OG Image; feat(website): update head to use og image content

* fix(website): change localhost to window.location.href

* fix(api): change og:image size; fix(website): update og tags

* fix(api): change og:image size; fix(website): resolve issue with window.location.href

* fix(website): change head to use process.env.VERCEL_URL

* fix(api): change failing tailwind classes to inline styles

* chore(website): remove unnecessary comment

* feat: use inter

* chore: clean up

Co-authored-by: Andreas Thomas <dev@chronark.com>

app/head.tsx

@@ -1,9 +1,26 @@
-export default function Head() {
+import { headers } from "next/headers";
+
+export default function Head({ title, subtitle }: { title: string; subtitle: string }) {
+  // Fallback tagline
+  title ??= "Share Environment Variables Securely";
+  subtitle ??= "EnvShare";
+
+  const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000";
+
+  const url = new URL("/api/v1/og", baseUrl);
+  url.searchParams.set("title", title);
+  url.searchParams.set("subtitle", subtitle);
+
   return (
     <>
       <title>EnvShare</title>
       <meta content="width=device-width, initial-scale=1" name="viewport" />
-      <meta name="description" content="Share Environment Variables Securely" />
+      <meta name="description" content={title} />
+      <meta property='og:image' content={url.toString()} />
+      <meta property='og:title' content={title} />
+      <meta property='og:description' content={title} />
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="630" />
     </>
   );
 }

package.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "18.0.10",
     "@upstash/redis": "^1.19.1",
     "@vercel/analytics": "0.1.7-beta.1",
+    "@vercel/og": "^0.0.27",
     "base-x": "^4.0.0",
     "eslint": "8.31.0",
     "eslint-config-next": "13.1.1",

pages/api/v1/og.tsx

@@ -0,0 +1,64 @@
+import { ImageResponse } from "@vercel/og";
+import { NextRequest } from "next/server";
+
+export const config = {
+  runtime: "edge",
+};
+
+export default async function handler(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url);
+    // Redundant fallback alternate tagline
+    const title = searchParams.get("title") ?? "Share Environment Variables Securely";
+    const subtitle = searchParams.get("subtitle") ?? "EnvShare";
+
+    const inter = await fetch(new URL("../../../public/fonts/Inter-SemiBold.ttf", import.meta.url)).then((res) =>
+      res.arrayBuffer(),
+    );
+
+    // TODO: Fix tailwind classes on this route
+    return new ImageResponse(
+      <div tw='w-[1200px] h-[630px] flex flex-col items-center justify-center text-center'>
+        {/* backgroundImage: bg-gradient-to-tr from-zinc-900/50 to-zinc-700/30 */}
+        <div
+          tw="bg-black w-full h-full flex"
+          style={{ backgroundImage: "linear-gradient(to top right, rgba(24,24,27,.5), rgba(63,63,70,.3))" }}
+        >
+          <div tw="flex flex-col text-3xl tracking-tight text-gray-300 w-full items-center h-full justify-center text-center">
+            {/* font-semibold bg-gradient-to-t bg-clip-text from-zinc-100/50 to-white whitespace-pre */}
+            <h1
+              tw="text-white text-7xl"
+              style={{
+                color: "transparent",
+                paddingLeft: "12rem",
+                paddingRight: "12rem",
+                backgroundImage: "linear-gradient(to top, rgba(244, 244,  245, .5), rgba(255,255,255,1))",
+                backgroundClip: "text",
+              }}
+            >
+              {title}
+            </h1>
+            <p tw="mt-4 font-bold">{subtitle}</p>
+          </div>
+        </div>
+      </div>,
+      {
+        height: 630,
+        width: 1200,
+        emoji: "twemoji",
+        fonts: [
+          {
+            name: "Inter",
+            data: inter,
+            style: "normal",
+          },
+        ],
+      },
+    );
+  } catch (e) {
+    console.log(`${(e as Error).message}`);
+    return new Response("Failed to generate the image", {
+      status: 500,
+    });
+  }
+}