feat: replace react-helmet with gatsby head api

satellytes · Nov 29, 2023 · 3ca87c9 · 3ca87c9
1 parent 370fc55
commit 3ca87c9
Show file tree

Hide file tree

Showing 18 changed files with 212 additions and 223 deletions.
diff --git a/gatsby-config.ts b/gatsby-config.ts
@@ -44,7 +44,6 @@ const gatsbyConfig: GatsbyConfig = {
   },
   plugins: [
     `gatsby-plugin-sass`,
-    'gatsby-plugin-react-helmet',
     `gatsby-plugin-smoothscroll`,
     `gatsby-plugin-image`,
     `gatsby-plugin-catch-links` /* Please use gatsby-link for remark content */,

diff --git a/package.json b/package.json
@@ -49,7 +49,6 @@
     "gatsby-plugin-gatsby-cloud": "^5.12.2",
     "gatsby-plugin-image": "^3.12.3",
     "gatsby-plugin-manifest": "^5.12.3",
-    "gatsby-plugin-react-helmet": "^6.10.0",
     "gatsby-plugin-react-i18next": "^3.0.1",
     "gatsby-plugin-readingtime": "^3.0.1",
     "gatsby-plugin-robots-txt": "^1.8.0",
@@ -78,7 +77,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.44.2",
     "react-i18next": "^13.5.0",
     "react-leaflet": "^4.2.1",
@@ -108,7 +106,6 @@
     "@types/node": "^20.10.0",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
-    "@types/react-helmet": "^6.1.9",
     "@types/react-syntax-highlighter": "^15.5.10",
     "@types/showdown": "^2.0.6",
     "@types/styled-components": "^5.1.32",

diff --git a/src/components/layout/seo.tsx b/src/components/layout/seo.tsx
@@ -1,6 +1,5 @@
 import { graphql, useStaticQuery } from 'gatsby';
 import React from 'react';
-import { Helmet } from 'react-helmet';
 import { useI18next } from 'gatsby-plugin-react-i18next';
 import { useTranslation } from 'gatsby-plugin-react-i18next';
 import { I18nNextData } from '../../types';
@@ -92,12 +91,9 @@ const SEO = ({
   );
 
   return (
-    <Helmet
-      htmlAttributes={{
-        lang: i18n.language,
-      }}
-      title={title}
-    >
+    <>
+      <html lang={i18n.language} />
+      <title>{title}</title>
       {/* Standard Tags */}
       <meta property="og:title" name="title" content={title} />
       <meta
@@ -138,7 +134,7 @@ const SEO = ({
           href={RSS_URL}
         />
       )}
-    </Helmet>
+    </>
   );
 };
 

diff --git a/src/components/pages/career-details/career-details-structured-data.tsx b/src/components/pages/career-details/career-details-structured-data.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
 import { ContentfulVacancy } from '../../../types';
 import { JobPosting, WithContext } from 'schema-dts';
 import { renderRichText } from 'gatsby-source-contentful/rich-text';
@@ -78,10 +77,6 @@ export const CareerDetailsStructuredData = ({
   };
 
   return (
-    <Helmet>
-      <script type="application/ld+json">
-        {JSON.stringify(structuredData)}
-      </script>
-    </Helmet>
+    <script type="application/ld+json">{JSON.stringify(structuredData)}</script>
   );
 };
diff --git a/src/components/pages/contact/leaflet/leaflet.tsx b/src/components/pages/contact/leaflet/leaflet.tsx
@@ -2,7 +2,6 @@ import * as L from 'leaflet';
 import { LatLngExpression } from 'leaflet';
 import { GestureHandling } from 'leaflet-gesture-handling';
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'gatsby-plugin-react-i18next';
 import {
   CircleMarker,
@@ -140,21 +139,5 @@ export const Leaflet = () => {
     </MapContainerWithHeight>
   );
 
-  return (
-    <MapWrapper>
-      <Helmet>
-        <link
-          rel="stylesheet"
-          href="https://unpkg.com/[email protected]/dist/leaflet.css"
-        />
-        <link
-          rel="stylesheet"
-          href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css"
-          type="text/css"
-        />
-        <script src="//unpkg.com/leaflet-gesture-handling"></script>
-      </Helmet>
-      {MapView}
-    </MapWrapper>
-  );
+  return <MapWrapper>{MapView}</MapWrapper>;
 };
diff --git a/src/components/pages/landingpage/structured-organization-data.tsx b/src/components/pages/landingpage/structured-organization-data.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
 
 /**
  * This adds Structured Data for the Satellytes Organization based on https://schema.org/Organization
@@ -30,9 +29,5 @@ export const StructuredOrganizationData = () => {
     ],
   };
 
-  return (
-    <Helmet>
-      <script type="application/ld+json">{JSON.stringify(data)}</script>
-    </Helmet>
-  );
+  return <script type="application/ld+json">{JSON.stringify(data)}</script>;
 };
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -12,27 +12,29 @@ interface NotFoundPageQueryProps {
 
 const NotFoundPage = ({
   data,
-  location,
 }: PageProps<NotFoundPageQueryProps>): JSX.Element => {
   return (
-    <>
-      <SEO
-        title={`${data.contentfulPage.title} | Satellytes`}
-        location={location}
-      />
-      <Layout light={true}>
-        <ContentBlockContainer>
-          <SectionHeader headline={'404'}>
-            {data.contentfulPage.description?.description as string}
-          </SectionHeader>
-        </ContentBlockContainer>
-      </Layout>
-    </>
+    <Layout light={true}>
+      <ContentBlockContainer>
+        <SectionHeader headline={'404'}>
+          {data.contentfulPage.description?.description as string}
+        </SectionHeader>
+      </ContentBlockContainer>
+    </Layout>
   );
 };
 
 export default NotFoundPage;
 
+export const Head = ({ data, location }: PageProps<NotFoundPageQueryProps>) => {
+  return (
+    <SEO
+      title={`${data.contentfulPage.title} | Satellytes`}
+      location={location}
+    />
+  );
+};
+
 export const NotFoundPageQuery = graphql`
   query ($language: String!) {
     contentfulPage(slug: { eq: "not-found" }, node_locale: { eq: $language }) {

diff --git a/src/pages/about-us.tsx b/src/pages/about-us.tsx
@@ -25,28 +25,32 @@ interface AboutUsQueryProps {
   };
 }
 
-const AboutUs = ({ data, location }: PageProps<AboutUsQueryProps>) => {
+const AboutUs = ({ data }: PageProps<AboutUsQueryProps>) => {
   return (
-    <>
-      <SEO
-        title={`${data.contentfulPage.title} | Satellytes`}
-        location={location}
-      />
-      <AboutUsPage
-        title={data.contentfulPage.title}
-        description={data.contentfulPage.description?.description as string}
-        heroImageData={data.hero}
-        impressions={data.allContentfulAboutUsImpressions.nodes}
-        team={data.allContentfulTeamMember.nodes}
-        sectionHeaderImpressions={data.sectionHeaderImpressions}
-        sectionHeaderTeam={data.sectionHeaderTeam}
-        leadbox={data.contentfulLeadbox}
-      />
-    </>
+    <AboutUsPage
+      title={data.contentfulPage.title}
+      description={data.contentfulPage.description?.description as string}
+      heroImageData={data.hero}
+      impressions={data.allContentfulAboutUsImpressions.nodes}
+      team={data.allContentfulTeamMember.nodes}
+      sectionHeaderImpressions={data.sectionHeaderImpressions}
+      sectionHeaderTeam={data.sectionHeaderTeam}
+      leadbox={data.contentfulLeadbox}
+    />
   );
 };
 
 export default AboutUs;
+
+export const Head = ({ data, location }: PageProps<AboutUsQueryProps>) => {
+  return (
+    <SEO
+      title={`${data.contentfulPage.title} | Satellytes`}
+      location={location}
+    />
+  );
+};
+
 export const AboutUsPageQuery = graphql`
   query ($language: String!) {
     hero: file(relativePath: { eq: "office/sy-office-05.jpg" }) {

diff --git a/src/pages/career.tsx b/src/pages/career.tsx
@@ -33,42 +33,45 @@ interface CareerPageQueryProps {
   applicationProcessAccordion: ContentfulAccordion;
 }
 
-const Career = ({ data, location }: PageProps<CareerPageQueryProps>) => {
+const Career = ({ data }: PageProps<CareerPageQueryProps>) => {
   const officeImages = data.officeImages.nodes.reduce((memo, image) => {
     memo[image.relativePath] = image;
     return memo;
   }, {});
 
   return (
-    <>
-      <SEO
-        title={`${data.contentfulPage.title} | Satellytes`}
-        description={data.contentfulPage.seoMetaText}
-        location={location}
-      />
-      <CareerPage
-        heroImageData={data.hero}
-        positions={data.allContentfulVacancy.nodes}
-        officeImages={officeImages}
-        page={data.contentfulPage}
-        leadbox={data.contentfulLeadbox}
-        introductionHeader={data.introductionHeader}
-        applicationProcessHeader={data.applicationProcessHeader}
-        openingsHeader={data.openingsHeader}
-        cultureHeader={data.cultureHeader}
-        perksHeader={data.perksHeader}
-        cultureTeaser={data.cultureTeaser.gridItems}
-        perksTeaser={data.perksTeaser.gridItems}
-        applicationProcessAccordion={
-          data.applicationProcessAccordion.accordionItems
-        }
-      />
-    </>
+    <CareerPage
+      heroImageData={data.hero}
+      positions={data.allContentfulVacancy.nodes}
+      officeImages={officeImages}
+      page={data.contentfulPage}
+      leadbox={data.contentfulLeadbox}
+      introductionHeader={data.introductionHeader}
+      applicationProcessHeader={data.applicationProcessHeader}
+      openingsHeader={data.openingsHeader}
+      cultureHeader={data.cultureHeader}
+      perksHeader={data.perksHeader}
+      cultureTeaser={data.cultureTeaser.gridItems}
+      perksTeaser={data.perksTeaser.gridItems}
+      applicationProcessAccordion={
+        data.applicationProcessAccordion.accordionItems
+      }
+    />
   );
 };
 
 export default Career;
 
+export const Head = ({ data, location }: PageProps<CareerPageQueryProps>) => {
+  return (
+    <SEO
+      title={`${data.contentfulPage.title} | Satellytes`}
+      description={data.contentfulPage.seoMetaText}
+      location={location}
+    />
+  );
+};
+
 export const CareerPageQuery = graphql`
   query ($language: String!) {
     officeImages: allFile(filter: { relativeDirectory: { eq: "office" } }) {

diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
@@ -8,21 +8,34 @@ interface ContactPageQueryProps {
   contentfulPage: ContentfulPage;
 }
 
-const Contact = ({ data, location }: PageProps<ContactPageQueryProps>) => {
+const Contact = () => <ContactPage />;
+export default Contact;
+
+export const Head = ({ data, location }: PageProps<ContactPageQueryProps>) => {
   return (
     <>
       <SEO
         title={`${data.contentfulPage.title} | Satellytes`}
         description={data.contentfulPage.description?.description}
         location={location}
       />
-      <ContactPage />
+      {/*
+       * Styles and Script for Leaflet Hero Map
+       */}
+      <link
+        rel="stylesheet"
+        href="https://unpkg.com/[email protected]/dist/leaflet.css"
+      />
+      <link
+        rel="stylesheet"
+        href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css"
+        type="text/css"
+      />
+      <script src="//unpkg.com/leaflet-gesture-handling"></script>
     </>
   );
 };
 
