W OG 🥶 (#110)

Hacksore · Aug 27, 2024 · 04de7df · 04de7df
1 parent 99feff6
commit 04de7df
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 88 deletions.
diff --git a/src/app/api/og/base-og.png → src/app/api/og/[reqid]/base-og.png b/src/app/api/og/base-og.png → src/app/api/og/[reqid]/base-og.png
diff --git a/src/app/api/og/route.tsx → src/app/api/og/[reqid]/route.tsx b/src/app/api/og/route.tsx → src/app/api/og/[reqid]/route.tsx
diff --git a/src/app/homies/page.tsx b/src/app/homies/page.tsx
@@ -1,9 +1,9 @@
 import { Card } from "../component/Card";
 import { MobileCard } from "../component/MobileCard";
-import { createMeta } from "../metadata";
+import { generateOGHuntMetadata } from "../metadata";
 import { PROJECTS } from "../projects";
 
-export const metadata = createMeta({
+export const generateMetadata = generateOGHuntMetadata({
   title: "OGHUNT | The Homies Projects",
   description: "Our homies cooked many diffrent side projects please give them a look 🙏",
 });

diff --git a/src/app/metadata.ts b/src/app/metadata.ts
@@ -3,92 +3,57 @@ import type { Metadata } from "next";
 export const OG_URL =
   process.env.NODE_ENV !== "production" ? "http://localhost:3000" : "https://oghunt.com";
 
-export const tagline = "Product Hunt with ZERO AI Slop™";
+type OpenGraphFunction = () => Promise<Metadata>;
 
-// TODO: this should just programmatically update when the data is refetched
-const OG_CACHE_KEY = "v3";
-
-export const baseMetadata: Metadata = {
-  metadataBase: new URL(OG_URL),
-  title: {
-    default: "OGHUNT",
-    template: "%s",
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-  description: tagline,
-  openGraph: {
-    title: "OGHUNT",
-    description: tagline,
-    siteName: "OGHUNT",
-    images: [
-      {
-        url: `${OG_URL}/api/og?c=${OG_CACHE_KEY}`,
-        width: 1200,
-        height: 630,
-      },
-    ],
-    locale: "en-US",
-    type: "website",
-  },
-  twitter: {
-    title: "OGHUNT",
-    card: "summary_large_image",
-    images: [
-      {
-        url: `${OG_URL}/api/og?c=${OG_CACHE_KEY}`,
-        width: 1200,
-        height: 630,
-      },
-    ],
-  },
-  icons: {
-    shortcut: "/favicon.ico",
-  },
-};
-
-const buildMeta = ({
-  ogImageUrl,
-  description,
-  title,
-}: {
-  ogImageUrl: string;
-  description?: string;
-  title?: string;
-}): Metadata => {
-  baseMetadata.openGraph!.images = ogImageUrl;
-  baseMetadata.twitter!.images = ogImageUrl;
-
-  if (description) {
-    baseMetadata.description = description;
-    baseMetadata.twitter!.description = description;
-    baseMetadata.openGraph!.description = description;
-  }
-
-  if (title) {
-    baseMetadata.title = title;
-    baseMetadata.twitter!.title = title;
-    baseMetadata.openGraph!.title = title;
-  }
-
-  return baseMetadata;
-};
-
-/** Helper to build opengraph metadata with defaults, you should call this in generateMetadata() next function */
-export const createMeta = ({
+export function generateOGHuntMetadata({
   title,
   description,
 }: {
-  title?: string;
+  title: string;
   description?: string;
-}): Metadata => {
-  return buildMeta({
-    ogImageUrl: `${OG_URL}/api/og?c=${OG_CACHE_KEY}`,
-    title,
-    description,
-  });
-};
-
-export default baseMetadata;
+}): OpenGraphFunction {
+  return async () => {
+    const CACHE_DELAY = 30 * 1000;
+    const CACHE_INTERVAL = 15 * 60 * 1000;
+
+    const cacheKey = Math.floor((Date.now() - CACHE_DELAY) / CACHE_INTERVAL).toString(16);
+
+    return {
+      metadataBase: new URL(OG_URL),
+      title,
+      robots: {
+        index: true,
+        follow: true,
+      },
+      description: description,
+      openGraph: {
+        title,
+        description: description,
+        siteName: "OGHUNT",
+        images: [
+          {
+            url: `${OG_URL}/api/og/${cacheKey}.png`,
+            width: 1200,
+            height: 630,
+          },
+        ],
+        locale: "en-US",
+        type: "website",
+      },
+      twitter: {
+        title: "OGHUNT",
+        card: "summary_large_image",
+        images: [
+          {
+            url: `${OG_URL}/api/og/${cacheKey}.png`,
+            width: 1200,
+            height: 630,
+          },
+        ],
+      },
+      icons: {
+        shortcut: "/favicon.ico",
+      },
+    };
+  };
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,12 +5,12 @@ import ScrollToTop from "./component/ScrollToTop";
 import { SlopMeter } from "./component/SlopMeter";
 import { Card } from "./component/Card";
 import { MobileCard } from "./component/MobileCard";
-import { createMeta } from "./metadata";
+import { generateOGHuntMetadata } from "./metadata";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 300; // TODO: fix this for launch to be 1 hour, revalidate at most every hour
 
-export const metadata = createMeta({
+export const generateMetadata = generateOGHuntMetadata({
   title: "OGHUNT | Product Hunt with ZERO AI Slop™",
   description:
     "Product Hunt with ZERO AI Slop™ is a collection of projects launched on Product Hunt that are not AI-generated.",