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 = () => (
@@ -55,6 +56,12 @@ class Footer extends React.Component { render() { return (
+
+ +
+ + +
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 ( + + {sections.map((section) => ( + +
+ + {section.title} + +
+
+ )) + } +
+ ) +} + + +const SectionList = ({ entries }) => { + return ( + + {entries.map((entry) => ( +
  • + + + {entry.href.startsWith('http') ? ( + + {entry.name} + + ) : ( + + {entry.name} + + )} + + +
  • + ))} +
    + ) +} + +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 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 { +