Move the use-case index onto Learn so the pilot stories stay reachable, and make share images resolve on the host that serves the page.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/layout.tsx

@@ -1,11 +1,13 @@
 import { Inter, Bricolage_Grotesque } from "next/font/google";
 import type { Metadata, Viewport } from "next";
 import type { ReactNode } from "react";
+import { headers } from "next/headers";
 import messages from "../messages/en/index";
 import { ASSETS, getAssetPath } from "../lib/assetUtils";
 import {
   defaultShareImages,
-  metadataBaseUrl,
+  originFromHost,
+  resolveRequestHost,
 } from "../lib/siteMetadata";
 import "./globals.css";
 
@@ -46,72 +48,80 @@ export const viewport: Viewport = {
   initialScale: 1,
 };
 
-export const metadata: Metadata = {
-  title: {
-    default: homeMeta.title,
-    template: messages.metadata.titleTemplate,
-  },
-  description: homeMeta.description,
-  keywords: [...homeMeta.keywords],
-  authors: [{ name: "Media Economies Design Lab" }],
-  creator: "Media Economies Design Lab",
-  publisher: "Media Economies Design Lab",
-  formatDetection: {
-    email: false,
-    address: false,
-    telephone: false,
-  },
-  metadataBase: metadataBaseUrl(),
-  icons: {
-    icon: [
-      { url: getAssetPath(ASSETS.LOGO), type: "image/svg+xml" },
-      { url: "/favicon.ico", sizes: "any" },
-      {
-        url: "/favicon-32x32.png",
-        sizes: "32x32",
-        type: "image/png",
-      },
-      {
-        url: "/favicon-16x16.png",
-        sizes: "16x16",
-        type: "image/png",
-      },
-    ],
-    apple: [
-      {
-        url: "/apple-touch-icon.png",
-        sizes: "180x180",
-        type: "image/png",
-      },
-    ],
-  },
-  openGraph: {
-    title: homeMeta.title,
+export async function generateMetadata(): Promise<Metadata> {
+  const headerStore = await headers();
+  const host = resolveRequestHost(
+    headerStore.get("x-forwarded-host"),
+    headerStore.get("host"),
+  );
+
+  return {
+    title: {
+      default: homeMeta.title,
+      template: messages.metadata.titleTemplate,
+    },
     description: homeMeta.description,
-    url: "/",
-    siteName: messages.metadata.siteName,
-    locale: "en_US",
-    type: "website",
-    images: defaultShareImages(),
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: homeMeta.title,
-    description: homeMeta.description,
-    images: defaultShareImages().map((image) => image.url),
-  },
-  robots: {
-    index: true,
-    follow: true,
-    googleBot: {
+    keywords: [...homeMeta.keywords],
+    authors: [{ name: "Media Economies Design Lab" }],
+    creator: "Media Economies Design Lab",
+    publisher: "Media Economies Design Lab",
+    formatDetection: {
+      email: false,
+      address: false,
+      telephone: false,
+    },
+    metadataBase: new URL(originFromHost(host)),
+    icons: {
+      icon: [
+        { url: getAssetPath(ASSETS.LOGO), type: "image/svg+xml" },
+        { url: "/favicon.ico", sizes: "any" },
+        {
+          url: "/favicon-32x32.png",
+          sizes: "32x32",
+          type: "image/png",
+        },
+        {
+          url: "/favicon-16x16.png",
+          sizes: "16x16",
+          type: "image/png",
+        },
+      ],
+      apple: [
+        {
+          url: "/apple-touch-icon.png",
+          sizes: "180x180",
+          type: "image/png",
+        },
+      ],
+    },
+    openGraph: {
+      title: homeMeta.title,
+      description: homeMeta.description,
+      url: "/",
+      siteName: messages.metadata.siteName,
+      locale: "en_US",
+      type: "website",
+      images: defaultShareImages(),
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: homeMeta.title,
+      description: homeMeta.description,
+      images: defaultShareImages().map((image) => image.url),
+    },
+    robots: {
       index: true,
       follow: true,
-      "max-video-preview": -1,
-      "max-image-preview": "large",
-      "max-snippet": -1,
+      googleBot: {
+        index: true,
+        follow: true,
+        "max-video-preview": -1,
+        "max-image-preview": "large",
+        "max-snippet": -1,
+      },
     },
-  },
-};
+  };
+}
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   // Load messages for the default locale (single locale setup)
@@ -138,9 +148,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           type="image/png"
         />
       </head>
-      <body
-        className={`${inter.variable} ${bricolageGrotesque.variable}`}
-      >
+      <body className={`${inter.variable} ${bricolageGrotesque.variable}`}>
         <div className="mx-auto flex min-h-screen w-full max-w-[1920px] flex-col">
           {children}
         </div>