feat: SEO tokens page

.changeset/pretty-tables-melt.md

@@ -0,0 +1,5 @@
+---
+"stackspulse": patch
+---
+
+Add SEO to new tokens page.

apps/web/src/app/tokens/[token]/opengraph-image.tsx

@@ -0,0 +1,70 @@
+import { env } from "@/env";
+import { stacksTokensApi } from "@/lib/stacks";
+import { notFound } from "next/navigation";
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const alt = "About Protocol";
+export const size = {
+  width: 1012,
+  height: 506,
+};
+
+export const contentType = "image/png";
+
+interface PageProps {
+  params: { token: string };
+}
+
+export default async function Image({ params }: PageProps) {
+  const tokenInfo = await stacksTokensApi
+    .getFtMetadata(params.token)
+    .catch((error) => {
+      if (error.status === 404) {
+        return null;
+      }
+      throw error;
+    });
+  if (!tokenInfo) {
+    notFound();
+  }
+
+  return new ImageResponse(
+    <div
+      style={{
+        fontSize: 60,
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        padding: "60px",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        background: `url("${env.NEXT_PUBLIC_BASE_URL}/og/protocol-background.png")`,
+        backgroundSize: "cover",
+        backgroundPosition: "center center",
+        backgroundRepeat: "no-repeat",
+        color: "white",
+      }}
+    >
+      <div tw="flex items-center">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          tw="mr-4"
+          src={tokenInfo.image_thumbnail_uri || tokenInfo.image_uri}
+          alt={alt}
+          height={100}
+          width={100}
+          style={{
+            borderRadius: "50%",
+            border: "2px solid white",
+          }}
+        />
+        {tokenInfo.symbol}
+      </div>
+    </div>,
+    {
+      ...size,
+    },
+  );
+}

apps/web/src/app/tokens/[token]/page.tsx

@@ -4,6 +4,7 @@ import { TokenStats } from "@/components/Token/TokenStats";
 import { TokenTransactionsVolume } from "@/components/Token/TokenTransactionsVolume";
 import { stacksTokensApi } from "@/lib/stacks";
 import { Container } from "@radix-ui/themes";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { Suspense } from "react";
 
@@ -13,6 +14,30 @@ interface PageProps {
   params: { token: string };
 }
 
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const tokenInfo = await stacksTokensApi
+    .getFtMetadata(params.token)
+    .catch((error) => {
+      if (error.status === 404) {
+        return null;
+      }
+      throw error;
+    });
+  if (!tokenInfo) {
+    notFound();
+  }
+
+  return {
+    title: `stackspulse - ${tokenInfo.name}`,
+    description: `Get the latest ${tokenInfo.name} on-chain stats. Explore holders, transaction volume, and more..`,
+    alternates: {
+      canonical: `/tokens/${params.token}`,
+    },
+  };
+}
+
 export default async function ProtocolPage({ params }: PageProps) {
   const tokenInfo = await stacksTokensApi
     .getFtMetadata(params.token)