-export default Contact;
-
 export const ContactPageQuery = graphql`
   query ($language: String!) {
     contentfulPage(slug: { eq: "contact" }, node_locale: { eq: $language }) {

diff --git a/src/pages/data-privacy.tsx b/src/pages/data-privacy.tsx
@@ -12,16 +12,9 @@ interface DataPrivacyPageQueryProps {
 
 const DataPrivacyPage = ({
   data,
-  location,
 }: PageProps<DataPrivacyPageQueryProps>): JSX.Element => {
   return (
     <Layout light={true}>
-      <SEO
-        title={`${data.contentfulPage.title} | Satellytes`}
-        description={data.contentfulPage.seoMetaText}
-        location={location}
-        noIndex={true}
-      />
       <ContentBlockContainer>
         <ContentfulRichText
           data={data.contentfulPage.content as ContentfulRichTextType}
@@ -31,6 +24,20 @@ const DataPrivacyPage = ({
   );
 };
 
+export const Head = ({
+  data,
+  location,
+}: PageProps<DataPrivacyPageQueryProps>) => {
+  return (
+    <SEO
+      title={`${data.contentfulPage.title} | Satellytes`}
+      description={data.contentfulPage.seoMetaText}
+      location={location}
+      noIndex={true}
+    />
+  );
+};
+
 export default DataPrivacyPage;
 
 export const DataPrivacyPageQuery = graphql`