Use metadata on app/layout

scaffold-eth · Apr 16, 2024 · cb47ae9 · cb47ae9
1 parent b66274b
commit cb47ae9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 55 deletions.
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -1,57 +1,13 @@
 import "@rainbow-me/rainbowkit/styles.css";
-import { Metadata } from "next";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
-  : `http://localhost:${process.env.PORT || 3000}`;
-const imageUrl = `${baseUrl}/thumbnail.jpg`;
-
-const title = "Scaffold-ETH 2 App";
-const titleTemplate = "%s | Scaffold-ETH 2";
-const description = "Built with 🏗 Scaffold-ETH 2";
-
-export const metadata: Metadata = {
-  metadataBase: new URL(baseUrl),
-  title: {
-    default: title,
-    template: titleTemplate,
-  },
-  description,
-  openGraph: {
-    title: {
-      default: title,
-      template: titleTemplate,
-    },
-    description,
-    images: [
-      {
-        url: imageUrl,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [imageUrl],
-    title: {
-      default: title,
-      template: titleTemplate,
-    },
-    description,
-  },
-  icons: {
-    icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
-  },
-  other: {
-    "fc:frame": "vNext",
-    "fc:frame:image": imageUrl,
-    "fc:frame:button:1": "Open my 🏗️ Scaffold-ETH 2 dApp",
-    "fc:frame:button:1:action": "link",
-    "fc:frame:button:1:target": baseUrl,
-  },
-};
+export const metadata = getMetadata({
+  title: "Scaffold-ETH 2 App",
+  description: "Built with 🏗 Scaffold-ETH 2",
+});
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (

diff --git a/packages/nextjs/utils/scaffold-eth/getMetadata.ts b/packages/nextjs/utils/scaffold-eth/getMetadata.ts
@@ -1,5 +1,10 @@
 import type { Metadata } from "next";
 
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : `http://localhost:${process.env.PORT || 3000}`;
+const titleTemplate = "%s | Scaffold-ETH 2";
+
 export const getMetadata = ({
   title,
   description,
@@ -9,15 +14,19 @@ export const getMetadata = ({
   description: string;
   imageRelativePath?: string;
 }): Metadata => {
-  const baseUrl = process.env.VERCEL_URL
-    ? `https://${process.env.VERCEL_URL}`
-    : `http://localhost:${process.env.PORT || 3000}`;
   const imageUrl = `${baseUrl}${imageRelativePath}`;
+
   return {
-    title: title,
+    title: {
+      default: title,
+      template: titleTemplate,
+    },
     description: description,
     openGraph: {
-      title: title,
+      title: {
+        default: title,
+        template: titleTemplate,
+      },
       description: description,
       images: [
         {
@@ -26,7 +35,10 @@ export const getMetadata = ({
       ],
     },
     twitter: {
-      title: title,
+      title: {
+        default: title,
+        template: titleTemplate,
+      },
       description: description,
       images: [imageUrl],
     },