nextstrain · jameshadfield · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024
diff --git a/src/endpoints/nextjs.js b/src/endpoints/nextjs.js
@@ -1,5 +1,5 @@
 import next from 'next';
-import { STATIC_SITE_PRODUCTION } from '../config.js';
+import { PRODUCTION, STATIC_SITE_PRODUCTION } from '../config.js';
 import {verbose, error} from '../utils/index.js';
 
 const PORT = Number(process.env.PORT || 5000);
@@ -18,6 +18,18 @@ export async function handleRequest(req, res) {
   if (!req.path.startsWith('/_next/')) {
     verbose(`next.js handling request for "${req.path}"`)
   }
+
+  /**
+   * An example of how you can share data between our express server
+   * and the nextJs server, to be accessed via `getServerSideProps`
+   * or similar to facilitate SSR.
+   * See <c98760c350a91a0c5641a6e676fc972c9f1932bb> as well
+   */
+  req.expressData = {
+    STATIC_SITE_PRODUCTION,
+    PRODUCTION
+  }
+
   await prepared;
   await _handleRequest(req, res);
   return res.end();

diff --git a/static-site/pages/_document.tsx b/static-site/pages/_document.tsx
@@ -1,13 +1,53 @@
-import { Html, Head, Main, NextScript } from "next/document";
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
+/**
+ * Page copied from https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.tsx
+ * with modifications. See also 
+ * <https://nextjs.org/docs/pages/building-your-application/routing/custom-document>
+ */
+
+import type { DocumentContext, DocumentInitialProps } from "next/document";
+import Document from "next/document";
+import { ServerStyleSheet } from "styled-components";
+import { Html, Head, Main, NextScript} from "next/document";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext,
+  ): Promise<DocumentInitialProps> {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      // Run the React rendering logic synchronously
+      ctx.renderPage = () =>
+        originalRenderPage({
+          // Useful for wrapping the whole react tree
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      // Run the parent `getInitialProps`, it now includes the custom `renderPage`
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: [initialProps.styles, sheet.getStyleElement()],
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
+  /** The following was our previous _document rendering, which I presume is identical from that within the parent `Document` class,
+   * as we can leave it out and the result seems the same. TO CHECK.
+   */
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
 }
diff --git a/static-site/pages/example-ssr-on-request.jsx b/static-site/pages/example-ssr-on-request.jsx
@@ -0,0 +1,19 @@
+
+export const getServerSideProps = (async ({req}) => {
+  console.log("getServerSideProps running");
+  /* could run API queries here if needed, and they'll be made
+  server-side upon request but will not be made by the client */
+  return { props: { expressData: req.expressData} }
+});
+
+
+const Index = ({expressData}) => {
+
+  return <div style={{fontSize: '20px', color: 'orange'}}>
+    {`The express server is running in ${expressData.PRODUCTION ? 'production' : 'development'} mode`}
+    <br/>
+    {`The next.js server is running in ${expressData.STATIC_SITE_PRODUCTION ? 'production' : 'development'} mode`}
+  </div>
+}
+export default Index;
+
diff --git a/static-site/pages/index.jsx b/static-site/pages/index.jsx
@@ -1,3 +1,2 @@
-import dynamic from 'next/dynamic'
-const Index = dynamic(() => import("../src/pages/index"), {ssr: false})
+import Index from "../src/pages/index";
 export default Index;
diff --git a/static-site/pages/pathogens.jsx b/static-site/pages/pathogens.jsx
@@ -1,3 +1,8 @@
+/**
+ * 
+ * Example of  dynamic import but using ssr (which is the default dynamic import!)
+ */
+
 import dynamic from 'next/dynamic'
-const Index = dynamic(() => import("../src/sections/pathogens"), {ssr: false})
+const Index = dynamic(() => import("../src/sections/pathogens"), {ssr: true})
 export default Index;
diff --git a/static-site/pages/team.jsx b/static-site/pages/team.jsx
@@ -1,3 +1,72 @@
-import dynamic from 'next/dynamic'
-const Index = dynamic(() => import("../src/pages/team"), {ssr: false})
-export default Index;
+
+/**
+ * 
+ * Example of a typical/simple (?) page for Next.js (pages), i.e. no dynamic imports.
+ */
+
+import React from "react";
+import styled from "styled-components";
+import GenericPage from "../src/layouts/generic-page";
+import { BigSpacer, FlexCenter} from "../src/layouts/generalComponents";
+import { CenteredFocusParagraph } from "../src/components/splash/styles";
+import { ListOfPeople } from "../src/components/People/avatars";
+
+const H1 = styled.div`
+  text-align: center;
+  font-size: 32px;
+  line-height: 32px;
+  font-weight: 300;
+  color: ${(props) => props.theme.darkGrey};
+  min-width: 240px;
+  margin-top: 0px;
+  margin-bottom: 20px;
+`;
+
+const TeamPage = () => {
+  console.log("<TeamPage>");
+  return (
+    <div>
+      <H1>Nextstrain core team</H1>
+
+      <FlexCenter>
+        <CenteredFocusParagraph>
+          {"Nextstrain was co-founded by:"}
+        </CenteredFocusParagraph>
+      </FlexCenter>
+
+      <ListOfPeople people="founders" teamPage />
+
+      <FlexCenter>
+        <CenteredFocusParagraph>
+          {"The core team currently working on Nextstrain are:"}
+        </CenteredFocusParagraph>
+      </FlexCenter>
+
+      <ListOfPeople people="core" teamPage />
+
+      <H1>Nextstrain Alumni</H1>
+      <FlexCenter>
+        <CenteredFocusParagraph>
+          {`Our previous core Nextstrain team members, some of whom are still working on projects involving Nextstrain and/or maintaining specific analyses. `}
+          {"Beyond the core team there have been many code contributions from the wider scientific and programming community; please see "}
+          <a href="https://github.com/nextstrain">our GitHub organization</a>
+          {" to see the history of (code) contributions."}
+        </CenteredFocusParagraph>
+      </FlexCenter>
+
+      <BigSpacer/>
+
+      <ListOfPeople people="alumni" teamPage />
+    </div>
+  );
+};
+
+
+const Team = props => (
+  <GenericPage location={props.location} footerProps={{showTeamAvatars: false}}>
+    <TeamPage/>
+  </GenericPage>
+);
+
+export default Team;
+
diff --git a/static-site/src/components/Footer/index.jsx b/static-site/src/components/Footer/index.jsx
@@ -53,6 +53,7 @@ const SplashImagesCredit = () => (
 
 class Footer extends React.Component {
   render() {
+    const showTeamAvatars = this.props.showTeamAvatars!==false; // same as a functional component with default of true
     return (
       <div>
         <div className="row">
@@ -62,7 +63,7 @@ class Footer extends React.Component {
               {"Hadfield "}<i>{"et al., "}</i>
               <a href="https://doi.org/10.1093/bioinformatics/bty407" target="_blank" rel="noreferrer noopener">Nextstrain: real-time tracking of pathogen evolution</a>
               <i>, Bioinformatics</i> (2018)
-              {(typeof window !== 'undefined' && window.location.pathname.replace(/\//g, "")!=="team") && (
+              {showTeamAvatars && (
                 <>
                   <div style={{margin: "10px 0px"}}/>
                   The core Nextstrain team is

diff --git a/static-site/src/layouts/generic-page.jsx b/static-site/src/layouts/generic-page.jsx
@@ -7,7 +7,7 @@ import UserDataWrapper from "../layouts/userDataWrapper";
 import { BigSpacer, HugeSpacer, Line } from "../layouts/generalComponents";
 import * as splashStyles from "../components/splash/styles";
 
-const GenericPage = ({location, children, banner}) => (
+const GenericPage = ({location, children, banner, footerProps}) => (
   <MainLayout>
     <div className="index-container">
       <Helmet title={siteTitle} />
@@ -19,7 +19,7 @@ const GenericPage = ({location, children, banner}) => (
             <HugeSpacer /><HugeSpacer />
             {children}
             <Line style={{ margin: "30px 0px 10px 0px" }} />
-            <Footer />
+            <Footer {...footerProps} />
             <BigSpacer />
           </splashStyles.Container>
         </UserDataWrapper>

diff --git a/static-site/src/pages/team.jsx b/static-site/src/pages/team.jsx