Refactor meta tags into separate component and add default thumbnail …

…/ image (#359)
scaffold-eth · Jun 1, 2023 · 3f25357 · 3f25357
1 parent 62b51cb
commit 3f25357
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 11 deletions.
diff --git a/packages/nextjs/components/MetaHeader.tsx b/packages/nextjs/components/MetaHeader.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import Head from "next/head";
+
+type MetaHeaderProps = {
+  title?: string;
+  description?: string;
+  image?: string;
+  twitterCard?: string;
+  children?: React.ReactNode;
+};
+
+export const MetaHeader = ({
+  title = "Scaffold-ETH 2 App",
+  description = "Built with 🏗 Scaffold-ETH 2",
+  image = "thumbnail.png",
+  twitterCard = "summary_large_image",
+  children,
+}: MetaHeaderProps) => {
+  // Images must have an absolute path to work properly on Twitter and OG
+  const absoluteImagePath = typeof window !== "undefined" ? `${window.location.origin}/${image}` : undefined;
+
+  return (
+    <Head>
+      {title && (
+        <>
+          <title>{title}</title>
+          <meta property="og:title" content={title} />
+          <meta name="twitter:title" content={title} />
+        </>
+      )}
+      {description && (
+        <>
+          <meta name="description" content={description} />
+          <meta property="og:description" content={description} />
+          <meta name="twitter:description" content={description} />
+        </>
+      )}
+      {absoluteImagePath && (
+        <>
+          <meta property="og:image" content={absoluteImagePath} />
+          <meta name="twitter:image" content={absoluteImagePath} />
+        </>
+      )}
+      {twitterCard && <meta name="twitter:card" content={twitterCard} />}
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
+      {children}
+    </Head>
+  );
+};
diff --git a/packages/nextjs/pages/debug.tsx b/packages/nextjs/pages/debug.tsx
@@ -1,5 +1,6 @@
 import type { NextPage } from "next";
 import { useLocalStorage } from "usehooks-ts";
+import { MetaHeader } from "~~/components/MetaHeader";
 import { ContractUI } from "~~/components/scaffold-eth";
 import { ContractName } from "~~/utils/scaffold-eth/contract";
 import { getContractNames } from "~~/utils/scaffold-eth/contractNames";
@@ -15,6 +16,10 @@ const Debug: NextPage = () => {
 
   return (
     <>
+      <MetaHeader
+        title="Debug Contracts | Scaffold-ETH 2"
+        description="Debug your deployed 🏗 Scaffold-ETH 2 contracts in an easy way"
+      />
       <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">
         {contractNames.length === 0 ? (
           <p className="text-3xl mt-14">No contracts found!</p>

diff --git a/packages/nextjs/pages/example-ui.tsx b/packages/nextjs/pages/example-ui.tsx
@@ -1,18 +1,19 @@
-import Head from "next/head";
 import type { NextPage } from "next";
+import { MetaHeader } from "~~/components/MetaHeader";
 import { ContractData } from "~~/components/example-ui/ContractData";
 import { ContractInteraction } from "~~/components/example-ui/ContractInteraction";
 
 const ExampleUI: NextPage = () => {
   return (
     <>
-      <Head>
-        <title>Scaffold-ETH 2 Example Ui</title>
-        <meta name="description" content="Created with 🏗 scaffold-eth-2" />
+      <MetaHeader
+        title="Example UI | Scaffold-ETH 2"
+        description="Example UI created with 🏗 Scaffold-ETH 2, showcasing some of its features."
+      >
         {/* We are importing the font this way to lighten the size of SE2. */}
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree&display=swap" rel="stylesheet" />
-      </Head>
+      </MetaHeader>
       <div className="grid lg:grid-cols-2 flex-grow" data-theme="exampleUi">
         <ContractInteraction />
         <ContractData />

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -1,16 +1,12 @@
-import Head from "next/head";
 import Link from "next/link";
 import type { NextPage } from "next";
 import { BugAntIcon, SparklesIcon } from "@heroicons/react/24/outline";
+import { MetaHeader } from "~~/components/MetaHeader";
 
 const Home: NextPage = () => {
   return (
     <>
-      <Head>
-        <title>Scaffold-ETH 2 App</title>
-        <meta name="description" content="Created with 🏗 scaffold-eth-2" />
-      </Head>
-
+      <MetaHeader />
       <div className="flex items-center flex-col flex-grow pt-10">
         <div className="px-5">
           <h1 className="text-center mb-8">

diff --git a/packages/nextjs/public/favicon.png b/packages/nextjs/public/favicon.png
diff --git a/packages/nextjs/public/thumbnail.jpg b/packages/nextjs/public/thumbnail.jpg