From 7d8e42a927815d09dcd8d5e67450652e2c7bf508 Mon Sep 17 00:00:00 2001
From: gnehs <jayuiop@gmail.com>
Date: Mon, 12 Feb 2024 13:58:51 +0800
Subject: [PATCH] refactor preview_generator & changed width to 2400

---
 utils/preview_generator/index.mjs | 205 +++++++++++++++---------------
 1 file changed, 105 insertions(+), 100 deletions(-)

diff --git a/utils/preview_generator/index.mjs b/utils/preview_generator/index.mjs
index 18a83c66..895091c7 100644
--- a/utils/preview_generator/index.mjs
+++ b/utils/preview_generator/index.mjs
@@ -5,116 +5,121 @@ const sessions = JSON.parse(fs.readFileSync("../../public/sessions.json"));
 const NotoSansTCBold = fs.readFileSync("./fonts/NotoSansTC-Bold.otf");
 const NotoSansTCMedium = fs.readFileSync("./fonts/NotoSansTC-Medium.otf");
 const logoImage = fs.readFileSync("../../public/logo_2024.png");
-for (let session of sessions.sessions) {
-  const title = session.zh.title;
-  const speakers = session.speakers
-    .map((x) => sessions.speakers.find((speaker) => speaker.id == x)?.zh.name)
-    .filter((x) => x)
-    .join("、");
-  if (session.zh.description == "") continue;
-  console.time(session.zh.title);
-  const svg = await satori(
-    {
-      type: "div",
-      props: {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          backgroundColor: "#F8F3E8",
-          color: "#385AAC",
-          padding: 64,
-          height: 600,
-          width: 1200,
-        },
-        children: [
-          {
-            type: "div",
-            props: {
-              children: "Presentation",
-              style: {
-                fontSize: 32,
-              },
-            },
+const t = performance.now();
+
+await Promise.all(
+  sessions.sessions.map(async (session) => {
+    const title = session.zh.title;
+    const speakers = session.speakers
+      .map((x) => sessions.speakers.find((speaker) => speaker.id == x)?.zh.name)
+      .filter((x) => x)
+      .join("、");
+    if (session.zh.description == "") return;
+
+    const svg = await satori(
+      {
+        type: "div",
+        props: {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: "#F8F3E8",
+            color: "#385AAC",
+            padding: 64,
+            height: 600,
+            width: 1200,
           },
-          {
-            type: "div",
-            props: {
-              children: title,
-              style: {
-                fontSize: 64,
-                fontWeight: 700,
+          children: [
+            {
+              type: "div",
+              props: {
+                children: "Presentation",
+                style: {
+                  fontSize: 32,
+                },
               },
             },
-          },
-          {
-            type: "div",
-            props: {
-              style: {
-                flex: 1,
+            {
+              type: "div",
+              props: {
+                children: title,
+                style: {
+                  fontSize: 64,
+                  fontWeight: 700,
+                },
               },
             },
-          },
-          {
-            type: "div",
-            props: {
-              style: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "flex-end",
+            {
+              type: "div",
+              props: {
+                style: {
+                  flex: 1,
+                },
               },
-              children: [
-                {
-                  type: "div",
-                  props: {
-                    children: speakers,
-                    style: {
-                      fontSize: 48,
+            },
+            {
+              type: "div",
+              props: {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "flex-end",
+                },
+                children: [
+                  {
+                    type: "div",
+                    props: {
+                      children: speakers,
+                      style: {
+                        fontSize: 48,
+                      },
                     },
                   },
-                },
-                {
-                  type: "img",
-                  props: {
-                    height: 128,
-                    src: `data:image/png;base64,${Buffer.from(
-                      logoImage,
-                    ).toString("base64")}`,
+                  {
+                    type: "img",
+                    props: {
+                      height: 128,
+                      src: `data:image/png;base64,${Buffer.from(
+                        logoImage,
+                      ).toString("base64")}`,
+                    },
                   },
-                },
-              ],
+                ],
+              },
             },
+          ],
+        },
+      },
+      {
+        width: 1200,
+        height: 600,
+        fonts: [
+          {
+            name: "Noto Sans TC",
+            data: NotoSansTCMedium,
+            weight: 500,
+            style: "normal",
+          },
+          {
+            name: "Noto Sans TC",
+            data: NotoSansTCBold,
+            weight: 700,
+            style: "normal",
           },
         ],
       },
-    },
-    {
-      width: 1200,
-      height: 600,
-      fonts: [
-        {
-          name: "Noto Sans TC",
-          data: NotoSansTCMedium,
-          weight: 500,
-          style: "normal",
-        },
-        {
-          name: "Noto Sans TC",
-          data: NotoSansTCBold,
-          weight: 700,
-          style: "normal",
-        },
-      ],
-    },
-  );
-  const resvg = new Resvg(svg, {
-    fitTo: {
-      mode: "width",
-      value: 1200,
-    },
-  });
-  const pngData = resvg.render();
-  const pngBuffer = pngData.asPng();
-  fs.mkdirSync("../../public/sessions", { recursive: true });
-  fs.writeFileSync(`../../public/sessions/${session.id}.png`, pngBuffer);
-  console.timeEnd(session.zh.title);
-}
+    );
+    const resvg = new Resvg(svg, {
+      fitTo: {
+        mode: "width",
+        width: 2400,
+      },
+    });
+    const pngData = resvg.render();
+    const pngBuffer = pngData.asPng();
+    fs.mkdirSync("../../public/sessions", { recursive: true });
+    fs.writeFileSync(`../../public/sessions/${session.id}.png`, pngBuffer);
+    console.log(session.zh.title);
+  }),
+);
+console.info("✨ Done in", ((performance.now() - t) / 1000).toFixed(2), "s");