Add a "contact" page

Previously, the only means of contact shown on this website was the
hello@ email. This new contact page lists preferred means of
communication under various scenarios.

hello@ is still appropriate in the case of setting up a new group for
Nextstrain Groups, but all the other references to the email have been
replaced with a link to the new page.

auspice-client/customisations/navbar.js

@@ -124,6 +124,7 @@ const NavBar = ({sidebar, narrativeTitle, width}) => {
               <div style={{flex: 5}}/>
               <Link href="https://docs.nextstrain.org/en/latest/index.html" style={styles.link} text="DOCS"/>
               <Link href="https://docs.nextstrain.org/en/latest/learn/about-nextstrain.html" style={styles.link} text="HELP"/>
+              <Link href="/contact" style={styles.link} text="CONTACT"/>
               <WhoAmI sidebar={sidebar}/>
             </div>
           )

auspice-client/customisations/splash.js

@@ -105,8 +105,8 @@ function ErrorMessage({errorMessage}) {
       There seems to have been an error accessing that dataset.
       <p style={{fontSize: "14px"}}>
         {`Details: ${errorMessage}. Please `}
-        <a href={"mailto:hello@nextstrain.org"} style={{color: "inherit", textDecoration: "underline"}}>
-          email us
+        <a href="/contact" style={{color: "inherit", textDecoration: "underline"}}>
+          contact us
         </a>
         {` if you think this is a bug.`}
       </p>

static-site/data/SiteConfig.jsx

@@ -20,12 +20,12 @@ export const groupsApp = false;
 export const groupsTitle = "Scalable Sharing with Nextstrain Groups";
 
 export const ErrorBannerInitialMessage = () => (<>
-  Please <a href="mailto:hello@nextstrain.org">contact us at hello@nextstrain.org</a> if you believe this to be an error.
+  Please <Link to="/contact">contact us</Link> if you believe this to be an error.
 </>);
 
 export const DataFetchError = () => (<>
   Something went wrong getting data.
-  Please <a href="mailto:hello@nextstrain.org">contact us at hello@nextstrain.org</a> if this continues to happen.
+  Please <Link to="/contact">contact us</Link> if this continues to happen.
 </>);
 
 export const GroupsAbstract = () => (<>

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

@@ -131,6 +131,7 @@ class NavBar extends React.Component {
           <>
             <NavLinkToGoToServer minified={minified} href="https://docs.nextstrain.org/en/latest/learn/about-nextstrain.html" >HELP</NavLinkToGoToServer>
             <NavLinkToGoToServer minified={minified} href="https://docs.nextstrain.org/en/latest/index.html" >DOCS</NavLinkToGoToServer>
+            <NavLinkToBeHandledByGatsby minified={minified} to="/contact">CONTACT</NavLinkToBeHandledByGatsby>
             { /* Only display "blog" if we're not minified */
               minified ?
                 null :

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'gatsby';
 import * as splashStyles from "./styles";
 import { ErrorBannerInitialMessage, DataFetchError } from '../../../data/SiteConfig';
 

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

@@ -1,5 +1,6 @@
 import React from "react";
 import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor';
+import { Link } from 'gatsby';
 import Cards from "../Cards";
 import nCoVCards from "../Cards/nCoVCards";
 import coreCards from "../Cards/coreCards";
@@ -62,8 +63,7 @@ class Splash extends React.Component {
             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, or simply want to say hi, please give us a shout at
-            hello<span style={{display: "none"}}>obfuscate</span>@nextstrain.org.
+            response. If you have any questions, please <Link to="/contact">contact us</Link>.
           </Styles.CenteredFocusParagraph>
         </FlexCenter>
 
@@ -176,9 +176,7 @@ class Splash extends React.Component {
             <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 give us a shout at hello
-              <span style={{display: "none"}}>obfuscate</span>
-              @nextstrain.org.
+              datasets. If you have any questions or ideas, please <Link to="/contact">contact us</Link>.
             </Styles.FocusParagraph>
           </div>
         </div>

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

@@ -118,6 +118,10 @@ export const FocusParagraph = styled.p`
   line-height: ${(props) => props.theme.tightLineHeight};
 `;
 
+export const NarrowFocusParagraph = styled(FocusParagraph)`
+  max-width: 640px;
+`;
+
 export const IconParagraph = styled.div`
   margin-top: 0px;
   margin-right: auto;

static-site/src/pages/contact.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import GenericPage from "../layouts/generic-page";
+import { BigSpacer, FlexCenter} from "../layouts/generalComponents";
+import { H1, NarrowFocusParagraph } from "../components/splash/styles";
+
+
+const Contact = props => (
+  <GenericPage location={props.location}>
+      <H1>Contact Us</H1>
+
+      <FlexCenter>
+        <NarrowFocusParagraph>
+          We are a small team, but connecting with users is important to us.
+          <br/>
+          <br/>
+          If you have a general question about Nextstrain, we encourage you to post on our{" "}
+          <a href="https://discussion.nextstrain.org" target="_blank" rel="noreferrer noopener">
+            discussion forum
+          </a>, where both Nextstrain team members and other community members can assist you.
+          <br/>
+          <br/>
+          To send a bug report or feature request, please open an issue in one of our{" "}
+          <a href="https://github.com/orgs/nextstrain/repositories">
+            GitHub repositories
+          </a>.
+          <br/>
+          <br/>
+          For private inquiries, you can reach us at
+          hello<span style={{display: "none"}}>obfuscate</span>@nextstrain.org.
+          <br/>
+          <br/>
+          We also host office hours via Zoom every week on Thursdays at 10AM US Pacific time.
+          Email us for the meeting link.
+        </NarrowFocusParagraph>
+      </FlexCenter>
+
+      <BigSpacer/>
+  </GenericPage>
+);
+
+export default Contact;

static-site/src/sections/sequence-search.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Select, {createFilter} from 'react-select';
+import { Link } from 'gatsby';
 import styled from 'styled-components';
 import {FaFile, FaExclamation} from "react-icons/fa";
 import { SmallSpacer, MediumSpacer, HugeSpacer, FlexCenter } from "../layouts/generalComponents";
@@ -80,9 +81,7 @@ class SequencesToDatasets extends React.Component {
             <strong style={{color: 'red', paddingBottom: '20px'}}>
               This functionality is no longer being maintained, but we hope to revisit this in the future. 
               {` Please `}
-              <a href={"mailto:hello@nextstrain.org"} style={{color: "inherit", textDecoration: "underline"}}>
-                get in touch
-              </a>
+              <Link to="/contact">contact us</Link>
               {` if you were relying on this functionality and we'll see if we can help.`}
             </strong>
             <p/>