splash page redesign; #388;

temp solution for cards is to allow the Cards component to use flexbox instead of bootstrap for a more compact, two-column layout. This will be refactored when we address the design and flexibility of these components in #305, #347. TODO: - might need to unsquash ncov and narratives cards to be able to read them on mobile - allowing page sections to tile horizontally, e.g. groups alongside sars cov 2 as in james' sketch - more testing
nextstrain · Jul 28, 2021 · fab5217 · fab5217
1 parent 7f2a6de
commit fab5217
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 145 deletions.
diff --git a/static-site/src/components/Cards/communityCards.js b/static-site/src/components/Cards/communityCards.js
@@ -8,26 +8,6 @@ const communityCards = [
     img: "chikv.png",
     url: "community/ViennaRNA/CHIKV",
     title: "Chikungunya"
-  },
-  {
-    img: "lassa2.png",
-    url: "/community/pauloluniyi/lassa/l",
-    title: "Lassa in Nigeria (2015-18)"
-  },
-  {
-    img: "rsv.png",
-    url: "/community/JianiC/rsv/A/WGS",
-    title: "RSV (subtype A)"
-  },
-  {
-    img: "cassava.png",
-    url: "/community/pestdisplace/CMDAFRICA",
-    title: "Cassava geminiviruses"
-  },
-  {
-    img: "stripe_rust.png",
-    url: "/community/saunderslab/PST",
-    title: "Wheat yellow rust"
   }
 ];
 

diff --git a/static-site/src/components/Cards/coreCards.js b/static-site/src/components/Cards/coreCards.js
@@ -1,58 +1,13 @@
 const coreCards = [
-  {
-    img: "ncov.png",
-    url: "/ncov",
-    title: "SARS-CoV-2"
-  },
   {
     img: "seasonalinfluenza.png",
     url: "/flu/seasonal",
     title: "Seasonal influenza"
   },
-  {
-    img: "wnv.jpg",
-    url: "/WNV",
-    title: "West Nile virus"
-  },
-  {
-    img: "mumps.jpg",
-    url: "/mumps",
-    title: "Mumps"
-  },
-  {
-    img: "zika.png",
-    url: "/zika",
-    title: "Zika"
-  },
-  {
-    img: "ebola.png",
-    url: "/ebola",
-    title: "West African Ebola 2013-16"
-  },
-  {
-    img: "dengue.png",
-    url: "/dengue",
-    title: "Dengue"
-  },
   {
     img: "avianinfluenza.png",
     url: "/flu/avian",
     title: "Avian influenza"
-  },
-  {
-    img: "measles.jpg",
-    url: "/measles",
-    title: "Measles"
-  },
-  {
-    img: "enterovirus.jpg",
-    url: "/enterovirus/d68",
-    title: "Enterovirus D68"
-  },
-  {
-    img: "tb.jpg",
-    url: "/tb/global",
-    title: "Tuberculosis"
   }
 ];
 

