Add robots.txt and sitemap, replace anchor tags for button tags and a… (

#78) * add robots.txt and sitemap, replace anchor tags for button tags and add vite JS compress plugin * replace logo from image to image and h1
WardAnalytics · Feb 22, 2024 · a22e523 · a22e523
1 parent a5b012a
commit a22e523
Show file tree

Hide file tree

Showing 15 changed files with 318 additions and 68 deletions.
diff --git a/index.html b/index.html
@@ -3,13 +3,18 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/x-icon" href="./src/assets/ward-logo-blue.svg" />
+  <meta name="description" content="Creating the next-gen of crypto compliance" />
+  <meta name="keywords" content="blockchain, compliance, graph, analytics, crypto" />
+  <link rel="icon" type="image/x-icon" href="./src/assets/ward-logo-icon-blue.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta property="og:title" content="Ward Analytics" />
   <meta property="og:description" content="A next-gen blockchain graph explorer" />
   <meta property="og:image"
     content="https://firebasestorage.googleapis.com/v0/b/graphapp-bca04.appspot.com/o/banner-ward.jpg?alt=media&token=af84a606-e7d9-4883-8284-aab906b9bac3" />
-  <title>Ward Graph</title>
+  <title>Ward Analytics - Graph</title>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap"
+    rel="stylesheet">
 </head>
 
 <body>

diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "react-share": "^5.0.3",
     "reactflow": "^11.10.1",
     "uuid": "^9.0.1",
-    "vite-plugin-environment": "^1.1.3",
     "yarn": "^1.22.21",
     "zod": "^3.22.4"
   },
@@ -58,7 +57,9 @@
     "react-router-dom": "^6.20.1",
     "tailwindcss": "^3.3.6",
     "typescript": "^5.2.2",
