Skip to content

Commit

Permalink
🚧 redesign splash page
Browse files Browse the repository at this point in the history
  • Loading branch information
@victorlin
victorlin committed May 18, 2024
1 parent b883b9f commit aa2f45c
Show file tree
Hide file tree
Showing 8 changed files with 157 additions and 152 deletions.
14 changes: 0 additions & 14 deletions static-site/src/components/Cards/coreCards.js
View file

This file was deleted.

4 changes: 3 additions & 1 deletion static-site/src/components/Cards/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ class Cards extends React.Component {
));
}
render() {
const bootstrapColumnSize = this.props.compactColumns ? 6 : 4;
// FIXME: undo this change and make a proper component for splash page card
// or reuse ShowcaseTile from ListResources which is doing something similar
const bootstrapColumnSize = this.props.compactColumns ? 6 : 3;
const CARDS = this.cards(bootstrapColumnSize);
return this.props.compactColumns ? CARDS : (
<div>
Expand Down
14 changes: 0 additions & 14 deletions static-site/src/components/Cards/nCoVCards.js
View file

This file was deleted.

14 changes: 0 additions & 14 deletions static-site/src/components/Cards/narrativeCards.js
View file

This file was deleted.

24 changes: 24 additions & 0 deletions static-site/src/components/Cards/showcaseCards.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
const showcaseCards = [
{
img: "avianinfluenza.png",
url: "/avian-flu",
title: "Avian Flu"
},
{
img: "ncov.png",
url: "/ncov/gisaid/global",
title: "SARS-CoV-2 (GISAID)"
},
{
img: "ncov.png",
url: "/ncov/open/global",
title: "SARS-CoV-2 (open)"
},
{
img: "wnv2.png",
url: "/narratives/twenty-years-of-WNV",
title: "WNV in the Americas"
},
];

export default showcaseCards;
239 changes: 130 additions & 109 deletions static-site/src/components/splash/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,22 @@
import React from "react";
import ScrollableAnchor, { configureAnchors } from '../../../vendored/react-scrollable-anchor/index';
import styled from "styled-components";
import { FaExternalLinkAlt } from "react-icons/fa";
import Link from 'next/link'
import Cards from "../Cards";
import nCoVCards from "../Cards/nCoVCards";
import coreCards from "../Cards/coreCards";
import communityDatasets from "../../../content/community-datasets.yaml";
import narrativeCards from "../Cards/narrativeCards";
import showcaseCards from "../Cards/showcaseCards";
import Title from "./title";
import * as Styles from "./styles";
import { SmallSpacer, BigSpacer, HugeSpacer, FlexCenter } from "../../layouts/generalComponents";
import { BigSpacer, HugeSpacer, FlexCenter } from "../../layouts/generalComponents";
import Footer from "../Footer";
import { createGroupCards } from "./groupCards";
import { UserContext } from "../../layouts/userDataWrapper";

const Section = ({id, title, abstract, cards, buttonText, buttonLink}) => (
<div id={id} className="col-md-6" style={{paddingBottom: "40px"}}>
<div style={{display: "flex", flexDirection: "column", alignItems: "center", height: "100%"}}>
<Styles.H1>{title}</Styles.H1>
<Styles.CenteredFocusParagraph style={{flexGrow: 1}}>
{abstract}
</Styles.CenteredFocusParagraph>
<div style={{display: "flex", justifyContent: "space-evenly", flexWrap: "wrap"}}>
<Cards
squashed
compactColumns
cards={cards}
/>
</div>
<BigSpacer/>
<Styles.Button to={buttonLink}>
{buttonText}
</Styles.Button>
</div>
</div>
);

const HeadingIcon = styled.span`
margin-left: 4px;
font-size: 14px;
`

class Splash extends React.Component {
constructor() {
super();
configureAnchors({ offset: -10 });
}

static contextType = UserContext;

Expand All @@ -53,102 +29,147 @@ class Splash extends React.Component {
<Title />
</FlexCenter>

<HugeSpacer />
<Styles.H1> Real-time tracking of pathogen evolution </Styles.H1>
<SmallSpacer />

<FlexCenter>
<Styles.CenteredFocusParagraph>
Nextstrain is an open-source project to harness the scientific and public health
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>.
An open-source project to harness the scientific and public health
potential of pathogen genome data
</Styles.CenteredFocusParagraph>
</FlexCenter>

<BigSpacer/>
{/* <hr /> */}
<BigSpacer/>

<FlexCenter>
<Styles.Button to="/philosophy">
Read More
</Styles.Button>
</FlexCenter>
<Styles.H1>Published resources</Styles.H1>

<div id="showcase" style={{display: "flex", flexDirection: "column", alignItems: "center", height: "100%"}}>
<Styles.CenteredFocusParagraph style={{flexGrow: 1}}>
from the community and core Nextstrain team
</Styles.CenteredFocusParagraph>
<div style={{display: "flex", justifyContent: "space-evenly", flexWrap: "wrap"}}>
<Cards
squashed
cards={showcaseCards}
/>
</div>
<BigSpacer/>
</div>

<HugeSpacer/>
<BigSpacer/>

<div style={{display: "flex", justifyContent: "space-evenly", flexWrap: "wrap"}}>
<Section
id="sars-cov-2"
title="SARS-CoV-2 (COVID-19)"
abstract="We are incorporating SARS-CoV-2 genomes as soon as they are shared and providing analyses and situation reports.
In addition we have developed a number of resources and tools, and are facilitating independent groups to run their own analyses."
cards={nCoVCards}
buttonText="See all resources"
buttonLink="/sars-cov-2"
/>
<Section
id="groups"
title="Nextstrain Groups"
abstract="We want to enable research labs, public health entities and others to share their datasets and narratives through Nextstrain with complete control of their data and audience."
cards={createGroupCards([{name: "neherlab"}, {name: "spheres"}])}
buttonText="See all groups"
buttonLink="/groups"
/>
<Section
id="pathogens"
title="Explore pathogens"
abstract="Genomic analyses of specific pathogens kept up-to-date by the Nextstrain team."
cards={coreCards}
buttonText="See all pathogens"
buttonLink="/pathogens"
/>
<Section
id="community"
title="From the community"
abstract={(<>
Analyses by independent groups <a href="https://docs.nextstrain.org/en/latest/guides/share/community-builds.html">stored and
accessed via public GitHub repos</a>
</>)}
cards={communityDatasets.data.filter((c) => c?.card?.frontpage).map((e) => e.card).slice(0, 2)}
buttonText="Learn more"
buttonLink="/community"
/>
<Section
id="narratives"
title="Narratives"
abstract="Narratives are a method of data-driven storytelling. They allow authoring of content which is displayed alongside a view into the data."
cards={narrativeCards}
buttonText="Find out more"
buttonLink="https://docs.nextstrain.org/en/latest/guides/communicate/narratives-intro.html"
/>
<Styles.H2>Sources</Styles.H2>

<div className="row">
<div className="col-md-4">
<BigSpacer/>
<Styles.H3><Link href="/pathogens">Nextstrain team</Link></Styles.H3>
<Styles.FocusParagraph>
Resources for various pathogens kept up-to-date by the Nextstrain core team
</Styles.FocusParagraph>
</div>
<div className="col-md-4">
<BigSpacer/>
<Styles.H3><Link href="/community">Community</Link></Styles.H3>
<Styles.FocusParagraph>
Resources shared publicly by the community on GitHub
</Styles.FocusParagraph>
</div>
<div className="col-md-4">
<BigSpacer/>
<Styles.H3><Link href="/groups">Groups</Link></Styles.H3>
<Styles.FocusParagraph>
Resources published via our own sharing service, Nextstrain Groups
</Styles.FocusParagraph>
</div>
</div>

<BigSpacer/>
<hr />
<HugeSpacer/>

{/* Bioinformatics toolkit */}
<HugeSpacer/>
<Styles.H1>Explore data in your web browser</Styles.H1>

<ScrollableAnchor id={'tools'}>
<Styles.H1>A bioinformatics and data viz toolkit</Styles.H1>
</ScrollableAnchor>
<BigSpacer/>

<FlexCenter>
<Styles.CenteredFocusParagraph>
Nextstrain provides an open-source toolkit enabling the bioinformatics and visualization
you see on this site. Tweak our analyses and create your own using the same tools we do.
We aim to empower the wider genomic epidemiology and public health communities.
</Styles.CenteredFocusParagraph>
</FlexCenter>
<div className="row">
<div className="col-md-6">
<BigSpacer/>
<Styles.H2>
<Link href="https://clades.nextstrain.org" rel="noopener noreferrer" target="_blank">
Nextclade <HeadingIcon><FaExternalLinkAlt/></HeadingIcon>
</Link>
</Styles.H2>
<Styles.CenteredFocusParagraph>
Clade assignment, mutation calling, and sequence quality checks
<BigSpacer/>
<img width="80%" alt="nextclade" src="https://docs.nextstrain.org/projects/nextclade/en/stable/_images/web_mut-tooltip.png" />
</Styles.CenteredFocusParagraph>
</div>
<div className="col-md-6">
<BigSpacer/>
<Styles.H2>
<Link href="https://auspice.us" rel="noopener noreferrer" target="_blank">
Auspice.us <HeadingIcon><FaExternalLinkAlt/></HeadingIcon>
</Link>
</Styles.H2>
<Styles.CenteredFocusParagraph>
Interactive exploration of phylogenomic datasets and narratives
<BigSpacer/>
<img width="80%" alt="auspice.us" src="https://docs.nextstrain.org/en/latest/_images/mumps.png" />
</Styles.CenteredFocusParagraph>
</div>
</div>

<BigSpacer/>
<hr />
<HugeSpacer/>

<FlexCenter>
<Styles.Button to="https://docs.nextstrain.org/en/latest/index.html">
Read the documentation
</Styles.Button>
</FlexCenter>
<Styles.H1>Analyze your data</Styles.H1>

<BigSpacer/>

<div className="row">
<div className="col-md-4">
<BigSpacer/>
<Styles.H2>
<Link href="https://docs.nextstrain.org/page/learn/parts.html" rel="noopener noreferrer" target="_blank">
Getting started <HeadingIcon><FaExternalLinkAlt/></HeadingIcon>
</Link>
</Styles.H2>
<Styles.CenteredFocusParagraph>
Learn the different parts of Nextstrain and how to use them
<BigSpacer/>
<img width="80%" alt="getting-started" src={require(`../../../static/parts-of-a-whole.jpg`).default.src} />
</Styles.CenteredFocusParagraph>
</div>
<div className="col-md-4">
<BigSpacer/>
<Styles.H2>
<Link href="https://docs.nextstrain.org/page/tutorials/narratives-how-to-write.html" rel="noopener noreferrer" target="_blank">
Write a narrative <HeadingIcon><FaExternalLinkAlt/></HeadingIcon>
</Link>
</Styles.H2>
<Styles.CenteredFocusParagraph>
Communicate insights interactively through a web browser
<BigSpacer/>
<img width="80%" alt="narrative" src={require(`../../../static/narrative.jpg`).default.src} />
</Styles.CenteredFocusParagraph>
</div>
<div className="col-md-4">
<BigSpacer/>
<Styles.H2>
<Link href="https://docs.nextstrain.org/en/latest/guides/share" rel="noopener noreferrer" target="_blank">
Share <HeadingIcon><FaExternalLinkAlt/></HeadingIcon>
</Link>
</Styles.H2>
<Styles.CenteredFocusParagraph>
Share results publicly or privately with various options
</Styles.CenteredFocusParagraph>
</div>
</div>

<HugeSpacer/>
<hr />

<Footer splashImagesCredit/>

Expand Down
Binary file added static-site/static/narrative.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static-site/static/parts-of-a-whole.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit aa2f45c

Please sign in to comment.