diff --git a/static-site/src/components/Cards/index.jsx b/static-site/src/components/Cards/index.jsx
@@ -8,15 +8,38 @@ import Padlock from "./padlock";
 
 // eslint-disable-next-line react/prefer-stateless-function
 class Cards extends React.Component {
-
+  cards(bootstrapColumnSize) {
+    return this.props.cards.map((d) => (
+      <div key={d.title}>
+        <div key={d.title} className={`col-sm-${bootstrapColumnSize}`}>
+          <Styles.CardOuter squashed={this.props.squashed}>
+            <Styles.CardInner>
+              <a href={`${d.url}`}>
+                <Styles.CardTitle squashed={this.props.squashed}>
+                  {d.title}
+                </Styles.CardTitle>
+                {d.private ? (
+                  <Styles.BottomRightLabel>
+                    <Padlock/>
+                  </Styles.BottomRightLabel>
+                ) : null}
+                {d.img ? <Styles.CardImg src={require(`../../../static/splash_images/${d.img}`)} alt={""} color={d.color}/> : null}
+              </a>
+            </Styles.CardInner>
+          </Styles.CardOuter>
+        </div>
+      </div>
+    ));
+  }
   render() {
-    return (
+    const bootstrapColumnSize = this.props.compactColumns ? 6 : 4;
+    const CARDS = this.cards(bootstrapColumnSize);
+    return this.props.compactColumns ? CARDS : (
       <div>
         <div className="row">
           <div className="col-md-1" />
           <div className="col-md-10">
             <H1>{this.props.title}</H1>
-
             {this.props.subtext ?
               (
                 <Styles.SubText>
@@ -25,34 +48,11 @@ class Cards extends React.Component {
               ) :
               null
             }
-
             <MediumSpacer />
-
             <div className="row">
-              {this.props.cards.map((d) => (
-                <div key={d.title}>
-                  <div className="col-sm-4">
-                    <Styles.CardOuter squashed={this.props.squashed}>
-                      <Styles.CardInner>
-                        <a href={`${d.url}`}>
-                          <Styles.CardTitle squashed={this.props.squashed}>
-                            {d.title}
-                          </Styles.CardTitle>
-                          {d.private ? (
-                            <Styles.BottomRightLabel>
-                              <Padlock/>
-                            </Styles.BottomRightLabel>
-                          ) : null}
-                          {d.img ? <Styles.CardImg src={require(`../../../static/splash_images/${d.img}`)} alt={""} color={d.color}/> : null}
-                        </a>
-                      </Styles.CardInner>
-                    </Styles.CardOuter>
-                  </div>
-                </div>
-              ))}
+              {CARDS}
             </div>
           </div>
-
         </div>
         <div className="col-md-1" />
       </div>

diff --git a/static-site/src/components/Cards/nCoVCards.js b/static-site/src/components/Cards/nCoVCards.js
@@ -1,18 +1,13 @@
 const nCoVCards = [
-  {
-    img: "ncov_alt.png",
-    url: "/sars-cov-2",
-    title: "All datasets and resources"
-  },
   {
     img: "ncov.png",
-    url: "/ncov/global",
-    title: "Latest global analysis"
+    url: "/ncov/gisaid/global",
+    title: "Latest global analysis - GISAID data"
   },
   {
-    img: "ncov_narrative.png",
-    url: "/narratives/ncov/sit-rep/2020-08-14",
-    title: "Latest Situation Report 2020-08-14"
+    img: "ncov.png",
+    url: "/ncov/open/global",
+    title: "Latest global analysis - public data"
   }
 ];
 

diff --git a/static-site/src/components/Cards/narrativeCards.js b/static-site/src/components/Cards/narrativeCards.js
@@ -1,9 +1,4 @@
 const narrativeCards = [
-  {
-    img: "ncov_narrative.png",
-    url: "/narratives/ncov/sit-rep/2020-05-15",
-    title: "nCoV Situation Report 2020-05-15"
-  },
   {
     img: "wnv2.png",
     url: "/narratives/twenty-years-of-WNV",

diff --git a/static-site/src/components/splash/index.jsx b/static-site/src/components/splash/index.jsx
@@ -1,6 +1,5 @@
 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";
@@ -10,7 +9,7 @@ import Title from "./title";
 import * as Styles from "./styles";
 import { SmallSpacer, BigSpacer, HugeSpacer, FlexCenter } from "../../layouts/generalComponents";
 import Footer from "../Footer";
-import UserGroups from "./userGroups";
+import { createGroupCards } from "./userGroups";
 import { UserContext } from "../../layouts/userDataWrapper";
 
 class Splash extends React.Component {
@@ -54,84 +53,130 @@ class Splash extends React.Component {
         </FlexCenter>
 
         <HugeSpacer/>
-        {this.context.user && <UserGroups/>}
 
         <ScrollableAnchor id={'ncov'}>
           <Styles.H1>SARS-CoV-2 (COVID-19)</Styles.H1>
         </ScrollableAnchor>
-
         <FlexCenter>
           <Styles.CenteredFocusParagraph>
             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.
-            Please see the <Link to="/sars-cov-2">SARS-CoV-2 resources page</Link> for more information.
           </Styles.CenteredFocusParagraph>
         </FlexCenter>
-        <Cards
-          squashed
-          cards={nCoVCards}
-        />
+        <FlexCenter>
+          <Cards
+            squashed
+            compactColumns
+            cards={nCoVCards}
+          />
+        </FlexCenter>
+        <BigSpacer/>
+        <FlexCenter>
+          <Styles.Button to="/sars-cov-2">
+            See all resources
+          </Styles.Button>
+        </FlexCenter>
+
+        <HugeSpacer/>
+
+        <ScrollableAnchor id={'groups'}>
+          <Styles.H1>Nextstrain Groups</Styles.H1>
+        </ScrollableAnchor>
+        <FlexCenter>
+          <Styles.CenteredFocusParagraph>
+            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.
+            Nextstrain groups represent collections of datasets, potentially with controlled access.
+          </Styles.CenteredFocusParagraph>
+        </FlexCenter>
+        <FlexCenter>
+          <Cards
+            squashed
+            compactColumns
+            cards={createGroupCards([{name: "neherlab"}, {name: "spheres"}])}
+          />
+        </FlexCenter>
+        <BigSpacer/>
+        <FlexCenter>
+          <Styles.Button to="/groups">
+            See all groups
+          </Styles.Button>
+        </FlexCenter>
 
         <HugeSpacer/>
 
         <ScrollableAnchor id={'pathogens'}>
           <Styles.H1>Explore pathogens</Styles.H1>
         </ScrollableAnchor>
-
         <FlexCenter>
           <Styles.CenteredFocusParagraph>
-            Genomic analyses of specific pathogens kept up-to-date by the Nextstrain team
+            Genomic analyses of specific pathogens kept up-to-date by the Nextstrain team.
           </Styles.CenteredFocusParagraph>
         </FlexCenter>
-
-        <Cards
-          cards={coreCards}
-        />
+        <FlexCenter>
+          <Cards
+            squashed
+            compactColumns
+            cards={coreCards}
+          />
+        </FlexCenter>
+        <BigSpacer/>
+        <FlexCenter>
+          <Styles.Button to="/pathogens">
+            See all pathogens
+          </Styles.Button>
+        </FlexCenter>
 
         <HugeSpacer/>
 
         <ScrollableAnchor id={'community'}>
           <Styles.H1>From the community</Styles.H1>
         </ScrollableAnchor>
-
         <FlexCenter>
           <Styles.CenteredFocusParagraph>
             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>
+            accessed via public GitHub repos</a>.
           </Styles.CenteredFocusParagraph>
         </FlexCenter>
-
-        <Cards
-          cards={communityCards}
-        />
-
+        <FlexCenter>
+          <Cards
+            squashed
+            compactColumns
+            cards={communityCards}
+          />
+        </FlexCenter>
+        <BigSpacer/>
+        <FlexCenter>
+          <Styles.Button to="/community">
+            See featured community analyses
+          </Styles.Button>
+        </FlexCenter>
 
         <HugeSpacer/>
+
         <ScrollableAnchor id={'narratives'}>
           <Styles.H1>Narratives</Styles.H1>
         </ScrollableAnchor>
-
         <FlexCenter>
           <Styles.CenteredFocusParagraph>
             Narratives are a method of data-driven storytelling. They allow authoring of content which is displayed alongside a view into the data.
-            <a href="https://nextstrain.github.io/auspice/narratives/introduction"> See here to find out more.</a>
           </Styles.CenteredFocusParagraph>
         </FlexCenter>
-
-        <Cards cards={narrativeCards}/>
-
-        <HugeSpacer/>
+        <FlexCenter>
+          <Cards
+            squashed
+            compactColumns
+            cards={narrativeCards}
+          />
+        </FlexCenter>
         <BigSpacer/>
+        <FlexCenter>
+          <Styles.Button to="https://nextstrain.github.io/auspice/narratives/introduction">
+            Find out more
+          </Styles.Button>
+        </FlexCenter>
 
-        {/* <Styles.H1>Tutorials / Narrative links</Styles.H1> */}
-
-        {/* SOCIAL MEDIA AKA TWITTER
-
-        <Styles.H1>Mentions on Twitter</Styles.H1>
+        <HugeSpacer/>
         <BigSpacer/>
-        {tweets()}
-
-        */}
 
         <BigSpacer/>
         <ScrollableAnchor id={'philosophy'}>

diff --git a/static-site/src/components/splash/userGroups.jsx b/static-site/src/components/splash/userGroups.jsx
@@ -6,7 +6,7 @@ import { HugeSpacer, FlexCenter } from "../../layouts/generalComponents";
 import { theme } from "../../layouts/theme";
 import { UserContext } from "../../layouts/userDataWrapper";
 
-const createGroupCards = (groups, colors = [...theme.titleColors]) => groups.map((group) => {
+export const createGroupCards = (groups, colors = [...theme.titleColors]) => groups.map((group) => {
   const groupColor = colors[0];
   colors.push(colors.shift());
 

diff --git a/static-site/src/util/parseMarkdown.js b/static-site/src/util/parseMarkdown.js
@@ -52,7 +52,7 @@ export const parseMarkdown = (mdString) => {
       'a': function(tagName, attribs) { // eslint-disable-line
         try {
           const url = new URL(attribs.href); // URL is not supported on Internet Explorer
-          if (url.hostname !== location.hostname) {
+          if (url.hostname !== location.hostname) { // eslint-disable-line
             attribs.target = '_blank';
             attribs.rel = 'noreferrer nofollow';
           }