-    "vite": "^5.0.10"
+    "vite": "^5.0.10",
+    "vite-plugin-compression2": "^0.12.0",
+    "vite-plugin-environment": "^1.1.3"
   },
   "packageManager": "[email protected]",
   "prettier": {

diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://wardanalytics.app/sitemap.xml
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://wardanalytics.app/</loc>
+  <lastmod>2024-02-21T01:48:11+00:00</lastmod>
+</url>
+
+
+</urlset>
diff --git a/src/assets/ward-logo-icon-blue.png b/src/assets/ward-logo-icon-blue.png
diff --git a/src/components/auth/SignInWithGoogleButton.tsx b/src/components/auth/SignInWithGoogleButton.tsx
@@ -19,7 +19,7 @@ const SignInWithGoogleButton: FC<SignInWithGoogleButtonProps> = ({
           className="h-6 w-6"
           src="https://www.svgrepo.com/show/475656/google-color.svg"
           loading="lazy"
-          alt="google logo"
+          alt="Google logo"
         />
         <span>{text}</span>
       </button>

diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
@@ -46,12 +46,12 @@ const Banner: FC = () => {
             </svg>
             Register now for free, unlimited graph lookups
           </p>
-          <a
+          <button
             className="flex-none cursor-pointer rounded-full bg-gray-900 px-3.5 py-1 text-xs font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
             onClick={() => setIsLoginDialogOpen(true)}
           >
             Sign In / Up <span aria-hidden="true">&rarr;</span>
-          </a>
+          </button>
         </div>
         <div className="flex flex-1 justify-end"></div>
       </div>

diff --git a/src/components/common/Logo.tsx b/src/components/common/Logo.tsx
@@ -1,20 +1,18 @@
+import clsx from "clsx";
 import { FC } from "react";
-import logo from "../../assets/ward-logo-blue-full.svg";
-import darkModeLogo from "../../assets/ward-logo-white-full.svg";
+import logo from "../../assets/ward-logo-blue.svg";
 
-const Logo: FC = () => {
+interface LogoProps {
+    className?: string;
+}
+
+const Logo: FC<LogoProps> = ({
+    className
+}) => {
     return (
-        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-            <img
-                className="mx-auto h-10 w-auto dark:hidden"
-                src={logo}
-                alt="Ward Analytics"
-            />
-            <img
-                className="mx-auto h-10 w-auto hidden dark:block"
-                src={darkModeLogo}
-                alt="Ward Analytics"
-            />
+        <div className={clsx("flex flex-col sm:flex-row items-center justify-center gap-x-7 gap-y-4 text-2xl", className)}>
+            <img src={logo} className="max-h-16" alt="Ward Analytics" />
+            <h1 className="text-4xl sm:text-5xl text-center font-semibold font-montserrat text-[#4268ff]">Ward Analytics</h1>
         </div>
     )
 }

diff --git a/src/components/common/RiskIndicator.tsx b/src/components/common/RiskIndicator.tsx
@@ -53,12 +53,12 @@ const RiskIndicator: FC<RiskIndicatorProps> = ({
             </li>
             <li className="flex flex-row items-center gap-x-1">
               <ArrowsPointingInIcon className="h-5 w-5 text-blue-200" />
-              <a className="font-bold">Direct Exposure,</a> both incoming and
+              <span className="font-bold">Direct Exposure,</span> both incoming and
               outgoing
             </li>
             <li className="flex flex-row items-center gap-x-1">
               <ChevronDoubleDownIcon className="h-5 w-5 text-blue-200" />
-              <a className="font-bold">Indirect Exposure,</a> both incoming and
+              <span className="font-bold">Indirect Exposure,</span> both incoming and
               outgoing
             </li>
           </ul>

diff --git a/src/components/graph/hotbar/Hotbar.tsx b/src/components/graph/hotbar/Hotbar.tsx
@@ -24,7 +24,6 @@ import CreateGraphDialog from "./components/CreateGraphDialog";
 
 interface HotbarButton {
   onClick?: () => void;
-  href?: string;
   Icon: any;
   name: string;
   className?: string;
@@ -39,7 +38,6 @@ const HotbarButton: FC<HotbarButton> = ({
   className,
   iconColor,
   hotKey,
-  href,
 }) => {
   const hotKeyClicked = hotKey ? useKeyPress(hotKey) : false;
 
@@ -50,33 +48,31 @@ const HotbarButton: FC<HotbarButton> = ({
   }, [hotKeyClicked]);
 
   return (
-    <a href={href} target="_blank" className="h-full w-full">
-      <button
-        className={clsx("group flex flex-row items-center", className)}
-        key={name}
-        onClick={onClick}
-      >
-        <span className="pointer-events-none absolute mr-[100%] mt-0.5 flex w-max translate-x-[-100%] flex-row rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
-          {hotKey && (
-            <span
-              className="mr-5 font-normal capitalize text-gray-400
+    <button
+      className={clsx("group flex flex-row items-center", className)}
+      key={name}
+      onClick={onClick}
+    >
+      <span className="pointer-events-none absolute mr-[100%] mt-0.5 flex w-max translate-x-[-100%] flex-row rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
+        {hotKey && (
+          <span
+            className="mr-5 font-normal capitalize text-gray-400
             "
-            >
-              {hotKey}
-            </span>
-          )}
-          {name}
-        </span>
-        <Icon
-          className={clsx(
-            "h-10 w-10 rounded-lg p-1 transition-all duration-200",
-            iconColor
-              ? iconColor
-              : "text-gray-400 hover:bg-gray-700 hover:text-gray-200",
-          )}
-        />
-      </button>
-    </a>
+          >
+            {hotKey}
+          </span>
+        )}
+        {name}
+      </span>
+      <Icon
+        className={clsx(
+          "h-10 w-10 rounded-lg p-1 transition-all duration-200",
+          iconColor
+            ? iconColor
+            : "text-gray-400 hover:bg-gray-700 hover:text-gray-200",
+        )}
+      />
+    </button>
   );
 };
 
@@ -212,8 +208,12 @@ const Hotbar: FC<HotbarProps> = ({
           <HotbarButton
             Icon={BugAntIcon}
             name="Report Bug / Submit Feedback"
-            onClick={() => { logAnalyticsEvent("report_bug_clicked") }}
-            href="https://forms.gle/yCFrDnKyUmPYPhfg8"
+            onClick={() => {
+              logAnalyticsEvent("report_bug_clicked")
+              // Open in a new tab to avoid losing the current graph
+              // To improve SEO, this action is onClick instead of a simple link because the other buttons don't use href
+              window.open("https://forms.gle/yCFrDnKyUmPYPhfg8", "_blank")
+            }}
           />
         </HotbarButtonGroup>
       </div>

diff --git a/src/components/graph/landing_page/LandingPage.tsx b/src/components/graph/landing_page/LandingPage.tsx
@@ -1,9 +1,9 @@
 import { SparklesIcon } from "@heroicons/react/20/solid";
 import { FC } from "react";
 
-import logo from "../../../assets/ward-logo-blue-full.svg";
-import SearchBar from "../search_bar";
 import { logAnalyticsEvent } from "../../../services/firestore/analytics/analytics";
+import Logo from "../../common/Logo";
+import SearchBar from "../search_bar";
 
 const PossibleAddresses: string[] = [
   "0x1f9090aaE28b8a3dCeaDf281B0F12828e676c326",
@@ -26,16 +26,16 @@ const LandingPage: FC<LandingPageProps> = ({ setSearchedAddress }) => {
 
   return (
     <>
-      <div className="flex max-w-screen-sm flex-col items-center gap-y-10">
-        <img src={logo} alt="Ward Logo" className="w-2/3" />
+      <div className="flex w-full max-w-screen-sm flex-col items-center gap-y-10">
+        <Logo className="w-full" />
         <SearchBar className="w-full" onSearchAddress={setSearchedAddress} />
-        <h3
+        <div
           className="flex cursor-pointer flex-row items-center gap-x-2 text-sm text-blue-500"
           onClick={selectRandomAddress}
         >
           <SparklesIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
-          I'm feeling lucky
-        </h3>
+          <h2>I'm feeling lucky</h2>
+        </div>
       </div>
     </>
   );

diff --git a/src/templates/MobileWarningTemplate.tsx b/src/templates/MobileWarningTemplate.tsx
@@ -1,8 +1,8 @@
-import { FC } from "react";
 import clsx from "clsx";
+import { FC } from "react";
 
-import logo from "../assets/ward-logo-blue-full.svg";
 import { ComputerDesktopIcon } from "@heroicons/react/24/outline";
+import Logo from "../components/common/Logo";
 
 interface MobileWarningTemplateProps {
   className?: string;
@@ -19,7 +19,7 @@ const MobileWarningTemplate: FC<MobileWarningTemplateProps> = ({
           className,
         )}
       >
-        <img src={logo} alt="Ward Logo" className="w-full" />
+        <Logo className="w-full" />
         <div className="justify-left flex flex-row items-center gap-x-3 rounded-lg bg-yellow-50 p-4">
           <ComputerDesktopIcon className="h-12 w-12 text-yellow-500" />
           <p className="text-sm text-yellow-800">

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,6 +9,9 @@ export default {
     extend: {
       colors: {
         primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a", "950": "#172554" }
+      },
+      fontFamily: {
+        'montserrat': ['Montserrat'],
       }
     },
   },

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import EnvironmentPlugin from "vite-plugin-environment";
+import { compression } from "vite-plugin-compression2";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -25,6 +26,7 @@ export default defineConfig({
       include: "**/*.{jsx,tsx}",
     }),
     EnvironmentPlugin("all"),
+    compression(),
   ],
   server: {
     port: 3000,