diff --git a/www/gatsby-config.js b/www/gatsby-config.js
index 2f0e17df4e713..cb79cbfc6baf3 100644
--- a/www/gatsby-config.js
+++ b/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: {
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
index cea8d8701bc8c..86f9ba09e869a 100644
--- a/www/gatsby-node.js
+++ b/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
\ No newline at end of file
diff --git a/www/package.json b/www/package.json
index d9904721dba53..60f9a3e0a2cae 100644
--- a/www/package.json
+++ b/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"
}
-}
+}
\ No newline at end of file
diff --git a/www/src/assets/featured-sites-icons.svg b/www/src/assets/featured-sites-icons.svg
new file mode 100644
index 0000000000000..c9ef131285fc6
--- /dev/null
+++ b/www/src/assets/featured-sites-icons.svg
@@ -0,0 +1,24 @@
+
+
\ No newline at end of file
diff --git a/www/src/components/layout.js b/www/src/components/layout.js
index 7dda87a181cee..395ae0db11b07 100644
--- a/www/src/components/layout.js
+++ b/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 {
-