[WIP] Starter Showcase PR

www/gatsby-config.js

@@ -28,6 +28,17 @@ module.exports = {
         path: `${__dirname}/../packages/`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `StarterShowcaseData`,
+        path: `${__dirname}/src/data/StarterShowcase`,
+      },
+    },
+    {
+      resolve: `gatsby-plugin-create-client-paths`,
+      options: { prefixes: [`/starter-showcase/*`] },
+    },
     {
       resolve: `gatsby-plugin-typography`,
       options: {

www/gatsby-node.js

@@ -83,6 +83,9 @@ exports.createPages = ({ graphql, actions }) => {
                   fields {
                     slug
                     package
+                    starterShowcase {
+                      slug
+                    }
                   }
                   frontmatter {
                     title
@@ -181,6 +184,29 @@ exports.createPages = ({ graphql, actions }) => {
           })
         })
 
+
+        // Create starters.
+        const starters = _.filter(
+          result.data.allMarkdownRemark.edges,
+          edge => {
+            const slug = _.get(edge, `node.fields.starterShowcase.slug`)
+            if (!slug) return null
+            else return edge
+          }
+        )
+        const starterTemplate = path.resolve(`src/templates/template-starter-showcase.js`)
+
+        starters.forEach((edge, index) => {
+          createPage({
+            path: `/starters${edge.node.fields.starterShowcase.slug}`, // required
+            component: slash(starterTemplate),
+            context: {
+              slug: edge.node.fields.starterShowcase.slug,
+            },
+          })
+        })
+        // END Create starters.
+
         // Create docs pages.
         result.data.allMarkdownRemark.edges.forEach(edge => {
           const slug = _.get(edge, `node.fields.slug`)
@@ -230,7 +256,7 @@ exports.createPages = ({ graphql, actions }) => {
 }
 
 // Create slugs for files.
-exports.onCreateNode = ({ node, actions, getNode }) => {
+exports.onCreateNode = ({ node, actions, getNode, boundActionCreators }) => {
   const { createNodeField } = actions
   let slug
   if (node.internal.type === `File`) {
@@ -276,14 +302,22 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
       })
       createNodeField({ node, name: `package`, value: true })
     }
+    if (
+      fileNode.sourceInstanceName === `StarterShowcaseData` &&
+      parsedFilePath.name !== `README`
+    ) {
+      createNodesForStarterShowcase({ node, getNode, createNodeField })
+    }
     if (slug) {
       createNodeField({ node, name: `anchor`, value: slugToAnchor(slug) })
       createNodeField({ node, name: `slug`, value: slug })
     }
+
   } else if (node.internal.type === `AuthorYaml`) {
     slug = `/contributors/${slugify(node.id)}/`
     createNodeField({ node, name: `slug`, value: slug })
   }
+
 }
 
 exports.onPostBuild = () => {
@@ -292,3 +326,47 @@ exports.onPostBuild = () => {
     `./public/gatsbygram.mp4`
   )
 }
+
+// Starter Showcase related code
+const { createFilePath } = require(`gatsby-source-filesystem`)
+const gitFolder = './src/data/StarterShowcase/generatedGithubData'
+function createNodesForStarterShowcase({ node, getNode, createNodeField }) {
+  if (node.internal.type === `MarkdownRemark`) {
+    const slug = createFilePath({
+      node,
+      getNode,
+      basePath: `startersData`,
+    })
+    // preprocessing
+    const stub = slug.replace(/\//gi, '')
+    var fromPath = path.join(gitFolder, `${stub}.json`)
+    var data = fs.readFileSync(fromPath, 'utf8')
+    const ghdata = JSON.parse(data)
+    const { repoMetadata, dependencies = [], devDependencies = [] } = ghdata
+    const allDependencies = Object.entries(dependencies).concat(
+      Object.entries(devDependencies)
+    )
+    // make an object to stick into a Field
+    const starterShowcaseFields = {
+      slug,
+      stub,
+      date: new Date(node.frontmatter.date),
+      githubData: ghdata,
+      // nice-to-have destructures of githubData
+      description: ghdata.description,
+      stars: repoMetadata.stargazers_count,
+      lastUpdated: repoMetadata.created_at,
+      owner: repoMetadata.owner,
+      githubFullName: repoMetadata.full_name,
+      allDependencies,
+      gatsbyDependencies: allDependencies
+        .filter(
+          ([key, _]) => !['gatsby', 'gatsby-cli', 'gatsby-link'].includes(key)
+        )
+        .filter(([key, _]) => key.includes('gatsby')),
+      miscDependencies: allDependencies.filter(([key, _]) => !key.includes('gatsby')),
+    }
+    createNodeField({ node, name: `starterShowcase`, value: starterShowcaseFields })
+  }
+}
+// End Starter Showcase related code

www/package.json

@@ -10,6 +10,7 @@
     "gatsby-image": "next",
     "gatsby-plugin-canonical-urls": "next",
     "gatsby-plugin-catch-links": "next",
+    "gatsby-plugin-create-client-paths": "^1.0.8",
     "gatsby-plugin-feed": "next",
     "gatsby-plugin-fullstory": "^1.0.4-5",
     "gatsby-plugin-glamor": "next",
@@ -46,6 +47,8 @@
     "lodash": "^4.17.5",
     "mitt": "^1.1.3",
     "parse-filepath": "^1.0.2",
+    "prismjs": "^1.14.0",
+    "query-string": "^6.1.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
@@ -70,6 +73,13 @@
     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
     "develop": "gatsby develop",
     "serve": "gatsby serve",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "scrapeStarters": "cd src/data/StarterShowcase && node scraper.js"
+  },
+  "devDependencies": {
+    "front-matter": "^2.3.0",
+    "get-package-json-from-github": "^1.2.1",
+    "github-api": "^3.0.0",
+    "webshot": "^0.18.0"
   }
-}
+}

