Merge pull request #914: Swap splash tiles to use viz screenshots

static-site/README.md

@@ -73,16 +73,11 @@ We may wish to rename this directory to avoid any doubt.
 * [See this page in the docs](https://nextstrain.org/docs/contributing/documentation)
 
 ### Adding new cards / tiles for the splash page
-1. Find an image with appropriate rights for us to use. Generally, anything on Wikimedia Commons is fair game with proper attribution. Please consult the licensing section of individual files to be sure.
-2. Edit the picture in [LunaPic](https://www110.lunapic.com/editor/)
-    * upload picture
-    * Style the picture via the "art" menu. Choose "grey" for core cards, "floating" for community cards or "sadness" for narrative cards. Adjust slider as you see fit.
-    * "Edit" -> "Simple Crop Tool" & crop to a square.
-    * "Edit" -> "Scale Image" to 250 x 250px
-    * "File" -> "Save Image" & use PNG
-3. Save the file in `./static/splash_images`
-4. Edit `./src/components/splash/showcase.yaml` to include the card & title.
-5. Edit `./src/components/Footer/index.jsx` to provide credit for the photo.
+1. Navigate to the Auspice view and take a square screenshot of a panel that is representative of the data.
+2. If using a tree, make sure branch labels are turned off.
+3. Downsize the image to 250px by 250px.
+4. Save the file in `./static/splash_images`
+5. Edit `./src/components/splash/showcase.yaml` to include the card & title.
 
 ### Adding new team members
 

static-site/content/resource-listing.yaml

@@ -59,46 +59,46 @@ coreGroupDisplayNames:
 # screen size.
 coreShowcase:
   - name: SARS-CoV-2
-    img: ncov.png
+    img: ncov_freq.png
     filters:
       - ncov
   - name: Seasonal influenza
-    img: seasonalinfluenza.png
+    img: seasonal_flu_freq.png
     filters:
       - seasonal-flu
   - name: Avian influenza
-    img: avianinfluenza.png
+    img: h5n1_map.png
     filters:
       - avian-flu
   - name: Mpox
-    img: mpox.png
+    img: mpox_tree.png
     filters:
       - mpox
   - name: RSV
-    img: rsv1.png
+    img: rsv_tree.png
     filters:
       - rsv
   - name: Dengue
-    img: dengue.png
+    img: dengue_tree.png
     filters:
       - dengue
   - name: Ebola in West Africa
-    img: ebola.png
+    img: ebola_map.png
     filters:
       - ebola
   - name: Measles
-    img: measles.jpg
+    img: measles_tree.png
     filters:
       - measles
   - name: Zika
-    img: zika.png
+    img: zika_tree.png
     filters:
       - zika
   - name: Mumps
-    img: mumps.jpg
+    img: mumps_tree.png
     filters:
       - mumps
   - name: Enterovirus
-    img: enterovirus.jpg
+    img: enterovirus_d68_tree.png
     filters:
       - enterovirus

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

@@ -5,52 +5,6 @@ import { Logos } from "../../components/logos";
 import { FooterList } from "../People/avatars";
 import { SiteMap } from "./sitemap";
 
-const SplashImagesCredit = () => (
-  <div className="row">
-    <div className="col-md-12">
-      <Styles.FooterParagraph>
-        {`Splash page images stylised in `}
-        <a href="http://www.lunapic.com/">Lunapic</a>
-        {`. `}
-        <a href="https://en.wikipedia.org/wiki/Zika_virus#/media/File:197-Zika_Virus-ZikaVirus.tif">Zika drawing</a>
-        {` by David Goodwill, `}
-        <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC156766/figure/cdg270f4/">dengue EM</a>
-        {` by Zhang `}<i>et al., </i>
-        <a href="https://commons.wikimedia.org/wiki/Ebola#/media/File:Ebola_virus_em.png">Ebola EM</a>
-        {` by Frederick Murphy / CDC, `}
-        <a href="https://commons.wikimedia.org/wiki/File:Monkeypox_Virus_(52103767506).jpg">mpox EM</a>
-        {` by National Institute of Allergy and Infectious Diseases, `}
-        <a href="https://commons.wikimedia.org/wiki/File:Influenza_virus_particle_color.jpg">seasonal influenza</a>
-        {`, `}
-        <a href="https://commons.wikimedia.org/wiki/File:Lassa_virus.JPG">Lassa</a>
-        {` and `}
-        <a href="https://phil.cdc.gov/Details.aspx?pid=10701">West Nile virus</a>
-        {` by Cynthia Goldsmith / CDC, `}
-        <a href="https://phil.cdc.gov/details.aspx?pid=15670">avian influenza</a>
-        {` by Cynthia Goldsmith and Thomas Rowe / CDC, `}
-        <a href="https://phil.cdc.gov/Details.aspx?pid=1874">mumps</a>
-        {` by the CDC, `}
-        <a href="http://www.tau.ac.il/lifesci/departments/biotech/members/rozenblatt/fig3.html">measles</a>
-        {` by Shmuel Rozenblatt, `}
-        <a href="https://journals.plos.org/plospathogens/article?id=10.1371/journal.ppat.1003240#s5">enterovirus</a>
-        {` by Shingler `}<i>et al., </i>
-        <a href="https://pixnio.com/science/microscopy-images/ralstonia-mannitolilytica-bacteria/gram-positive-mycobacterium-tuberculosis-bacteria-2">tuberculosis</a>
-        {` by Ray Butle, `}
-        <a href="https://www.flickr.com/photos/nihgov/33288028956">RSV</a>
-        {` by NIAID / NIH, `}
-        {` Cassava Leaf by `}
-        <a href="mailto:w.cuellar@cgiar.org">Wilmer Cuellar, </a>
-        <a href="https://commons.wikimedia.org/wiki/File:Stripe_rust_on_wheat.jpg">Wheat yellow rust</a>
-        {` by Yue Jin / USDA, `}
-        <a href="https://en.wikipedia.org/wiki/File:Coronaviruses_004_lores.jpg">coronavirus</a>
-        {` by Dr. Fred Murphy / CDC.`}
-        <a href="https://en.wikipedia.org/wiki/Yersinia_pestis#/media/File:Yersinia_pestis.jpg">Yersinia pestis</a>
-        {` by Rocky Mountain Laboratories / NIAID / NIH.`}
-      </Styles.FooterParagraph>
-    </div>
-  </div>
-);
-
 class Footer extends React.Component {
   render() {
     return (
@@ -110,8 +64,6 @@ class Footer extends React.Component {
           </div>
         </div>
 
-        {this.props.splashImagesCredit ? <SplashImagesCredit/> : null}
-
         <SmallSpacer/>
 
         {/* FOOTER / LOGOS */}

static-site/src/components/ListResources/index.tsx

@@ -347,8 +347,7 @@ const CardTitle = styled.div<{$squashed: boolean}>`
 
 const CardImg = styled.img`
   object-fit: contain;
-  border-radius: 6px;
-  box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
   max-height: 100%;
   width: 100%;
   float: right;

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

@@ -199,7 +199,7 @@ const Splash = () => {
       </FlexCenter>
 
       <Line style={{ margin: "30px 0px 10px 0px" }} />
-      <Footer splashImagesCredit/>
+      <Footer />
 
     </Styles.Container>
   );

static-site/src/components/splash/showcase.yaml

@@ -1,37 +1,37 @@
 cards:
 - name: SARS-CoV-2
-  img: ncov.png
+  img: ncov_freq.png
   url: /ncov/
 - name: H5N1 cattle outbreak
-  img: avianinfluenza.png
+  img: h5n1_cattle_outbreak_tree.png
   url: /avian-flu/h5n1-cattle-outbreak/genome
 - name: Avian influenza
-  img: avianinfluenza.png
+  img: h5n1_map.png
   url: /avian-flu/h5n1/ha/2y
 - name: Mpox
-  img: mpox.png
+  img: mpox_tree.png
   url: /mpox/clade-IIb
 - name: Ebola in the DRC
-  img: ebola2.png
+  img: ebola_drc_map.png
   url: /community/inrb-drc/ebola-nord-kivu
 - name: Measles
-  img: measles.jpg
+  img: measles_tree.png
   url: /measles/N450
 - name: Seasonal influenza
-  img: seasonalinfluenza.png
+  img: seasonal_flu_freq.png
   url: /seasonal-flu
 - name: RSV
-  img: rsv1.png
+  img: rsv_tree.png
   url: /rsv
 - name: Yersinia pestis
-  img: yersinia.png
+  img: yersinia_tree.png
   url: /community/ktmeaton/yersinia-pestis/maximum-likelihood/all?m=div
 - name: WNV in the Americas (narrative)
-  img: wnv2.png
+  img: wnv_map.png
   url: /narratives/twenty-years-of-WNV
 - name: Chikungunya
-  img: chikv.png
+  img: chikv_map.png
   url: /groups/ViennaRNA/CHIKVnext
 - name: HIV
-  img: hiv_community.png
+  img: hiv_tree.png
   url: /groups/LANL-HIV-DB/HIV/env