refactor: extract hexToRgb function

EATSTEAK · Dec 14, 2024 · 603b4bc · 603b4bc
1 parent b67a8fa
commit 603b4bc
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 57 deletions.
diff --git a/src/pages/card/og/[...slug].png.ts b/src/pages/card/og/[...slug].png.ts
@@ -5,6 +5,7 @@ import sharp from "sharp";
 import type { APIRoute } from "astro";
 import { CATEGORIES } from "@consts";
 import { getReadingTime } from "@utils/reading-time";
+import { hexToRgb } from "@utils/hex-to-rgb.ts";
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
@@ -62,24 +63,24 @@ export const GET: APIRoute = async function GET({ props }) {
     timeStyle: "short",
   });
 
-  const hexToRgb = (hex: string) => {
-    let hexsplit = hex
-      .replace(
-        /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
-        (_m, r, g, b) => "#" + r + r + g + g + b + b,
-      )
-      .substring(1)
-      .match(/.{2}/g);
-    if (hexsplit == null) return null;
-    return hexsplit.map((x) => parseInt(x, 16));
-  };
-
-  const bgRgb = hexToRgb(category.color.light.bg);
+  const bgRgba = (alpha: number) =>
+    `rgba(${hexToRgb(category.color.light.bg).join(", ")}, ${alpha})`;
   const minutesToRead = getReadingTime(props.body) ?? 0;
   const svg = await satori(
     {
       type: "div",
       props: {
+        style: {
+          position: "relative",
+          display: "flex",
+          width: "1200px",
+          height: "600px",
+          padding: "80px 80px 60px 80px",
+          gap: "8px",
+          flexDirection: "column",
+          alignItems: "stretch",
+          backgroundColor: "#fff",
+        },
         children: [
           // Background
           {
@@ -91,7 +92,7 @@ export const GET: APIRoute = async function GET({ props }) {
                 left: "0",
                 width: "1500px",
                 height: "900px",
-                background: `linear-gradient(4deg, rgba(${bgRgb?.[0] ?? 0},${bgRgb?.[1] ?? 0},${bgRgb?.[2] ?? 0},0) 35%, rgba(${bgRgb?.[0] ?? 0},${bgRgb?.[1] ?? 0},${bgRgb?.[2] ?? 0},0.1) 72%, rgba(${bgRgb?.[0] ?? 0},${bgRgb?.[1] ?? 0},${bgRgb?.[2] ?? 0},1) 80%)`,
+                background: `linear-gradient(4deg, ${bgRgba(0)} 35%, ${bgRgba(0.1)} 72%, ${bgRgba(1)} 80%)`,
                 clipPath: `path("${grillPath}")`,
                 transform: "translateY(-120px) rotate(-8deg)",
               },
@@ -100,11 +101,14 @@ export const GET: APIRoute = async function GET({ props }) {
           {
             type: "div",
             props: {
+              style: {
+                display: "flex",
+                alignItems: "flex-start",
+              },
               children: [
                 {
                   type: "div",
                   props: {
-                    children: `${category.name}`,
                     style: {
                       color: `${category.color.light.text}`,
                       backgroundColor: `${category.color.light.bg}`,
@@ -114,19 +118,15 @@ export const GET: APIRoute = async function GET({ props }) {
                       fontWeight: "500",
                       textTransform: "uppercase",
                     },
+                    children: `${category.name}`,
                   },
                 },
               ],
-              style: {
-                display: "flex",
-                alignItems: "flex-start",
-              },
             },
           },
           {
             type: "h1",
             props: {
-              children: `${props.data.title}`,
               style: {
                 fontFamily: "Jost, 'Noto Sans KR'",
                 fontSize: "56px",
@@ -136,29 +136,29 @@ export const GET: APIRoute = async function GET({ props }) {
                 margin: "0 0 8px 0",
                 wordBreak: "keep-all",
               },
+              children: `${props.data.title}`,
             },
           },
           {
             type: "p",
             props: {
-              children: `${formatter.format(new Date(props.data.pubDate))} | ${
-                minutesToRead < 1
-                  ? "1분 미만 소요"
-                  : `약 ${Math.ceil(minutesToRead)}분 소요`
-              }`,
               style: {
                 color: "rgb(100 116 139)",
                 fontFamily: "'Noto Sans KR'",
                 fontSize: "24px",
                 fontWeight: "500",
                 margin: "0 0",
               },
+              children: `${formatter.format(new Date(props.data.pubDate))} | ${
+                minutesToRead < 1
+                  ? "1분 미만 소요"
+                  : `약 ${Math.ceil(minutesToRead)}분 소요`
+              }`,
             },
           },
           {
             type: "p",
             props: {
-              children: `${props.data.description}`,
               style: {
                 color: "rgb(51 65 85)",
                 fontFamily: "'Noto Sans KR'",
@@ -168,11 +168,18 @@ export const GET: APIRoute = async function GET({ props }) {
                 margin: "0 0",
                 wordBreak: "keep-all",
               },
+              children: `${props.data.description}`,
             },
           },
           {
             type: "div",
             props: {
+              style: {
+                display: "flex",
+                flexGrow: "1",
+                alignItems: "flex-end",
+                justifyContent: "flex-end",
+              },
               children: [
                 {
                   type: "img",
@@ -182,26 +189,9 @@ export const GET: APIRoute = async function GET({ props }) {
                   },
                 },
               ],
-              style: {
-                display: "flex",
-                flexGrow: "1",
-                alignItems: "flex-end",
-                justifyContent: "flex-end",
-              },
             },
           },
         ],
-        style: {
-          position: "relative",
-          display: "flex",
-          width: "1200px",
-          height: "600px",
-          padding: "80px 80px 60px 80px",
-          gap: "8px",
-          flexDirection: "column",
-          alignItems: "stretch",
-          backgroundColor: "#fff",
-        },
       },
     },
     {

diff --git a/src/pages/card/square/[...slug].png.ts b/src/pages/card/square/[...slug].png.ts
@@ -5,6 +5,7 @@ import sharp from "sharp";
 import type { APIRoute } from "astro";
 import { CATEGORIES } from "@consts";
 import { getReadingTime } from "@utils/reading-time";
+import { hexToRgb } from "@utils/hex-to-rgb.ts";
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
@@ -70,19 +71,8 @@ export const GET: APIRoute = async function GET({ props }) {
     timeStyle: "short",
   });
 
-  const hexToRgb = (hex: string) => {
-    let hexsplit = hex
-      .replace(
-        /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
-        (_m, r, g, b) => "#" + r + r + g + g + b + b,
-      )
-      .substring(1)
-      .match(/.{2}/g);
-    if (hexsplit == null) return null;
-    return hexsplit.map((x) => parseInt(x, 16));
-  };
-
-  const bgRgb = hexToRgb(category.color.light.bg);
+  const bgRgba = (alpha: number) =>
+    `rgba(${hexToRgb(category.color.light.bg).join(", ")}, ${alpha})`;
   const minutesToRead = getReadingTime(props.body) ?? 0;
   const topics = (props.data.topics ?? []).map((topic: string) => ({
     type: "div",
@@ -113,7 +103,7 @@ export const GET: APIRoute = async function GET({ props }) {
                 left: "0",
                 width: "1500px",
                 height: "1500px",
-                background: `linear-gradient(4deg, rgba(${bgRgb?.[0] ?? 0},${bgRgb?.[1] ?? 0},${bgRgb?.[2] ?? 0},0) 35%, rgba(${bgRgb?.[0] ?? 0},${bgRgb?.[1] ?? 0},${bgRgb?.[2] ?? 0},0.1) 72%, rgba(${bgRgb?.[0] ?? 0},${bgRgb?.[1] ?? 0},${bgRgb?.[2] ?? 0},1) 80%)`,
+                background: `linear-gradient(4deg, ${bgRgba(0)} 35%, ${bgRgba(0.1)} 72%, ${bgRgba(1)} 80%)`,
                 clipPath: `path("${grillPath}")`,
                 transform: "translateY(-120px) rotate(-8deg)",
               },

diff --git a/src/utils/hex-to-rgb.ts b/src/utils/hex-to-rgb.ts
@@ -0,0 +1,11 @@
+export const hexToRgb = (hex: string) => {
+  let hexsplit = hex
+    .replace(
+      /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+      (_m, r, g, b) => "#" + r + r + g + g + b + b,
+    )
+    .substring(1)
+    .match(/.{2}/g);
+  if (hexsplit == null) return [];
+  return hexsplit.map((x) => parseInt(x, 16) ?? 0);
+};