Add sitemap to footer

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

@@ -4,6 +4,7 @@ import * as Styles from "../splash/styles";
 import { SmallSpacer, BigSpacer } from "../../layouts/generalComponents";
 import { Logos } from "../../components/logos";
 import { FooterList } from "../People/avatars";
+import { SiteMap } from "./sitemap";
 
 const SplashImagesCredit = () => (
   <div className="row">
@@ -55,6 +56,12 @@ class Footer extends React.Component {
   render() {
     return (
       <div>
+        <div className="row">
+          <SiteMap />
+        </div>
+
+        <BigSpacer />
+
         <div className="row">
           <div className="col-md-1"/>
           <div className="col-md-10">

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

@@ -0,0 +1,106 @@
+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";
+import sections from "./sitemap.yaml";
+
+
+export const SiteMap = () => {
+  return  (
+    <SiteMapContainer>
+      {sections.map((section) => (
+        <SectionWrapper className="col-sm-3 col-xs-6" key={section.title}>
+          <Section>
+            <BigSpacer />
+            <SectionTitle $left>{section.title}</SectionTitle>
+            <SectionList entries={section.entries} />
+          </Section>
+        </SectionWrapper>
+        ))
+      }
+    </SiteMapContainer>
+  )
+}
+
+
+const SectionList = ({ entries }) => {
+  return (
+    <UnstyledList>
+      {entries.map((entry) => (
+        <li key={entry.name}>
+          <ListItemParagraph>
+            <UncoloredLink>
+              {entry.href.startsWith('http') ? (
+                <Link href={entry.href}  rel="noopener noreferrer" target="_blank">
+                  {entry.name} <FooterIcon><FaExternalLinkAlt/></FooterIcon>
+                </Link>
+              ) : (
+                <Link href={entry.href}>
+                  {entry.name}
+                </Link>
+              )}
+            </UncoloredLink>
+          </ListItemParagraph>
+        </li>
+      ))}
+    </UnstyledList>
+  )
+}
+
+const SiteMapContainer = styled.div`
+  // Center contents
+  margin: 0 auto;
+
+  // Ensure that, on wide screens, 4 sections renders to roughly align with the
+  // width of IconParagraph (rendered below this element)
+  max-width: 680px;
+`
+
+// Wrapper is used to center the actual Section while allowing it to be
+// left-aligned.
+const SectionWrapper = styled.div`
+  // Ensure the longest entry (Discussion forum ↗️) still fits on a single line
+  min-width: 170px;
+
+  // Center section contents when all sections are displayed in a single row
+  @media (min-width: 680px) {
+    text-align: center;
+  }
+
+  // Otherwise, when there are multiple rows, left-align so columns are aligned
+  text-align: left;
+`
+
+const Section = styled.div`
+  display: inline-block;
+  text-align: left;
+`
+
+// The global Styles.H3 has a min-width that is undesirable here
+const SectionTitle = styled.h3`
+`
+
+const UnstyledList = styled.ul`
+  list-style: none;
+`
+
+const ListItemParagraph = styled(Styles.FocusParagraph)`
+  line-height: 0.5;
+  font-weight: 300;
+  a {
+    font-weight: 300;
+  }
+`
+
+const UncoloredLink = styled.span`
+  & a {
+    color: #000 !important;
+  }
+`
+
+const FooterIcon = styled.span`
+  margin-left: 2px;
+  font-size: 12px;
+`

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

@@ -0,0 +1,39 @@
+- title: Resources
+  entries:
+  - name: Core pathogens
+    href: /pathogens
+  - name: SARS-CoV-2
+    href: /sars-cov-2
+  - name: Community
+    href: /community
+  - name: Groups
+    href: /groups
+
+- title: Tools
+  entries:
+  - name: Nextclade
+    href: https://clades.nextstrain.org/
+  - name: Auspice.us
+    href: https://auspice.us/
+  - name: Augur
+    href: https://docs.nextstrain.org/projects/augur
+  - name: Auspice
+    href: https://docs.nextstrain.org/projects/auspice
+  - name: Nextstrain CLI
+    href: https://docs.nextstrain.org/projects/cli
+
+- title: Support
+  entries:
+  - name: Docs
+    href: https://docs.nextstrain.org/
+  - name: Discussion forum
+    href: https://discussion.nextstrain.org/
+
+- title: About
+  entries:
+  - name: Team
+    href: /team
+  - name: Blog
+    href: /blog
+  - name: Contact
+    href: /contact

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

@@ -8,7 +8,7 @@ import communityDatasets from "../../../content/community-datasets.yaml";
 import narrativeCards from "../Cards/narrativeCards";
 import Title from "./title";
 import * as Styles from "./styles";
-import { SmallSpacer, BigSpacer, HugeSpacer, FlexCenter } from "../../layouts/generalComponents";
+import { SmallSpacer, BigSpacer, HugeSpacer, FlexCenter, Line } from "../../layouts/generalComponents";
 import Footer from "../Footer";
 import { createGroupCards } from "./groupCards";
 import { UserContext } from "../../layouts/userDataWrapper";
@@ -204,6 +204,7 @@ class Splash extends React.Component {
           </Styles.Button>
         </FlexCenter>
 
+        <Line style={{ margin: "30px 0px 10px 0px" }} />
         <Footer splashImagesCredit/>
 
       </Styles.Container>