feat(www): Rename community section to creators (gatsbyjs#10312)

Currently `/community` redirects to `/docs/community/`. This PR changes it to be namespaced under `creators`.

Since this wasn't formally launched (and I still can't track down what happened there), I don't see a need to do redirects (for the individual creator pages). Thoughts?

CODEOWNERS

@@ -17,6 +17,8 @@ appveyor.yml                                    @gatsbyjs/core
 
 # The ecosystem files are error-prone, so we require an extra set of eyes on them.
 /docs/*                                         @gatsbyjs/ecosystem
+/docs/creators/*                                @gatsbyjs/ecosystem
+/docs/creators/images/*                         @gatsbyjs/ecosystem
 
 # The website auto-deploys, so we need an extra check to avoid shenanigans.
 /www/                                           @gatsbyjs/website

docs/docs/submit-to-creator-showcase.md

@@ -2,15 +2,15 @@
 title: Submit to Creator Showcase
 ---
 
-Want to be a part of the [Creator Showcase](/showcase)? Follow these instructions.
+Want to be a part of the [Creator Showcase](/creators)? Follow these instructions.
 
 ## Steps
 
 There are only two major steps :)
 
 1.  If this is your first contribution to the Gatsby open source repo, follow the [Contribution guidelines](/docs/how-to-contribute/#contributing-to-the-repo).
 
-2.  Upload a photo of yourself or a logo of your company/agency to [`this directory`](https://github.com/gatsbyjs/gatsby/tree/master/docs/community/images). Images should have a square aspect ratio with 500px minimum (eg 500px X 500px) to 1000px maximum resolution and should carry the same name as what you put in the name field on creators.yml, but with a dash instead of spaces.
+2.  Upload a photo of yourself or a logo of your company/agency to [`this directory`](https://github.com/gatsbyjs/gatsby/tree/master/docs/creators/images). Images should have a square aspect ratio with 500px minimum (eg 500px X 500px) to 1000px maximum resolution and should carry the same name as what you put in the name field on creators.yml, but with a dash instead of spaces.
 
     For example,
 
@@ -22,9 +22,9 @@ There are only two major steps :)
 
     **image name should be,** _iron-cove-solutions.jpg_
 
-3.  Edit the [`creators.yml`](https://github.com/gatsbyjs/gatsby/blob/master/docs/community/creators.yml) file by adding your submission to the bottom of the list of sites in the following format:
+3.  Edit the [`creators.yml`](https://github.com/gatsbyjs/gatsby/blob/master/docs/creators/creators.yml) file by adding your submission to the bottom of the list of sites in the following format:
 
-```yaml:title=docs/community/creators.yml
+```yaml:title=docs/creators/creators.yml
 - name: Your Name
 
   # You can choose one of three `types`: agency, company, or individual
@@ -48,7 +48,7 @@ There are only two major steps :)
 
 Use the following template to ensure required fields are filled:
 
-```yaml:title=docs/community/creators.yml
+```yaml:title=docs/creators/creators.yml
 - name: (required)
   type: (required - agency, company, or individual)
   image: (required - images/{filename}.{ext})

www/gatsby-node.js

@@ -594,7 +594,7 @@ exports.onCreateNode = ({ node, actions, getNode, reporter }) => {
     }
   }
 
-  // Community/Creators Pages
+  // Creator pages
   else if (node.internal.type === `CreatorsYaml`) {
     const validTypes = {
       individual: `people`,
@@ -609,12 +609,12 @@ exports.onCreateNode = ({ node, actions, getNode, reporter }) => {
         }” was provided for ${node.name}.`
       )
     }
-    slug = `/community/${validTypes[node.type]}/${slugify(node.name, {
+    slug = `/creators/${validTypes[node.type]}/${slugify(node.name, {
       lower: true,
     })}`
     createNodeField({ node, name: `slug`, value: slug })
   }
-  // end Community/Creators Pages
+  // end Creator pages
   return null
 }
 

www/src/pages/community/agencies.js → www/src/pages/creators/agencies.js

@@ -1,11 +1,11 @@
 import React, { Component } from "react"
 import { graphql } from "gatsby"
-import CommunityView from "../../views/community"
+import CreatorsView from "../../views/creators"
 
 class AgenciesPage extends Component {
   render() {
     const { location, data } = this.props
-    return <CommunityView location={location} data={data} title={`Agencies`} />
+    return <CreatorsView location={location} data={data} title={`Agencies`} />
   }
 }
 

www/src/pages/community/companies.js → www/src/pages/creators/companies.js

@@ -1,11 +1,11 @@
 import React, { Component } from "react"
 import { graphql } from "gatsby"
-import CommunityView from "../../views/community"
+import CreatorsView from "../../views/creators"
 
 class CompaniesPage extends Component {
   render() {
     const { location, data } = this.props
-    return <CommunityView data={data} location={location} title={`Companies`} />
+    return <CreatorsView data={data} location={location} title={`Companies`} />
   }
 }
 

www/src/pages/community/index.js → www/src/pages/creators/index.js

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

www/src/pages/community/people.js → www/src/pages/creators/people.js

@@ -1,11 +1,11 @@
 import React, { Component } from "react"
 import { graphql } from "gatsby"
-import CommunityView from "../../views/community"
+import CreatorsView from "../../views/creators"
 
 class PeoplePage extends Component {
   render() {
     const { location, data } = this.props
-    return <CommunityView data={data} location={location} title={`People`} />
+    return <CreatorsView data={data} location={location} title={`People`} />
   }
 }
 

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

@@ -4,8 +4,8 @@ import Layout from "../components/layout"
 import Helmet from "react-helmet"
 import typography, { rhythm, scale, options } from "../utils/typography"
 import Img from "gatsby-image"
-import CommunityHeader from "../views/community/community-header"
-import Badge from "../views/community/badge"
+import CreatorsHeader from "../views/creators/creators-header"
+import Badge from "../views/creators/badge"
 import presets, { colors } from "../utils/presets"
 import GithubIcon from "react-icons/lib/go/mark-github"
 
@@ -83,7 +83,7 @@ class CreatorTemplate extends Component {
         <Helmet>
           <title>{creator.name}</title>
         </Helmet>
-        <CommunityHeader submissionText="Add Yourself" />
+        <CreatorsHeader submissionText="Add Yourself" />
         <main
           role="main"
           css={{

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

@@ -6,7 +6,7 @@ import Checkmark from "./check.svg"
 import Button from "../../components/button"
 import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
 
-// const CommunityHeaderLink = ({ linkTo, children }) => (
+// const CreatorsHeaderLink = ({ linkTo, children }) => (
 //   <li
 //     css={{
 //       display: `flex`,
@@ -22,15 +22,15 @@ import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
 //         color: `white`,
 //       }}
 //       css={{
-//         ...styles.communityHeaderLink,
+//         ...styles.CreatorsHeaderLink,
 //       }}
 //     >
 //       {children}
 //     </Link>
 //   </li>
 // )
 
-class CommunityHeader extends Component {
+class CreatorsHeader extends Component {
   render() {
     const { /*forHire, hiring,*/ submissionText } = this.props
     return (
@@ -40,7 +40,7 @@ class CommunityHeader extends Component {
         }}
       >
         <Link
