Logo metadata templates (#131)

scaffold-eth · Oct 14, 2024 · 9151c92 · 9151c92
1 parent 2270abb
commit 9151c92
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/.changeset/purple-bulldogs-add.md b/.changeset/purple-bulldogs-add.md
@@ -0,0 +1,5 @@
+---
+"create-eth": patch
+---
+
+template: allow passing metadata & header logoText and description
diff --git a/templates/base/packages/nextjs/app/layout.tsx.template.mjs b/templates/base/packages/nextjs/app/layout.tsx.template.mjs
@@ -1,6 +1,6 @@
 import { withDefaults } from "../../../../utils.js";
 
-const contents = ({ imports }) => {
+const contents = ({ imports, metadata }) => {
   return `
 ${imports.filter(Boolean).join("\n")}
 import "@rainbow-me/rainbowkit/styles.css";
@@ -9,10 +9,7 @@ import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
-export const metadata = getMetadata({
-  title: "Scaffold-ETH 2 App",
-  description: "Built with 🏗 Scaffold-ETH 2",
-});
+export const metadata = getMetadata(${JSON.stringify(metadata[0])});
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -30,5 +27,9 @@ export default ScaffoldEthApp;`;
 };
 
 export default withDefaults(contents, {
-  imports: ""
+  imports: "",
+  metadata: {
+    title: "Scaffold-ETH 2 App",
+    description: "Built with 🏗 Scaffold-ETH 2"
+  }
 });
diff --git a/templates/base/packages/nextjs/components/Header.tsx.template.mjs b/templates/base/packages/nextjs/components/Header.tsx.template.mjs
@@ -1,5 +1,7 @@
 import { withDefaults } from "../../../../utils.js";
-const contents = ({ menuIconImports, menuObjects }) => {
+const contents = ({ menuIconImports, menuObjects, logoText, logoDescription }) => {
+  const stringifiedAdditionalMenuLinks = menuObjects.filter(Boolean).join(",\n");
+
   return `"use client";
 
 import React, { useCallback, useRef, useState } from "react";
@@ -22,12 +24,12 @@ export const menuLinks: HeaderMenuLink[] = [
     label: "Home",
     href: "/",
   },
+  ${stringifiedAdditionalMenuLinks && `${stringifiedAdditionalMenuLinks},`}
   {
     label: "Debug Contracts",
     href: "/debug",
     icon: <BugAntIcon className="h-4 w-4" />,
   },
-  ${menuObjects.filter(Boolean).join(",\n")}
 ];
 
 export const HeaderMenuLinks = () => {
@@ -97,8 +99,8 @@ export const Header = () => {
             <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
           <div className="flex flex-col">
-            <span className="font-bold leading-tight">Scaffold-ETH</span>
-            <span className="text-xs">Ethereum dev stack</span>
+            <span className="font-bold leading-tight">${logoText}</span>
+            <span className="text-xs">${logoDescription}</span>
           </div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
@@ -117,4 +119,6 @@ export const Header = () => {
 export default withDefaults(contents, {
   menuIconImports: "",
   menuObjects: "",
+  logoText: "Scaffold-ETH",
+  logoDescription: "Ethereum dev stack"
 });