Enricobarbieri1997/og images dynamic generation

packages/web/package.json

@@ -78,6 +78,7 @@
     "@trpc/next": "^10.45.1",
     "@trpc/react-query": "^10.45.1",
     "@trpc/server": "^10.45.1",
+    "@vercel/og": "^0.6.4",
     "@vercel/otel": "^1.9.1",
     "@vercel/speed-insights": "^1.0.12",
     "@visx/curve": "^2.17.0",

packages/web/pages/api/og-images/assets/[denom].tsx

@@ -0,0 +1,118 @@
+import { getAsset, getAssetPrice } from "@osmosis-labs/server";
+import { ImageResponse } from "next/og";
+
+import { AssetLists } from "~/config/generated/asset-lists";
+import { loadGoogleFont } from "~/utils/og-images";
+import { getBaseUrl } from "~/utils/url";
+
+// App router includes @vercel/og.
+// No need to install it.
+
+// We're using the edge-runtime
+export const config = {
+  runtime: "edge",
+};
+
+const imageHeight = 240;
+const imageAspectRatio = 1.97;
+const textOsmoverse300 = "text-[#B0AADC]";
+const baseUrl = getBaseUrl();
+
+export default async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const tokenDenom = searchParams.get("denom");
+  if (!tokenDenom) {
+    return new Response("Denom is required", { status: 400 });
+  }
+  const tokenDetails = getAsset({
+    assetLists: AssetLists,
+    anyDenom: tokenDenom,
+  });
+  let tokenPrice = undefined;
+  if (tokenDetails.coinGeckoId) {
+    try {
+      tokenPrice = await getAssetPrice({
+        chainList: [],
+        assetLists: AssetLists,
+        asset: {
+          coinDenom: tokenDetails.coinMinimalDenom,
+          coinGeckoId: tokenDetails.coinGeckoId,
+        },
+        currency: "usd",
+      });
+    } catch (error) {
+      console.error("Failed to get asset price", error);
+    }
+  }
+  const token = tokenDetails;
+  const title = token.coinName;
+  const formattedTokenPrice = tokenPrice ? tokenPrice.toString(2) : "";
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontFamily: "Inter",
+        }}
+        tw="flex h-screen w-screen px-6 py-8 bg-[#090524]"
+      >
+        <div tw="flex w-2/5 mr-7">
+          {token.coinImageUrl ? (
+            <img
+              src={`${baseUrl}${token.coinImageUrl}`}
+              alt={token.coinName}
+              tw="h-auto"
+            />
+          ) : null}
+        </div>
+        <div tw="flex flex-col justify-center w-3/5">
+          <div tw="flex flex-col mb-2">
+            <h6
+              style={{
+                fontSize: "70px",
+                lineHeight: "60px",
+              }}
+              tw={`m-0 mb-1 text-white`}
+            >
+              {token.coinDenom}
+            </h6>
+            {title ? (
+              <h6
+                style={{
+                  fontSize: "24px",
+                }}
+                tw={`${textOsmoverse300} m-0 ml-3`}
+              >
+                {title}
+              </h6>
+            ) : null}
+          </div>
+          {tokenPrice ? (
+            <h6
+              style={{
+                fontSize: "54px",
+                lineHeight: "30px",
+              }}
+              tw={`m-0 ml-2 text-white`}
+            >
+              ${formattedTokenPrice}
+            </h6>
+          ) : null}
+        </div>
+      </div>
+    ),
+    {
+      width: imageHeight * imageAspectRatio,
+      height: imageHeight,
+      fonts: [
+        {
+          name: "Geist",
+          data: await loadGoogleFont(
+            "Inter",
+            token.coinDenom.toString() + title + formattedTokenPrice
+          ),
+          style: "normal",
+        },
+      ],
+    }
+  );
+}

packages/web/pages/assets/[denom].tsx

@@ -46,6 +46,7 @@ import { AssetInfoViewProvider } from "~/hooks/use-asset-info-view";
 import { PreviousTrade, SwapPreviousTradeKey } from "~/pages";
 import { SUPPORTED_LANGUAGES } from "~/stores/user-settings";
 import { trpcHelpers } from "~/utils/helpers";
+import { getBaseUrl } from "~/utils/url";
 
 type AssetInfoPageStaticProps = InferGetStaticPropsType<typeof getStaticProps>;
 
@@ -79,6 +80,10 @@ const AssetInfoView: FunctionComponent<AssetInfoPageStaticProps> = observer(
 
     const { title, details, coinGeckoId, asset: asset } = useAssetInfo();
 
+    const pageTitle = `${
+      title ? `${title} (${asset.coinDenom})` : asset.coinDenom
+    } | Osmosis`;
+
     if (!asset) {
       return null;
     }
@@ -166,10 +171,20 @@ const AssetInfoView: FunctionComponent<AssetInfoPageStaticProps> = observer(
           strategy="afterInteractive"
         />
         <NextSeo
-          title={`${
-            title ? `${title} (${asset.coinDenom})` : asset.coinDenom
-          } | Osmosis`}
+          title={pageTitle}
           description={details?.description}
+          openGraph={{
+            title: pageTitle,
+            description: details?.description?.substring(0, 120) + "...",
+            images: [
+              {
+                url: `${getBaseUrl(true)}/api/og-images/assets/${
+                  asset.coinDenom
+                }`,
+                alt: title,
+              },
+            ],
+          }}
         />
         <main className="mx-auto flex max-w-7xl flex-col gap-8 px-10 pb-11 xs:px-2">
           <LinkButton

packages/web/utils/og-images.ts

@@ -0,0 +1,19 @@
+export async function loadGoogleFont(font: string, text: string) {
+  const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(
+    text
+  )}`;
+  console.log(url);
+  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.status == 200) {
+      return await response.arrayBuffer();
+    }
+  }
+
+  throw new Error("failed to load font data");
+}

packages/web/utils/trpc.ts

@@ -27,12 +27,7 @@ import {
   constructEdgeUrlPathname,
   EdgeRouterKey,
 } from "~/utils/trpc-edge";
-
-const getBaseUrl = () => {
-  if (typeof window !== "undefined") return ""; // browser should use relative url
-  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
-  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
-};
+import { getBaseUrl } from "~/utils/url";
 
 /**
  * Create a minimal local router to avoid importing

packages/web/utils/url.ts

@@ -1,3 +1,9 @@
+export const getBaseUrl = (absolute = false) => {
+  if (!absolute && typeof window !== "undefined") return ""; // browser should use relative url
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
+  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
+};
+
 export function removeQueryParam(key: string) {
   if (!key) return;
   if (typeof window === "undefined") return;