Fix (some) header metadata generation in un-hydrated content [#1011]

* Switch from using `react-helmet` to `next/head` for populating `<head>` element in pages * Swap various `<Helmet>` usage to `<Head>` * Migrate social media-related metadata headers to `_document.tsx` This is a preliminary step that fixes feed auto-discovery; subsequent work will get full metadata headers (i.e., OpenGraph, etc) into un-hydrated renders.
nextstrain · Sep 5, 2024 · 45f6245 · 45f6245
1 parent 717c444
commit 45f6245
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,7 +76,6 @@
     "proxy-agent": "^6.3.1",
     "raw-body": "^2.4.2",
     "react-collapsible": "^2.10.0",
-    "react-helmet": "^6.1.0",
     "react-icons": "^5.0.1",
     "react-map-gl": "^7.1.7",
     "react-select": "^5.8.0",

diff --git a/static-site/pages/_document.tsx b/static-site/pages/_document.tsx
@@ -1,9 +1,20 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import { blogFeedUrls, groupsApp } from "../data/SiteConfig";
 
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        {
+          !groupsApp &&
+          <>
+            <link rel="me" href="https://mstdn.science/@nextstrain" />
+            <link href={`${blogFeedUrls.atom}`} rel="alternate" title="Atom feed for nextstrain.org/blog" type="application/atom+xml" />
+            <link href={`${blogFeedUrls.json}`} rel="alternate" title="JSON feed for nextstrain.org/blog" type="application/json" />
+            <link href={`${blogFeedUrls.rss2}`} rel="alternate" title="RSS2 feed for nextstrain.org/blog" type="application/rss+xml" />
+          </>
+        }
+      </Head>
       <body>
         <Main />
         <NextScript />

diff --git a/static-site/src/components/SEO/SEO.jsx b/static-site/src/components/SEO/SEO.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Helmet from "react-helmet";
+import Head from "next/head";
 import { siteLogo, siteUrl, siteDescription, siteTitle, siteTitleAlt } from "../../../data/SiteConfig";
 
 const pathPrefix = "/"
@@ -58,7 +58,7 @@ class SEO extends Component {
       ]);
     }
     return (
-      <Helmet>
+      <Head>
         {/* General tags */}
         <meta name="description" content={description} />
         <meta name="image" content={image} />
@@ -74,7 +74,7 @@ class SEO extends Component {
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
         <meta property="og:image" content={image} />
-      </Helmet>
+      </Head>
     );
   }
 }

diff --git a/static-site/src/components/layout.jsx b/static-site/src/components/layout.jsx
@@ -1,7 +1,7 @@
 import React from "react";
-import Helmet from "react-helmet";
+import Head from "next/head";
 import styled, {ThemeProvider} from "styled-components";
-import { blogFeedUrls, groupsApp, siteTitle, siteDescription } from "../../data/SiteConfig";
+import { siteTitle, siteDescription } from "../../data/SiteConfig";
 import {theme} from '../layouts/theme';
 
 /**
@@ -19,27 +19,10 @@ export default class MainLayout extends React.Component {
     const { children } = this.props;
     return (
       <div>
-        <Helmet>
+        <Head>
           <title>{`${siteTitle}`}</title>
           <meta name="description" content={siteDescription} />
-          {
-            // react-helmet doesn't support React fragments, so we have to do this
-            // in a maximally silly way; see https://github.com/nfl/react-helmet/issues/342
-            // for details
-          }
-          {!groupsApp &&
-            <link rel="me" href="https://mstdn.science/@nextstrain" />
-          }
-          {!groupsApp &&
-            <link href={`${blogFeedUrls.atom}`} rel="alternate" title="Atom feed for nextstrain.org/blog" type="application/atom+xml" />
-          }
-          {!groupsApp &&
-            <link href={`${blogFeedUrls.json}`} rel="alternate" title="JSON feed for nextstrain.org/blog" type="application/json" />
-          }
-          {!groupsApp &&
-            <link href={`${blogFeedUrls.rss2}`} rel="alternate" title="RSS2 feed for nextstrain.org/blog" type="application/rss+xml" />
-          }
-        </Helmet>
+        </Head>
         <ThemeProvider theme={theme}>
           <GlobalStyles>
             {children}

diff --git a/static-site/src/layouts/generic-page.jsx b/static-site/src/layouts/generic-page.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Helmet from "react-helmet";
+import Head from "next/head";
 import { siteTitle, Footer } from "../../data/SiteConfig";
 import NavBar from "../components/nav-bar";
 import MainLayout from "../components/layout";
@@ -10,7 +10,9 @@ import * as splashStyles from "../components/splash/styles";
 const GenericPage = ({children, banner}) => (
   <MainLayout>
     <div className="index-container">
-      <Helmet title={siteTitle} />
+      <Head>
+        <title>{siteTitle}</title>
+      </Head>
       <main>
         <UserDataWrapper>
           <NavBar/>

diff --git a/static-site/src/pages/404.jsx b/static-site/src/pages/404.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Helmet from "react-helmet";
+import Head from "next/head";
 import styled from "styled-components";
 // import SEO from "../components/SEO/SEO";
 import { siteTitle } from "../../data/SiteConfig";
@@ -13,7 +13,9 @@ const FourOhFour = () => {
   return (
       <MainLayout>
         <div className="index-container">
-          <Helmet title={siteTitle} />
+          <Head>
+            <title>{siteTitle}</title>
+          </Head>
           <main>
             <UserDataWrapper>
               <NavBar minified/>

diff --git a/static-site/src/pages/index.jsx b/static-site/src/pages/index.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Helmet from "react-helmet";
+import Head from "next/head";
 import { withRouter } from 'next/router'
 import SEO from "../components/SEO/SEO";
 import { siteTitle, groupsApp } from "../../data/SiteConfig";
@@ -19,7 +19,9 @@ class Index extends React.Component {
     return (
       <MainLayout>
         <div className="index-container">
-          <Helmet title={siteTitle} />
+          <Head>
+            <title>{siteTitle}</title>
+          </Head>
           <SEO/>
           <main>
             <UserDataWrapper>

diff --git a/static-site/src/templates/displayMarkdown.jsx b/static-site/src/templates/displayMarkdown.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Helmet from "react-helmet";
+import Head from "next/head";
 import styled from "styled-components";
 import SEO from "../components/SEO/SEO";
 import NavBar from '../components/nav-bar';
@@ -65,9 +65,9 @@ export default class GenericTemplate extends React.Component {
     const description = `Nextstrain blog post from ${date}; author(s): ${author}`
     return (
       <MainLayout>
-        <Helmet>
+        <Head description={description}>
           <title>{title}</title>
-        </Helmet>
+        </Head>
         <SEO title={title} description={description} blogUrlName={blogUrlName} />
         <SidebarBodyFlexContainer>
           <SidebarContainer $sidebarOpen={this.state.sidebarOpen}>