Updates to site showcase (#6095)

* refactor: general cleanup

* add: support deep linking to filters

* add: make categories on showcase detail link to filtered list

* refactor: filtering is now cumulative

* refactor: remove core-js dep

www/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "globals": {
+    "graphql": true
+  },
+  "rules": {
+    "react/prop-types": [0]
+  }
+}

www/gatsby-node.js

@@ -144,11 +144,13 @@ exports.createPages = ({ graphql, actions }) => {
           edge => {
             const slug = _.get(edge, `node.fields.slug`)
             const draft = _.get(edge, `node.frontmatter.draft`)
-            if (!slug) return
+            if (!slug) return undefined
 
             if (_.includes(slug, `/blog/`) && !draft) {
               return edge
             }
+
+            return undefined
           }
         )
 

www/package.json

@@ -51,8 +51,9 @@
     "mousetrap": "^1.6.1",
     "parse-filepath": "^1.0.2",
     "prismjs": "^1.14.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "qs": "^6.5.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
     "react-instantsearch": "^4.5.1",

www/src/components/showcase-details.js

@@ -1,9 +1,10 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { graphql } from "gatsby"
 import Helmet from "react-helmet"
 import url from "url"
 import hex2rgba from "hex2rgba"
 import Img from "gatsby-image"
+import qs from "qs"
 
 import presets, { colors } from "../utils/presets"
 import { options, scale, rhythm } from "../utils/typography"
@@ -98,7 +99,7 @@ const cleanUrl = mainUrl => {
   return parsed.hostname + path
 }
 
-export default ({ parent, data, isModal, categories }) => (
+const ShowcaseDetails = ({ parent, data, isModal, categories }) => (
   <StaticQuery
     query={graphql`
       query allSitesYamlTemplateShowcase {
@@ -524,7 +525,18 @@ export default ({ parent, data, isModal, categories }) => (
                   >
                     Categories{` `}
                   </div>
-                  <div> {categories.join(`, `)} </div>
+                  <div>
+                    {categories.map((c, i) => (
+                      <Fragment key={c}>
+                        <Link
+                          to={`/showcase?${qs.stringify({ filters: [c] })}`}
+                        >
+                          {c}
+                        </Link>
+                        {i === categories.length - 1 ? `` : `, `}
+                      </Fragment>
+                    ))}
+                  </div>
                 </div>
               </div>
             </div>
@@ -534,3 +546,5 @@ export default ({ parent, data, isModal, categories }) => (
     }}
   />
 )
+
+export default ShowcaseDetails

www/src/components/url-query.js

@@ -0,0 +1,50 @@
+import { Component } from "react"
+import { withRouter } from "react-router-dom"
+import qs from "qs"
+
+class URLQuery extends Component {
+  state = {}
+
+  componentDidMount = () => {
+    const {
+      history,
+      location: { search },
+    } = this.props
+
+    this.getDerivedStateFromQuery(search)
+
+    this.unlisten = history.listen(({ search }) => {
+      this.getDerivedStateFromQuery(search)
+    })
+  }
+
+  componentWillUnmount = () => {
+    this.unlisten()
+  }
+
+  getDerivedStateFromQuery = search => {
+    const { filters } = qs.parse(search.replace(`?`, ``))
+
+    this.setState(() => {
+      return {
+        filters: filters || [],
+      }
+    })
+  }
+
+  updateQuery = fn => {
+    const {
+      history: { push },
+      location: { pathname },
+    } = this.props
+
+    const newQuery = fn(this.state)
+    const queryString = qs.stringify(newQuery)
+
+    push(`${pathname}?${queryString}`)
+  }
+
+  render = () => this.props.children(this.state, this.updateQuery)
+}
+
+export default withRouter(URLQuery)