satellytes · WiebkeFr · Dec 6, 2023 · Nov 29, 2023 · Dec 4, 2023 · Dec 5, 2023
@@ -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 */,

@@ -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.3",
     "@types/react": "^18.2.41",
     "@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",

@@ -1,9 +1,10 @@
 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';
+import {
+  DEFAULT_LANGUAGE,
+  LANGUAGES,
+} from '../../../gatsby/config-options/constants';
 
 const DEFAULT_META_IMAGE_URL_PATH = '/sy-share-image.jpg';
 const RSS_URL = 'https://satellytes.com/blog/rss.xml';
@@ -19,6 +20,18 @@ interface SeoProps {
   noIndex?: boolean;
   location: Location;
   rssLink?: boolean;
+  locales: LocalesQueryProps;
+  languages?: string[];
+}
+
+export interface LocalesQueryProps {
+  edges: {
+    node: {
+      language: string;
+      ns: string;
+      data: string;
+    };
+  }[];
 }
 
 /**
@@ -66,6 +79,8 @@ const SEO = ({
   noIndex,
   location,
   rssLink,
+  locales,
+  languages = LANGUAGES,
 }: SeoProps) => {
   const { site } = useStaticQuery(graphql`
     query {
@@ -78,26 +93,38 @@ const SEO = ({
       }
     }
   `);
-  const { t } = useTranslation();
-  const i18n = useI18next();
 
-  const metaDescription = description || t('main.description');
+  /**
+   * Gatsby Head API is not yet compatible to gatsby-plugin-react-i18next.
+   * Reference to solution/workaround to use translation in Head:
+   * https://github.com/gatsbyjs/gatsby/issues/36458
+   *
+   * The i18n object (languages, language, originalPath, defaultLanguage)
+   * is replaced with constants and locales data for building the alternate meta tag.
+   */
+  const dataNode = locales.edges.find((e) => e.node.ns === 'translations')
+    ?.node;
+  const t = JSON.parse(dataNode?.data || '{}');
+  const metaDescription = description || t['main.description'];
   const typeOfSite = siteType || 'website';
 
   const metaImageUrl =
     site.siteMetadata.siteUrl + (shareImagePath ?? DEFAULT_META_IMAGE_URL_PATH);
   const alternateLanguagesMetaTags = buildAlternateMetaTags(
-    i18n,
-    location.origin,
+    {
+      languages,
+      language: (dataNode?.language as string) || DEFAULT_LANGUAGE,
+      originalPath: location.pathname.replace('/de/', '/'),
+      defaultLanguage: DEFAULT_LANGUAGE,
+      path: location.pathname,
+    },
+    site.siteMetadata.siteUrl,
   );
 
   return (
-    <Helmet
-      htmlAttributes={{
-        lang: i18n.language,
-      }}
-      title={title}
-    >
+    <>
+      <html lang={dataNode?.language} />
+      <title>{title}</title>
       {/* Standard Tags */}
       <meta property="og:title" name="title" content={title} />
       <meta
@@ -138,7 +165,7 @@ const SEO = ({
           href={RSS_URL}
         />
       )}
-    </Helmet>
+    </>
   );
 };
 

@@ -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>
   );
 };
@@ -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>;
 };
@@ -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>;
 };
@@ -3,36 +3,40 @@ import { graphql, PageProps } from 'gatsby';
 import { SectionHeader } from '../components/content/section-header/section-header';
 import { ContentBlockContainer } from '../components/layout/content-block-container';
 import { Layout } from '../components/layout/layout';
-import SEO from '../components/layout/seo';
+import SEO, { LocalesQueryProps } from '../components/layout/seo';
 import { ContentfulPage } from '../types';
 
 interface NotFoundPageQueryProps {
   contentfulPage: ContentfulPage;
+  locales: LocalesQueryProps;
 }
 
 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}
+      locales={data.locales}
+    />
+  );
+};
+
 export const NotFoundPageQuery = graphql`
   query ($language: String!) {
     contentfulPage(slug: { eq: "not-found" }, node_locale: { eq: $language }) {

@@ -1,6 +1,6 @@
 import { graphql, PageProps } from 'gatsby';
 import React from 'react';
-import SEO from '../components/layout/seo';
+import SEO, { LocalesQueryProps } from '../components/layout/seo';
 import { AboutUsPage } from '../components/pages/about-us/about-us-page';
 import {
   ContentfulAboutUsImpression,
@@ -23,30 +23,36 @@ interface AboutUsQueryProps {
   allContentfulAboutUsImpressions: {
     nodes: ContentfulAboutUsImpression[];
   };
+  locales: LocalesQueryProps;
 }
 
-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}
+      locales={data.locales}
+    />
+  );
+};
+
 export const AboutUsPageQuery = graphql`
   query ($language: String!) {
     hero: file(relativePath: { eq: "office/sy-office-05.jpg" }) {

@@ -1,5 +1,5 @@
 import React from 'react';
-import SEO from '../components/layout/seo';
+import SEO, { LocalesQueryProps } from '../components/layout/seo';
 import { graphql, PageProps } from 'gatsby';
 import { CareerPage } from '../components/pages/career/career-page';
 import {
@@ -31,44 +31,49 @@ interface CareerPageQueryProps {
   cultureTeaser: ContentfulTeaser;
   perksTeaser: ContentfulTeaser;
   applicationProcessAccordion: ContentfulAccordion;
+  locales: LocalesQueryProps;
 }
 
-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}
+      locales={data.locales}
+    />
+  );
+};
+
 export const CareerPageQuery = graphql`
   query ($language: String!) {
     officeImages: allFile(filter: { relativeDirectory: { eq: "office" } }) {