From aa9d2458fd8f56887eb9de231274f009821e4679 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Fri, 17 May 2024 18:17:51 -0700
Subject: [PATCH 1/2] Add sitemap to footer

---
 static-site/src/components/Footer/index.jsx   |   7 ++
 static-site/src/components/Footer/sitemap.jsx | 106 ++++++++++++++++++
 .../src/components/Footer/sitemap.yaml        |  39 +++++++
 3 files changed, 152 insertions(+)
 create mode 100644 static-site/src/components/Footer/sitemap.jsx
 create mode 100644 static-site/src/components/Footer/sitemap.yaml

diff --git a/static-site/src/components/Footer/index.jsx b/static-site/src/components/Footer/index.jsx
index 29b60c552..54a4c7a16 100644
--- a/static-site/src/components/Footer/index.jsx
+++ b/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">
diff --git a/static-site/src/components/Footer/sitemap.jsx b/static-site/src/components/Footer/sitemap.jsx
new file mode 100644
index 000000000..4260a0d4d
--- /dev/null
+++ b/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;
+`
diff --git a/static-site/src/components/Footer/sitemap.yaml b/static-site/src/components/Footer/sitemap.yaml
new file mode 100644
index 000000000..d2532990c
--- /dev/null
+++ b/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

From 69c3b5de37ae7e0596fbc88bd7d1ec3eaa4b7ac7 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Fri, 24 May 2024 17:22:33 -0700
Subject: [PATCH 2/2] Add line above footer on splash component

With the new sitemap at the top of the footer, it makes more sense to
render this on not only GenericPage but also pages that use Splash.
---
 static-site/src/components/splash/index.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static-site/src/components/splash/index.jsx b/static-site/src/components/splash/index.jsx
index b17b1e2db..82a28acee 100644
--- a/static-site/src/components/splash/index.jsx
+++ b/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>