feat: simple SEO and sharing

.env.development

@@ -1,3 +1,6 @@
 NEXT_TELEMETRY_DISABLED=1
 CHAINHOOKS_API_TOKEN=dev-api-token
 DATABASE_PATH=./sqlite.db
+
+# Client environment variables
+NEXT_PUBLIC_BASE_URL=http://localhost:3000

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import Fathom from "@/components/Layout/Fathom";
 import { Footer } from "@/components/Layout/Footer";
 import { Header } from "@/components/Layout/Header";
+import { env } from "@/env";
 import { Theme } from "@radix-ui/themes";
 import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
@@ -14,8 +15,10 @@ const font = Poppins({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  metadataBase: new URL(env.NEXT_PUBLIC_BASE_URL),
+  title: "stackspulse",
+  description:
+    "Get the latest on-chain stats for the Stacks (STX) blockchain DeFi ecosystem. Real time feed, unique users, transactions, and more...",
 };
 
 export default function RootLayout({

src/app/protocols/[protocol]/opengraph-image.tsx

@@ -0,0 +1,58 @@
+import { env } from "@/env";
+import { type Protocol, protocolsInfo } from "@/lib/protocols";
+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: { protocol: string };
+}
+
+export default async function Image({ params }: PageProps) {
+  const protocol = params.protocol as Protocol;
+
+  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">
+        <img
+          tw="mr-4"
+          src={`${env.NEXT_PUBLIC_BASE_URL}/protocols/${protocol}.png`}
+          alt={alt}
+          height={100}
+          width={100}
+          style={{
+            borderRadius: "50%",
+            border: "2px solid white",
+          }}
+        />
+        {protocolsInfo[protocol].name}
+      </div>
+    </div>,
+    {
+      ...size,
+    },
+  );
+}

src/env.ts

@@ -7,9 +7,11 @@ export const env = createEnv({
     CHAINHOOKS_API_TOKEN: z.string().min(1),
   },
   client: {
+    NEXT_PUBLIC_BASE_URL: z.string().min(1),
     NEXT_PUBLIC_FATHOM_ID: z.string().optional(),
   },
   experimental__runtimeEnv: {
+    NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
     NEXT_PUBLIC_FATHOM_ID: process.env.NEXT_PUBLIC_FATHOM_ID,
   },
 });