From 9f3a030fd5af8d965a8911aee49bcba477afd850 Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Fri, 28 May 2021 17:07:50 -0700
Subject: [PATCH] Fix misc stuff from lighthouse (#81)

* Fix misc stuff from lighthouse

- Icons in list were resizing to be too small.
- Added robots.txt (full exclude for now)
- Add favicon.ico placeholder
- Added page title using helmet (react-helmet + gatsby-plugin-react-helmet)
Note: not sure if react-helmet can be in dev section of package.json?

* Move helmet to header file
- Moved  `<Helmet><title>{title}</title></Helmet>` to Header.
- Added ts support for Helmet.
* Fix title header
---
 client/gatsby-config.js             |   1 +
 client/package-lock.json            |  38 ++++++++++++++++++++++++++++
 client/package.json                 |   3 +++
 client/src/components/J40Header.tsx |   8 +++++-
 client/src/pages/index.tsx          |   1 -
 client/src/styles/global.scss       |   7 +++++
 client/static/favicon.ico           | Bin 0 -> 1964 bytes
 client/static/robots.txt            |   2 ++
 8 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 client/static/favicon.ico
 create mode 100644 client/static/robots.txt

diff --git a/client/gatsby-config.js b/client/gatsby-config.js
index 6ea1fcd9..12c6480c 100644
--- a/client/gatsby-config.js
+++ b/client/gatsby-config.js
@@ -53,5 +53,6 @@ module.exports = {
         },
       },
     },
+    'gatsby-plugin-react-helmet',
   ],
 };
diff --git a/client/package-lock.json b/client/package-lock.json
index 7bbdec03..2215a690 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2899,6 +2899,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-helmet": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.1.tgz",
+      "integrity": "sha512-VmSCMz6jp/06DABoY60vQa++h1YFt0PfAI23llxBJHbowqFgLUL0dhS1AQeVPNqYfRp9LAfokrfWACTNeobOrg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-test-renderer": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
@@ -8487,6 +8495,15 @@
         "picomatch": "^2.2.2"
       }
     },
+    "gatsby-plugin-react-helmet": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-4.6.0.tgz",
+      "integrity": "sha512-+OR34N+H3vZcSN4e4dEyk6tR6NBBP8gINWztDw6/b3sXVJM0hfHRCpbBtgtJGclyjaxAdwbtfos1geKh3AvDHA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "gatsby-plugin-sass": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-4.6.0.tgz",
@@ -14929,6 +14946,22 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-intl": {
       "version": "3.12.1",
       "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-3.12.1.tgz",
@@ -14974,6 +15007,11 @@
         "react-is": "^16.12.0 || ^17.0.0"
       }
     },
+    "react-side-effect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
+    },
     "react-test-renderer": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz",
diff --git a/client/package.json b/client/package.json
index 27b93a11..da20d684 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,6 +38,7 @@
     "gatsby-cli": "^3.5.0",
     "gatsby-plugin-intl": "^0.3.3",
     "gatsby-plugin-prettier-eslint": "^1.0.6",
+    "gatsby-plugin-react-helmet": "^4.6.0",
     "gatsby-plugin-sass": "^4.5.0",
     "gh-pages": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -50,9 +51,11 @@
   },
   "dependencies": {
     "@trussworks/react-uswds": "github:nathillardusds/react-uswds#nathillardusds/ssr",
+    "@types/react-helmet": "^6.1.1",
     "gatsby": "^3.4.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0",
     "uswds": "^2.10.3"
   }
 }
diff --git a/client/src/components/J40Header.tsx b/client/src/components/J40Header.tsx
index 3f02b9b1..51dfb448 100644
--- a/client/src/components/J40Header.tsx
+++ b/client/src/components/J40Header.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {GovBanner, Header, Title, PrimaryNav} from '@trussworks/react-uswds';
 import {useIntl, Link} from 'gatsby-plugin-intl';
+import {Helmet} from 'react-helmet';
 
 const headerLinks = [
   <Link to="/" key="/">Home</Link>,
@@ -13,9 +14,14 @@ const J40Header = () => {
     description: 'Title of the project'});
   return (
     <>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>{title}</title>
+      </Helmet>
+
       <GovBanner />
       <Header>
-        <Title>
+        <Title className={'usa-hero__heading j40-title'}>
           {title}
         </Title>
         <PrimaryNav items={headerLinks}/>
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index 547d6d06..9f835584 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -41,7 +41,6 @@ const IndexPage = () => {
 
   return (
     <Layout>
-
       <main id="main-content" role="main">
         <section className="grid-container">
           <div className="grid-row grid-gap">
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index 34e7bab6..7d93f6c9 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -17,4 +17,11 @@
 
 .j40-two-column-icons-spacing {
   padding-right: 1em;
+  width: 2.3em;
+  max-width: revert;
+}
+
+.j40-title {
+  padding: 2em;
+  text-align: center;
 }
diff --git a/client/static/favicon.ico b/client/static/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..b967df5e9f2d5cbc0f625f25ef66d130a051fdae
GIT binary patch
literal 1964
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

literal 0
HcmV?d00001

diff --git a/client/static/robots.txt b/client/static/robots.txt
new file mode 100644
index 00000000..1f53798b
--- /dev/null
+++ b/client/static/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /