Merge pull request #885: Replace Next.js Links with HTML anchor

static-site/.eslintrc.yaml

@@ -23,6 +23,7 @@ ignorePatterns:
 rules:
   react/prop-types: off # Remove this override once all props have been typed using PropTypes or TypeScript.
   '@next/next/no-img-element': off # Remove this if we use next.js optimisations for <img>
+  '@next/next/no-html-link-for-pages': off
 
 parserOptions:
   sourceType: module

static-site/data/SiteConfig.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from 'next/link'
 import NextstrainFooter from "../src/components/Footer";
 
 export const siteTitle = "Nextstrain";
@@ -20,12 +19,12 @@ export const groupsApp = false;
 export const groupsTitle = "Scalable Sharing with Nextstrain Groups";
 
 export const ErrorBannerInitialMessage = () => (<>
-  Please <Link href="/contact">contact us</Link> if you believe this to be an error.
+  Please <a href="/contact">contact us</a> if you believe this to be an error.
 </>);
 
 export const DataFetchError = () => (<>
   Something went wrong getting data.
-  Please <Link href="/contact">contact us</Link> if this continues to happen.
+  Please <a href="/contact">contact us</a> if this continues to happen.
 </>);
 
 export const GroupsAbstract = () => (<>
@@ -42,7 +41,7 @@ export const GroupsAbstract = () => (<>
   For more details about Nextstrain Groups,
   <a href="https://docs.nextstrain.org/en/latest/learn/groups/index.html"> please see our documentation</a>.
   For an alternative approach to sharing data through nextstrain.org which leverages GitHub repositories, please see
-  <Link href="/community"> Community data sharing</Link>.
+  <a href="/community"> Community data sharing</a>.
   <br />
   <br />
   Nextstrain Groups is still in the early stages and require a Nextstrain team

static-site/src/components/Footer/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from 'next/link'
 import * as Styles from "../splash/styles";
 import { SmallSpacer, BigSpacer } from "../../layouts/generalComponents";
 import { Logos } from "../../components/logos";
@@ -76,7 +75,7 @@ class Footer extends React.Component {
                   <div style={{margin: "0px 0px"}}/>
                   <FooterList />
                   {"Please see the "}
-                  <Link href="/team">team page</Link>
+                  <a href="/team">team page</a>
                   {" for more details."}
                 </>
                 )}

static-site/src/components/Footer/sitemap.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import Link from 'next/link'
 import { FaExternalLinkAlt } from "react-icons/fa";
 import * as Styles from "../splash/styles";
 import { BigSpacer } from "../../layouts/generalComponents";
@@ -33,13 +32,13 @@ const SectionList = ({ entries }) => {
           <ListItemParagraph>
             <UncoloredLink>
               {entry.href.startsWith('http') ? (
-                <Link href={entry.href}  rel="noopener noreferrer" target="_blank">
+                <a href={entry.href}  rel="noopener noreferrer" target="_blank">
                   {entry.name} <FooterIcon><FaExternalLinkAlt/></FooterIcon>
-                </Link>
+                </a>
               ) : (
-                <Link href={entry.href}>
+                <a href={entry.href}>
                   {entry.name}
-                </Link>
+                </a>
               )}
             </UncoloredLink>
           </ListItemParagraph>

static-site/src/components/ListResources/index.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect } from 'react';
-import Link from 'next/link'
 import styled from 'styled-components';
 import Select, { MultiValue } from 'react-select';
 import ScrollableAnchor from '../../../vendored/react-scrollable-anchor/index';
@@ -52,7 +51,7 @@ function ListResources({
       <ErrorContainer>  
         {"Whoops - listing resources isn't working!"}
         <br/>
-        {'Please '}<Link href="/contact" style={{fontWeight: 300}}>get in touch</Link>{" if this keeps happening"}
+        {'Please '}<a href="/contact" style={{fontWeight: 300}}>get in touch</a>{" if this keeps happening"}
       </ErrorContainer>
     )
   }

static-site/src/components/Sidebar/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from 'next/link'
 import styled from 'styled-components';
 
 const Sidebar = ({title, posts}) => {
@@ -19,14 +18,14 @@ const Sidebar = ({title, posts}) => {
 const IndividualPost = ({blogUrlName, sidebarName, selected}) => {
   return (
     <ItemContainer key={sidebarName}>
-      <Link href={`/blog/${blogUrlName}`}>
+      <a href={`/blog/${blogUrlName}`}>
         <li>
           {selected ?
             (<SelectedPostTitle>{sidebarName}</SelectedPostTitle>) :
             (<UnselectedPostTitle>{sidebarName}</UnselectedPostTitle>)
           }
         </li>
-      </Link>
+      </a>
     </ItemContainer>
   );
 }

static-site/src/components/nav-bar/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from 'next/link'
 import styled, {css} from 'styled-components';
 import nextstrainLogo from "../../../static/logos/nextstrain-logo-small.png";
 import { UserContext } from "../../layouts/userDataWrapper";
@@ -49,14 +48,6 @@ const baseLinkCss = css`
   font-weight: 400;
 `;
 
-/** Next.JS <Link> (will be handled client-side)
-*/
-const ClientSideLink = styled((props) => <Link {...props} />)`
-  ${baseLinkCss}
-  color: ${(props) => props.$minified ? '#000000' : props.theme.darkGrey} !important;
-  cursor: pointer;
-`;
-
 /** HTML anchor (<a>) element. HTML request will be made to server, i.e. won't be handled client-side.
  */
 const ServerSideLink = styled.a`
@@ -82,9 +73,9 @@ class NavBar extends React.Component {
   getLogo() {
     return (
       <NavLogo>
-        <Link href="/">
+        <a href="/">
           <img alt="Logo" width="40" src={nextstrainLogo.src}/>
-        </Link>
+        </a>
       </NavLogo>
     );
   }
@@ -101,11 +92,11 @@ class NavBar extends React.Component {
       this.props.minified ?
         <div/>
         :
-        <Link href="/">
+        <a href="/">
           {rainbowTitle}
           {groupsApp &&
             <SubTitle>Groups Server</SubTitle>}
-        </Link>
+        </a>
     );
   }
 
@@ -119,13 +110,13 @@ class NavBar extends React.Component {
         {!groupsApp &&
           <>
             <ServerSideLink $minified={minified} href="https://docs.nextstrain.org/en/latest/index.html" >DOCS</ServerSideLink>
-            <ClientSideLink $minified={minified} href="/contact">CONTACT</ClientSideLink>
+            <ServerSideLink $minified={minified} href="/contact">CONTACT</ServerSideLink>
             { /* Only display "blog" if we're not minified */
               minified ?
                 null :
                 this.selectedClass("blog") ?
                   <NavLinkInactive $minified={minified}>BLOG</NavLinkInactive> :
-                  <ClientSideLink $minified={minified} href="/blog">BLOG</ClientSideLink>
+                  <ServerSideLink $minified={minified} href="/blog">BLOG</ServerSideLink>
             }
           </>
          }

static-site/src/components/splash/index.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import ScrollableAnchor, { configureAnchors } from '../../../vendored/react-scrollable-anchor/index';
-import Link from 'next/link'
 import Cards from "../Cards";
 import nCoVCards from "../Cards/nCoVCards";
 import coreCards from "../Cards/coreCards";
@@ -58,7 +57,7 @@ const Splash = () => {
           potential of pathogen genome data. We provide a continually-updated view of publicly
           available data alongside powerful analytic and visualization tools for use by the
           community. Our goal is to aid epidemiological understanding and improve outbreak
-          response. If you have any questions, please <Link href="/contact">contact us</Link>.
+          response. If you have any questions, please <a href="/contact">contact us</a>.
         </Styles.CenteredFocusParagraph>
       </FlexCenter>
 
@@ -171,7 +170,7 @@ const Splash = () => {
           <Styles.FocusParagraph>
             Nextstrain is under active development and we have big plans for its future, including
             visualization, bioinformatics analysis and an increasing number and variety of
-            datasets. If you have any questions or ideas, please <Link href="/contact">contact us</Link>.
+            datasets. If you have any questions or ideas, please <a href="/contact">contact us</a>.
           </Styles.FocusParagraph>
         </div>
       </div>

static-site/src/sections/community-page.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from 'next/link'
 import {
   SmallSpacer,
   HugeSpacer,
@@ -28,7 +27,7 @@ const abstract = (
     <br/>
     <br/>
     P.S. For an alternative approach to sharing data through nextstrain.org which is allows larger datasets and/or private data sharing, see
-    <Link href="/groups"> Scalable Sharing with Nextstrain Groups</Link>.
+    <a href="/groups"> Scalable Sharing with Nextstrain Groups</a>.
   </>
 );
 

static-site/src/sections/community-repo-page.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from 'next/link'
 import ScrollableAnchor, { configureAnchors } from '../../vendored/react-scrollable-anchor/index';
 import { HugeSpacer } from "../layouts/generalComponents";
 import * as splashStyles from "../components/splash/styles";
@@ -70,7 +69,7 @@ class Index extends React.Component {
       </>);
       const description = (<>
         <p>If {"you're"} setting up your own Community on GitHub repository, see <a href="https://docs.nextstrain.org/en/latest/guides/share/community-builds.html">our documentation</a>.</p>
-        <p>For a list of featured Nextstrain Community datasets, check out the <Link href="/community">Community page</Link>.</p>
+        <p>For a list of featured Nextstrain Community datasets, check out the <a href="/community">Community page</a>.</p>
       </>);
       if (!bannerTitle) {
         bannerTitle = notFound;

static-site/src/sections/individual-group-page.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from 'next/link'
 import ScrollableAnchor, { configureAnchors } from '../../vendored/react-scrollable-anchor/index';
 import { uri } from "../../../src/templateLiterals.js";
 import { HugeSpacer, FlexGridRight } from "../layouts/generalComponents";
@@ -73,7 +72,7 @@ class Index extends React.Component {
     // Set up a banner or update the existing one if the group doesn't exist
     if (this.state.groupNotFound) {
       const notFound = `The Nextstrain Group "${groupName}" doesn't exist yet, or there was an error getting data for that group.`;
-      const linkToGroupsPage = <p>For available Nextstrain Groups, check out the <Link href="/groups">Groups page</Link>.</p>;
+      const linkToGroupsPage = <p>For available Nextstrain Groups, check out the <a href="/groups">Groups page</a>.</p>;
       if (!bannerTitle) {
         bannerTitle = notFound;
         bannerContents = linkToGroupsPage;

static-site/src/sections/pathogens.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from 'next/link'
 import {
   SmallSpacer,
   HugeSpacer,
@@ -13,8 +12,8 @@ import {coreQuickLinks, coreGroupDisplayNames, coreShowcase} from "../../content
 const title = "Nextstrain-maintained pathogen analyses";
 const abstract = (
   <>
-    These data represent analyses and situation-reports produced by the <Link href="/team">core Nextstrain team</Link>.
-    Explore analyses produced by others on the <Link href="/groups">Groups</Link> and <Link href="/community">Community</Link> pages.
+    These data represent analyses and situation-reports produced by the <a href="/team">core Nextstrain team</a>.
+    Explore analyses produced by others on the <a href="/groups">Groups</a> and <a href="/community">Community</a> pages.
     <br/><br/>
     We aim to provide a continually-updated view of publicly available data to show pathogen evolution and epidemic spread.
     The pipeline used to generate each dataset is available on <a href="https://github.com/nextstrain/">our GitHub page</a> or by loading a dataset and