feat: update thumbnail api

server/api/index.ts

@@ -1,7 +1,7 @@
 import { Router } from "express";
 import preview from "./preview";
 import trpc from "./trpc/handler";
-import { thumbnail } from "./thumbnail";
+import thumbnail from "./thumbnail";
 import sandbox from "./sandbox";
 import { nocache } from "../middlewares/nocache";
 
@@ -10,7 +10,6 @@ const api = Router();
 api.use("/trpc", trpc);
 api.use("/preview", nocache, preview);
 api.use("/sandbox", sandbox);
-
-api.get("/thumbnail/:slug", thumbnail);
+api.use("/thumbnail", thumbnail);
 
 export default api;

server/api/thumbnail.ts

@@ -1,44 +0,0 @@
-import { Request, Response } from "express";
-import { screenshot } from "../lib/screenshot";
-
-const cache = new Map<string, { data: Buffer; timestamp: number }>();
-
-const regenerateThumbnail = async (slug: string) => {
-  const curCache = cache.get(slug);
-
-  if (curCache?.data) {
-    cache.set(slug, {
-      data: curCache.data,
-      timestamp: Date.now(),
-    });
-  }
-
-  const result = await screenshot(slug);
-  if (!result) {
-    return curCache;
-  }
-
-  const data = {
-    data: result,
-    timestamp: Date.now(),
-  };
-
-  cache.set(slug, data);
-  return data;
-};
-
-export const thumbnail = async (req: Request, res: Response) => {
-  const { slug } = req.params;
-  let cacheData = cache.get(slug);
-
-  if (!cacheData) {
-    cacheData = await regenerateThumbnail(slug);
-  }
-
-  if (cacheData && Date.now() - cacheData.timestamp > 10000) {
-    regenerateThumbnail(slug);
-  }
-
-  res.contentType("image/jpeg");
-  res.send(cacheData?.data);
-};

server/api/thumbnail/index.ts

@@ -0,0 +1,65 @@
+import { and, eq, isNull } from "drizzle-orm";
+import { Request, Response, Router } from "express";
+import db from "~/server/db";
+import fs from "fs";
+import { project } from "~/server/db/schema/project";
+import { BASE_URL } from "~/server/lib/consts";
+import { screenshot } from "~/server/lib/screenshot";
+import { getStorageDir } from "~/server/lib/utils";
+
+export const thumbnail = async (req: Request, res: Response) => {
+  const { filename } = req.params;
+  const path = getStorageDir("thumbnails", filename);
+  const thumbnail = fs.existsSync(path) ? fs.readFileSync(path) : undefined;
+
+  if (!thumbnail) {
+    return res.status(404).send("Thumbnail not found!");
+  }
+
+  res.setHeader("Content-Type", "image/jpeg");
+  res.send(thumbnail);
+};
+
+export const generate = async (req: Request, res: Response) => {
+  const { slug } = req.params;
+
+  const projectData = await db.query.project.findFirst({
+    where: and(eq(project.slug, slug), isNull(project.deletedAt)),
+  });
+
+  if (!projectData) {
+    return res.status(404).send("Project not found!");
+  }
+
+  try {
+    const url = `${BASE_URL}/api/preview/${slug}/index.html`;
+    const data = await screenshot(url);
+
+    if (!data) {
+      throw new Error("Cannot generate thumbnail!");
+    }
+
+    const dir = getStorageDir("thumbnails");
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+
+    const filename = `/${slug}.jpg`;
+    fs.writeFileSync(dir + filename, data);
+
+    await db
+      .update(project)
+      .set({ thumbnail: filename })
+      .where(eq(project.id, projectData.id));
+
+    res.json({ filename });
+  } catch (err) {
+    res.status(400).send((err as any)?.message || "An error occured!");
+  }
+};
+
+const router = Router();
+router.get("/:filename", thumbnail);
+router.patch("/:slug", generate);
+
+export default router;