wip

app/server/cache.ts

@@ -0,0 +1,30 @@
+import { LRUCache } from "lru-cache";
+
+declare global {
+  var cache: LRUCache<string, any>;
+}
+
+globalThis.cache =
+  globalThis.cache ||
+  new LRUCache<string, any>({
+    max: 300,
+    ttl: process.env.NODE_ENV === "production" ? 1000000 : 1,
+  });
+
+export async function fetchCached<T>(opts: {
+  fn: () => Promise<T>;
+  key: string;
+  ttl: number;
+}): Promise<T> {
+  if (cache.has(opts.key)) {
+    return cache.get(opts.key) as T;
+  }
+
+  const result = await opts.fn();
+
+  cache.set(opts.key, result, {
+    ttl: opts.ttl,
+  });
+
+  return result;
+}

app/server/embed.ts

@@ -1,41 +1,48 @@
 import { createServerFn } from "@tanstack/start";
 import { load } from "cheerio";
 import { z } from "zod";
+import { fetchCached } from "./cache";
+
+const oneWeek = 1000 * 60 * 60 * 24 * 7;
 
 export const getOpengraphEmbedData = createServerFn({ method: "GET" })
   .validator(z.object({ url: z.string().url() }))
   .handler(async (ctx) => {
-    const url = URL.parse(ctx.data.url);
-
-    if (!url) {
-      throw new Error("Invalid URL");
-    }
-
-    const response = await fetch(url.toString());
-    if (!response.ok) {
-      throw new Error(`Failed to fetch github embed data for ${url}`);
-    }
-
-    const text = await response.text();
-
-    const $ = load(text);
-    const image = $('meta[property="og:image"]').attr("content") || "";
-    const title = $('meta[property="og:title"]').attr("content") || "";
-    const description = $("body").attr("content") || "";
-    console.log("desc", $("head").html());
-    console.log(title, description);
-
-    return {
-      image,
-      title,
-      description,
-      url: {
-        pathname: url.pathname,
-        search: url.search,
-        hash: url.hash,
-        host: url.host,
+    return await fetchCached({
+      key: `embed-${ctx.data.url}`,
+      ttl: oneWeek,
+      fn: async () => {
+        const url = URL.parse(ctx.data.url);
+
+        if (!url) {
+          throw new Error("Invalid URL");
+        }
+
+        const response = await fetch(url.toString());
+        if (!response.ok) {
+          throw new Error(`Failed to fetch github embed data for ${url}`);
+        }
+
+        const text = await response.text();
+
+        const $ = load(text);
+        const image = $('meta[property="og:image"]').attr("content") || "";
+        const title = $('meta[property="og:title"]').attr("content") || "";
+        const description = $("body").attr("content") || "";
+
+        return {
+          image,
+          title,
+          description,
+          url: {
+            pathname: url.pathname,
+            search: url.search,
+            hash: url.hash,
+            host: url.host,
+          },
+        };
       },
-    };
+    });
   });
 
 export type GithubMetadata = Awaited<ReturnType<typeof getOpengraphEmbedData>>;

package.json

@@ -28,6 +28,7 @@
     "cheerio": "^1.0.0",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
+    "lru-cache": "^11.0.2",
     "lucide-react": "^0.475.0",
     "postcss": "^8.5.3",
     "react": "^19.0.0",

yarn.lock

@@ -1058,6 +1058,7 @@ __metadata:
     globals: "npm:^16.0.0"
     html-react-parser: "npm:^5.2.2"
     lodash-es: "npm:^4.17.21"
+    lru-cache: "npm:^11.0.2"
     lucide-react: "npm:^0.475.0"
     motion: "npm:^12.4.7"
     postcss: "npm:^8.5.3"
@@ -8819,6 +8820,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^11.0.2":
+  version: 11.0.2
+  resolution: "lru-cache@npm:11.0.2"
+  checksum: 10c0/c993b8e06ead0b24b969c1dbb5b301716aed66e320e9014a80012f5febe280b438f28ff50046b2c55ff404e889351ccb332ff91f8dd175a21f5eae80e3fb155f
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^5.1.1":
   version: 5.1.1
   resolution: "lru-cache@npm:5.1.1"