refactor(www): Make easy-to-convert class components into function components (#25489)

* Convert class components to function components

* Convert class components to function components

* Convert class components to function components

* fix

* fix

Author: tesseralis

www/src/components/plugin-searchbar-body.js

@@ -197,128 +197,122 @@ const searchBoxStyles = t => css`
 /* stylelint-enable */
 
 // Search shows a list of "hits", and is a child of the PluginSearchBar component
-class Search extends Component {
-  render() {
-    return (
-      <div sx={{ pb: [11, null, null, 0] }}>
+function Search({ pathname, query }) {
+  return (
+    <div sx={{ pb: [11, null, null, 0] }}>
+      <div
+        sx={{
+          borderBottomWidth: `1px`,
+          borderBottomStyle: `solid`,
+          borderColor: `ui.border`,
+          display: `flex`,
+          flexDirection: `column`,
+          width: `100%`,
+        }}
+      >
+        <Global styles={searchBoxStyles} />
+        <SearchBox translations={{ placeholder: `Search Gatsby Library` }} />
+        <div css={{ display: `none` }}>
+          <Configure analyticsTags={[`gatsby-plugins`]} />
+          <RefinementList
+            attribute="keywords"
+            transformItems={items =>
+              items.map(({ count, ...item }) => {
+                return {
+                  ...item,
+                  count: count || 0,
+                }
+              })
+            }
+            defaultRefinement={[`gatsby-component`, `gatsby-plugin`]}
+          />
+          <ToggleRefinement
+            attribute="deprecated"
+            value={false}
+            label="No deprecated plugins"
+            defaultRefinement={true}
+          />
+        </div>
+
         <div
           sx={{
-            borderBottomWidth: `1px`,
-            borderBottomStyle: `solid`,
-            borderColor: `ui.border`,
+            alignItems: `center`,
+            color: `textMuted`,
             display: `flex`,
-            flexDirection: `column`,
-            width: `100%`,
+            height: searchMetaHeight,
+            px: 6,
+            fontSize: 0,
           }}
         >
-          <Global styles={searchBoxStyles} />
-          <SearchBox translations={{ placeholder: `Search Gatsby Library` }} />
-          <div css={{ display: `none` }}>
-            <Configure analyticsTags={[`gatsby-plugins`]} />
-            <RefinementList
-              attribute="keywords"
-              transformItems={items =>
-                items.map(({ count, ...item }) => {
-                  return {
-                    ...item,
-                    count: count || 0,
-                  }
-                })
-              }
-              defaultRefinement={[`gatsby-component`, `gatsby-plugin`]}
-            />
-            <ToggleRefinement
-              attribute="deprecated"
-              value={false}
-              label="No deprecated plugins"
-              defaultRefinement={true}
-            />
-          </div>
-
-          <div
-            sx={{
-              alignItems: `center`,
-              color: `textMuted`,
-              display: `flex`,
-              height: searchMetaHeight,
-              px: 6,
-              fontSize: 0,
-            }}
-          >
-            <Stats
-              translations={{
-                stats: function (n) {
-                  return `${n} results`
-                },
-              }}
-            />
-            <SkipNavLink />
-          </div>
-        </div>
-
-        <div>
-          <div
-            sx={{
-              [mediaQueries.md]: {
-                height: t =>
-                  `calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${searchInputHeight} - ${searchInputWrapperMargin} - ${searchMetaHeight})`,
-                overflowY: `scroll`,
+          <Stats
+            translations={{
+              stats: function (n) {
+                return `${n} results`
               },
             }}
-          >
-            <InfiniteHits
-              hitComponent={result => (
-                <Result
-                  hit={result.hit}
-                  pathname={this.props.pathname}
-                  query={this.props.query}
-                />
-              )}
-            />
-          </div>
+          />
+          <SkipNavLink />
         </div>
+      </div>
 
+      <div>
         <div
           sx={{
-            fontSize: 0,
-            lineHeight: 0,
-            height: 20,
-            mt: 6,
-            display: `none`,
+            [mediaQueries.md]: {
+              height: t =>
+                `calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${searchInputHeight} - ${searchInputWrapperMargin} - ${searchMetaHeight})`,
+              overflowY: `scroll`,
+            },
           }}
         >
-          <a
-            href={`https://www.algolia.com/`}
-            sx={{
-              "&&": {
+          <InfiniteHits
+            hitComponent={result => (
+              <Result hit={result.hit} pathname={pathname} query={query} />
+            )}
+          />
+        </div>
+      </div>
+
+      <div
+        sx={{
+          fontSize: 0,
+          lineHeight: 0,
+          height: 20,
+          mt: 6,
+          display: `none`,
+        }}
+      >
+        <a
+          href={`https://www.algolia.com/`}
+          sx={{
+            "&&": {
+              background: `url(${AlgoliaLogo})`,
+              border: `none`,
+              fontWeight: `body`,
+              backgroundRepeat: `no-repeat`,
+              backgroundPosition: `50%`,
+              backgroundSize: `100%`,
+              overflow: `hidden`,
+              textIndent: `-9000px`,
+              padding: `0!important`,
+              width: 110,
+              height: `100%`,
+              display: `block`,
+              ml: `auto`,
+              "&:hover": {
                 background: `url(${AlgoliaLogo})`,
-                border: `none`,
-                fontWeight: `body`,
                 backgroundRepeat: `no-repeat`,
                 backgroundPosition: `50%`,
                 backgroundSize: `100%`,
-                overflow: `hidden`,
-                textIndent: `-9000px`,
-                padding: `0!important`,
-                width: 110,
-                height: `100%`,
-                display: `block`,
-                ml: `auto`,
-                "&:hover": {
-                  background: `url(${AlgoliaLogo})`,
-                  backgroundRepeat: `no-repeat`,
-                  backgroundPosition: `50%`,
-                  backgroundSize: `100%`,
-                },
               },
-            }}
-          >
-            Algolia
-          </a>
-        </div>
+            },
+          }}
+        >
+          Algolia
+        </a>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 // the result component is fed into the InfiniteHits component

www/src/components/stub-list.js

@@ -17,58 +17,54 @@ const flatten = pages =>
     []
   )
 