www/src/components/layout.js

@@ -19,7 +19,10 @@ import "typeface-space-mono"
 
 class DefaultLayout extends React.Component {
   render() {
-    const isHomepage = this.props.location.pathname === `/`
+    const { location = {
+      pathname: '/starter-showcase'
+    } } = this.props // location will be undefined if on 'starter-showcase'
+    const isHomepage = location.pathname === `/`
 
     // SEE: template-docs-markdown for why this.props.isSidebarDisabled is here
     const isSidebarDisabled = this.props.isSidebarDisabled || !this.props.sidebarYaml
@@ -32,11 +35,11 @@ class DefaultLayout extends React.Component {
           <meta name="og:site_name" content="GatsbyJS" />
           <link
             rel="canonical"
-            href={`https://gatsbyjs.org${this.props.location.pathname}`}
+            href={`https://gatsbyjs.org${location.pathname}`}
           />
           <html lang="en" />
         </Helmet>
-        <Navigation pathname={this.props.location.pathname} />
+        <Navigation pathname={location.pathname} />
         <div
           className={`main-body`}
           css={{

www/src/components/package-readme.js

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import Helmet from "react-helmet"
-
+import { Link } from "gatsby"
 import { colors } from "../utils/presets"
 import Container from "../components/container"
 import MarkdownPageFooter from "../components/markdown-page-footer"
@@ -30,25 +30,27 @@ class PackageReadMe extends React.Component {
           <meta name="twitter.label1" content="Reading time" />
           <meta name="twitter:data1" content={`${timeToRead} min read`} />
         </Helmet>
-        <a
-          css={{
-            "&&": {
-              display: githubUrl ? `inline-block` : `none`,
-              fontWeight: `normal`,
-              border: 0,
-              color: colors.gray.calm,
-              boxShadow: `none`,
-              "&:hover": {
-                background: `none`,
-                color: colors.gatsby,
+        <div css={{ display: 'flex', justifyContent: 'space-between' }}>
+          <a
+            css={{
+              "&&": {
+                display: githubUrl ? `inline-block` : `none`,
+                fontWeight: `normal`,
+                border: 0,
+                color: colors.gray.calm,
+                boxShadow: `none`,
+                "&:hover": {
+                  background: `none`,
+                  color: colors.gatsby,
+                }
               },
-            },
-          }}
-          href={githubUrl}
-        >
-          <GithubIcon style={{ verticalAlign: `text-top` }} />
-        </a>
-
+            }}
+            href={githubUrl}
+          >
+            <GithubIcon style={{ verticalAlign: `text-top` }} />
+          </a>
+          {githubUrl && <Link to={`/starter-showcase?d=${packageName}`}>See starters that use this</Link>}
+        </div>
         <div
           css={{
             position: `relative`,