Add metadata to DA pages (l2beat#5679)

packages/frontend/src/app/(side-nav)/data-availability/risk/page.tsx

@@ -7,13 +7,20 @@ import {
 } from '~/components/core/directory-tabs'
 import { MainPageHeader } from '~/components/main-page-header'
 import { getDaRiskEntries } from '~/server/features/data-availability/risks/get-da-risk-entries'
+import { getDefaultMetadata } from '~/utils/metadata'
 import {
   CustomSystemInfo,
   PublicSystemInfo,
 } from '../_components/da-category-info'
 import { groupBySystem } from '../_utils/group-by-system'
 import { DaRiskTable } from './_components/table/da-risk-table'
 
+export const metadata = getDefaultMetadata({
+  openGraph: {
+    url: '/data-availability/risk',
+  },
+})
+
 export default async function Page() {
   const items = await getDaRiskEntries()
   const { publicSystems, customSystems } = groupBySystem(items)

packages/frontend/src/app/(side-nav)/data-availability/summary/page.tsx

@@ -7,6 +7,7 @@ import {
 } from '~/components/core/directory-tabs'
 import { MainPageHeader } from '~/components/main-page-header'
 import { getDaSummaryEntries } from '~/server/features/data-availability/summary/get-da-summary-entries'
+import { getDefaultMetadata } from '~/utils/metadata'
 import {
   CustomSystemInfo,
   PublicSystemInfo,
@@ -15,6 +16,12 @@ import { groupBySystem } from '../_utils/group-by-system'
 import { DaSummaryCustomTable } from './_components/table/da-summary-custom-table'
 import { DaSummaryPublicTable } from './_components/table/da-summary-public-table'
 
+export const metadata = getDefaultMetadata({
+  openGraph: {
+    url: '/data-availability/summary',
+  },
+})
+
 export default async function Page() {
   const items = await getDaSummaryEntries()
   const { publicSystems, customSystems } = groupBySystem(items)

packages/frontend/src/app/(top-nav)/data-availability/projects/[layer]/[bridge]/opengraph-image.tsx

@@ -0,0 +1,79 @@
+import { daLayers } from '@l2beat/config'
+import { ImageResponse } from 'next/og'
+import { NextResponse } from 'next/server'
+import { ProjectOpengraphImage } from '~/components/opengraph-image/project'
+import { env } from '~/env'
+
+export const runtime = 'nodejs'
+
+const size = {
+  width: 1200,
+  height: 630,
+}
+
+export async function generateStaticParams() {
+  return daLayers.map((project) => ({
+    layer: project.display.slug,
+  }))
+}
+
+export async function generateImageMetadata({ params }: Props) {
+  return [
+    {
+      id: params.layer,
+      size,
+      alt: `Project page for ${params.layer}`,
+      contentType: 'image/png',
+    },
+  ]
+}
+
+interface Props {
+  params: {
+    layer: string
+  }
+}
+
+export default async function Image({ params }: Props) {
+  const project = daLayers.find((p) => p.display.slug === params.layer)
+  if (!project) {
+    return NextResponse.json({ error: 'Project not found' }, { status: 404 })
+  }
+  const baseUrl = env.VERCEL_URL
+    ? `https://${env.VERCEL_URL}`
+    : 'http://localhost:3000'
+  const [robotoMedium, robotoBold] = [
+    fetch(`${baseUrl}/fonts/roboto/roboto-latin-500.ttf`).then((res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(`${baseUrl}/fonts/roboto/roboto-latin-700.ttf`).then((res) =>
+      res.arrayBuffer(),
+    ),
+  ]
+  return new ImageResponse(
+    <ProjectOpengraphImage
+      background="da-beat"
+      baseUrl={baseUrl}
+      slug={project.display.slug}
+      name={project.display.name}
+      size={size}
+    />,
+    {
+      ...size,
+      fonts: [
+        {
+          name: 'roboto',
+          data: await robotoMedium,
+          style: 'normal',
+          weight: 500,
+        },
+        {
+          name: 'roboto',
+          data: await robotoBold,
+          style: 'normal',
+          weight: 700,
+        },
+      ],
+    },
+  )
+}

packages/frontend/src/app/(top-nav)/data-availability/projects/[layer]/[bridge]/page.tsx

@@ -6,6 +6,7 @@ import { MobileProjectNavigation } from '~/components/projects/navigation/mobile
 import { projectDetailsToNavigationSections } from '~/components/projects/navigation/types'
 import { ProjectDetails } from '~/components/projects/project-details'
 import { getDaProjectEntry } from '~/server/features/data-availability/project/get-da-project-entry'
+import { getProjectMetadata } from '~/utils/metadata'
 import { DaProjectSummary } from '../_components/da-project-summary'
 
 interface Props {
@@ -15,6 +16,31 @@ interface Props {
   }>
 }
 
+export async function generateMetadata(props: Props) {
+  const params = await props.params
+  const layer = daLayers.find((layer) => layer.display.slug === params.layer)
+  if (!layer) {
+    notFound()
+  }
+  const bridge = layer.bridges.find(
+    (bridge) => bridge.display.slug === params.bridge,
+  )
+  if (!bridge) {
+    notFound()
+  }
+  return getProjectMetadata({
+    project: {
+      name: layer.display.name,
+      description: layer.display.description,
+    },
+    metadata: {
+      openGraph: {
+        url: `/data-availability/projects/${layer.display.slug}/${bridge.display.slug}`,
+      },
+    },
+  })
+}
+
 export default async function Page(props: Props) {
   const params = await props.params
   const daLayer = daLayers.find((p) => p.display.slug === params.layer)

packages/frontend/src/components/opengraph-image/project.tsx

@@ -2,6 +2,7 @@
 
 interface Props {
   baseUrl: string
+  background?: 'default' | 'da-beat'
   slug: string
   name: string
   size: {
@@ -10,7 +11,13 @@ interface Props {
   }
 }
 
-export function ProjectOpengraphImage({ baseUrl, slug, name, size }: Props) {
+export function ProjectOpengraphImage({
+  baseUrl,
+  slug,
+  name,
+  size,
+  background = 'default',
+}: Props) {
   return (
     <div
       style={{
@@ -21,7 +28,7 @@ export function ProjectOpengraphImage({ baseUrl, slug, name, size }: Props) {
       }}
     >
       <img
-        src={`${baseUrl}/meta-images/projects/template.png`}
+        src={`${baseUrl}/meta-images/projects/${background === 'default' ? 'template.png' : 'da-beat-template.jpg'}`}
         alt=""
         {...size}
       />