Play a bit with og-image

the-guild-org · Jul 11, 2023 · 5c79f72 · 5c79f72
1 parent f6a6eb5
commit 5c79f72
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/packages/og-image/src/handler.tsx b/packages/og-image/src/handler.tsx
@@ -39,23 +39,28 @@ export async function handler(request: Request): Promise<Response> {
 
     const rawSvg = await toSVG(
       <div tw="flex bg-neutral-900 h-full flex-col w-full items-center justify-center text-center text-white p-10">
-        <LeftCircle tw="absolute left-0 top-0" color={product.primaryColor} />
-        <RightCircle tw="absolute right-0" color={product.primaryColor} />
+        <LeftCircle tw="absolute left-[-25px] top-[-120px]" color={product.primaryColor} />
+        <RightCircle tw="absolute right-[-100px]" color={product.primaryColor} />
         <RightSmallCircle
-          tw="absolute right-0 opacity-80"
+          tw="absolute left-[-25px] bottom-[-200px] opacity-80"
           color={product.primaryColor && shade(product.primaryColor, 100)}
         />
-        <product.logo style={{ width: 102, height: 108 }} />
-        <span tw="font-bold text-7xl my-5">{product.name}</span>
+        <div tw="flex flex-row items-center justify-center my-12">
+          <product.logo style={{ width: 102, height: 108 }} />
+          <div tw="font-semibold text-7xl ml-6">{product.name}</div>
+        </div>
         {title && (
           // @ts-expect-error This isn't a valid CSS property supported by browsers yet.
-          <span tw="font-bold text-5xl" style={{ textWrap: title.includes(' ') ? 'balance' : '' }}>
+          <span
+            tw="font-regular text-5xl mt-4"
+            style={{ textWrap: title.includes(' ') ? 'balance' : '' }}
+          >
             {title}
           </span>
         )}
         {extra && (
           <span
-            tw="font-bold text-2xl mt-4"
+            tw="font-regular text-2xl mt-4"
             // @ts-expect-error This isn't a valid CSS property supported by browsers yet.
             style={{ textWrap: extra.includes(' ') ? 'balance' : '' }}
           >

diff --git a/packages/og-image/src/utils.ts b/packages/og-image/src/utils.ts
@@ -73,21 +73,33 @@ export async function loadGoogleFont({
   return fetch(fontUrl).then(res => res.arrayBuffer());
 }
 
-let notoSans: Promise<ArrayBuffer>;
+let font400: Promise<ArrayBuffer>;
+let font600: Promise<ArrayBuffer>;
 let init = false;
 
 export async function toSVG(node: ReactNode): Promise<string> {
   if (!init) {
-    notoSans = await loadGoogleFont({
-      family: 'Noto Sans JP',
-      weight: 400,
-    });
+    const [f400, f600] = await Promise.all([
+      loadGoogleFont({
+        family: 'Inter',
+        weight: 400,
+      }),
+      loadGoogleFont({
+        family: 'Inter',
+        weight: 600,
+      }),
+    ]);
+    font400 = f400;
+    font600 = f600;
     await initWasm(resvgWasm);
     init = true;
   }
   return satori(node, {
     width: 1200,
     height: 600,
-    fonts: [{ name: 'NotoSansJP', data: notoSans, weight: 400 }],
+    fonts: [
+      { name: 'Inter', data: font400, weight: 400 },
+      { name: 'Inter', data: font600, weight: 600 },
+    ],
   });
 }