chore: Add screenshot YAML config

HaydnCCI · Dec 15, 2020 · a460c56 · a460c56
1 parent 4db04a8
commit a460c56
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 64 deletions.
diff --git a/.gitignore b/.gitignore
@@ -71,6 +71,7 @@ public
 # Data API build directory
 _data
 _api
+_screenshots
 
 # Storybook build
 storybook-static

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -46,6 +46,14 @@ const gatsbyConfig = {
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     'gatsby-plugin-svgr',
+    'gatsby-transformer-yaml',
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'screenshotConfig',
+        path: `${__dirname}/_screenshots/configs/taco`,
+      },
+    },
     {
       resolve: 'gatsby-plugin-google-analytics-gdpr',
       options: {

diff --git a/package.json b/package.json
@@ -69,10 +69,10 @@
     "gatsby-remark-autolink-headers": "^2.3.14",
     "gatsby-remark-smartypants": "^2.3.12",
     "gatsby-source-contentful": "4.0.0",
-    "gatsby-source-filesystem": "^2.3.31",
+    "gatsby-source-filesystem": "^2.8.0",
     "gatsby-transformer-remark": "^2.8.36",
     "gatsby-transformer-sharp": "^2.5.16",
-    "gatsby-transformer-yaml": "^2.4.13",
+    "gatsby-transformer-yaml": "^2.8.0",
     "get-contrast": "^2.0.0",
     "is-url": "^1.2.4",
     "json2csv": "^5.0.1",
@@ -161,9 +161,10 @@
     "test:coverage": "jest --coverage --maxWorkers 1",
     "test:lint": "eslint ./src",
     "test:dev": "run-s test:lint test",
-    "setup": "run-s setup:api-repo setup:env-vars setup:data-repo",
+    "setup": "run-s setup:api-repo setup:env-vars setup:data-repo setup:screenshot-repo",
     "setup:env-vars": "curl -L https://covidtracking.com/__developer/env-vars > .env",
     "setup:api-repo": "rm -rf _api || true && git clone --depth 1 https://github.com/COVID19Tracking/covid-public-api.git _api && rm -rf _api/.git",
-    "setup:data-repo": "rm -rf _data || true && git clone --depth 1 --branch data https://github.com/COVID19Tracking/website-data _data && rm -rf _data/.git"
+    "setup:data-repo": "rm -rf _data || true && git clone --depth 1 --branch data https://github.com/COVID19Tracking/website-data _data && rm -rf _data/.git",
+    "setup:screenshot-repo": "rm -rf _screenshot || true && git clone --depth 1 https://github.com/COVID19Tracking/screenshots _screenshots && rm -rf _screenshots/.git"
   }
 }
diff --git a/src/components/pages/data/states.js b/src/components/pages/data/states.js
@@ -12,6 +12,7 @@ const States = ({
   raceDataCombined,
   raceDataSeparate,
   hhsHospitalization,
+  screenshotLinks,
 }) => {
   const stateList = []
 
@@ -58,6 +59,9 @@ const States = ({
       ? hhsHospitalization.find(record => record.nodes[0].state === state.state)
       : false
 
+    state.links = screenshotLinks
+      ? screenshotLinks.find(item => item.childTacoYaml.state === state.state)
+      : false
     stateList.push(state)
   })
 

diff --git a/src/components/pages/state/preamble.js b/src/components/pages/state/preamble.js
@@ -21,7 +21,7 @@ import {
 } from '~components/pages/state/state-links'
 import preambleStyle from './preamble.module.scss'
 
-const StatePreamble = ({ state, covidState }) => {
+const StatePreamble = ({ state, urls, covidState }) => {
   const { contentfulSnippet } = useStaticQuery(
     graphql`
       query {
@@ -37,6 +37,7 @@ const StatePreamble = ({ state, covidState }) => {
   )
   const [stateLinksAreOpen, setStateLinksAreOpen] = useState(false)
   const [downloadDataIsOpen, setDownloadDataIsOpen] = useState(false)
+  const { links } = urls.childTacoYaml
   // todo make state grade wrap as a circle with the grade description
   return (
     <OverviewWrapper className={preambleStyle.preamble}>
@@ -47,9 +48,7 @@ const StatePreamble = ({ state, covidState }) => {
             <h3 className={preambleStyle.header}>Where this data comes from</h3>
             <StateLinks
               twitter={state.twitter}
-              covid19Site={state.covid19Site}
-              covid19SiteSecondary={state.covid19SiteSecondary}
-              covid19SiteTertiary={state.covid19SiteTertiary}
+              links={links}
               stateName={state.name}
               stateSlug={state.childSlug.slug}
             />

diff --git a/src/components/pages/state/state-links.js b/src/components/pages/state/state-links.js
@@ -8,28 +8,28 @@ import {
 import stateLinksStyle from './state-links.module.scss'
 import preambleStyle from './preamble.module.scss'
 
-const StateLinks = ({
-  twitter,
-  covid19Site,
-  covid19SiteSecondary,
-  covid19SiteTertiary,
-  stateName,
-  stateSlug,
-}) => {
+const StateLinks = ({ twitter, stateName, stateSlug, links }) => {
+  const getLink = type => {
+    const currentLink = links && links.find(link => link.name === type)
+    if (!currentLink) {
+      return false
+    }
+    return currentLink.url
+  }
   return (
     <div className={stateLinksStyle.container}>
-      {covid19Site && (
-        <a href={covid19Site} className={stateLinksStyle.link}>
+      {getLink('primary') && (
+        <a href={getLink('primary')} className={stateLinksStyle.link}>
           <span>Best current data source</span>
         </a>
       )}
-      {covid19SiteSecondary && (
-        <a href={covid19SiteSecondary} className={stateLinksStyle.link}>
+      {getLink('secondary') && (
+        <a href={getLink('secondary')} className={stateLinksStyle.link}>
           <span>Secondary data source</span>
         </a>
       )}
-      {covid19SiteTertiary && (
-        <a href={covid19SiteTertiary} className={stateLinksStyle.link}>
+      {getLink('tertiary') && (
+        <a href={getLink('tertiary')} className={stateLinksStyle.link}>
           <span>Tertiary data source</span>
         </a>
       )}
@@ -67,11 +67,9 @@ const StateLinksDisclosurePanel = ({ state }) => (
   <DisclosurePanel>
     <StateLinks
       twitter={state.twitter}
-      covid19Site={state.covid19Site}
-      covid19SiteSecondary={state.covid19SiteSecondary}
-      covid19SiteTertiary={state.covid19SiteTertiary}
       stateName={state.name}
       stateSlug={state.childSlug.slug}
+      links={state.links && state.links.childTacoYaml.links}
     />
   </DisclosurePanel>
 )

diff --git a/src/pages/data/index.js b/src/pages/data/index.js
@@ -71,6 +71,7 @@ const DataPage = ({ data }) => {
         raceDataCombined={data.allCovidRaceDataCombined.nodes}
         raceDataSeparate={data.allCovidRaceDataSeparate.nodes}
         hhsHospitalization={data.allHhsHospitalizationCovid.group}
+        screenshotLinks={data.urls.nodes}
       />
     </Layout>
   )
@@ -121,8 +122,6 @@ export const query = graphql`
     }
     allCovidStateInfo(sort: { fields: name }) {
       nodes {
-        covid19Site
-        covid19SiteSecondary
         name
         notes
         state
@@ -318,5 +317,16 @@ export const query = graphql`
         }
       }
     }
+    urls: allFile {
+      nodes {
+        childTacoYaml {
+          links {
+            url
+            name
+          }
+          state
+        }
+      }
+    }
   }
 `
diff --git a/src/templates/state/index.js b/src/templates/state/index.js
@@ -32,6 +32,7 @@ const StateTemplate = ({ pageContext, data, path }) => {
     allTweets,
     allCovidAnnotation,
     allHhsHospitalizationCovid,
+    urls,
   } = data
   return (
     <Layout
@@ -40,7 +41,7 @@ const StateTemplate = ({ pageContext, data, path }) => {
       path={path}
       showWarning
     >
-      <StatePreamble state={state} covidState={covidState} />
+      <StatePreamble state={state} urls={urls} covidState={covidState} />
       <SummaryCharts
         name={state.name}
         chartTables={`/data/state/${state.childSlug.slug}/chart-tables`}
@@ -329,5 +330,14 @@ export const query = graphql`
         total_pediatric_patients_hospitalized_confirmed_covid
       }
     }
+    urls: file(childTacoYaml: { state: { eq: "CA" } }) {
+      childTacoYaml {
+        links {
+          url
+          name
+        }
+        state
+      }
+    }
   }
 `