feat: use custom font

mrgnlabs · Jan 3, 2025 · a382667 · a382667
1 parent 669a7c2
commit a382667
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/apps/marginfi-v2-trading/src/components/common/Meta/Meta.tsx b/apps/marginfi-v2-trading/src/components/common/Meta/Meta.tsx
@@ -11,9 +11,10 @@ type MrgnProps = {
 };
 
 export const Meta = ({ groupPk, poolData, tokenDetails, baseUrl }: MrgnProps) => {
+  const _baseUrl = baseUrl ?? process.env.NEXT_PUBLIC_VERCEL_URL ?? "http://localhost:3006";
   let title = "The Arena";
   let description = "Memecoin trading, with leverage.";
-  let image = `${baseUrl}/metadata/metadata-image-default.png`;
+  let image = `${_baseUrl}/metadata/metadata-image-default.png`;
 
   if (groupPk) {
     const _poolData = poolData?.find((pool) => pool.group === groupPk);
@@ -28,7 +29,7 @@ export const Meta = ({ groupPk, poolData, tokenDetails, baseUrl }: MrgnProps) =>
     if (!_quoteTokenDetails) return;
     title = `Trade ${_tokenDetails?.symbol}/${_quoteTokenDetails?.symbol} with leverage in The Arena.`;
     description = `Trade ${_tokenDetails?.symbol} / ${_quoteTokenDetails?.symbol} with leverage in The Arena.`;
-    image = `${baseUrl}/api/share-image/generate?tokenSymbol=${_tokenDetails?.symbol}&tokenImageUrl=${_tokenDetails?.imageUrl}&quoteTokenSymbol=${_quoteTokenDetails?.symbol}&quoteTokenImageUrl=${_quoteTokenDetails?.imageUrl}`;
+    image = `${_baseUrl}/api/share-image/generate?tokenSymbol=${_tokenDetails?.symbol}&tokenImageUrl=${_tokenDetails?.imageUrl}&quoteTokenSymbol=${_quoteTokenDetails?.symbol}&quoteTokenImageUrl=${_quoteTokenDetails?.imageUrl}`;
   }
 
   return (

diff --git a/apps/marginfi-v2-trading/src/components/common/dynamic-share-image/dynamic-share-image.tsx b/apps/marginfi-v2-trading/src/components/common/dynamic-share-image/dynamic-share-image.tsx
@@ -27,15 +27,15 @@ export function DynamicShareImage({
         backgroundRepeat: "no-repeat",
         backgroundSize: "cover",
         position: "relative",
-        fontFamily: "var(--font-aeonik)",
+        fontFamily: "Orbitron",
       }}
     >
       <div
         style={{
           width: "84px",
           height: "84px",
           overflow: "hidden",
-          marginBottom: "20px",
+          marginBottom: "12px",
           padding: "2px",
           display: "flex",
         }}
@@ -51,6 +51,7 @@ export function DynamicShareImage({
             position: "absolute",
             height: "80px",
             width: "80px",
+            border: "1px solid black",
           }}
         />
         <img
@@ -66,6 +67,7 @@ export function DynamicShareImage({
             position: "absolute",
             bottom: "0",
             right: "0",
+            border: "1px solid black",
           }}
         />
       </div>
@@ -75,10 +77,9 @@ export function DynamicShareImage({
           fontSize: "32px",
           fontWeight: "bold",
           margin: 0,
-          fontFamily: "var(--font-aeonik)",
         }}
       >
-        {tokenSymbol}/{quoteTokenSymbol}
+        {tokenSymbol} / {quoteTokenSymbol}
       </h1>
     </div>
   );

diff --git a/apps/marginfi-v2-trading/src/pages/api/share-image/generate.tsx b/apps/marginfi-v2-trading/src/pages/api/share-image/generate.tsx
@@ -6,6 +6,20 @@ import { DynamicShareImage } from "~/components/common/dynamic-share-image";
 
 export const runtime = "edge";
 
+async function loadFont(font: string, text: string) {
+  const url = `https://fonts.googleapis.com/css2?family=${font}:wght@700&text=${encodeURIComponent(text)}`;
+  const css = await (await fetch(url)).text();
+  const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
+
+  if (resource) {
+    const response = await fetch(resource[1]);
+    if (response.ok) {
+      return await response.arrayBuffer();
+    }
+  }
+
+  throw new Error(`Failed to load font data for ${font}`);
+}
 // Generate link preview image
 // Note that a lot of usual CSS is unsupported, including tailwind.
 export default async function GET(request: NextRequest) {
@@ -30,6 +44,14 @@ export default async function GET(request: NextRequest) {
     {
       width: 720,
       height: 360,
+      fonts: [
+        {
+          name: "Orbitron",
+          data: await loadFont("Orbitron", `${tokenSymbol}/${quoteTokenSymbol}`),
+          weight: 700,
+          style: "normal",
+        },
+      ],
     }
   );
 }