-class StubList extends React.Component {
-  render() {
-    const stubs = findStubs(
-      flatten([...itemListContributing.items, ...itemListDocs.items])
-    )
-
-    let groupedStubs = {}
+export default function StubList() {
+  const stubs = findStubs(
+    flatten([...itemListContributing.items, ...itemListDocs.items])
+  )
 
-    stubs.forEach(stub => {
-      let categoryTitle = stub.parentTitle || `Top Level Documentation Pages`
+  let groupedStubs = {}
 
-      if (groupedStubs[categoryTitle] === undefined) {
-        groupedStubs[categoryTitle] = []
-      }
-      groupedStubs[categoryTitle].push(stub)
-    })
+  stubs.forEach(stub => {
+    let categoryTitle = stub.parentTitle || `Top Level Documentation Pages`
 
-    let sortedCategories = Object.keys(groupedStubs).sort((a, b) =>
-      a.localeCompare(b)
-    )
+    if (groupedStubs[categoryTitle] === undefined) {
+      groupedStubs[categoryTitle] = []
+    }
+    groupedStubs[categoryTitle].push(stub)
+  })
 
-    // Put top level at the front of the array if it isn't empty
-    sortedCategories.splice(
-      sortedCategories.indexOf(`Top Level Documentation Pages`),
-      1
-    )
+  let sortedCategories = Object.keys(groupedStubs).sort((a, b) =>
+    a.localeCompare(b)
+  )
 
-    if (groupedStubs[`Top Level Documentation Pages`]) {
-      sortedCategories = [`Top Level Documentation Pages`, ...sortedCategories]
-    }
+  // Put top level at the front of the array if it isn't empty
+  sortedCategories.splice(
+    sortedCategories.indexOf(`Top Level Documentation Pages`),
+    1
+  )
 
-    return (
-      <section data-testid="list-of-stubs">
-        {sortedCategories.map(category => {
-          let categoryTitle =
-            category.slice(-1) === `*` ? category.slice(0, -1) : category
-          return (
-            <React.Fragment key={category}>
-              <h2 sx={{ fontSize: 4, mb: 3 }}>{categoryTitle}</h2>
-              <ul>
-                {groupedStubs[category].map(stub => (
-                  <li key={stub.title}>
-                    <Link to={stub.link}>{stub.title.slice(0, -1)}</Link>
-                  </li>
-                ))}
-              </ul>
-            </React.Fragment>
-          )
-        })}
-      </section>
-    )
+  if (groupedStubs[`Top Level Documentation Pages`]) {
+    sortedCategories = [`Top Level Documentation Pages`, ...sortedCategories]
   }
-}
 
-export default StubList
+  return (
+    <section data-testid="list-of-stubs">
+      {sortedCategories.map(category => {
+        let categoryTitle =
+          category.slice(-1) === `*` ? category.slice(0, -1) : category
+        return (
+          <React.Fragment key={category}>
+            <h2 sx={{ fontSize: 4, mb: 3 }}>{categoryTitle}</h2>
+            <ul>
+              {groupedStubs[category].map(stub => (
+                <li key={stub.title}>
+                  <Link to={stub.link}>{stub.title.slice(0, -1)}</Link>
+                </li>
+              ))}
+            </ul>
+          </React.Fragment>
+        )
+      })}
+    </section>
+  )
+}

www/src/pages/creators/agencies.js

@@ -1,16 +1,11 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 import CreatorsView from "../../views/creators"
 
-class AgenciesPage extends Component {
-  render() {
-    const { location, data } = this.props
-    return <CreatorsView location={location} data={data} title={`Agencies`} />
-  }
+export default function AgenciesPage({ location, data }) {
+  return <CreatorsView location={location} data={data} title={`Agencies`} />
 }
 
-export default AgenciesPage
-
 export const pageQuery = graphql`
   query {
     allCreatorsYaml(filter: { type: { eq: "agency" } }) {

www/src/pages/creators/companies.js

@@ -1,16 +1,11 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 import CreatorsView from "../../views/creators"
 
-class CompaniesPage extends Component {
-  render() {
-    const { location, data } = this.props
-    return <CreatorsView data={data} location={location} title={`Companies`} />
-  }
+export default function CompaniesPage({ location, data }) {
+  return <CreatorsView data={data} location={location} title={`Companies`} />
 }
 
-export default CompaniesPage
-
 export const pageQuery = graphql`
   query {
     allCreatorsYaml(filter: { type: { eq: "company" } }) {

www/src/pages/creators/index.js

@@ -1,12 +1,9 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 import CreatorsView from "../../views/creators"
 
-class CreatorsPage extends Component {
-  render() {
-    const { location, data } = this.props
-    return <CreatorsView data={data} location={location} title={`All`} />
-  }
+export function CreatorsPage({ location, data }) {
+  return <CreatorsView data={data} location={location} title={`All`} />
 }
 
 export default CreatorsPage

www/src/pages/creators/people.js

@@ -1,16 +1,11 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 import CreatorsView from "../../views/creators"
 
-class PeoplePage extends Component {
-  render() {
-    const { location, data } = this.props
-    return <CreatorsView data={data} location={location} title={`People`} />
-  }
+export default function PeoplePage({ location, data }) {
+  return <CreatorsView data={data} location={location} title={`People`} />
 }
 
-export default PeoplePage
-
 export const pageQuery = graphql`
   query {
     allCreatorsYaml(filter: { type: { eq: "individual" } }) {

www/src/pages/ecosystem.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 
 import Layout from "../components/layout/layout-with-heading"
@@ -8,57 +8,40 @@ import FooterLinks from "../components/shared/footer-links"
 
 import { EcosystemIcon } from "../assets/icons"
 
-class EcosystemPage extends Component {
-  render() {
-    const {
-      location,
-      data: {
-        allStartersYaml: { nodes: startersData },
-        allNpmPackage: { nodes: pluginsData },
-      },
-    } = this.props
+export default function EcosystemPage({ location, data }) {
+  const startersData = data.allStartersYaml.nodes
+  const pluginsData = data.allNpmPackage.nodes
 
-    const starters = startersData.map(item => {
-      const {
-        fields: {
-          starterShowcase: { slug, name, description, stars },
-        },
-        childScreenshot: {
-          screenshotFile: {
-            childImageSharp: { fixed: thumbnail },
-          },
-        },
-      } = item
+  const starters = startersData.map(item => {
+    const { slug, name, description, stars } = item.fields.starterShowcase
+    const thumbnail = item.childScreenshot.screenshotFile.childImageSharp.fixed
 
-      return {
-        slug: `/starters${slug}`,
-        name,
-        description,
-        stars,
-        thumbnail,
-      }
-    })
+    return {
+      slug: `/starters${slug}`,
+      name,
+      description,
+      stars,
+      thumbnail,
+    }
+  })
 
-    const plugins = pluginsData
+  const plugins = pluginsData
 
-    const pageTitle = `Ecosystem`
+  const pageTitle = `Ecosystem`
 
-    return (
-      <Layout
-        location={location}
-        pageTitle={pageTitle}
-        pageIcon={<EcosystemIcon />}
-      >
-        <PageMetadata title="Ecosystem" />
-        <EcosystemBoard starters={starters} plugins={plugins} />
-        <FooterLinks />
-      </Layout>
-    )
-  }
+  return (
+    <Layout
+      location={location}
+      pageTitle={pageTitle}
+      pageIcon={<EcosystemIcon />}
+    >
+      <PageMetadata title="Ecosystem" />
+      <EcosystemBoard starters={starters} plugins={plugins} />
+      <FooterLinks />
+    </Layout>
+  )
 }
 
-export default EcosystemPage
-
 export const ecosystemQuery = graphql`
   query EcosystemQuery {
     allStartersYaml(

www/src/pages/features.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import { Component } from "react"
 import { graphql } from "gatsby"
 
 import Button from "../components/button"
@@ -101,41 +100,37 @@ const FeaturesHeader = () => (
   </section>
 )
 
-class FeaturesPage extends Component {
-  render() {
-    return (
-      <PageWithSidebar location={this.props.location}>
-        <PageMetadata
-          title="Features"
-          description="Learn how specific features like performance and support for modern technologies make Gatsby worth using."
-        />
-        <Container>
-          <main id={`reach-skip-nav`}>
-            <FeaturesHeader />
-            <SimpleEvaluationTable
-              title="Feature Comparison"
-              headers={[
-                { display: `Category`, nodeFieldProperty: `Category` },
-                { display: `Gatsby`, nodeFieldProperty: `Gatsby` },
-                {
-                  display: `JAMstack frameworks`,
-                  nodeFieldProperty: `Jamstack`,
-                },
-                { display: `Traditional CMS`, nodeFieldProperty: `Cms` },
-              ]}
-              data={this.props.data.allGatsbyFeaturesSpecsCsv.nodes}
-            />
-            <FeaturesFooter />
-          </main>
-          <FooterLinks />
-        </Container>
-      </PageWithSidebar>
-    )
-  }
+export default function FeaturesPage({ location, data }) {
+  return (
+    <PageWithSidebar location={location}>
+      <PageMetadata
+        title="Features"
+        description="Learn how specific features like performance and support for modern technologies make Gatsby worth using."
+      />
+      <Container>
+        <main id={`reach-skip-nav`}>
+          <FeaturesHeader />
+          <SimpleEvaluationTable
+            title="Feature Comparison"
+            headers={[
+              { display: `Category`, nodeFieldProperty: `Category` },
+              { display: `Gatsby`, nodeFieldProperty: `Gatsby` },
+              {
+                display: `JAMstack frameworks`,
+                nodeFieldProperty: `Jamstack`,
+              },
+              { display: `Traditional CMS`, nodeFieldProperty: `Cms` },
+            ]}
+            data={data.allGatsbyFeaturesSpecsCsv.nodes}
+          />
+          <FeaturesFooter />
+        </main>
+        <FooterLinks />
+      </Container>
+    </PageWithSidebar>
+  )
 }
 
-export default FeaturesPage
-
 export const pageQuery = graphql`
   query {
     allGatsbyFeaturesSpecsCsv {

www/src/pages/plugins.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import React, { Component } from "react"
 
 import Container from "../components/container"
 import Rotator from "../components/rotator"
@@ -11,121 +10,116 @@ import FooterLinks from "../components/shared/footer-links"
 import PageMetadata from "../components/page-metadata"
 import PageWithPluginSearchBar from "../components/page-with-plugin-searchbar"
 
-class Plugins extends Component {
-  render() {
-    const { location } = this.props
-    return (
-      <PageWithPluginSearchBar location={location} isPluginsIndex={true}>
-        <PageMetadata
-          title="Plugins"
-          description="The library for searching and exploring Gatsby's vast plugin ecosystem to implement Node.js packages using Gatsby APIs"
-        />
-        <Container
-          overrideCSS={{
-            alignItems: `center`,
+export default function Plugins({ location }) {
+  return (
+    <PageWithPluginSearchBar location={location} isPluginsIndex={true}>
+      <PageMetadata
+        title="Plugins"
+        description="The library for searching and exploring Gatsby's vast plugin ecosystem to implement Node.js packages using Gatsby APIs"
+      />
+      <Container
+        overrideCSS={{
+          alignItems: `center`,
+          display: `flex`,
+          flexDirection: `column`,
+          minHeight: `calc(100vh - (${sizes.headerHeight} + ${sizes.bannerHeight}))`,
+        }}
+      >
+        <div
+          css={{
             display: `flex`,
             flexDirection: `column`,
-            minHeight: `calc(100vh - (${sizes.headerHeight} + ${sizes.bannerHeight}))`,
           }}
         >
-          <div
-            css={{
-              display: `flex`,
-              flexDirection: `column`,
+          <img
+            src={logo}
+            sx={{
+              display: `inline-block`,
+              height: t => t.space[12],
+              width: t => t.space[12],
+              mx: `auto`,
+            }}
+            alt=""
+          />
+          <h1
+            sx={{
+              fontSize: 6,
+              fontWeight: `heading`,
+              mx: 5,
+              mb: 0,
+              textAlign: `center`,
             }}
           >
-            <img
-              src={logo}
-              sx={{
-                display: `inline-block`,
-                height: t => t.space[12],
-                width: t => t.space[12],
-                mx: `auto`,
-              }}
-              alt=""
-            />
-            <h1
-              sx={{
-                fontSize: 6,
-                fontWeight: `heading`,
-                mx: 5,
-                mb: 0,
-                textAlign: `center`,
-              }}
-            >
-              Welcome to the Gatsby Plugin Library!
-            </h1>
-            <Rotator
-              items={[
-                {
-                  text: `SEO?`,
-                  pluginName: `gatsby-plugin-react-helmet`,
-                },
-                {
-                  text: `responsive images?`,
-                  pluginName: `gatsby-image`,
-                },
-                {
-                  text: `offline support?`,
-                  pluginName: `gatsby-plugin-offline`,
-                },
-                {
-                  text: `Sass support?`,
-                  pluginName: `gatsby-plugin-sass`,
-                },
-                {
-                  text: `a sitemap?`,
-                  pluginName: `gatsby-plugin-sitemap`,
-                },
-                {
-                  text: `an RSS feed?`,
-                  pluginName: `gatsby-plugin-feed`,
-                },
-                {
-                  text: `great typography?`,
-                  pluginName: `gatsby-plugin-typography`,
-                },
-                {
-                  text: `TypeScript?`,
-                  pluginName: `gatsby-plugin-typescript`,
-                },
-                {
-                  text: `Google Analytics?`,
-                  pluginName: `gatsby-plugin-google-analytics`,
-                },
-                {
-                  text: `WordPress integration?`,
-                  pluginName: `gatsby-source-wordpress`,
-                },
-                {
-                  text: `anything?`,
-                },
-              ]}
-              color="lilac"
-            />
+            Welcome to the Gatsby Plugin Library!
+          </h1>
+          <Rotator
+            items={[
+              {
+                text: `SEO?`,
+                pluginName: `gatsby-plugin-react-helmet`,
+              },
+              {
+                text: `responsive images?`,
+                pluginName: `gatsby-image`,
+              },
+              {
+                text: `offline support?`,
+                pluginName: `gatsby-plugin-offline`,
+              },
+              {
+                text: `Sass support?`,
+                pluginName: `gatsby-plugin-sass`,
+              },
+              {
+                text: `a sitemap?`,
+                pluginName: `gatsby-plugin-sitemap`,
+              },
+              {
+                text: `an RSS feed?`,
+                pluginName: `gatsby-plugin-feed`,
+              },
+              {
+                text: `great typography?`,
+                pluginName: `gatsby-plugin-typography`,
+              },
+              {
+                text: `TypeScript?`,
+                pluginName: `gatsby-plugin-typescript`,
+              },
+              {
+                text: `Google Analytics?`,
+                pluginName: `gatsby-plugin-google-analytics`,
+              },
+              {
+                text: `WordPress integration?`,
+                pluginName: `gatsby-source-wordpress`,
+              },
+              {
+                text: `anything?`,
+              },
+            ]}
+            color="lilac"
+          />
 
-            <p
-              sx={{
-                color: `textMuted`,
-                fontSize: 2,
-                textAlign: `center`,
-              }}
-            >
-              Please use the search bar to find plugins that will make your
-              blazing fast site even more awesome. If you
-              {`'`}d like to create your own plugin, see the
-              {` `}
-              <Link to="/docs/creating-plugins/">Plugin Authoring</Link> page in
-              the docs! To learn more about Gatsby plugins, visit the
-              {` `}
-              <Link to="/docs/plugins">plugins doc page</Link>.
-            </p>
-          </div>
-          <FooterLinks />
-        </Container>
-      </PageWithPluginSearchBar>
-    )
-  }
+          <p
+            sx={{
+              color: `textMuted`,
+              fontSize: 2,
+              textAlign: `center`,
+            }}
+          >
+            Please use the search bar to find plugins that will make your
+            blazing fast site even more awesome. If you
+            {`'`}d like to create your own plugin, see the
+            {` `}
+            <Link to="/docs/creating-plugins/">Plugin Authoring</Link> page in
+            the docs! To learn more about Gatsby plugins, visit the
+            {` `}
+            <Link to="/docs/plugins">plugins doc page</Link>.
+          </p>
+        </div>
+        <FooterLinks />
+      </Container>
+    </PageWithPluginSearchBar>
+  )
 }
-
-export default Plugins

www/src/pages/showcase.js

@@ -1,19 +1,12 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 
 import ShowcaseView from "../views/showcase"
 
-class ShowcasePage extends Component {
-  render() {
-    const data = this.props.data
-    const location = this.props.location
-
-    return <ShowcaseView data={data} location={location} />
-  }
+export default function ShowcasePage({ data, location }) {
+  return <ShowcaseView data={data} location={location} />
 }
 
-export default ShowcasePage
-
 export const showcaseQuery = graphql`
   query {
     featured: allSitesYaml(

www/src/pages/starters.js

@@ -1,19 +1,12 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 
 import StarterLibraryView from "../views/starter-library"
 
-class StarterLibraryWrapper extends Component {
-  render() {
-    const data = this.props.data
-    const location = this.props.location
-
-    return <StarterLibraryView data={data} location={location} />
-  }
+export default function StarterLibraryWrapper({ data, location }) {
+  return <StarterLibraryView data={data} location={location} />
 }
 
-export default StarterLibraryWrapper
-
 export const showcaseQuery = graphql`
   query SiteShowcaseQuery {
     allStartersYaml(filter: { fields: { hasScreenshot: { eq: true } } }) {

www/src/templates/template-blog-list.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import React from "react"
 import { graphql } from "gatsby"
 import { TiTags as TagsIcon } from "react-icons/ti"
 
@@ -15,86 +14,79 @@ import PageMetadata from "../components/page-metadata"
 import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import { pullIntoGutter, breakpointGutter } from "../utils/styles"
 
-class BlogPostsIndex extends React.Component {
-  render() {
-    const { allMdx } = this.props.data
-
-    return (
-      <main id={`reach-skip-nav`}>
-        <PageMetadata
-          title={`Blog | Page ${this.props.pageContext.currentPage}`}
-        />
-        <Container>
-          <div
+export default function BlogPostsIndex({ data, pageContext }) {
+  const posts = data.allMdx.nodes
+  return (
+    <main id={`reach-skip-nav`}>
+      <PageMetadata title={`Blog | Page ${pageContext.currentPage}`} />
+      <Container>
+        <div
+          sx={{
+            ...pullIntoGutter,
+            display: `flex`,
+            justifyContent: `space-between`,
+            borderBottom: t => `1px solid ${t.colors.ui.border}`,
+            mb: 6,
+            pb: 6,
+            [breakpointGutter]: {
+              pb: 0,
+              border: 0,
+            },
+          }}
+        >
+          <h1 sx={{ mb: 0 }}>Blog</h1>
+          <Button
+            key="blog-view-all-tags-button"
+            to="/blog/tags"
+            variant="small"
+          >
+            View all Tags <TagsIcon />
+          </Button>
+        </div>
+        {posts.map((node, index) => (
+          <BlogPostPreviewItem
+            post={node}
+            key={node.fields.slug}
             sx={{
+              borderBottomWidth: `1px`,
+              borderBottomStyle: `solid`,
+              borderColor: `ui.border`,
+              pb: 8,
+              mb: index === posts.length - 1 ? 0 : 8,
               ...pullIntoGutter,
-              display: `flex`,
-              justifyContent: `space-between`,
-              borderBottom: t => `1px solid ${t.colors.ui.border}`,
-              mb: 6,
-              pb: 6,
               [breakpointGutter]: {
-                pb: 0,
+                p: 9,
+                boxShadow: `raised`,
+                bg: `card.background`,
+                borderRadius: 2,
                 border: 0,
-              },
-            }}
-          >
-            <h1 sx={{ mb: 0 }}>Blog</h1>
-            <Button
-              key="blog-view-all-tags-button"
-              to="/blog/tags"
-              variant="small"
-            >
-              View all Tags <TagsIcon />
-            </Button>
-          </div>
-          {allMdx.nodes.map((node, index) => (
-            <BlogPostPreviewItem
-              post={node}
-              key={node.fields.slug}
-              sx={{
-                borderBottomWidth: `1px`,
-                borderBottomStyle: `solid`,
-                borderColor: `ui.border`,
-                pb: 8,
-                mb: index === allMdx.nodes.length - 1 ? 0 : 8,
-                ...pullIntoGutter,
-                [breakpointGutter]: {
-                  p: 9,
-                  boxShadow: `raised`,
-                  bg: `card.background`,
-                  borderRadius: 2,
-                  border: 0,
-                  mb: 6,
-                  mx: 0,
-                  transition: t =>
-                    `transform ${t.transition.default},  box-shadow ${t.transition.default}, padding ${t.transition.default}`,
-                  "&:hover": {
-                    transform: t => `translateY(-${t.space[1]})`,
-                    boxShadow: `overlay`,
-                  },
-                  "&:active": {
-                    boxShadow: `cardActive`,
-                    transform: `translateY(0)`,
-                  },
+                mb: 6,
+                mx: 0,
+                transition: t =>
+                  `transform ${t.transition.default},  box-shadow ${t.transition.default}, padding ${t.transition.default}`,
+                "&:hover": {
+                  transform: t => `translateY(-${t.space[1]})`,
+                  boxShadow: `overlay`,
                 },
-                [mediaQueries.md]: {
-                  mx: -9,
+                "&:active": {
+                  boxShadow: `cardActive`,
+                  transform: `translateY(0)`,
                 },
-              }}
-            />
-          ))}
-          <Pagination context={this.props.pageContext} />
-          <EmailCaptureForm signupMessage="Enjoying our blog? Receive the next post in your inbox!" />
-        </Container>
-        <FooterLinks />
-      </main>
-    )
-  }
+              },
+              [mediaQueries.md]: {
+                mx: -9,
+              },
+            }}
+          />
+        ))}
+        <Pagination context={pageContext} />
+        <EmailCaptureForm signupMessage="Enjoying our blog? Receive the next post in your inbox!" />
+      </Container>
+      <FooterLinks />
+    </main>
+  )
 }
 
-export default BlogPostsIndex
-
 export const pageQuery = graphql`
   query blogListQuery($skip: Int!, $limit: Int!) {
     allMdx(

www/src/templates/template-blog-post.js

@@ -15,170 +15,161 @@ import Avatar from "../components/avatar"
 import PrevAndNext from "../components/prev-and-next"
 import FooterLinks from "../components/shared/footer-links"
 
-class BlogPostTemplate extends React.Component {
-  render() {
-    const {
-      pageContext: { prev, next },
-      data: { mdx: post },
-    } = this.props
-    const BioLine = ({ children }) => (
-      <p
-        sx={{
-          color: `textMuted`,
-          fontFamily: `heading`,
-          lineHeight: `dense`,
-          m: 0,
-        }}
-      >
-        {children}
-      </p>
-    )
+export default function BlogPostTemplate({ pageContext, data }) {
+  const { prev, next } = pageContext
+  const post = data.mdx
+  const BioLine = ({ children }) => (
+    <p
+      sx={{
+        color: `textMuted`,
+        fontFamily: `heading`,
+        lineHeight: `dense`,
+        m: 0,
+      }}
+    >
+      {children}
+    </p>
+  )
 
-    return (
-      <>
-        <Container>
-          {
-            // TODO
-            // - settle on `docSearch-content` as selector to identify
-            //   Algolia DocSearch content
-            // - make use of components/docsearch-content in place of <main>
-            //
-            // `post` and `post-body` are only in use as selectors in the
-            // docsearch config for gatsbyjs.org for individual blog posts:
-            // https://github.com/algolia/docsearch-configs/blob/89706210b62e2f384e52ca1b104f92bc0e225fff/configs/gatsbyjs.json#L71-L76
-          }
-          <main id={`reach-skip-nav`} className="post docSearch-content">
-            <BlogPostMetadata post={post} />
-            <div sx={{ display: `flex`, flexDirection: `column` }}>
-              <section
-                sx={{
-                  display: `flex`,
-                  mb: 5,
-                  [mediaQueries.md]: {
-                    mt: 3,
-                    mb: 9,
-                  },
-                }}
-              >
-                <div css={{ flex: `0 0 auto` }}>
-                  <Link
-                    to={post.frontmatter.author.fields.slug}
-                    css={{ "&&": { borderBottom: 0 } }}
+  return (
+    <>
+      <Container>
+        {
+          // TODO
+          // - settle on `docSearch-content` as selector to identify
+          //   Algolia DocSearch content
+          // - make use of components/docsearch-content in place of <main>
+          //
+          // `post` and `post-body` are only in use as selectors in the
+          // docsearch config for gatsbyjs.org for individual blog posts:
+          // https://github.com/algolia/docsearch-configs/blob/89706210b62e2f384e52ca1b104f92bc0e225fff/configs/gatsbyjs.json#L71-L76
+        }
+        <main id={`reach-skip-nav`} className="post docSearch-content">
+          <BlogPostMetadata post={post} />
+          <div sx={{ display: `flex`, flexDirection: `column` }}>
+            <section
+              sx={{
+                display: `flex`,
+                mb: 5,
+                [mediaQueries.md]: {
+                  mt: 3,
+                  mb: 9,
+                },
+              }}
+            >
+              <div css={{ flex: `0 0 auto` }}>
+                <Link
+                  to={post.frontmatter.author.fields.slug}
+                  css={{ "&&": { borderBottom: 0 } }}
+                >
+                  <Avatar
+                    image={post.frontmatter.author.avatar.childImageSharp.fixed}
+                    alt={post.frontmatter.author.id}
+                    overrideCSS={{ mr: 5 }}
+                  />
+                </Link>
+              </div>
+              <div css={{ flex: `1 1 auto` }}>
+                <Link to={post.frontmatter.author.fields.slug}>
+                  <h4
+                    sx={{
+                      fontSize: 3,
+                      mb: 1,
+                      color: `link.color`,
+                    }}
                   >
-                    <Avatar
-                      image={
-                        post.frontmatter.author.avatar.childImageSharp.fixed
-                      }
-                      alt={post.frontmatter.author.id}
-                      overrideCSS={{ mr: 5 }}
-                    />
-                  </Link>
-                </div>
-                <div css={{ flex: `1 1 auto` }}>
-                  <Link to={post.frontmatter.author.fields.slug}>
-                    <h4
+                    <span
                       sx={{
-                        fontSize: 3,
-                        mb: 1,
-                        color: `link.color`,
+                        borderBottom: t => `1px solid ${t.colors.link.border}`,
+                        transition: t =>
+                          `all ${t.transition.speed.fast} ${t.transition.curve.default}`,
+                        "&:hover": { borderColor: `link.hoverBorder` },
                       }}
                     >
-                      <span
-                        sx={{
-                          borderBottom: t =>
-                            `1px solid ${t.colors.link.border}`,
-                          transition: t =>
-                            `all ${t.transition.speed.fast} ${t.transition.curve.default}`,
-                          "&:hover": { borderColor: `link.hoverBorder` },
-                        }}
-                      >
-                        {post.frontmatter.author.id}
-                      </span>
-                    </h4>
-                  </Link>
-                  <BioLine>{post.frontmatter.author.bio}</BioLine>
-                  <BioLine>
-                    {post.timeToRead} min read · {post.frontmatter.date}
-                    {post.frontmatter.canonicalLink && (
-                      <span>
-                        {` `}
-                        (originally published at
+                      {post.frontmatter.author.id}
+                    </span>
+                  </h4>
+                </Link>
+                <BioLine>{post.frontmatter.author.bio}</BioLine>
+                <BioLine>
+                  {post.timeToRead} min read · {post.frontmatter.date}
+                  {post.frontmatter.canonicalLink && (
+                    <span>
+                      {` `}
+                      (originally published at
+                      {` `}
+                      <a href={post.frontmatter.canonicalLink}>
+                        {post.fields.publishedAt}
+                      </a>
+                      )
+                    </span>
+                  )}
+                </BioLine>
+              </div>
+            </section>
+            <h1
+              sx={{
+                marginTop: 0,
+                order: 0,
+                letterSpacing: `tight`,
+                lineHeight: `dense`,
+                fontSize: [6, 7, 8, 9, 11],
+                [mediaQueries.lg]: {
+                  mb: 8,
+                },
+              }}
+            >
+              {post.frontmatter.title}
+            </h1>
+            {post.frontmatter.image &&
+              post.frontmatter.showImageInArticle !== false && (
+                <div
+                  sx={{
+                    mt: 8,
+                    mb: 12,
+                    [mediaQueries.lg]: {
+                      ml: `-8em`,
+                    },
+                  }}
+                >
+                  <Img fluid={post.frontmatter.image.childImageSharp.fluid} />
+                  {post.frontmatter.imageAuthor &&
+                    post.frontmatter.imageAuthorLink && (
+                      <em>
+                        Image by
                         {` `}
-                        <a href={post.frontmatter.canonicalLink}>
-                          {post.fields.publishedAt}
+                        <a href={post.frontmatter.imageAuthorLink}>
+                          {post.frontmatter.imageAuthor}
                         </a>
-                        )
-                      </span>
+                      </em>
                     )}
-                  </BioLine>
                 </div>
-              </section>
-              <h1
-                sx={{
-                  marginTop: 0,
-                  order: 0,
-                  letterSpacing: `tight`,
-                  lineHeight: `dense`,
-                  fontSize: [6, 7, 8, 9, 11],
-                  [mediaQueries.lg]: {
-                    mb: 8,
-                  },
-                }}
-              >
-                {post.frontmatter.title}
-              </h1>
-              {post.frontmatter.image &&
-                post.frontmatter.showImageInArticle !== false && (
-                  <div
-                    sx={{
-                      mt: 8,
-                      mb: 12,
-                      [mediaQueries.lg]: {
-                        ml: `-8em`,
-                      },
-                    }}
-                  >
-                    <Img fluid={post.frontmatter.image.childImageSharp.fluid} />
-                    {post.frontmatter.imageAuthor &&
-                      post.frontmatter.imageAuthorLink && (
-                        <em>
-                          Image by
-                          {` `}
-                          <a href={post.frontmatter.imageAuthorLink}>
-                            {post.frontmatter.imageAuthor}
-                          </a>
-                        </em>
-                      )}
-                  </div>
-                )}
-            </div>
-            <section className="post-body">
-              <MDXRenderer>{post.body}</MDXRenderer>
-            </section>
-            <TagsSection tags={post.frontmatter.tags} />
-            <EmailCaptureForm />
-          </main>
+              )}
+          </div>
+          <section className="post-body">
+            <MDXRenderer>{post.body}</MDXRenderer>
+          </section>
+          <TagsSection tags={post.frontmatter.tags} />
+          <EmailCaptureForm />
+        </main>
+      </Container>
+      <div
+        sx={{
+          borderTop: t => `1px solid ${t.colors.ui.border}`,
+          mt: 9,
+          [mediaQueries.md]: { pt: 5 },
+          [mediaQueries.lg]: { pt: 7 },
+        }}
+      >
+        <Container>
+          <PrevAndNext prev={prev} next={next} />
         </Container>
-        <div
-          sx={{
-            borderTop: t => `1px solid ${t.colors.ui.border}`,
-            mt: 9,
-            [mediaQueries.md]: { pt: 5 },
-            [mediaQueries.lg]: { pt: 7 },
-          }}
-        >
-          <Container>
-            <PrevAndNext prev={prev} next={next} />
-          </Container>
-          <FooterLinks />
-        </div>
-      </>
-    )
-  }
+        <FooterLinks />
+      </div>
+    </>
+  )
 }
 
-export default BlogPostTemplate
-
 export const pageQuery = graphql`
   query($slug: String!) {
     mdx(fields: { slug: { eq: $slug } }) {

www/src/templates/template-creator-details.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 import Link from "../components/localized-link"
 import Img from "gatsby-image"
@@ -58,188 +58,179 @@ const MetaSection = ({ children, background, last, first }) => (
   </div>
 )
 
-class CreatorTemplate extends Component {
-  render() {
-    const { data } = this.props
-    const creator = data.creatorsYaml
-    const isAgencyOrCompany =
-      creator.type === `agency` || creator.type === `company`
+export default function CreatorTemplate({ data }) {
+  const creator = data.creatorsYaml
+  const isAgencyOrCompany =
+    creator.type === `agency` || creator.type === `company`
 
-    const sites = data.allSitesYaml.nodes
+  const sites = data.allSitesYaml.nodes
 
-    return (
-      <React.Fragment>
-        <PageMetadata
-          title={`${creator.name} - Creator`}
-          description={creator.description}
-        />
-        <CreatorsHeader submissionText="Add Yourself" />
-        <main
-          role="main"
+  return (
+    <React.Fragment>
+      <PageMetadata
+        title={`${creator.name} - Creator`}
+        description={creator.description}
+      />
+      <CreatorsHeader submissionText="Add Yourself" />
+      <main
+        role="main"
+        sx={{
+          p: 6,
+          pb: `10vh`,
+          display: `flex`,
+          flexDirection: `column`,
+          alignItems: `center`,
+          justifyContent: `center`,
+          width: `100%`,
+          [breakpoint2Columns]: {
+            pb: 6,
+            flexDirection: `row`,
+            alignItems: `flex-start`,
+          },
+        }}
+      >
+        <div
           sx={{
-            p: 6,
-            pb: `10vh`,
-            display: `flex`,
-            flexDirection: `column`,
-            alignItems: `center`,
-            justifyContent: `center`,
+            m: 6,
+            mb: 1,
+            flexGrow: `1`,
             width: `100%`,
             [breakpoint2Columns]: {
-              pb: 6,
-              flexDirection: `row`,
-              alignItems: `flex-start`,
+              width: `auto`,
+              maxWidth: 480,
+            },
+            [mediaQueries.lg]: {
+              maxWidth: 560,
             },
           }}
         >
+          <Img
+            alt={`${creator.name}`}
+            sx={{ borderRadius: 1 }}
+            fluid={creator.image.childImageSharp.fluid}
+          />
+        </div>
+        <div
+          sx={{
+            m: 6,
+            flex: `1`,
+            width: `100%`,
+            [mediaQueries.lg]: {
+              width: `auto`,
+              maxWidth: 640,
+            },
+          }}
+        >
+          <h1 sx={{ m: 0 }}>{creator.name}</h1>
           <div
-            sx={{
-              m: 6,
-              mb: 1,
-              flexGrow: `1`,
-              width: `100%`,
-              [breakpoint2Columns]: {
-                width: `auto`,
-                maxWidth: 480,
-              },
-              [mediaQueries.lg]: {
-                maxWidth: 560,
-              },
-            }}
-          >
-            <Img
-              alt={`${creator.name}`}
-              sx={{ borderRadius: 1 }}
-              fluid={creator.image.childImageSharp.fluid}
-            />
-          </div>
-          <div
-            sx={{
-              m: 6,
-              flex: `1`,
-              width: `100%`,
-              [mediaQueries.lg]: {
-                width: `auto`,
-                maxWidth: 640,
-              },
+            css={{
+              alignItems: `center`,
+              display: `flex`,
+              mt: 3,
             }}
           >
-            <h1 sx={{ m: 0 }}>{creator.name}</h1>
-            <div
-              css={{
-                alignItems: `center`,
-                display: `flex`,
-                mt: 3,
-              }}
-            >
-              {isAgencyOrCompany && (
-                <span
-                  sx={{
-                    color: `textMuted`,
-                    mr: 2,
-                  }}
-                >
-                  {creator.type.charAt(0).toUpperCase() + creator.type.slice(1)}
-                </span>
-              )}
+            {isAgencyOrCompany && (
+              <span
+                sx={{
+                  color: `textMuted`,
+                  mr: 2,
+                }}
+              >
+                {creator.type.charAt(0).toUpperCase() + creator.type.slice(1)}
+              </span>
+            )}
 
-              {creator.for_hire || creator.hiring ? (
-                <div
-                  sx={{
-                    alignSelf: `flex-start`,
-                    fontSize: 1,
-                    mr: 2,
-                  }}
-                >
-                  <Badge
-                    forHire={creator.for_hire}
-                    overrideCSS={{
-                      background: `green.50`,
-                      color: `white`,
-                    }}
-                  >
-                    {creator.for_hire ? `Open for work` : `Hiring`}
-                  </Badge>
-                </div>
-              ) : null}
-              {creator.github && (
-                <a
-                  href={creator.github}
-                  sx={{
-                    "& svg": { display: `block` },
-                    "&&": {
-                      border: 0,
-                      lineHeight: `solid`,
-                      "&:hover": {
-                        color: `gatsby`,
-                      },
-                    },
+            {creator.for_hire || creator.hiring ? (
+              <div
+                sx={{
+                  alignSelf: `flex-start`,
+                  fontSize: 1,
+                  mr: 2,
+                }}
+              >
+                <Badge
+                  forHire={creator.for_hire}
+                  overrideCSS={{
+                    background: `green.50`,
+                    color: `white`,
                   }}
                 >
-                  <GithubIcon />
-                </a>
-              )}
-            </div>
-            <div sx={{ py: 6 }}>{creator.description}</div>
-            <MetaSection first>
-              <MetaTitle>Get in touch</MetaTitle>
+                  {creator.for_hire ? `Open for work` : `Hiring`}
+                </Badge>
+              </div>
+            ) : null}
+            {creator.github && (
               <a
-                href={creator.website}
-                target="_blank"
-                rel="noopener noreferrer"
+                href={creator.github}
+                sx={{
+                  "& svg": { display: `block` },
+                  "&&": {
+                    border: 0,
+                    lineHeight: `solid`,
+                    "&:hover": {
+                      color: `gatsby`,
+                    },
+                  },
+                }}
               >
-                {removeProtocol(creator.website)}
+                <GithubIcon />
               </a>
-            </MetaSection>
-            <MetaSection>
-              <MetaTitle>From</MetaTitle>
-              <p sx={{ m: 0 }}>{creator.location}</p>
-            </MetaSection>
-            {creator.portfolio === true && sites.length > 0 && (
-              <MetaSection background="transparent" last>
-                <MetaTitle>Worked On</MetaTitle>
-                <div
-                  css={{
-                    display: `flex`,
-                    alignItems: `flex-start`,
-                    flexWrap: `wrap`,
-                  }}
-                >
-                  {sites.map(site => (
-                    <Link
-                      key={site.title}
-                      sx={{
-                        "&&": {
-                          mr: 6,
-                          mb: 6,
-                          borderBottom: `none`,
-                          lineHeight: 0,
-                          transition: `default`,
-                        },
-                      }}
-                      to={site.fields.slug}
-                    >
-                      <Img
-                        alt={`${site.title}`}
-                        fixed={
-                          site.childScreenshot.screenshotFile.childImageSharp
-                            .fixed
-                        }
-                      />
-                    </Link>
-                  ))}
-                </div>
-              </MetaSection>
             )}
           </div>
-        </main>
-        <FooterLinks />
-      </React.Fragment>
-    )
-  }
+          <div sx={{ py: 6 }}>{creator.description}</div>
+          <MetaSection first>
+            <MetaTitle>Get in touch</MetaTitle>
+            <a href={creator.website} target="_blank" rel="noopener noreferrer">
+              {removeProtocol(creator.website)}
+            </a>
+          </MetaSection>
+          <MetaSection>
+            <MetaTitle>From</MetaTitle>
+            <p sx={{ m: 0 }}>{creator.location}</p>
+          </MetaSection>
+          {creator.portfolio === true && sites.length > 0 && (
+            <MetaSection background="transparent" last>
+              <MetaTitle>Worked On</MetaTitle>
+              <div
+                css={{
+                  display: `flex`,
+                  alignItems: `flex-start`,
+                  flexWrap: `wrap`,
+                }}
+              >
+                {sites.map(site => (
+                  <Link
+                    key={site.title}
+                    sx={{
+                      "&&": {
+                        mr: 6,
+                        mb: 6,
+                        borderBottom: `none`,
+                        lineHeight: 0,
+                        transition: `default`,
+                      },
+                    }}
+                    to={site.fields.slug}
+                  >
+                    <Img
+                      alt={`${site.title}`}
+                      fixed={
+                        site.childScreenshot.screenshotFile.childImageSharp
+                          .fixed
+                      }
+                    />
+                  </Link>
+                ))}
+              </div>
+            </MetaSection>
+          )}
+        </div>
+      </main>
+      <FooterLinks />
+    </React.Fragment>
+  )
 }
 
-export default CreatorTemplate
-
 export const pageQuery = graphql`
   query($slug: String!, $name: String!) {
     creatorsYaml(fields: { slug: { eq: $slug } }) {

www/src/templates/template-feature-comparison.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import { Component } from "react"
 import { css } from "@emotion/core"
 import PageWithSidebar from "../components/page-with-sidebar"
 import PageMetadata from "../components/page-metadata"
@@ -16,66 +15,58 @@ import { getFeaturesData } from "../utils/get-csv-features-data"
 
 import { graphql } from "gatsby"
 
-class FeatureComparison extends Component {
-  render() {
-    const {
-      pageContext: { options, featureType },
-      location,
-      data,
-    } = this.props
-    const optionsDisplay = options.map(o => o.display)
-    const titleString = `Comparison of Gatsby vs ${optionsDisplay.join(` vs `)}`
+export default function FeatureComparison({ pageContext, location, data }) {
+  const { options, featureType } = pageContext
+  const optionsDisplay = options.map(o => o.display)
+  const titleString = `Comparison of Gatsby vs ${optionsDisplay.join(` vs `)}`
 
-    const { sections, sectionHeaders } =
-      featureType === `cms`
-        ? getFeaturesData(data.allGatsbyCmsSpecsCsv.nodes)
-        : getFeaturesData(data.allGatsbyJamstackSpecsCsv.nodes)
+  const { sections, sectionHeaders } =
+    featureType === `cms`
+      ? getFeaturesData(data.allGatsbyCmsSpecsCsv.nodes)
+      : getFeaturesData(data.allGatsbyJamstackSpecsCsv.nodes)
 
-    return (
-      <PageWithSidebar location={location}>
-        <PageMetadata title={titleString} />
-        <Container>
-          <main>
-            <Breadcrumb location={location} />
-            <h1>{titleString}</h1>
-            {options.map(o => (
-              <section key={o.key} sx={{ mb: 6 }}>
-                <h2
+  return (
+    <PageWithSidebar location={location}>
+      <PageMetadata title={titleString} />
+      <Container>
+        <main>
+          <Breadcrumb location={location} />
+          <h1>{titleString}</h1>
+          {options.map(o => (
+            <section key={o.key} sx={{ mb: 6 }}>
+              <h2
+                css={css`
+                  display: flex;
+                  align-items: center;
+                `}
+              >
+                <img
+                  src={LogoDictionary[o.key]}
                   css={css`
-                    display: flex;
-                    align-items: center;
+                    height: 25px;
+                    margin-bottom: 0;
+                    margin-right: 10px;
                   `}
-                >
-                  <img
-                    src={LogoDictionary[o.key]}
-                    css={css`
-                      height: 25px;
-                      margin-bottom: 0;
-                      margin-right: 10px;
-                    `}
-                  />
-                  {o.display}
-                </h2>
-                {o.description}
-              </section>
-            ))}
-            <LegendTable />
-            <EvaluationTable
-              options={options}
-              sections={sections}
-              sectionHeaders={sectionHeaders}
-            />
-          </main>
-          <FeaturesFooter />
-          <FooterLinks />
-        </Container>
-      </PageWithSidebar>
-    )
-  }
+                />
+                {o.display}
+              </h2>
+              {o.description}
+            </section>
+          ))}
+          <LegendTable />
+          <EvaluationTable
+            options={options}
+            sections={sections}
+            sectionHeaders={sectionHeaders}
+          />
+        </main>
+        <FeaturesFooter />
+        <FooterLinks />
+      </Container>
+    </PageWithSidebar>
+  )
 }
 
-export default FeatureComparison
-
 export const pageQuery = graphql`
   query {
     allGatsbyCmsSpecsCsv {

www/src/views/creators/creators-header.js

@@ -1,79 +1,75 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import { Component } from "react"
 import Link from "../../components/localized-link"
 import Button from "../../components/button"
 import { MdArrowForward as ArrowForwardIcon } from "react-icons/md"
 
-class CreatorsHeader extends Component {
-  render() {
-    const { /*forHire, hiring,*/ submissionText } = this.props
-    return (
-      <div
-        sx={{
-          alignItems: `center`,
-          backgroundColor: `navigation.background`,
-          borderBottom: t => `1px solid ${t.colors.ui.border}`,
+export default function CreatorsHeader({
+  /*forHire, hiring, */ submissionText,
+}) {
+  return (
+    <div
+      sx={{
+        alignItems: `center`,
+        backgroundColor: `navigation.background`,
+        borderBottom: t => `1px solid ${t.colors.ui.border}`,
+        display: `flex`,
+        flexDirection: `row`,
+        fontFamily: `heading`,
+        height: `headerHeight`,
+        px: 6,
+        zIndex: `2`,
+      }}
+    >
+      <h1
+        css={{
           display: `flex`,
-          flexDirection: `row`,
-          fontFamily: `heading`,
-          height: `headerHeight`,
-          px: 6,
-          zIndex: `2`,
+          height: `100%`,
+          margin: 0,
         }}
       >
-        <h1
-          css={{
-            display: `flex`,
-            height: `100%`,
-            margin: 0,
+        <Link
+          to="/creators/"
+          state={{ filter: `` }}
+          sx={{
+            alignSelf: `center`,
+            "&&": {
+              borderBottom: `none`,
+              color: `gatsby`,
+              fontSize: 4,
+              mr: 3,
+              "&:hover": {
+                backgroundColor: `initial`,
+              },
+            },
           }}
         >
-          <Link
-            to="/creators/"
-            state={{ filter: `` }}
-            sx={{
-              alignSelf: `center`,
-              "&&": {
-                borderBottom: `none`,
-                color: `gatsby`,
-                fontSize: 4,
-                mr: 3,
-                "&:hover": {
-                  backgroundColor: `initial`,
-                },
-              },
-            }}
-          >
-            Creators
-          </Link>
-        </h1>
+          Creators
+        </Link>
+      </h1>
+      <div
+        className="creators--filters"
+        css={{
+          display: `flex`,
+          flex: `2`,
+        }}
+      >
         <div
-          className="creators--filters"
           css={{
+            alignItems: `center`,
             display: `flex`,
-            flex: `2`,
+            marginLeft: `auto`,
           }}
         >
-          <div
-            css={{
-              alignItems: `center`,
-              display: `flex`,
-              marginLeft: `auto`,
-            }}
+          <Button
+            variant="small"
+            to="/contributing/submit-to-creator-showcase/"
+            icon={<ArrowForwardIcon />}
           >
-            <Button
-              variant="small"
-              to="/contributing/submit-to-creator-showcase/"
-              icon={<ArrowForwardIcon />}
-            >
-              {submissionText}
-            </Button>
-          </div>
+            {submissionText}
+          </Button>
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
-
-export default CreatorsHeader