feat(insights): add opengraph images & improve metadata

Author: cprussin

apps/insights/src/app/opengraph-image.png

@@ -1,9 +1,32 @@
 import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+import { Cluster, getFeeds } from "../../../services/pyth";
 
 export { PriceFeedLayout as default } from "../../../components/PriceFeed/layout";
 
-export const metadata: Metadata = {
-  title: "Price Feeds",
+type Props = {
+  params: Promise<{
+    slug: string;
+  }>;
+};
+
+export const generateMetadata = async ({
+  params,
+}: Props): Promise<Metadata> => {
+  const [{ slug }, feeds] = await Promise.all([
+    params,
+    getFeeds(Cluster.Pythnet),
+  ]);
+  const symbol = decodeURIComponent(slug);
+  const feed = feeds.find((item) => item.symbol === symbol);
+
+  return feed
+    ? {
+        title: feed.product.display_symbol,
+        description: `See live market quotes for ${feed.product.description}.`,
+      }
+    : notFound();
 };
 
 export const dynamic = "error";

apps/insights/src/app/price-feeds/[slug]/layout.ts

@@ -1 +1,11 @@
+import type { Metadata } from "next";
+
 export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
+
+export const metadata: Metadata = {
+  title: {
+    default: "Price Feeds",
+    template: "%s | Price Feeds | Pyth Network Insights",
+  },
+  description: "Explore market data on the Pyth network.",
+};

apps/insights/src/app/price-feeds/layout.ts

@@ -1,10 +1,4 @@
-import type { Metadata } from "next";
-
 export { PriceFeeds as default } from "../../components/PriceFeeds";
 
-export const metadata: Metadata = {
-  title: "Price Feeds",
-};
-
 export const dynamic = "error";
 export const revalidate = 3600;

apps/insights/src/app/price-feeds/opengraph-image.png

@@ -1,9 +1,25 @@
+import { lookup } from "@pythnetwork/known-publishers";
 import type { Metadata } from "next";
 
 export { PublishersLayout as default } from "../../../../components/Publisher/layout";
 
-export const metadata: Metadata = {
-  title: "Publishers",
+type Props = {
+  params: Promise<{
+    key: string;
+  }>;
+};
+
+export const generateMetadata = async ({
+  params,
+}: Props): Promise<Metadata> => {
+  const { key } = await params;
+  const knownPublisher = lookup(key);
+  const publisher = knownPublisher?.name ?? key;
+
+  return {
+    title: publisher,
+    description: `Evaluate performance for data published by ${publisher}.`,
+  };
 };
 
 export const dynamic = "error";

apps/insights/src/app/price-feeds/page.ts

@@ -1 +1,11 @@
+import type { Metadata } from "next";
+
 export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
+
+export const metadata: Metadata = {
+  title: {
+    default: "Publishers",
+    template: "%s | Publishers | Pyth Network Insights",
+  },
+  description: "Explore publishers who contribute to the Pyth network.",
+};

apps/insights/src/app/publishers/[cluster]/[key]/layout.ts

@@ -1,10 +1,4 @@
-import type { Metadata } from "next";
-
 export { Publishers as default } from "../../components/Publishers";
 
-export const metadata: Metadata = {
-  title: "Publishers",
-};
-
 export const dynamic = "error";
 export const revalidate = 3600;