-          to="/community/"
+          to="/creators/"
           state={{ filter: `` }}
           css={{
             ...styles.creatorsLink,
@@ -59,19 +59,19 @@ class CommunityHeader extends Component {
             },
           }}
         >
-          <CommunityHeaderLink linkTo="/community/">All</CommunityHeaderLink>
-          <CommunityHeaderLink linkTo="/community/people/">
+          <CreatorsHeaderLink linkTo="/creators/">All</CreatorsHeaderLink>
+          <CreatorsHeaderLink linkTo="/creators/people/">
             People
-          </CommunityHeaderLink>
-          <CommunityHeaderLink linkTo="/community/agencies/">
+          </CreatorsHeaderLink>
+          <CreatorsHeaderLink linkTo="/creators/agencies/">
             Agencies
-          </CommunityHeaderLink>
-          <CommunityHeaderLink linkTo="/community/companies/">
+          </CreatorsHeaderLink>
+          <CreatorsHeaderLink linkTo="/creators/companies/">
             Companies
-          </CommunityHeaderLink>
+          </CreatorsHeaderLink>
         </nav> */}
         <div
-          className="community--filters"
+          className="creators--filters"
           css={{
             display: `flex`,
             flex: `2`,
@@ -130,7 +130,7 @@ class CommunityHeader extends Component {
   }
 }
 
-export default CommunityHeader
+export default CreatorsHeader
 
 const styles = {
   header: {
@@ -162,7 +162,7 @@ const styles = {
       },
     },
   },
-  communityHeaderLink: {
+  CreatorsHeaderLink: {
     "&&": {
       ...scale(-1 / 3),
       lineHeight: 1,

www/src/views/community/index.js → www/src/views/creators/index.js

@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import Helmet from "react-helmet"
 import typography, { rhythm, scale } from "../../utils/typography"
 import Layout from "../../components/layout"
-import CommunityHeader from "./community-header"
+import CreatorsHeader from "./creators-header"
 import Badge from "./badge"
 import GithubIcon from "react-icons/lib/go/mark-github"
 import { navigate } from "gatsby"
@@ -12,7 +12,7 @@ import ThumbnailLink from "../shared/thumbnail"
 import EmptyGridItems from "../shared/empty-grid-items"
 import sharedStyles from "../shared/styles"
 
-class CommunityView extends Component {
+class CreatorsView extends Component {
   state = {
     creators: this.props.data.allCreatorsYaml.edges,
     for_hire: false,
@@ -100,7 +100,7 @@ class CommunityView extends Component {
         <Helmet>
           <title>{title}</title>
         </Helmet>
-        <CommunityHeader
+        <CreatorsHeader
           applyFilter={filter => applyFilter(filter)}
           forHire={this.state.for_hire}
           hiring={this.state.hiring}
@@ -131,7 +131,7 @@ class CommunityView extends Component {
               <p css={{ color: colors.gatsby }}>No results</p>
             ) : (
               creators.map(item => (
-                <div key={item.node.name} css={styles.showcaseItem}>
+                <div key={item.node.name} css={styles.creatorCard}>
                   <ThumbnailLink
                     slug={item.node.fields.slug}
                     image={item.node.image}
@@ -176,18 +176,18 @@ class CommunityView extends Component {
                 </div>
               ))
             )}
-            {creators.length && <EmptyGridItems styles={styles.showcaseItem} />}
+            {creators.length && <EmptyGridItems styles={styles.creatorCard} />}
           </div>
         </main>
       </Layout>
     )
   }
 }
 
-export default CommunityView
+export default CreatorsView
 
 const styles = {
-  showcaseItem: {
+  creatorCard: {
     display: `flex`,
     flexDirection: `column`,
     margin: rhythm(3 / 4),