diff --git a/src/endpoints/nextjs.js b/src/endpoints/nextjs.js index 0a65a93d1..4d50fd220 100644 --- 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 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 index b2fff8b42..cf291202d 100644 --- 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 ( - - - -
- - - - ); +/** + * Page copied from https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.tsx + * with modifications. See also + * + */ + +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 { + 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(), + }); + + // 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 ( + + + +
+ + + + ); + } } diff --git a/static-site/pages/example-ssr-on-request.jsx b/static-site/pages/example-ssr-on-request.jsx new file mode 100644 index 000000000..f3ee6d495 --- /dev/null +++ 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
+ {`The express server is running in ${expressData.PRODUCTION ? 'production' : 'development'} mode`} +
+ {`The next.js server is running in ${expressData.STATIC_SITE_PRODUCTION ? 'production' : 'development'} mode`} +
+} +export default Index; + diff --git a/static-site/pages/index.jsx b/static-site/pages/index.jsx index e1cb091c9..2202ab852 100644 --- 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 index ee657ee5a..2633f7a5c 100644 --- 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 index f09bcde6f..a69e7b7ae 100644 --- 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(""); + return ( +
+

Nextstrain core team

+ + + + {"Nextstrain was co-founded by:"} + + + + + + + + {"The core team currently working on Nextstrain are:"} + + + + + +

Nextstrain Alumni

+ + + {`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 "} + our GitHub organization + {" to see the history of (code) contributions."} + + + + + + +
+ ); +}; + + +const Team = props => ( + + + +); + +export default Team; + diff --git a/static-site/src/components/Footer/index.jsx b/static-site/src/components/Footer/index.jsx index 69b7178f6..2a2a12301 100644 --- 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 (
@@ -62,7 +63,7 @@ class Footer extends React.Component { {"Hadfield "}{"et al., "} Nextstrain: real-time tracking of pathogen evolution , Bioinformatics (2018) - {(typeof window !== 'undefined' && window.location.pathname.replace(/\//g, "")!=="team") && ( + {showTeamAvatars && ( <>
The core Nextstrain team is diff --git a/static-site/src/layouts/generic-page.jsx b/static-site/src/layouts/generic-page.jsx index 3cd8a44e0..11865df67 100644 --- 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}) => (
@@ -19,7 +19,7 @@ const GenericPage = ({location, children, banner}) => ( {children} -