Plugin Library build fixes

packages/gatsby-source-npm-package-search/.gitignore

@@ -0,0 +1,4 @@
+/*.js
+!index.js
+yarn.lock
+gatsby-node.js

packages/gatsby-source-npm-package-search/.npmignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/gatsby-source-npm-package-search/README.md

@@ -0,0 +1,40 @@
+# gatsby-source-npm-package-search
+
+This plugin uses Yarn's Algolia search to import all gatsby-related package info (any package with the gatsby-component or gatsby-plugin keyword). Check back for updates to search for other npm packages based on keyword.
+
+## Install
+`npm install --save gatsby-source-npm`
+
+## How to use
+
+```javascript
+// In your gatsby-config.js
+plugins: [
+  resolve: `gatsby-source-npm`,
+  options: {
+    keywords: [`keyword1`, `keyword2`]
+  }
+]
+```
+
+## How to query
+
+You can query npm nodes like the following
+
+```graphql
+{
+  allNpmPackages{
+    edges{
+      node{
+        name
+        humanDownloadsLast30Days
+        readme{
+          childMarkdownRemark{
+            html
+          }
+        }
+      }
+    }
+  }
+}
+```

packages/gatsby-source-npm-package-search/index.js

@@ -0,0 +1 @@
+// noop

packages/gatsby-source-npm-package-search/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "gatsby-source-npm-package-search",
+  "version": "1.0.1",
+  "description": "Search gatsby plugins and pull metadata with algolia search",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore __tests__",
+    "watch": "babel -w src --out-dir . --ignore __tests__",
+    "prepublish": "cross-env NODE_ENV=production npm run build"
+  },
+  "keywords": ["gatsby"],
+  "author": "[email protected]",
+  "license": "MIT",
+  "dependencies": {
+    "algoliasearch": "^3.24.9",
+    "babel-runtime": "^6.26.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "cross-env": "^5.0.5"
+  }
+}

packages/gatsby-source-npm-package-search/src/gatsby-node.js

@@ -0,0 +1,83 @@
+const algoliasearch = require(`algoliasearch`)
+const crypto = require(`crypto`)
+
+const client = algoliasearch(`OFCNCOG2CU`, `f54e21fa3a2a0160595bb058179bfb1e`)
+var index = client.initIndex(`npm-search`)
+
+const createContentDigest = obj =>
+  crypto
+    .createHash(`md5`)
+    .update(JSON.stringify(obj))
+    .digest(`hex`)
+
+exports.sourceNodes = async (
+  { boundActionCreators, createNodeId },
+  { keywords }
+) => {
+  const { createNode } = boundActionCreators
+
+  console.log(`Grabbing local NPM packages...`)
+
+  let buildFilter = []
+
+  keywords.forEach(keyword => {
+    buildFilter.push(`keywords:${keyword}`)
+  })
+
+  const data = await index.search({
+    query: ``,
+    filters: `(${buildFilter.join(` OR `)})`,
+    hitsPerPage: 1000,
+  })
+
+  // TODO: Currently the gatsby-transformer-remark plugin
+  // has a hard time with markdown that includes
+  // images -> for now this filters out those packages
+
+  data.hits.forEach(hit => {
+    if (hit.readme.includes(`![`)) {
+      return
+    }
+
+    const parentId = createNodeId(`plugin ${hit.objectID}`)
+    console.log(parentId)
+    const readmeNode = {
+      id: createNodeId(`readme ${hit.objectID}`),
+      parent: parentId,
+      slug: `/packages/en/${hit.objectID}`,
+      children: [],
+      internal: {
+        type: `NPMPackageReadme`,
+        mediaType: `text/markdown`,
+        content: hit.readme,
+      },
+    }
+    readmeNode.internal.contentDigest = createContentDigest(readmeNode)
+    // Remove unneeded data
+    delete hit.readme
+    delete hit._highlightResult
+    delete hit.versions
+
+    const node = {
+      ...hit,
+      deprecated: `${hit.deprecated}`,
+      created: new Date(hit.created),
+      modified: new Date(hit.modified),
+      id: parentId,
+      parent: null,
+      children: [],
+      slug: `/packages/${hit.objectID}/`,
+      readme___NODE: readmeNode.id,
+      title: `${hit.objectID}`,
+      internal: {
+        type: `NPMPackage`,
+        content: hit.readme,
+      },
+    }
+    node.internal.contentDigest = createContentDigest(node)
+    createNode(readmeNode)
+    createNode(node)
+  })
+
+  return
+}

www/gatsby-config.js

@@ -8,6 +8,12 @@ module.exports = {
     "MarkdownRemark.frontmatter.author": `AuthorYaml`,
   },
   plugins: [
+    {
+      resolve: `gatsby-source-npm-package-search`,
+      options: {
+        keywords: [`gatsby-plugin`, `gatsby-component`]
+      }
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

www/gatsby-node.js

@@ -6,6 +6,11 @@ const fs = require(`fs-extra`)
 const slash = require(`slash`)
 const slugify = require(`limax`)
 
+const localPackages = `../packages`
+const localPackagesArr = []
+fs.readdirSync(localPackages).forEach(file => {
+  localPackagesArr.push(file)
+})
 // convert a string like `/some/long/path/name-of-docs/` to `name-of-docs`
 const slugToAnchor = slug =>
   slug
@@ -21,14 +26,17 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
     const contributorPageTemplate = path.resolve(
       `src/templates/template-contributor-page.js`
     )
-    const packageTemplate = path.resolve(
-      `src/templates/template-docs-packages.js`
+    const localPackageTemplate = path.resolve(
+      `src/templates/template-docs-local-packages.js`
+    )
+    const remotePackageTemplate = path.resolve(
+      `src/templates/template-docs-remote-packages.js`
     )
     // Query for markdown nodes to use in creating pages.
     resolve(
       graphql(
         `
-          {
+          query {
             allMarkdownRemark(
               sort: { order: DESC, fields: [frontmatter___date] }
               limit: 1000
@@ -57,6 +65,21 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
                 }
               }
             }
+            allNpmPackage {
+              edges {
+                node {
+                  id
+                  title
+                  readme {
+                    id
+                    childMarkdownRemark {
+                      id
+                      html
+                    }
+                  }
+                }
+              }
+            }
           }
         `
       ).then(result => {
@@ -114,7 +137,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
             createPage({
               path: `${edge.node.fields.slug}`, // required
               component: slash(
-                edge.node.fields.package ? packageTemplate : docsTemplate
+                edge.node.fields.package ? localPackageTemplate : docsTemplate
               ),
               context: {
                 slug: edge.node.fields.slug,
@@ -123,6 +146,54 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           }
         })
 
+        const allPackages = result.data.allNpmPackage.edges
+        // Create local package readme
+        // this will filter on markdownremark a lot like the blog example above
+        let allLocalPackages = _.filter(allPackages, edge => {
+          const slug = _.get(edge, `node.fields.slug`)
+          // maybe add a deprectaed variable here
+          if (!slug) return
+
+          if (_.includes(slug, `/packages/`)) {
+            return edge
+          }
+        })
+
+        allLocalPackages = allLocalPackages.forEach(edge => {
+          const slug = `/packages/${edge.node.title}/`
+
+          createPage({
+            path: slug,
+            component: slash(localPackageTemplate),
+            context: {
+              slug,
+              id: edge.node.id,
+            },
+          })
+        })
+
+        // Create remote package readme
+        // this just needs to filter the localPackagesArr out to make sure those aren't used
+        // const allRemotePackages = _.differenceWith(
+        //   allPackages, // array of objects with names at node.title
+        //   localPackagesArr, // array full of names
+        //   (package, localName) =>
+        //     _.isMatchWith(package, localName, "node.title")
+        // )
+        allPackages.forEach(edge => {
+          const slug = `/packages/${edge.node.title}/`
+          if (_.includes(localPackagesArr, edge.node.title)) return
+
+          createPage({
+            path: slug,
+            component: slash(remotePackageTemplate),
+            context: {
+              slug,
+              id: edge.node.id,
+            },
+          })
+        })
+
         return
       })
     )

www/package.json

@@ -5,6 +5,7 @@
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
     "bluebird": "^3.5.1",
+    "date-fns": "^1.29.0",
     "email-validator": "^1.1.1",
     "gatsby": "^1.9.210",
     "gatsby-image": "^1.0.39",
@@ -47,6 +48,7 @@
     "parse-filepath": "^1.0.2",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
+    "react-instantsearch": "^4.5.1",
     "slash": "^1.0.0",
     "typeface-space-mono": "^0.0.54",
     "typeface-spectral": "^0.0.54",

www/src/components/markdown-page-footer.js

@@ -91,7 +91,7 @@ export default class MarkdownPageFooter extends React.Component {
           }}
           href={`https://github.com/gatsbyjs/gatsby/blob/master/${
             this.props.packagePage ? `packages` : `docs`
-          }/${this.props.page.parent.relativePath}`}
+          }/${this.props.page ? this.props.page.parent.relativePath : ""}`}
         >
           <EditIcon css={{ fontSize: 20, position: `relative`, top: -2 }} />
           {` `}