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

@@ -53,5 +53,6 @@ module.exports = {
         },
       },
     },
+    'gatsby-plugin-react-helmet',
   ],
 };

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",

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"
   }
 }

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}/>

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">

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;
 }

client/static/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /