chore: Change to centralized state slug

__mocks__/sample-state.js

@@ -26,6 +26,9 @@ export default {
       onVentilatorCurrently: null,
       onVentilatorCumulative: 148,
       death: 151,
+      childSlug: {
+        slug: 'alabama',
+      },
     },
   },
   stateData: {

gatsby-config.js

@@ -271,6 +271,13 @@ const gatsbyConfig = {
         },
       },
     },
+    {
+      resolve: 'gatsby-transformer-covid-slug',
+      options: {
+        type: 'CovidStateInfo',
+        field: 'name',
+      },
+    },
     {
       resolve: `gatsby-plugin-feed`,
       options: {

gatsby-node.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const slugify = require('slugify')
 const { DateTime } = require('luxon')
 const csv = require('./src/utilities/csv')
 const createSchemaCustomization = require('./src/utilities/schema')
@@ -32,6 +31,9 @@ exports.createPages = async ({ graphql, actions }) => {
           name
           state
           twitter
+          childSlug {
+            slug
+          }
         }
       }
       allContentfulPage {
@@ -148,7 +150,7 @@ exports.createPages = async ({ graphql, actions }) => {
   })
 
   result.data.allCovidStateInfo.nodes.forEach(node => {
-    const slug = slugify(node.name, { strict: true, lower: true })
+    const { slug } = node.childSlug
 
     createPage({
       path: `/data/state/${slug}`,
@@ -162,58 +164,37 @@ exports.createPages = async ({ graphql, actions }) => {
     createPage({
       path: `/data/state/${slug}/cases`,
       component: path.resolve(`./src/templates/state/cases.js`),
-      context: {
-        ...node,
-        slug,
-      },
+      context: node,
     })
     createPage({
       path: `/data/state/${slug}/tests`,
       component: path.resolve(`./src/templates/state/tests.js`),
-      context: {
-        ...node,
-        slug,
-      },
+      context: node,
     })
     createPage({
       path: `/data/state/${slug}/hospitalization`,
       component: path.resolve(`./src/templates/state/hospitalization.js`),
-      context: {
-        ...node,
-        slug,
-      },
+      context: node,
     })
     createPage({
       path: `/data/state/${slug}/outcomes`,
       component: path.resolve(`./src/templates/state/outcomes.js`),
-      context: {
-        ...node,
-        slug,
-      },
+      context: node,
     })
     createPage({
       path: `/data/state/${slug}/race-ethnicity`,
       component: path.resolve(`./src/templates/state/race-ethnicity.js`),
-      context: {
-        ...node,
-        slug,
-      },
+      context: node,
     })
     createPage({
       path: `/data/state/${slug}/history`,
       component: path.resolve(`./src/templates/state/history.js`),
-      context: {
-        ...node,
-        slug,
-      },
+      context: node,
     })
     createPage({
       path: `/data/state/${slug}/screenshots`,
       component: path.resolve(`./src/templates/state/screenshots.js`),
-      context: {
-        ...node,
-        slug,
-      },
+      context: node,
     })
   })
 

plugins/gatsby-transformer-covid-slug/gatsby-node.js

@@ -0,0 +1,37 @@
+const crypto = require('crypto')
+const slugify = require('slugify')
+
+const onCreateNode = async (
+  { node, actions, createNodeId, createContentDigest },
+  configOptions,
+) => {
+  const { createNode, createParentChildLink } = actions
+  const { field, type } = configOptions
+
+  if (node.internal.type !== type) {
+    return
+  }
+
+  const digest = crypto
+    .createHash('md5')
+    .update(`${node[field]}-slug`)
+    .digest('hex')
+
+  const slugNode = {
+    id: createNodeId(`${node.id}.slug >>> SLUG`),
+    children: [],
+    parent: node.id,
+    slug: slugify(node[field], { strict: true, lower: true }),
+    internal: {
+      contentDigest: createContentDigest(digest),
+      type: 'slug',
+    },
+  }
+
+  createNode(slugNode)
+  createParentChildLink({ parent: node, child: slugNode })
+
+  return null
+}
+
+exports.onCreateNode = onCreateNode

plugins/gatsby-transformer-covid-slug/index.js

@@ -0,0 +1 @@
+// noop

plugins/gatsby-transformer-covid-slug/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "gatsby-transformer-covid-slug",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "Apache-2.0"
+}

src/components/pages/data/state-data.js

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
 import { Link } from 'gatsby'
-import slug from '~utilities/slug'
-
 import { StateGrade } from '~components/pages/state/state-grade'
 import StateSummary from '~components/common/summary'
 import StateNotes from '~components/pages/state/state-notes'
@@ -17,17 +15,17 @@ import stateDataStyles from './state-data.module.scss'
 // todo pass race and ethnicity data from API
 const State = ({ state }) => {
   const [stateLinksOpen, setStateLinksOpen] = useState(false)
-
+  const { slug } = state.childSlug
   return (
     <>
       <div className={`state-header ${stateDataStyles.header}`}>
         <h3 id={`state-${state.state.toLowerCase()}`}>
-          <Link to={`/data/state/${slug(state.name)}`}>{state.name}</Link>
+          <Link to={`/data/state/${slug}`}>{state.name}</Link>
         </h3>
         <StateGrade letterGrade={state.stateData.dataQualityGrade} />
       </div>
       <StateSummary
-        stateSlug={slug(state.name)}
+        stateSlug={slug}
         data={state.stateData}
         sevenDaysAgo={state.sevenDaysAgo}
         raceData={{

src/components/pages/data/state-nav.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Link } from 'gatsby'
-import slugify from 'slugify'
 import classnames from 'classnames'
 import {
   TabletDisclosure,
@@ -20,7 +19,6 @@ export default ({ stateList, className, externalLinks = false }) => {
     false: not external, use anchor links
   */
   const [isOpen, setIsOpen] = useState(false)
-
   return (
     <TabletDisclosure
       className={classnames(stateNavStyle.container, className)}
@@ -42,15 +40,15 @@ export default ({ stateList, className, externalLinks = false }) => {
             if (externalLinks) {
               return (
                 <li key={state.state}>
-                  <Link to={`/data/state/${slugify(state.name).toLowerCase()}`}>
+                  <Link to={`/data/state/${state.childSlug.slug}`}>
                     {state.state}
                   </Link>
                 </li>
               )
             }
             return (
               <li key={state.state}>
-                <a href={`#state-${slugify(state.state).toLowerCase()}`}>
+                <a href={`#state-${state.state.toLowerCase()}`}>
                   {state.state}
                 </a>
               </li>

src/components/pages/state/download-data.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Link } from 'gatsby'
-import slug from '~utilities/slug'
 import { Row, Col } from '~components/common/grid'
 
 import LastUpdated from '~components/common/last-updated'
@@ -14,7 +13,7 @@ const DownloadData = ({ state, hideLabel = false }) => (
     )}
     <p>
       <a
-        href={`/data/download/${slug(state.name)}-history.csv`}
+        href={`/data/download/${state.childSlug.slug}-history.csv`}
         className={downloadDataStyles.button}
       >
         CSV

src/components/pages/state/preamble.js

@@ -50,6 +50,7 @@ export default ({ state, covidState }) => {
               covid19SiteSecondary={state.covid19SiteSecondary}
               covid19SiteTertiary={state.covid19SiteTertiary}
               stateName={state.name}
+              stateSlug={state.childSlug.slug}
             />
           </div>
         </Col>

src/components/pages/state/state-links.js

@@ -6,7 +6,6 @@ import {
   DisclosureButton,
   DisclosurePanel,
 } from '@reach/disclosure'
-import slug from '~utilities/slug'
 import stateLinksStyle from './state-links.module.scss'
 import preambleStyle from './preamble.module.scss'
 
@@ -16,6 +15,7 @@ const StateLinks = ({
   covid19SiteSecondary,
   covid19SiteTertiary,
   stateName,
+  stateSlug,
 }) => {
   return (
     <div className={stateLinksStyle.container}>
@@ -44,14 +44,14 @@ const StateLinks = ({
         </a>
       )}
       <Link
-        to={`/data/state/${slug(stateName)}/history`}
+        to={`/data/state/${stateSlug}/history`}
         className={stateLinksStyle.link}
       >
         Full history
       </Link>
       <Link
         className={stateLinksStyle.link}
-        to={`/data/state/${slug(stateName)}/screenshots`}
+        to={`/data/state/${stateSlug}/screenshots`}
       >
         <span>View screenshots</span>
       </Link>

src/pages/data/download.js

@@ -2,7 +2,6 @@ import React from 'react'
 import { graphql } from 'gatsby'
 import ContentfulContent from '~components/common/contentful-content'
 import Layout from '~components/layout'
-import slug from '~utilities/slug'
 
 export default ({ data }) => (
   <Layout
@@ -29,7 +28,7 @@ export default ({ data }) => (
     <ul>
       {data.allCovidStateInfo.nodes.map(state => (
         <li>
-          <a href={`/data/download/${slug(state.name)}-history.csv`}>
+          <a href={`/data/download/${state.childSlug.slug}-history.csv`}>
             {state.name}
           </a>
         </li>
@@ -53,6 +52,9 @@ export const query = graphql`
         id
         name
         state
+        childSlug {
+          slug
+        }
       }
     }
   }

src/templates/data/index.js

@@ -122,6 +122,9 @@ export const query = graphql`
         covid19Site
         covid19SiteSecondary
         twitter
+        childSlug {
+          slug
+        }
       }
     }
     allCovidUsDaily {

src/templates/state/history.js

@@ -1,25 +1,25 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import StateHistory from '~components/pages/state/state-history'
-import slug from '~utilities/slug'
 
 import Layout from '~components/layout'
 
 const StatePage = ({ pageContext, data, path }) => {
   const state = pageContext
   const { allCovidStateDaily, allCovidScreenshot } = data
+  const { slug } = state.childSlug
   return (
     <Layout
       title={state.name}
       path={path}
       returnLinks={[
         { link: '/data' },
-        { link: `/data/state/${state.slug}`, title: state.name },
+        { link: `/data/state/${slug}`, title: state.name },
       ]}
     >
       <p>
         You can also{' '}
-        <a href={`/data/download/${slug(state.name)}-history.csv`}>
+        <a href={`/data/download/${slug}-history.csv`}>
           download all state data as a CSV file
         </a>
         .

src/templates/state/index.js

@@ -59,6 +59,9 @@ export const query = graphql`
       nodes {
         state
         name
+        childSlug {
+          slug
+        }
       }
     }
     allCovidUsDaily {