Merge pull request #2041 from ten-protocol/jennifer/3414-add-seo-desc…

…riptions-and-titles-to-page-headers-for-our-tools Update SEO assets and metadata
ten-protocol · Sep 9, 2024 · f6ff1a5 · f6ff1a5
2 parents f6b6c73 + be66b5a
commit f6ff1a5
Show file tree

Hide file tree

Showing 22 changed files with 392 additions and 175 deletions.
diff --git a/tools/bridge-frontend/Dockerfile b/tools/bridge-frontend/Dockerfile
@@ -9,10 +9,12 @@ WORKDIR /home/obscuro/go-obscuro/tools/bridge-frontend
 
 # ARG for build-time variable
 ARG API_HOST
+ARG API_HOST_ENVIRONMENT
 ARG GOOGLE_ANALYTICS_ID
 
 # ENV for URL to be used in the app
 ENV NEXT_PUBLIC_BRIDGE_API_HOST=${API_HOST}
+ENV NEXT_PUBLIC_BRIDGE_API_HOST_ENVIRONMENT=${API_HOST_ENVIRONMENT}
 ENV NEXT_PUBLIC_BRIDGE_GOOGLE_ANALYTICS_ID=${GOOGLE_ANALYTICS_ID}
 
 RUN npm install

diff --git a/tools/bridge-frontend/public/assets/images/cover.png b/tools/bridge-frontend/public/assets/images/cover.png
diff --git a/tools/bridge-frontend/src/components/head-seo.tsx b/tools/bridge-frontend/src/components/head-seo.tsx
@@ -0,0 +1,62 @@
+import Head from "next/head";
+import { siteMetadata } from "../lib/siteMetadata";
+import { SeoProps } from "../types";
+
+const HeadSeo = ({
+  title,
+  description,
+  canonicalUrl,
+  ogTwitterImage,
+  ogImageUrl,
+  ogType,
+  includeDefaultKeywords = true,
+  children,
+}: SeoProps) => {
+  return (
+    <Head>
+      {/* Basic metadata */}
+      <title>{title}</title>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name={siteMetadata.metaTitle} content={siteMetadata.companyName} />
+      {includeDefaultKeywords && (
+        <meta name="keywords" content={siteMetadata.keywords} />
+      )}
+      {/* Beagle Security */}
+      <meta
+        name="_vgeujvlkxz15hyr8vbuvqxnfmzlkm059"
+        // @ts-ignore
+        signature="_vd3udx2g2hfn9zclob5cat43b94q7fyk"
+      ></meta>
+      {/* to indicate the browser shouldn't interpret the response as something other than the specified content type */}
+      <meta http-equiv="X-Content-Type-Options" content="nosniff"></meta>
+      {/* twitter metadata */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content={siteMetadata.twitterHandle} />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={decodeURIComponent(ogTwitterImage)} />
+      {/* canonical link */}
+      <link rel="canonical" href={canonicalUrl} />
+      {/* open graph metadata */}
+      <meta property="og:locale" content="en_US" />
+      <meta property="og:site_name" content={siteMetadata.companyName} />
+      <meta property="og:type" content={ogType} key="og-type" />
+      <meta property="og:title" content={title} key="og-title" />
+      <meta
+        property="og:description"
+        content={description}
+        key="og-description"
+      />
+      <meta
+        property="og:image"
+        content={decodeURIComponent(ogImageUrl)}
+        key="og-image"
+      />
+      <meta property="og:url" content={canonicalUrl} key="og-url" />
+      {children}
+    </Head>
+  );
+};
+
+export default HeadSeo;
diff --git a/tools/bridge-frontend/src/lib/constants.ts b/tools/bridge-frontend/src/lib/constants.ts
@@ -33,6 +33,7 @@ export const getOptions = (query: {
 };
 
 export const apiHost = process.env.NEXT_PUBLIC_BRIDGE_API_HOST;
+export const environment = process.env.NEXT_PUBLIC_BRIDGE_API_HOST_ENVIRONMENT;
 
 export const l1Bridge = process.env.NEXT_PUBLIC_BRIDGE_L1;
 export const l2Bridge = process.env.NEXT_PUBLIC_BRIDGE_L2;

diff --git a/tools/bridge-frontend/src/lib/siteMetadata.ts b/tools/bridge-frontend/src/lib/siteMetadata.ts
@@ -0,0 +1,17 @@
+import { environment, socialLinks } from "./constants";
+
+export const siteMetadata = {
+  companyName: "TEN Bridge",
+  metaTitle: " TEN Bridge | Cross-Chain Transactions Made Easy",
+  description:
+    "Bridge tokens between Layer 1 and Layer 2 networks effortlessly with TEN Bridge. Ensure secure and efficient cross-chain transactions",
+  keywords:
+    "token bridging, cross-chain transactions, Layer 1 to Layer 2 bridge, blockchain bridge, Ten Bridge, crypto bridging, TEN network, TEN blockchain, TEN ecosystem",
+  siteUrl: `https://${environment}-bridge.ten.xyz`,
+  siteLogo: `/assets/images/cover.png`,
+  siteLogoSquare: `/assets/images/cover.png`,
+  email: "[email protected]",
+  twitter: socialLinks.twitter,
+  twitterHandle: socialLinks.twitterHandle,
+  github: socialLinks.github,
+};
diff --git a/tools/bridge-frontend/src/types/index.ts b/tools/bridge-frontend/src/types/index.ts
@@ -0,0 +1,12 @@
+import React from "react";
+
+export interface SeoProps {
+  title: string;
+  description: string;
+  canonicalUrl: string;
+  ogTwitterImage: string;
+  ogImageUrl: string;
+  ogType: string;
+  includeDefaultKeywords?: boolean;
+  children?: React.ReactNode;
+}
diff --git a/tools/tenscan/frontend/pages/_app.tsx b/tools/tenscan/frontend/pages/_app.tsx
@@ -68,27 +68,7 @@ export default function App({ Component, pageProps }: AppProps) {
         ogImageUrl={siteMetadata.siteLogo}
         ogTwitterImage={siteMetadata.siteLogo}
         ogType={"website"}
-      >
-        <link rel="icon" href="/favicon/favicon.ico" />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/favicon/apple-touch-icon.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/favicon/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/favicon/favicon-16x16.png"
-        />
-        <link rel="manifest" href="/favicon/site.webmanifest" />
-      </HeadSeo>
+      ></HeadSeo>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider
           attribute="class"

diff --git a/tools/tenscan/frontend/pages/address/[address].tsx b/tools/tenscan/frontend/pages/address/[address].tsx
@@ -1,6 +1,8 @@
+import HeadSeo from "@/src/components/head-seo";
 import Layout from "@/src/components/layouts/default-layout";
 import EmptyState from "@/src/components/modules/common/empty-state";
 import { Button } from "@/src/components/ui/button";
+import { siteMetadata } from "@/src/lib/siteMetadata";
 import { useRouter } from "next/router";
 import React from "react";
 

diff --git a/tools/tenscan/frontend/pages/batches/index.tsx b/tools/tenscan/frontend/pages/batches/index.tsx
@@ -6,6 +6,8 @@ import { Metadata } from "next";
 import { useBatchesService } from "@/src/services/useBatchesService";
 import { getItem } from "@/src/lib/utils";
 import { ItemPosition } from "@/src/types/interfaces";
+import { siteMetadata } from "@/src/lib/siteMetadata";
+import HeadSeo from "@/src/components/head-seo";
 
 export const metadata: Metadata = {
   title: "Batches",
@@ -35,31 +37,41 @@ export default function Batches() {
   );
 
   return (
-    <Layout>
-      <div className="h-full flex-1 flex-col space-y-8 md:flex">
-        <div className="flex items-center justify-between space-y-2">
-          <div>
-            <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
-            {BatchesData?.length > 0 && (
-              <p className="text-sm text-muted-foreground">
-                Showing batches #{firstBatchHeight}{" "}
-                {lastBatchHeight !== firstBatchHeight &&
-                  "to #" + lastBatchHeight}
-                {/* uncomment the following line when total count feature is implemented */}
-                {/* of {formatNumber(Total)} batches. */}
-              </p>
-            )}
+    <>
+      <HeadSeo
+        title={`${siteMetadata.batches.title} `}
+        description={siteMetadata.batches.description}
+        canonicalUrl={`${siteMetadata.batches.canonicalUrl}`}
+        ogImageUrl={siteMetadata.batches.ogImageUrl}
+        ogTwitterImage={siteMetadata.batches.ogTwitterImage}
+        ogType={siteMetadata.batches.ogType}
+      ></HeadSeo>
+      <Layout>
+        <div className="h-full flex-1 flex-col space-y-8 md:flex">
+          <div className="flex items-center justify-between space-y-2">
+            <div>
+              <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
+              {BatchesData?.length > 0 && (
+                <p className="text-sm text-muted-foreground">
+                  Showing batches #{firstBatchHeight}{" "}
+                  {lastBatchHeight !== firstBatchHeight &&
+                    "to #" + lastBatchHeight}
+                  {/* uncomment the following line when total count feature is implemented */}
+                  {/* of {formatNumber(Total)} batches. */}
+                </p>
+              )}
+            </div>
           </div>
+          <DataTable
+            columns={columns}
+            data={BatchesData}
+            refetch={refetchBatches}
+            total={+Total}
+            isLoading={isBatchesLoading}
+            noResultsText="batches"
+          />
         </div>
-        <DataTable
-          columns={columns}
-          data={BatchesData}
-          refetch={refetchBatches}
-          total={+Total}
-          isLoading={isBatchesLoading}
-          noResultsText="batches"
-        />
-      </div>
-    </Layout>
+      </Layout>
+    </>
   );
 }
diff --git a/tools/tenscan/frontend/pages/blocks/index.tsx b/tools/tenscan/frontend/pages/blocks/index.tsx
@@ -6,6 +6,8 @@ import { Metadata } from "next";
 import { useBlocksService } from "@/src/services/useBlocksService";
 import { getItem } from "@/src/lib/utils";
 import { ItemPosition } from "@/src/types/interfaces";
+import HeadSeo from "@/src/components/head-seo";
+import { siteMetadata } from "@/src/lib/siteMetadata";
 
 export const metadata: Metadata = {
   title: "Blocks",
@@ -32,31 +34,41 @@ export default function Blocks() {
   );
 
   return (
-    <Layout>
-      <div className="h-full flex-1 flex-col space-y-8 md:flex">
-        <div className="flex items-center justify-between space-y-2">
-          <div>
-            <h2 className="text-2xl font-bold tracking-tight">Blocks</h2>
-            {BlocksData?.length > 0 && (
-              <p className="text-sm text-muted-foreground">
-                Showing blocks #{firstBlockNumber}{" "}
-                {lastBlockNumber !== firstBlockNumber &&
-                  "to #" + lastBlockNumber}
-                {/* uncomment the following line when total count feature is implemented */}
-                {/* of {formatNumber(Total)} blocks. */}
-              </p>
-            )}
+    <>
+      <HeadSeo
+        title={`${siteMetadata.blocks.title} `}
+        description={siteMetadata.blocks.description}
+        canonicalUrl={`${siteMetadata.blocks.canonicalUrl}`}
+        ogImageUrl={siteMetadata.blocks.ogImageUrl}
+        ogTwitterImage={siteMetadata.blocks.ogTwitterImage}
+        ogType={siteMetadata.blocks.ogType}
+      ></HeadSeo>
+      <Layout>
+        <div className="h-full flex-1 flex-col space-y-8 md:flex">
+          <div className="flex items-center justify-between space-y-2">
+            <div>
+              <h2 className="text-2xl font-bold tracking-tight">Blocks</h2>
+              {BlocksData?.length > 0 && (
+                <p className="text-sm text-muted-foreground">
+                  Showing blocks #{firstBlockNumber}{" "}
+                  {lastBlockNumber !== firstBlockNumber &&
+                    "to #" + lastBlockNumber}
+                  {/* uncomment the following line when total count feature is implemented */}
+                  {/* of {formatNumber(Total)} blocks. */}
+                </p>
+              )}
+            </div>
           </div>
+          <DataTable
+            columns={columns}
+            data={BlocksData}
+            total={+Total}
+            refetch={refetchBlocks}
+            isLoading={isBlocksLoading}
+            noResultsText="blocks"
+          />
         </div>
-        <DataTable
-          columns={columns}
-          data={BlocksData}
-          total={+Total}
-          refetch={refetchBlocks}
-          isLoading={isBlocksLoading}
-          noResultsText="blocks"
-        />
-      </div>
-    </Layout>
+      </Layout>
+    </>
   );
 }
diff --git a/tools/tenscan/frontend/pages/personal/index.tsx b/tools/tenscan/frontend/pages/personal/index.tsx
@@ -6,6 +6,8 @@ import { useWalletConnection } from "@/src/components/providers/wallet-provider"
 import ConnectWalletButton from "@/src/components/modules/common/connect-wallet";
 import EmptyState from "@/src/components/modules/common/empty-state";
 import { ethereum } from "@/src/lib/utils";
+import HeadSeo from "@/src/components/head-seo";
+import { siteMetadata } from "@/src/lib/siteMetadata";
 
 export const metadata: Metadata = {
   title: "Personal Transactions",
@@ -16,24 +18,34 @@ export default function PersonalPage() {
   const { walletConnected } = useWalletConnection();
 
   return (
-    <Layout>
-      {walletConnected ? (
-        <PersonalTransactions />
-      ) : (
-        <EmptyState
-          title="Connect Wallet"
-          description="Connect your wallet to view your personal transactions."
-          action={
-            <ConnectWalletButton
-              text={
-                ethereum
-                  ? "Connect Wallet to continue"
-                  : "Install MetaMask to continue"
-              }
-            />
-          }
-        />
-      )}
-    </Layout>
+    <>
+      <HeadSeo
+        title={`${siteMetadata.personal.title} `}
+        description={siteMetadata.personal.description}
+        canonicalUrl={`${siteMetadata.personal.canonicalUrl}`}
+        ogImageUrl={siteMetadata.personal.ogImageUrl}
+        ogTwitterImage={siteMetadata.personal.ogTwitterImage}
+        ogType={siteMetadata.personal.ogType}
+      ></HeadSeo>
+      <Layout>
+        {walletConnected ? (
+          <PersonalTransactions />
+        ) : (
+          <EmptyState
+            title="Connect Wallet"
+            description="Connect your wallet to view your personal transactions."
+            action={
+              <ConnectWalletButton
+                text={
+                  ethereum
+                    ? "Connect Wallet to continue"
+                    : "Install MetaMask to continue"
+                }
+              />
+            }
+          />
+        )}
+      </Layout>
+    </>
   );
 }