Font Optimization (#1020)

* setup google fonts to be served locally * implement fonts using next/font * apply Lato and Notosans variables directly to Modal * remove duplicate main landmark * fix duplicate main landmarks in error pages
DTS-STN · May 15, 2024 · eebe383 · eebe383
1 parent 3f53f53
commit eebe383
Show file tree

Hide file tree

Showing 10 changed files with 707 additions and 717 deletions.
diff --git a/components/organisms/HelpIcon.js b/components/organisms/HelpIcon.js
@@ -32,7 +32,7 @@ export const HelpIcon = ({ title, body, lang }) => {
           <Modal
             show={showModal}
             onHide={handleClose}
-            className="modal"
+            className="modal __variable_a1e2e3 __variable_3e745e"
             aria-label={title}
           >
             <Modal.Header className="modal-header">

diff --git a/components/organisms/Layout.js b/components/organisms/Layout.js
@@ -111,25 +111,23 @@ export const Layout = ({
         </div>
       </header>
 
-      <main>
-        {bannerText && bannerTitle ? (
-          <Banner siteTitle={bannerTitle} headline={bannerText} />
-        ) : null}
-        {children}
-        <div className="mt-12">
-          <h2 className="sr-only">{t("siteFooter")}</h2>
-          {!excludeFooterFeedback ? (
-            <div className="layout-container mt-5">
-              <Feedback />
-            </div>
-          ) : (
-            ""
-          )}
-          <div className="layout-container mb-2">
-            <DateModified date={dateModifiedOverride} />
+      {bannerText && bannerTitle ? (
+        <Banner siteTitle={bannerTitle} headline={bannerText} />
+      ) : null}
+      {children}
+      <div className="mt-12">
+        <h2 className="sr-only">{t("siteFooter")}</h2>
+        {!excludeFooterFeedback ? (
+          <div className="layout-container mt-5">
+            <Feedback />
           </div>
+        ) : (
+          ""
+        )}
+        <div className="layout-container mb-2">
+          <DateModified date={dateModifiedOverride} />
         </div>
-      </main>
+      </div>
 
       <Footer
         id="footer"

diff --git a/pages/404.js b/pages/404.js
@@ -34,88 +34,82 @@ export default function error404(props) {
 
   return (
     <>
-      <main className="min-h-screen relative">
-        <Head>
-          {/* Primary HTML Meta Tags */}
-          <title data-gc-analytics-error="404">
-            {pageData.scContentEn.json[0].content[0].value} (404) |{" "}
-            {pageData.scContentFr.json[0].content[0].value} (404)
-          </title>
-          <meta
-            name="description"
-            content={`${t("404errorMetaDescription")}`}
-          />
-          <meta name="author" content="Service Canada" />
-          <link rel="icon" href="/favicon.ico" />
-          <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+      <Head>
+        {/* Primary HTML Meta Tags */}
+        <title data-gc-analytics-error="404">
+          {pageData.scContentEn.json[0].content[0].value} (404) |{" "}
+          {pageData.scContentFr.json[0].content[0].value} (404)
+        </title>
+        <meta name="description" content={`${t("404errorMetaDescription")}`} />
+        <meta name="author" content="Service Canada" />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
 
-          {/* DCMI Meta Tags */}
-          <meta name="dcterms.title" content={`404 — ${t("siteTitle")}`} />
-          <meta
-            name="dcterms.language"
-            content={props.locale === "en" ? "eng" : "fra"}
-            title="ISO639-2/T"
-          />
-          <meta
-            name="dcterms.description"
-            content={`${t("404errorMetaDescription")}`}
-          />
-          <meta
-            name="dcterms.subject"
-            title="gccore"
-            content={t("metaSubject")}
-          />
-          <meta
-            name="dcterms.creator"
-            content={
-              props.locale === "en"
-                ? "Employment and Social Development Canada"
-                : "Emploi et Développement social Canada"
-            }
-          />
-          <meta name="dcterms.accessRights" content="2" />
-          <meta
-            name="dcterms.service"
-            content="ESDC-EDSC_SCLabs-LaboratoireSC"
-          />
-          <meta name="dcterms.issued" title="W3CDTF" content="2021-06-01" />
-          <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
-          <meta name="dcterms.spatial" content="Canada" />
+        {/* DCMI Meta Tags */}
+        <meta name="dcterms.title" content={`404 — ${t("siteTitle")}`} />
+        <meta
+          name="dcterms.language"
+          content={props.locale === "en" ? "eng" : "fra"}
+          title="ISO639-2/T"
+        />
+        <meta
+          name="dcterms.description"
+          content={`${t("404errorMetaDescription")}`}
+        />
+        <meta
+          name="dcterms.subject"
+          title="gccore"
+          content={t("metaSubject")}
+        />
+        <meta
+          name="dcterms.creator"
+          content={
+            props.locale === "en"
+              ? "Employment and Social Development Canada"
+              : "Emploi et Développement social Canada"
+          }
+        />
+        <meta name="dcterms.accessRights" content="2" />
+        <meta name="dcterms.service" content="ESDC-EDSC_SCLabs-LaboratoireSC" />
+        <meta name="dcterms.issued" title="W3CDTF" content="2021-06-01" />
+        <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+        <meta name="dcterms.spatial" content="Canada" />
 
-          {/* Open Graph / Facebook */}
-          <meta property="og:type" content="website" />
-          <meta property="og:locale" content={props.locale} />
-          <meta
-            property="og:url"
-            content={
-              "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
-            }
-          />
-          <meta property="og:title" content={`404 — ${t("siteTitle")}`} />
-          <meta
-            property="og:description"
-            content={`${t("404errorMetaDescription")}`}
-          />
-          <meta property="og:image" content={`${t("metaImage")}`} />
-          <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+        {/* Open Graph / Facebook */}
+        <meta property="og:type" content="website" />
+        <meta property="og:locale" content={props.locale} />
+        <meta
+          property="og:url"
+          content={
+            "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
+          }
+        />
+        <meta property="og:title" content={`404 — ${t("siteTitle")}`} />
+        <meta
+          property="og:description"
+          content={`${t("404errorMetaDescription")}`}
+        />
+        <meta property="og:image" content={`${t("metaImage")}`} />
+        <meta property="og:image:alt" content={`${t("siteTitle")}`} />
 
-          {/* Twitter */}
-          <meta property="twitter:card" content="summary_large_image" />
-          <meta
-            property="twitter:url"
-            content={
-              "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
-            }
-          />
-          <meta property="twitter:title" content={`500 — ${t("siteTitle")}`} />
-          <meta name="twitter:creator" content="Service Canada" />
-          <meta
-            property="twitter:description"
-            content={`${t("404errorMetaDescription")}`}
-          />
-          <meta property="twitter:image" content={`${t("metaImage")}`} />
-          <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
-        </Head>
+        {/* Twitter */}
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content={
+            "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
+          }
+        />
+        <meta property="twitter:title" content={`500 — ${t("siteTitle")}`} />
+        <meta name="twitter:creator" content="Service Canada" />
+        <meta
+          property="twitter:description"
+          content={`${t("404errorMetaDescription")}`}
+        />
+        <meta property="twitter:image" content={`${t("metaImage")}`} />
+        <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+      </Head>
+      <div className="min-h-screen relative">
         <section className="layout-container pb-44">
           <div className="pt-6">
             <img
@@ -229,7 +223,7 @@ export default function error404(props) {
             </span>
           </div>
         </footer>
-      </main>
+      </div>
     </>
   );
 }