From 652e67730afb81ba4df5af37b77e030b0f5d3e94 Mon Sep 17 00:00:00 2001
From: gillkyle <kylerobertgill@gmail.com>
Date: Tue, 6 Mar 2018 11:13:17 -0700
Subject: [PATCH] Plugin Library build fixes (#3906)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Support URLs that end in SemVer ranges (#3305)

Fixes #3164.

* page path defaults to '/' (#3325)

* page path defaults to '/'

* Add test

* Use graymatter excerpt in gatsby-transformer-remark (#2883)

* Check for graymatter excerpt

Checks to see if there is a gray-matter excerpt before returning a
pruned character count

* Fix test

Remove a variable that wasn't being used

* Create page to describe excerpts

* Update using-remark example

* Remove package-lock.json

* Remove console.log statements

* Update copy

Updates copy to be a bit more descriptive

* Update header for example page

* Begin stubbing out extend-node.js tests

Created a basic framework for creating a markdown node via the
onCreateNode function. This should be expanded to factor in the changes
that occur in the setFieldsOnGraphQLNodeType function.

* Add query test

Adds a test that uses graphql to query a node with its excerpt

* Regroup tests

Regroups tests so that graphql queries and node tests are in their own
groups

* Fix linting errors

Fixes linting errors that were causing issues on travisCI

* Format

* handles integer with valida date format correctly (#3461)

* Upgrade style-loader to fix CSS modules issue (#3283)

* Upgrade style-loader to 0.19.0 to fix https://github.com/webpack-contrib/style-loader/issues/182

* Update to last version

* format/bootstrap

* Publish

 - gatsby-link@1.6.34
 - gatsby-source-faker@1.0.0
 - gatsby-transformer-remark@1.7.27
 - gatsby@1.9.151

* Updated links for Glamor and Styled Components (#3462)

* Updated links for Glamor and Styled Components

* Update index.md

* Update tutorial.js

* Add link to the using-remark website

* Don't create pages for test files (#3464)

* Don't generate pages for test files

* Use parsedPath.base instead of path

* Add gatsby-source-behance to plugins list (#3465)

* activated mergeLinkHeaders (#3463)

* Add cache-control examples to caching docs page (#3468)

* Publish

 - gatsby-plugin-netlify@1.0.13
 - gatsby-transformer-remark@1.7.28
 - gatsby@1.9.152

* Revert "Upgrade style-loader to fix CSS modules issue (#3283)"

This reverts commit 834dcb8ee4adcf1b6df45d8ad64350a94ae3ec88.

A number of people were reporting that this broke the default starter in
node 8 e.g. https://twitter.com/Lehanism/status/951397594953076737

* Publish

 - gatsby@1.9.153

* Fix Links Redirection (#3471)

* Fix Links Redirection

* Fix Glamor Link Redirection

* Fix typo (#3470)

* Update tutorial-links.yml

* Cleanup Glamor / Styled Component mini-tutorials (#3474)

* Cleanup Glamor / Styled Component mini-tutorials

* Tweaks

* Fix typo in building with components section (#3476)

reusabilty => reusability

* Fix typo (#3477)

* Update Deploy Gatsby page - Gitlab Pages (#3482)

* Update Deploy Gatsby page - Gitlab Pages

Have made a few edits, mainly to include the Path Prefix plugin, which is needed when using Gitlab pages without a custom domain. This has basically been shamelessly copied from the Github pages example...
Also did a bit of formatting.

* fix typo

* correct key behavior (#3483)

* correct key behavior

* remove trailing slash logic

* remove adding new variable

* Publish

 - gatsby-plugin-create-client-paths@1.0.2
 - gatsby-react-router-scroll@1.0.8
 - gatsby@1.9.154

* Add Strata starter (#3488)

Add Strata starter to the list.

* Use `_.isPlainObject` to prevent false Array positives (#3490)

* Publish

 - gatsby-source-wordpress@2.0.43

* update styled-jsx dep in gatsby-plugin-styled-jsx (#3493)

* update styled-jsx dep in gatsby-plugin-styled-jsx

* move styled-jsx to peerDependencies in gatsby-plugin-styled-jsx

* Publish

 - gatsby-plugin-styled-jsx@2.0.1

* gatsby-image docs (#3500)

* Update CONTRIBUTING.md

small typo

* Update README.md

typo fixes and additional section

* Update awesome-gatsby.md

* Update README.md

* Easy edits based off of observing Eden go thru tutorials (#3501)

A few typo corrections and clarified wording. There are more big changes to address later.

*  [gatsby] don't run service-workers outside of https or localhost  (#3502)

* [gatsby] don't run service-workers outside of https or localhost
see: https://github.com/gatsbyjs/gatsby/issues/3385

* add detail around running local changes to CONTRIBUTING.md

* Update CONTRIBUTING.md

* format

* format

* Publish

 - gatsby-image@1.0.32
 - gatsby@1.9.155

* Properly use `withPrefix` in adding-images-fonts-files docs (#3503)

I came across this while browsing through the documentation. The `withPrefix` import was left unused in the "escape hatch" example, which I'm pretty sure is not intentional.

* Create new npm keyword for gatsby components (#3507)

* Publish

 - gatsby-image@1.0.33

* Fix typo in docs (#3511)

* Add Netlify CMS plugin, related docs (#3509)

* add Netlify CMS plugin

* add Netlify CMS guide

* add Netlify to deploy docs

* Update deploy-gatsby.md

* Publish

 - gatsby-plugin-netlify-cms@1.0.1

* Fix clone instructions (#3514)

* Publish

 - gatsby-plugin-netlify-cms@1.0.1

* Fix instructions for cloning the docs

* Search and replace the hostname in URLs. (#3498)

* Search and replace the hostname in URLs.
https://github.com/gatsbyjs/gatsby/issues/3450

* Fixed code styling issues

* Missed backticks for the timers requirement

* Updated readme with search and replace options

* Removed async, wrapped json parse in a try catch and updated blacklist function

* Updated search and replace api and updated documentation

* Added logging for invalid search and replace option

* make option more explicit, updated default value & removed redundant logging

* Updated the variable name making it clearer

* Add documentation on adding list of blog posts (#3510)

* Add documentation on adding list of blog posts

* Update adding-a-list-of-markdown-blog-posts.md

* Import the component

* [DOCS] Adding Markdown pages: Remove useless fields (#3517)

* [DOCS] Adding Markdown pages: Remove useless fields

* Update adding-markdown-pages.md

* [DOCS] Links: Remove emphasis from implem stubs (#3518)

* [DOCS] Links: Remove emphasis from implem stubs

Some docs have been implemented but are still marked as stubs in the navigation drawer

* Update doc-links.yaml

* fix link (#3513)

* Add missing comma in sitemap example (#3520)

* Move inlined webpack manifest to the end of body element (#3519)

* Adds email capture to bottom of blog (#3333)

* Adds email capture to bottom of blog

* Adds email capture to bottom of blog

* Adds Mailchimp functionality

* Refactors postEmailToMailchimp method, updates cc

* updates rhythm css, installs & uses validator module

* Fiddle with design

* Fix `gatsby-plugin-nprogress` default options param (#3533)

* Fix default `pluginOptions` parameter

This PR fixes https://github.com/gatsbyjs/gatsby/issues/3484

Correctly merge `defaultOptions` with `pluginOptions`

* Indent `styles` template string correctly

* Change default

* Format

* Publish

 - gatsby-plugin-netlify-cms@1.0.2
 - gatsby-plugin-nprogress@1.0.10
 - gatsby-plugin-sitemap@1.2.10
 - gatsby-source-wordpress@2.0.44
 - gatsby@1.9.156

* Don't use internal name when reporting there's an error in gatsby-node.js fixes #2945 (#3536)

* Don't use internal name when reporting there's an error in gatsby-node.js fixes #2945

* Move var initialization into tighter scope

* can I code???

* Publish

 - gatsby@1.9.157

* Add Developer Ecosystem to websites (#3540)

* Removes words like 'simple' & 'easy' from docs/www (#3523)

* Removes words like 'simple' & 'easy' from docs/www

* Additional optimizations

* Update gatsby-v1.md

* Update add-404-page.md

* Update gatsby-style-guide.md

* Update styled-components.md

* Update index.md

* Update index.md

* cpinnix/verious starter (#3543)

* Added verious-boilerplate to gatsby starters documentation.

* Added Charles Pinnix Website and Verious to Showcase.

* gatsby-plugin-sharp: Remove warning for resolutions when requested width and image width are equal (#3537)

* Add to instructions that you need gatsby-plugin-sharp fixes #3545 (#3547)

* Update katex package to 0.8.3 (#3548)

* add unique titles to docs, tutorial, blog (#3550)

* Fix typo in KaTeX usage example (#3549)

* format

* Publish

 - gatsby-plugin-netlify@1.0.14
 - gatsby-plugin-sharp@1.6.25
 - gatsby-remark-embed-snippet@1.0.6
 - gatsby-remark-images@1.5.37
 - gatsby-remark-katex@1.0.9
 - gatsby-remark-prismjs@1.2.12

* [www] Fix <link rel=„author“> href (#3555)

* [www] Fix email-capture-form cross browser issues (#3553)

* pull shared <input>/<button> styles into constant
* add default background color
* add placeholder styles
* use Futura instead of Spectral for form inputs* help Safari rendering <button> and <input> at equal height (tested in v11.0.2)
* add focus styles
* add focus styles to CtaButton

* Add docs page with overview of Gatsby's usage of GraphQL (#3557)

* Add docs page with overview of Gatsby's usage of GraphQL

* Add missing word

* Debugging HTML Builds - fix copy&paste error (#3565)

the point of the code-demo is that if we wrap the module it does not fail

* Update outdated snapshot (#3566)

* Update readme with demo link (#3573)

* Move script loader after webpack manifest (#3569)

This should ensure that when any external scripts are loaded using
script loader, the webpack manifest is already present.

* Publish

 - gatsby-remark-katex@1.0.10
 - gatsby@1.9.158

* Added 'Steve Meredith's Portfolio' to 'Showcase' (#3576)

* City of Boston case study blog post (#3583)

* boston blog post

* blog v2

* Add Put.io landing page to showcase (#3580)

* Allow arrays with more than one file path & ignore empty strings (#3577)

* Publish

 - gatsby@1.9.159

* Add search form to site (#3421)

* Add search form to site header

* Prevent sidebar from overlapping search results

* Override default search result styles

* Reduce size of mask image

* Prettier

* Add a class name for the DocSearch crawlers

As mentioned in the DocSearch signup message: https://github.com/gatsbyjs/gatsby/issues/3097#issuecomment-353143241

* Disable DocSearch's debug mode

* Capture default navigation events, replace with client-side navigation

* Add a second identifier class for DocSearch

* Improve mobile styles

* Improve styling

- Increase specificity so styles work in production build
- Tidy up layout at medium and small breakpoints
- Prettier

* Load external CSS after document body

* Some minor edits (#3586)

* Some minor edits

I also think it could be cool to explain just a few use cases that answer this question: "Why is GraphQL so cool?"

I also expected to see code examples for image stuff. Also, a random thing about colons that I learned last year is this:

a full sentence must precede the colon :)

* Tweak

* Add sample code showing off gatsby-image + image processing to query with GraphQL page (#3589)

* Add sample code showing off gatsby-image + image processing to query with GraphQL page

* Update querying-with-graphql.md

* Update README.md

* Improve documentation for createParentChildLink (#3594)

* Improve documentation for createParentChildLink

* Format

* edit

* Some updates to the awesome gatsby page (#3595)

* Add Ryan Wiemer's Portfolio to the showcase (#3578)

* Updated Plugins.md (#3593)

Added Gatsby Directus Source Plugin

* [www] Add gatsby-plugin-postcss-sass (#3590)

* [www] Improve docsearch UI for small devices (#3597)

* [www] Improve docsearch for small devices

* ditch css.global(…) and instead use css.insert() for all CSS overriding/building upon the stock docsearch.css – couldn’t figure out any advantages in using css.global over css.insert()
* full-width result list items and calmer subcategory titles for small devices
* „purpelize“ UI and replace a few more stock colors with equivalents from utils/presets
* slightly wider result dropdown for desktop and above
* remove result dropdown outer padding and fiddle with whitespace

* debug:false

* Add section why GraphQL is *cool* (#3606)

* [www] Increase navigation z-index (#3599)

Prevent the author link on blog post cards from showing above the new docsearch dropdown.

* Added `gatsby-plugin-bugherd` to community plugins (#3605)

* [gatsby-source-contentful] Delete original link regardless of ID validity (#3592)

* wip

* [gatsby-source-contentful] Delete original link regardless of presence of resolvable ID

* Publish

 - gatsby-image@1.0.34
 - gatsby-source-contentful@1.3.32
 - gatsby@1.9.160

* Create new page docs/creating-hybrid-pages-with-static-and-dynamic-components.md (#3579)

* Update  docs/creating-and-modifying-pages.md to expand on the use of client-only routes to create a hybrid or "app-shell" Gatsby app

* + Split hybrid page docs into its own page and update linked pages

* Update creating-and-modifying-pages.md

* Update and rename creating-hybrid-pages-with-static-and-dynamic-components.md to building-apps-with-gatsby

* Update creating-and-modifying-pages.md

* Rename building-apps-with-gatsby to building-apps-with-gatsby.md

* Update README.md

* Update building-apps-with-gatsby.md

* Add link to new docs page

* Enable filtering on linked nodes (#3600)

Add support to filter on linked nodes.

Close #3190

* Update comment

* Publish

 - gatsby-plugin-create-client-paths@1.0.3
 - gatsby@1.9.161

* Bundle Netlify CMS styles (#3611)

* define webpack loader.exclude with array for extensibility

* generate separate CSS bundle for Netlify CMS plugin

* Fix images disappearing from rendered markdown files (#3612)

* Fix images disappearing from rendered markdown files

Fixes #3608

* Revert invalid indentation changes

* Revert "Enable filtering on linked nodes" (#3613)

* Revert "Fix images disappearing from rendered markdown files (#3612)"

This reverts commit 01022ababac93e7d27a0f292e1c987ccbc96b255.

* Revert "Bundle Netlify CMS styles (#3611)"

This reverts commit d19ec31bdcb560a84297d360f639be2d40d83b44.

* Revert "Publish"

This reverts commit 53f66a4648989e604340afb9afa59751ea08b38c.

* Revert "Update comment"

This reverts commit 2b22c2c437a74460d421c1803f2636d1a41cddc6.

* Revert "Enable filtering on linked nodes (#3600)"

This reverts commit 7120e5ad4337ac903a683da999c96c51a6029d44.

* Publish

 - gatsby-plugin-netlify-cms@1.0.3
 - gatsby-remark-images@1.5.38
 - gatsby@1.9.162

* Add yerevancoder (#3598)

* Fix gatsby-remark-image (#3620)

* Publish

 - gatsby-plugin-netlify-cms@1.0.4
 - gatsby-remark-images@1.5.39
 - gatsby@1.9.163

* WordPress Media Download Basic Auth Fix (#3614)

* WordPress Media Download Basic Auth Fix

* format

* Publish

 - gatsby-source-drupal@2.0.13
 - gatsby-source-filesystem@1.5.12
 - gatsby-source-wordpress@2.0.45

* Set default auth object

* Publish

 - gatsby-source-drupal@2.0.14
 - gatsby-source-filesystem@1.5.13
 - gatsby-source-wordpress@2.0.46

* Improve checks on authentication so have wiggle room in future

* Publish

 - gatsby-source-drupal@2.0.15
 - gatsby-source-filesystem@1.5.14
 - gatsby-source-wordpress@2.0.47

* Fix passing auth info to createRemoteFileNode (#3628)

* Fix copying "dev-404-page.js" to the cache folder on Windows (#3627)

* Fix images disappearing from rendered markdown files

Fixes #3608

* Revert invalid indentation changes

* Fix copying "dev-404-page.js" to the cache folder on Windows

Fixes #2819

* Fix snapshot tests

* Revert invalid improper snapshot test modification

* Publish

 - gatsby-source-wordpress@2.0.48

* Publish

 - gatsby-source-wordpress@2.0.49
 - gatsby@1.9.164

* Tweak copy on the new building apps with gatsby docs page (#3631)

* Added gatsby-starter-lumen

* Add link to Gentics Mesh source community plugin (#3629)

* Add section about deploying with now to the docs (#3641)

* Add section to the deploy docs page for deploying to now

* Add section to the deploy docs page for deploying to now

* Add install code snippet

* Update deploy-gatsby.md

* docs: gatsby config options (#3095) (#3646)

* index.md (#3638)

* index.md

I am not the only one who got this problem. I think some other junior leaner will do the same. My English is poor.If the idea is good, please change it to correct spelling and grammar.
here is the question link: https://github.com/gatsbyjs/gatsby/issues/1739

* Update index.md

* All the author info for Pierre (#3651)

I'm pretty sure I need to update the actual blog post. It's not in master branch on my computer yet, so will just edit it via web

* Strapi blog post content (#3618)

* Strapi blog post content

Avatar and bio still coming, will make those edits and edit yaml later

* Updated author info

Also I just realized that the images in here might not work if we don't have original files in the directory. Is this true, @kylemathews?

* Add tutorial series links to docs (#3634)

* Add tutorial series links to docs

* Update awesome-gatsby.md

* [WIP] Update Gatsbygram to make it work with current (unofficial) JSON API. (#3349)

* Update Gatsbygram to make it work with current (unofficial) JSON API.

* Revert back to previous data structure; add case study URL to README.

* Contributing (#3619)

* Contributing

Not sure if "adding unit or functional tests" makes sense. Took it from webpack example.

Also added your hierarchy of helpfulness under ### special note on issues. Don't know if the sentence introducing them is the best advice...

Also check the plugin naming convention.

Hope I'm getting the header levels right here.

There is some overlap here with the Gatsby style guide. I've got it on a to-do list to think through division of information between the two docs

* Update CONTRIBUTING.md

* Update CONTRIBUTING.md

* Update CONTRIBUTING.md

* [gatsby-transformer-remark] Add `htmlAst` field (#3596)

This implements a GraphQL field that presents the rehype AST as JSON, allowing for this information to be consumed from a page template and presented dynamically.

* Publish

 - gatsby-transformer-remark@1.7.29

* Update building-apps-with-gatsby.md (#3653)

* fix extract-text--webpack-plugin instance reuse errors (#3652)

* Publish

 - gatsby@1.9.165

* Minor change to tutorial part four index.md (#3649)

* Minor change to tutorial part four index.md

Changed one liner 2 steps to <ol> style.
More readable.

* Update index.md

* Added deploy task to gh-pages in Org pages (#3642)

Added the task to deploy to Github Pages in Organizations pages like organization.github.io

* Added community plugin: gatsby-plugin-pathdata (#3644)

* Add gatsby-starter-strict (#3645)

* blog: add getting started with gatsby and wordpress (#3647)

* blog: add getting started with gatsby and wordpress

* Make links local to gatsbyjs.org + a few other tweaks

* [www] Search shortcut (#3654)

* Add keyboard shortcut for focussing the search input

* Blur input on result selection

* Remove note about their being more parts to the tutorial (#3655)

* Remove note about their being more parts to the tutorial

We'll ship more stuff when we do. No reason to make it sound less than useful as it is.

* format

* Add images in Strapi tutorial (#3660)

* Add images in Strapi tutorial

* Remove package-lock.json files

* added gatsby ^1.0.0 as a peer dependency for all plugins (#3637)

* README showcase update (#3661)

* updated README with two of my gatsbyjs projects.

I hope this alright, if not I totally understand

* Updated README

fix space issue

* Add gatsby-starter-portfolio-emilia (#3664)

Also grouped both starters into one bulletpoint (as talked about on Discord) and changed some minor stuff.

* [gatsby-source-medium] fetch users and publications (#3623)

* Add support for fetching a users payload along with publications from Medium

* Update gatsby-source-medium readme, add note for @ for usernames

* Undo any changes to `links` variable

* Publish

 - gatsby-plugin-aphrodite@1.0.6
 - gatsby-plugin-canonical-urls@1.0.12
 - gatsby-plugin-catch-links@1.0.15
 - gatsby-plugin-coffeescript@1.4.9
 - gatsby-plugin-create-client-paths@1.0.4
 - gatsby-plugin-cxs@1.0.6
 - gatsby-plugin-emotion@1.1.11
 - gatsby-plugin-feed@1.3.16
 - gatsby-plugin-glamor@1.6.11
 - gatsby-plugin-glamorous@1.0.6
 - gatsby-plugin-google-analytics@1.0.16
 - gatsby-plugin-google-tagmanager@1.0.13
 - gatsby-plugin-jss@1.5.10
 - gatsby-plugin-less@1.0.9
 - gatsby-plugin-lodash@1.0.8
 - gatsby-plugin-manifest@1.0.13
 - gatsby-plugin-netlify-cms@1.0.5
 - gatsby-plugin-netlify@1.0.15
 - gatsby-plugin-nprogress@1.0.11
 - gatsby-plugin-offline@1.0.13
 - gatsby-plugin-postcss-sass@1.0.16
 - gatsby-plugin-preact@1.0.15
 - gatsby-plugin-react-css-modules@1.0.12
 - gatsby-plugin-react-helmet@2.0.4
 - gatsby-plugin-react-next@1.0.8
 - gatsby-plugin-remove-trailing-slashes@1.0.4
 - gatsby-plugin-sass@1.0.16
 - gatsby-plugin-sharp@1.6.26
 - gatsby-plugin-sitemap@1.2.11
 - gatsby-plugin-styled-components@2.0.5
 - gatsby-plugin-styled-jsx@2.0.2
 - gatsby-plugin-styletron@1.0.11
 - gatsby-plugin-stylus@1.1.14
 - gatsby-plugin-twitter@1.0.15
 - gatsby-plugin-typescript@1.4.13
 - gatsby-plugin-typography@1.7.11
 - gatsby-remark-images@1.5.40
 - gatsby-source-medium@1.0.10

* [gatsby-source-contentful] Make base64 query to field-level to speed up asset queries (#3617)

* [gatsby-source-contentful] Add withBase64 option to speed up image queries

* Revert "[gatsby-source-contentful] Add withBase64 option to speed up image queries"

This reverts commit bb080f7bc3e78a006841a7715202439632ad2692.

* remove base64 from resolveResponsiveResolution

* create base64 resolver

* update sizes, reset resize to original state

* update tests

* update resize and tests

* Publish

 - gatsby-source-contentful@1.3.33

* show help and recommend when the command is wrong (#3668)

* Fix gatsby-starter-portfolio-emilia PR (#3667)

Seems like "Features" or something other is messing up the indentation and therefore messing up the whole idea of two sub-entries. So I just did two separate entries now.

* Add Flooring Factories Outlets to Showcase (#3666)

Added a website made for a client... built with gatsby / netlify :)

* Publish

 - gatsby-cli@1.1.29
 - gatsby@1.9.166

* Add a podcast website/player to the showcase (#3672)

* [www] Update/consolidate palette, monogram and logo, favicons (#3639)

* #744c9e/116,76,158 -> #9966cc/102, 51, 153 (rebeccapurple)

* [WIP] Consolidate palette

* Ditch B100 in favor of B200

* Neutral diagram stripe color at least for now

* Fussing around with saturation

* Adjustting hues (still WIP ;-))

* Roll back all palette colors but brand/„B700“

* Throw in chroma.js, output presets.B*, chroma.js palette at /colors

* B200 -> B100
* B300 -> B200
* colors.b[0] -> B100
  * components/diagram „box“ border
  * layouts/index sidebar border-right

* Grab chroma-js from npm now that 1.3.6 is published

* Add redrawn monogram and logo (monogram + wordmark)

* remove gatsby-calm.svg for now – was only used on the blog page, where we’re for now using the regular monogram
* remove gatsby-negative.png, not in use – will regenerate the favicons that were probably based on this and add them ASAP
* remove gatsby-positive.svg, unused
* rename gatsby-negative.svg to monogram.svg, update it with the redrawn version
* replace logo and <h1> wordmark in components/navigation with the newly added logo.svg

* Update favicons

* fix apple-touch-icon.png, which had a transparent background which iOS resolves to black which looks 😒
* fix non-anti-aliased edges in all favicons
* add a white background for the „G and chopped edge“ shape of the favicon which was transparent before
* fix Safari pinned tab color

* Add hex2rgba, remove presets.shadowColor (matches presets.B500)

* Inherit text color

* Move colors from presets to colors

* Remove orange logo

* Bump favicon.ico

* Optimize favicons, update Windows tile icons

* Update manifest theme/background_color

* Remove some leftover anchors; invert logo for iOS, Windows tile

* Add Windows tile browserconfig.xml

* Oops

* Remove chroma (…), back to descriptive color names

* Make presets.calm pass WCAG AA

* Fix icon colors

* Remove presets.brandDark

* Add colors.gray

* :D

* Make presets.calm pass WCAG AA again

* rebeccapurple links in blog articles

* Fix logo offset

* Ditch colors.brand, add colors.ui, don’t litter colors in presets 🙄

* rename `brand` to `gatsby`
* expose `utils/colors` at `presets.colors`
* move UI colors to `colors.ui`
* add colors.success, colors.warning

* Update logo wordmark, optimize SVGs

* Update building-apps-with-gatsby.md

* Add plugins.js and searchbar-body.js for searching and displaying gatsby plugins

* Remove unneccesary css

* Removed package-lock.json and renamed plugins.js to packages.js

* Add algolia-npm search and url syncing

* Add background color  when plugin selected

* Fix doubling-up layout bug, add border to hits component, add margin to text in packages

* Remove unnecessary dependencies from package.json

* Remove withUrlSync.js

* Change Algolia link from Link to a tag

* Add gatsby-component as keyword search, change searchbox placeholder

* Add email-validator to package.json to merge with updated site

* Add source plugin to pull in npm package info, add metadata to cards and package detail page

* Remove results display when no results

* Remove multiple div

* Remove startes and filters from packages description

* Update searchbar styles

* Remove searchbar scroll

* Update packages.js

* Empty commit

* Empty commit

* Add plugins.js and searchbar-body.js for searching and displaying gatsby plugins

* Remove unneccesary css

* Removed package-lock.json and renamed plugins.js to packages.js

* Add algolia-npm search and url syncing

* Add background color  when plugin selected

* Fix doubling-up layout bug, add border to hits component, add margin to text in packages

* Remove unnecessary dependencies from package.json

* Remove withUrlSync.js

* Change Algolia link from Link to a tag

* Add gatsby-component as keyword search, change searchbox placeholder

* Add email-validator to package.json to merge with updated site

* Add source plugin to pull in npm package info, add metadata to cards and package detail page

* Remove results display when no results

* Remove multiple div

* Remove startes and filters from packages description

* Add plugins.js and searchbar-body.js for searching and displaying gatsby plugins

* Remove unneccesary css

* Removed package-lock.json and renamed plugins.js to packages.js

* Add algolia-npm search and url syncing

* Add background color  when plugin selected

* Fix doubling-up layout bug, add border to hits component, add margin to text in packages

* Remove unnecessary dependencies from package.json

* Remove withUrlSync.js

* Change Algolia link from Link to a tag

* Add email-validator to package.json to merge with updated site

* Add source plugin to pull in npm package info, add metadata to cards and package detail page

* Remove results display when no results

* Remove multiple div

* Remove startes and filters from packages description

* Update searchbar styles

* Remove searchbar scroll

* Update packages.js

* Empty commit

* Update template-docs to account for both local and remote packages

* Remove duplicate code

* Remove commented out code

* linting fixes to run tests

* removed package-lock

* minor fixes to html head, package.json description, TODO notes

* minor fixes across files in prep for merge

react-icons instead of svgs, updated gitignores for gatsby-node files

removed obsolete gatsby-source-npm that was refactored and renamed gatsby-source-npm-package-search

shortened css file

* removed unused icons

* removed unused gatsby-browser.js, used createNodeId on readmes

* conditional rendering for packages that aren't found, UI tweaks to search bar on wide screens

* plugin library mobile layout

* 2nd implementation of mobile ui

* Fix getting access to createNodeId

createNodeId is a utility library that's passed in and not an NPM package

* css deletions overhaul

* separate components for template doc packages

* using package readme component on template doc packages

* added missing dependencies (date-fns and react-instant-search) to package.json

* keeping undefined objects from being accessed with default values, conditional rendering of specific metadata not pulled by every package

* fix loadNodeContent error, remove old comments

* added infinite scroll for plugins

* highlighting results list with pagination fix

* refactor create page logic to make sure all packages have pages created, and added PropTypes and not found data so undefined errors don't break package readme template components
---
 .../gatsby-source-drupal/.Rhistory            |   0
 .../.gitignore                                |   4 +
 .../.npmignore                                |  34 +++
 .../README.md                                 |  40 +++
 .../gatsby-source-npm-package-search/index.js |   1 +
 .../package.json                              |  22 ++
 .../src/.gitkeep                              |   0
 .../src/gatsby-node.js                        |  80 ++++++
 www/gatsby-config.js                          |   6 +
 www/gatsby-node.js                            |  56 +++-
 www/package.json                              |   2 +
 www/src/components/markdown-page-footer.js    |   2 +-
 www/src/components/package-readme.js          | 114 ++++++++
 www/src/components/searchbar-body.js          | 258 ++++++++++++++++++
 www/src/css/searchbox-style.css               | 129 +++++++++
 www/src/html.js                               |   1 +
 www/src/layouts/index.js                      | 112 ++++++--
 www/src/pages/packages.js                     |  56 ++++
 www/src/pages/packages.js~HEAD                |  55 ++++
 .../templates/template-docs-local-packages.js |  91 ++++++
 www/src/templates/template-docs-packages.js   |  63 -----
 .../template-docs-remote-packages.js          |  55 ++++
 22 files changed, 1092 insertions(+), 89 deletions(-)
 rename www/gatsby-browser.js => packages/gatsby-source-drupal/.Rhistory (100%)
 create mode 100644 packages/gatsby-source-npm-package-search/.gitignore
 create mode 100644 packages/gatsby-source-npm-package-search/.npmignore
 create mode 100644 packages/gatsby-source-npm-package-search/README.md
 create mode 100644 packages/gatsby-source-npm-package-search/index.js
 create mode 100644 packages/gatsby-source-npm-package-search/package.json
 create mode 100644 packages/gatsby-source-npm-package-search/src/.gitkeep
 create mode 100644 packages/gatsby-source-npm-package-search/src/gatsby-node.js
 create mode 100644 www/src/components/package-readme.js
 create mode 100644 www/src/components/searchbar-body.js
 create mode 100644 www/src/css/searchbox-style.css
 create mode 100644 www/src/pages/packages.js
 create mode 100644 www/src/pages/packages.js~HEAD
 create mode 100644 www/src/templates/template-docs-local-packages.js
 delete mode 100644 www/src/templates/template-docs-packages.js
 create mode 100644 www/src/templates/template-docs-remote-packages.js

diff --git a/www/gatsby-browser.js b/packages/gatsby-source-drupal/.Rhistory
similarity index 100%
rename from www/gatsby-browser.js
rename to packages/gatsby-source-drupal/.Rhistory
diff --git a/packages/gatsby-source-npm-package-search/.gitignore b/packages/gatsby-source-npm-package-search/.gitignore
new file mode 100644
index 0000000000000..ab784e001feae
--- /dev/null
+++ b/packages/gatsby-source-npm-package-search/.gitignore
@@ -0,0 +1,4 @@
+/*.js
+!index.js
+yarn.lock
+gatsby-node.js
\ No newline at end of file
diff --git a/packages/gatsby-source-npm-package-search/.npmignore b/packages/gatsby-source-npm-package-search/.npmignore
new file mode 100644
index 0000000000000..e771d2c9fa299
--- /dev/null
+++ b/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
diff --git a/packages/gatsby-source-npm-package-search/README.md b/packages/gatsby-source-npm-package-search/README.md
new file mode 100644
index 0000000000000..42f6c845622e0
--- /dev/null
+++ b/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
+          }
+        }
+      }
+    }
+  }
+}
+```
diff --git a/packages/gatsby-source-npm-package-search/index.js b/packages/gatsby-source-npm-package-search/index.js
new file mode 100644
index 0000000000000..172f1ae6a468c
--- /dev/null
+++ b/packages/gatsby-source-npm-package-search/index.js
@@ -0,0 +1 @@
+// noop
diff --git a/packages/gatsby-source-npm-package-search/package.json b/packages/gatsby-source-npm-package-search/package.json
new file mode 100644
index 0000000000000..291975724d7b3
--- /dev/null
+++ b/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": "james.a.stack@gmail.com",
+  "license": "MIT",
+  "dependencies": {
+    "algoliasearch": "^3.24.9",
+    "babel-runtime": "^6.26.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "cross-env": "^5.0.5"
+  }
+}
diff --git a/packages/gatsby-source-npm-package-search/src/.gitkeep b/packages/gatsby-source-npm-package-search/src/.gitkeep
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/gatsby-source-npm-package-search/src/gatsby-node.js b/packages/gatsby-source-npm-package-search/src/gatsby-node.js
new file mode 100644
index 0000000000000..4d9846f1418ba
--- /dev/null
+++ b/packages/gatsby-source-npm-package-search/src/gatsby-node.js
@@ -0,0 +1,80 @@
+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,
+  })
+
+  data.hits.forEach(hit => {
+    // commented changed remove all badges and images from readme content to keep the creation of the node from failing below
+    // if (hit.readme.includes(`![`)) {
+    //   hit.readme = hit.readme.replace(/[[]?!\[.*\b/gi, ``)
+    //   console.log(hit.name)
+    // }
+
+    const parentId = createNodeId(`plugin ${hit.objectID}`)
+    const readmeNode = {
+      id: createNodeId(`readme ${hit.objectID}`),
+      parent: parentId,
+      slug: `/packages/en/${hit.objectID}`,
+      children: [],
+      internal: {
+        type: `NPMPackageReadme`,
+        mediaType: `text/markdown`,
+        content: hit.readme !== undefined ? 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 !== undefined ? hit.readme : ``,
+      },
+    }
+    node.internal.contentDigest = createContentDigest(node)
+    createNode(readmeNode)
+    createNode(node)
+  })
+
+  return
+}
diff --git a/www/gatsby-config.js b/www/gatsby-config.js
index a417b06dc4c9f..0cdbe8958d83b 100644
--- a/www/gatsby-config.js
+++ b/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: {
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
index 7064fed98cca7..002a8069c9d44 100644
--- a/www/gatsby-node.js
+++ b/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
@@ -29,14 +34,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
@@ -65,6 +73,22 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
                 }
               }
             }
+            allNpmPackage {
+              edges {
+                node {
+                  id
+                  title
+                  slug
+                  readme {
+                    id
+                    childMarkdownRemark {
+                      id
+                      html
+                    }
+                  }
+                }
+              }
+            }
           }
         `
       ).then(result => {
@@ -122,7 +146,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,
@@ -131,6 +155,30 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           }
         })
 
+        const allPackages = result.data.allNpmPackage.edges
+        // Create package readme
+        allPackages.forEach(edge => {
+          if (_.includes(localPackagesArr, edge.node.title)) {
+            createPage({
+              path: edge.node.slug,
+              component: slash(localPackageTemplate),
+              context: {
+                slug: edge.node.slug,
+                id: edge.node.id,
+              },
+            })
+          } else {
+            createPage({
+              path: edge.node.slug,
+              component: slash(remotePackageTemplate),
+              context: {
+                slug: edge.node.slug,
+                id: edge.node.id,
+              },
+            })
+          }
+        })
+
         return
       })
     )
diff --git a/www/package.json b/www/package.json
index 2de37bd82bec1..b17599d171310 100644
--- a/www/package.json
+++ b/www/package.json
@@ -5,6 +5,7 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "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",
diff --git a/www/src/components/markdown-page-footer.js b/www/src/components/markdown-page-footer.js
index a0bf9c515f9b4..f6ac9b85db0a6 100644
--- a/www/src/components/markdown-page-footer.js
+++ b/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 }} />
           {` `}
diff --git a/www/src/components/package-readme.js b/www/src/components/package-readme.js
new file mode 100644
index 0000000000000..2b9daa68eaa7e
--- /dev/null
+++ b/www/src/components/package-readme.js
@@ -0,0 +1,114 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Helmet from "react-helmet"
+import distanceInWords from "date-fns/distance_in_words"
+
+import { rhythm, scale } from "../utils/typography"
+import presets from "../utils/presets"
+import Container from "../components/container"
+import MarkdownPageFooter from "../components/markdown-page-footer"
+
+class PackageReadMe extends React.Component {
+  render() {
+    const {
+      lastPublisher,
+      page,
+      packageName,
+      excerpt,
+      modified,
+      html,
+      githubUrl,
+      keywords,
+      timeToRead,
+    } = this.props
+
+    const lastUpdated = `${distanceInWords(new Date(modified), new Date())} ago`
+    const gatsbyKeywords = [`gatsby`, `gatsby-plugin`, `gatsby-component`]
+    const tags = keywords
+      .filter(keyword => !gatsbyKeywords.includes(keyword))
+      .join(`, `)
+
+    return (
+      <Container>
+        <Helmet>
+          <title>{packageName}</title>
+          <meta name="description" content={excerpt} />
+          <meta name="og:description" content={excerpt} />
+          <meta name="twitter:description" content={excerpt} />
+          <meta name="og:title" content={packageName} />
+          <meta name="og:type" content="article" />
+          <meta name="twitter.label1" content="Reading time" />
+          <meta name="twitter:data1" content={`${timeToRead} min read`} />
+        </Helmet>
+        <strong>
+          <a
+            css={{
+              display: githubUrl ? `inline-block` : `none`,
+            }}
+            href={githubUrl}
+          >
+            Browse source code for this package on GitHub
+          </a>
+        </strong>
+
+        <div className="metadataHeader">
+          <div
+            css={{
+              fontSize: rhythm(0.5),
+              color: `#D3D3D3`,
+            }}
+          >
+            {tags}
+          </div>
+
+          {lastPublisher.name != "User Not Found" ? (
+            <div
+              css={{
+                display: `flex`,
+                paddingTop: rhythm(0.25),
+              }}
+            >
+              <img width="20" height="20" src={lastPublisher.avatar} />
+              <span
+                css={{
+                  paddingLeft: rhythm(0.25),
+                  fontSize: rhythm(0.5),
+                  textTransform: `uppercase`,
+                }}
+              >
+                {lastPublisher.name}
+              </span>
+              <span css={{ paddingLeft: rhythm(0.25), fontSize: rhythm(0.5) }}>
+                {lastUpdated}
+              </span>
+            </div>
+          ) : null}
+        </div>
+
+        <div
+          css={{
+            position: `relative`,
+          }}
+          dangerouslySetInnerHTML={{
+            __html: html,
+          }}
+        />
+        <MarkdownPageFooter page={page} packagePage />
+      </Container>
+    )
+  }
+}
+
+PackageReadMe.propTypes = {
+  page: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+  packageName: PropTypes.string.isRequired,
+  excerpt: PropTypes.string,
+  html: PropTypes.string.isRequired,
+  githubUrl: PropTypes.string,
+  timeToRead: PropTypes.number,
+  modified: PropTypes.string,
+  keywords: PropTypes.array,
+  lastPublisher: PropTypes.object,
+}
+
+export default PackageReadMe
diff --git a/www/src/components/searchbar-body.js b/www/src/components/searchbar-body.js
new file mode 100644
index 0000000000000..661b142f2f60e
--- /dev/null
+++ b/www/src/components/searchbar-body.js
@@ -0,0 +1,258 @@
+import React, { Component } from "react"
+import {
+  InstantSearch,
+  Hits,
+  SearchBox,
+  Stats,
+  RefinementList,
+  InfiniteHits,
+} from "react-instantsearch/dom"
+import distanceInWords from "date-fns/distance_in_words"
+import presets, { colors } from "../utils/presets"
+import Link from "gatsby-link"
+import DownloadArrow from "react-icons/lib/go/arrow-small-down"
+import { debounce } from "lodash"
+
+import typography, { rhythm } from "../utils/typography"
+
+// This is for the urlSync
+const updateAfter = 700
+//
+
+const wideScreenSize = {
+  "@media (min-width: 1600px)": {
+    margin: rhythm(0.25),
+    fontSize: rhythm(0.5),
+  },
+}
+
+// Search shows a list of "hits", and is a child of the SearchBar component
+class Search extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      searchState: this.props.searchState,
+    }
+  }
+  render() {
+    const emptySearchBox = this.props.searchState.length > 0 ? false : true
+    return (
+      <div className="container">
+        <div
+          css={{
+            display: `flex`,
+            justifyContent: `center`,
+            width: `100%`,
+          }}
+        >
+          <SearchBox translations={{ placeholder: "Search Gatsby Library" }} />
+        </div>
+
+        <div
+          css={{
+            display: `none`,
+          }}
+        >
+          <RefinementList
+            attributeName="keywords"
+            defaultRefinement={["gatsby-component", "gatsby-plugin"]}
+          />
+        </div>
+
+        <div
+          css={{
+            opacity: emptySearchBox ? 0 : 1,
+            height: rhythm(1.5),
+            paddingTop: rhythm(0.25),
+            paddingBottom: rhythm(0.25),
+            color: colors.gray.calm,
+            fontSize: 14,
+            fontStretch: "normal",
+          }}
+        >
+          <Stats
+            translations={{
+              stats: function(n, ms) {
+                return `${n} results`
+              },
+            }}
+          />
+        </div>
+
+        <div
+          css={{
+            borderTop: `2px solid #F5F3F7`,
+            borderBottom: `2px solid #F5F3F7`,
+            borderLeft: `2px solid #F5F3F7`,
+          }}
+        >
+          <div
+            css={{
+              backgroundColor: `white`,
+              height: `calc(100vh - 225px)`,
+              border: `2 px solid red`,
+              overflowY: `scroll`,
+              WebkitOverflowScrolling: `touch`,
+              "::-webkit-scrollbar": {
+                width: `6px`,
+                height: `6px`,
+              },
+              "::-webkit-scrollbar-thumb": {
+                background: colors.ui.bright,
+              },
+              "::-webkit-scrollbar-track": {
+                background: colors.ui.light,
+              },
+            }}
+          >
+            <InfiniteHits
+              hitComponent={result => (
+                <Result hit={result.hit} pathname={this.props.pathname} />
+              )}
+            />
+          </div>
+        </div>
+
+        <div>
+          <h3
+            css={{
+              fontSize: rhythm(0.55),
+              textAlign: `center`,
+              margin: rhythm(0.75),
+              "@media (min-width: 1600px)": {
+                margin: rhythm(0.25),
+                fontSize: rhythm(0.5),
+              },
+            }}
+          >
+            Search by{" "}
+            <a
+              href={`https://www.algolia.com/`}
+              style={{ color: `#744C9E`, border: `none`, boxShadow: `none` }}
+            >
+              Algolia
+            </a>
+          </h3>
+        </div>
+      </div>
+    )
+  }
+}
+
+// the result component is fed into the InfiniteHits component
+const Result = ({ hit, pathname }) => {
+  const selected = pathname.slice(10) === hit.name
+  const lastUpdated = `${distanceInWords(
+    new Date(hit.modified),
+    new Date()
+  )} ago`
+  return (
+    <Link
+      to={`/packages/${hit.name}`}
+      style={{
+        display: `block`,
+        fontFamily: typography.options.bodyFontFamily.join(`,`),
+        fontWeight: `400`,
+        color: selected ? `white` : `black`,
+        backgroundColor: selected ? `#744C9E` : `white`,
+        padding: rhythm(0.5),
+      }}
+    >
+      <div
+        css={{
+          display: `flex`,
+          justifyContent: `space-between`,
+        }}
+      >
+        <div
+          css={{
+            fontFamily: typography.options.headerFontFamily.join(`,`),
+            fontWeight: `bold`,
+          }}
+        >
+          {hit.name}
+        </div>
+
+        <div
+          css={{
+            display: `flex`,
+            alignItems: `center`,
+            fontSize: rhythm(0.5),
+          }}
+        >
+          {hit.humanDownloadsLast30Days}
+          {selected ? (
+            <DownloadArrow
+              style={{
+                width: 25,
+                height: 25,
+              }}
+              color="#fff"
+            />
+          ) : (
+            <DownloadArrow
+              style={{
+                width: 25,
+                height: 25,
+              }}
+              color="#000"
+            />
+          )}
+        </div>
+      </div>
+
+      <div
+        css={{
+          fontSize: rhythm(0.6),
+          paddingTop: rhythm(0.25),
+          lineHeight: rhythm(0.75),
+        }}
+      >
+        {hit.description}
+      </div>
+    </Link>
+  )
+}
+
+// the search bar holds the Search component in the InstantSearch widget
+class SearchBar extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { searchState: { query: this.urlToSearch(), page: 1 } }
+    this.updateHistory = debounce(this.updateHistory, updateAfter)
+  }
+
+  urlToSearch = () => {
+    return this.props.history.location.search.slice(2)
+  }
+
+  updateHistory(value) {
+    this.props.history.replace(`/packages?=${value.query}`)
+  }
+
+  onSearchStateChange(searchState) {
+    this.updateHistory(searchState)
+    this.setState({ searchState })
+  }
+
+  render() {
+    return (
+      <div>
+        <InstantSearch
+          apiKey="f54e21fa3a2a0160595bb058179bfb1e"
+          appId="OFCNCOG2CU"
+          indexName="npm-search"
+          searchState={this.state.searchState}
+          onSearchStateChange={this.onSearchStateChange.bind(this)}
+        >
+          <Search
+            pathname={this.props.history.location.pathname}
+            searchState={this.state.searchState.query}
+          />
+        </InstantSearch>
+      </div>
+    )
+  }
+}
+
+export default SearchBar
diff --git a/www/src/css/searchbox-style.css b/www/src/css/searchbox-style.css
new file mode 100644
index 0000000000000..83c9b9363a33f
--- /dev/null
+++ b/www/src/css/searchbox-style.css
@@ -0,0 +1,129 @@
+.ais-SearchBox__input:valid ~ .ais-SearchBox__reset {
+  display: block;
+}
+
+.ais-SearchBox__root {
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  width: 100%;
+  height: 46px;
+  white-space: nowrap;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.ais-SearchBox__wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.ais-SearchBox__input {
+  -webkit-appearance: none;
+  display: inline-block;
+  -webkit-transition: box-shadow 0.4s ease, background 0.4s ease;
+  transition: box-shadow 0.4s ease, background 0.4s ease;
+  border: 1px solid #d4d8e3;
+  border-radius: 4px;
+  background: #ffffff;
+  box-shadow: 0 1px 1px 0 rgba(85, 95, 110, 0.2);
+  padding: 0;
+  padding-right: 36px;
+  padding-left: 46px;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  white-space: normal;
+  font-size: inherit;
+}
+.ais-SearchBox__input:hover,
+.ais-SearchBox__input:active,
+.ais-SearchBox__input:focus {
+  box-shadow: none;
+  outline: 0;
+}
+.ais-SearchBox__input::-webkit-input-placeholder,
+.ais-SearchBox__input::-moz-placeholder,
+.ais-SearchBox__input:-ms-input-placeholder,
+.ais-SearchBox__input::placeholder {
+  color: #9faab2;
+}
+
+.ais-SearchBox__submit {
+  position: absolute;
+  top: 0;
+  right: inherit;
+  left: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 4px 0 0 4px;
+  background-color: rgba(255, 255, 255, 0);
+  padding: 0;
+  width: 46px;
+  height: 100%;
+  vertical-align: middle;
+  text-align: center;
+  font-size: inherit;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ais-SearchBox__submit::before {
+  display: inline-block;
+  margin-right: -4px;
+  height: 100%;
+  vertical-align: middle;
+  content: "" 2;
+}
+.ais-SearchBox__submit:hover,
+.ais-SearchBox__submit:active {
+  cursor: pointer;
+}
+.ais-SearchBox__submit:focus {
+  outline: 0;
+}
+.ais-SearchBox__submit svg {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+  fill: #bfc7d8;
+}
+
+.ais-SearchBox__reset {
+  display: none;
+  position: absolute;
+  top: 13px;
+  right: 13px;
+  margin: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  fill: #bfc7d8;
+}
+.ais-SearchBox__reset:focus {
+  outline: 0;
+}
+.ais-SearchBox__reset svg {
+  display: block;
+  margin: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.ais-InfiniteHits__loadMore {
+  width: 100%;
+  height: 50px;
+  background-color: #663399;
+  color: #f5f3f7;
+  outline: none;
+}
+.ais-InfiniteHits__loadMore[disabled] {
+  display: none;
+}
diff --git a/www/src/html.js b/www/src/html.js
index dd113122e3077..d72a008c8f63d 100644
--- a/www/src/html.js
+++ b/www/src/html.js
@@ -75,6 +75,7 @@ export default class HTML extends React.Component {
           />
           <meta name="msapplication-config" content={`/browserconfig.xml`} />
           <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />
+
           {css}
         </head>
         <body {...this.props.bodyAttributes}>
diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
index 9427443b62518..572b2af23f5da 100644
--- a/www/src/layouts/index.js
+++ b/www/src/layouts/index.js
@@ -4,6 +4,7 @@ import Helmet from "react-helmet"
 import Navigation from "../components/navigation"
 import MobileNavigation from "../components/navigation-mobile"
 import SidebarBody from "../components/sidebar-body"
+import SearchBar from "../components/searchbar-body"
 import tutorialSidebar from "../pages/docs/tutorial-links.yml"
 import docsSidebar from "../pages/docs/doc-links.yaml"
 import featuresSidebar from "../pages/docs/features-links.yaml"
@@ -11,6 +12,7 @@ import { rhythm, scale } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
 import hex2rgba from "hex2rgba"
 import "../css/prism-coy.css"
+import "../css/searchbox-style.css"
 
 // Import Futura PT typeface
 import "../fonts/Webfonts/futurapt_book_macroman/stylesheet.css"
@@ -21,16 +23,39 @@ import "../fonts/Webfonts/futurapt_demiitalic_macroman/stylesheet.css"
 // Other fonts
 import "typeface-spectral"
 import "typeface-space-mono"
+import { isTuesday } from "date-fns"
+import searchbarBody from "../components/searchbar-body"
 
 class DefaultLayout extends React.Component {
   render() {
     const isHomepage = this.props.location.pathname == `/`
+    const isDoc = this.props.location.pathname.slice(0, 6) === `/docs/`
+    const isTutorial =
+      this.props.location.pathname.slice(0, 10) === `/tutorial/`
+    const isFeature = this.props.location.pathname.slice(0, 9) === `/features`
+    const isPlugin = this.props.location.pathname.slice(0, 8) === `/plugin`
+    const isPackage = this.props.location.pathname.slice(0, 9) === `/packages`
+    const isPackageReadme =
+      this.props.location.pathname.slice(0, 16) === `/packages/gatsby`
+
     const hasSidebar =
-      this.props.location.pathname.slice(0, 6) === `/docs/` ||
-      this.props.location.pathname.slice(0, 10) === `/packages/` ||
-      this.props.location.pathname.slice(0, 10) === `/tutorial/` ||
-      this.props.location.pathname.slice(0, 9) === `/features`
-    const isSearchSource = hasSidebar
+      isDoc ||
+      isTutorial ||
+      isFeature ||
+      isPlugin ||
+      isPackage ||
+      isPackageReadme
+
+    const leftPadding = rhythmSize => {
+      if (this.props.location.pathname.slice(0, 9) === `/packages`) {
+        return rhythm(18)
+      } else if (hasSidebar) {
+        return rhythm(rhythmSize)
+      } else {
+        return 0
+      }
+    }
+
     const sidebarStyles = {
       borderRight: `1px solid ${colors.ui.light}`,
       backgroundColor: colors.ui.whisper,
@@ -67,6 +92,43 @@ class DefaultLayout extends React.Component {
       },
     }
 
+    let searchBarDisplayProperty
+    let childrenMobileDisplay
+    let childrenTabletDisplay
+    if (isPackage && !isPackageReadme) {
+      searchBarDisplayProperty = { display: `block` }
+      childrenMobileDisplay = { display: `none` }
+      childrenTabletDisplay = { display: `block` }
+    } else if (isPackage && isPackageReadme) {
+      searchBarDisplayProperty = {
+        [presets.Mobile]: {
+          display: `none`,
+        },
+        [presets.Tablet]: {
+          display: `block`,
+        },
+      }
+      childrenMobileDisplay = { display: `block` }
+      childrenTabletDisplay = { display: `block` }
+    } else {
+      searchBarDisplayProperty = {
+        display: `none`,
+      }
+      childrenMobileDisplay = { display: `block` }
+      childrenTabletDisplay = { display: `block` }
+    }
+    const searchbarStyles = {
+      ...sidebarStyles,
+      // overrides of sidebarStyles
+      width: `100vw`,
+      padding: rhythm(1),
+      overflowY: "hidden",
+      [presets.Desktop]: {
+        width: rhythm(17),
+      },
+      ...searchBarDisplayProperty,
+    }
+
     return (
       <div className={isHomepage ? `is-homepage` : ``}>
         <Helmet defaultTitle={`GatsbyJS`} titleTemplate={`%s | GatsbyJS`}>
@@ -92,26 +154,35 @@ class DefaultLayout extends React.Component {
             css={{
               ...sidebarStyles,
               [presets.Tablet]: {
-                display:
-                  this.props.location.pathname.slice(0, 6) === `/docs/` ||
-                  this.props.location.pathname.slice(0, 10) === `/packages/`
-                    ? `block`
-                    : `none`,
+                display: isDoc ? `block` : `none`,
               },
             }}
           >
             <SidebarBody yaml={docsSidebar} />
           </div>
+
+          {/* This is for the searchbar template */}
+          <div
+            css={{
+              ...searchbarStyles,
+              [presets.Tablet]: {
+                display: isPackage
+                  ? `block`
+                  : isPackage && isPackageReadme ? `block` : `none`,
+                width: rhythm(17),
+              },
+            }}
+          >
+            <SearchBar history={this.props.history} />
+          </div>
+
           {/* TODO Move this under docs/tutorial/index.js once Gatsby supports multiple levels
                of layouts */}
           <div
             css={{
               ...sidebarStyles,
               [presets.Tablet]: {
-                display:
-                  this.props.location.pathname.slice(0, 10) === `/tutorial/`
-                    ? `block`
-                    : `none`,
+                display: isTutorial ? `block` : `none`,
               },
             }}
           >
@@ -121,25 +192,24 @@ class DefaultLayout extends React.Component {
             css={{
               ...sidebarStyles,
               [presets.Tablet]: {
-                display:
-                  this.props.location.pathname.slice(0, 9) === `/features`
-                    ? `block`
-                    : `none`,
+                display: isFeature ? `block` : `none`,
               },
             }}
           >
             <SidebarBody yaml={featuresSidebar} />
           </div>
+
           <div
             css={{
+              ...childrenMobileDisplay,
               [presets.Tablet]: {
-                paddingLeft: hasSidebar ? rhythm(10) : 0,
+                paddingLeft: leftPadding(10),
+                ...childrenTabletDisplay,
               },
               [presets.Desktop]: {
-                paddingLeft: hasSidebar ? rhythm(12) : 0,
+                paddingLeft: leftPadding(12),
               },
             }}
-            className={isSearchSource && `docSearch-content`}
           >
             {this.props.children()}
           </div>
diff --git a/www/src/pages/packages.js b/www/src/pages/packages.js
new file mode 100644
index 0000000000000..814594893e193
--- /dev/null
+++ b/www/src/pages/packages.js
@@ -0,0 +1,56 @@
+import React, {Component} from "react"
+import Container from "../components/container"
+import logo from "../monogram.svg"
+import { rhythm } from "../utils/typography"
+
+class Packages extends Component {
+  render(){
+    return(
+      <Container>
+        <div
+          css={{
+            display: `flex`,
+            flexDirection: `column`,
+            alignItems: `center`,
+            justifyContent: `center`,
+            height: `calc(100vh - 300px)`,
+          }}
+          >
+          <img src={logo}
+            css={{
+              display: `inline-block`,
+              height: rhythm(5.2),
+              width: rhythm(5.2),
+              marginLeft: `auto`,
+              marginRight: `auto`,
+            }}
+            alt=""
+
+          />
+          <h1
+            css={{
+              fontSize: rhythm(1),
+              marginTop: rhythm(1/4),
+              marginLeft: rhythm(1),
+              marginRight: rhythm(1),
+              textAlign: `center`,
+            }}
+
+            >Welcome to the Gatsby Package Library!</h1>
+              <p
+                css={{
+                  marginLeft: rhythm(3),
+                  marginRight: rhythm(3),
+                  fontSize: rhythm(3/4),
+                  textAlign: `center`,
+                }}>
+                Please use the search bar to find packages
+                that will make your blazing-fast site even more awesome.
+              </p>
+        </div>
+      </Container>
+    )
+  }
+}
+
+export default Packages
diff --git a/www/src/pages/packages.js~HEAD b/www/src/pages/packages.js~HEAD
new file mode 100644
index 0000000000000..ac8eac634624a
--- /dev/null
+++ b/www/src/pages/packages.js~HEAD
@@ -0,0 +1,55 @@
+import React, {Component} from "react"
+import Container from "../components/container"
+import logo from "../gatsby-negative.svg"
+import { rhythm } from "../utils/typography"
+
+class Plugins extends Component {
+  render(){
+    return(
+      <Container>
+        <div
+          css={{
+            display: `flex`,
+            flexDirection: `column`,
+            alignItems: `center`,
+            justifyContent: `center`,
+            height: `calc(100vh - 300px)`,
+          }}
+          >
+          <img src={logo}
+            css={{
+              display: `inline-block`,
+              height: rhythm(5.2),
+              width: rhythm(5.2),
+              marginLeft: `auto`,
+              marginRight: `auto`,
+            }}
+            alt=""
+
+          />
+          <h1
+            css={{
+              fontSize: rhythm(1),
+              marginTop: rhythm(1/4),
+              marginLeft: rhythm(1),
+              marginRight: rhythm(1),
+              textAlign: `center`,
+            }}
+
+            >Welcome to the Gatsby Package Library!</h1>
+              <p
+                css={{
+                  marginLeft: rhythm(3),
+                  marginRight: rhythm(3),
+                  fontSize: rhythm(3/4),
+                }}>
+                Please use the search bar to find packages
+                that will make your blazing-fast site even more awesome.
+              </p>
+        </div>
+      </Container>
+    )
+  }
+}
+
+export default Plugins
diff --git a/www/src/templates/template-docs-local-packages.js b/www/src/templates/template-docs-local-packages.js
new file mode 100644
index 0000000000000..38042d225af6d
--- /dev/null
+++ b/www/src/templates/template-docs-local-packages.js
@@ -0,0 +1,91 @@
+import React from "react"
+import _ from "lodash"
+
+import PackageReadme from "../components/package-readme"
+
+class DocsLocalPackagesTemplate extends React.Component {
+  render() {
+    const { data: { npmPackage, markdownRemark } } = this.props
+    const npmPackageNotFound = {
+      keywords: ["gatsby"],
+      lastPublisher: {
+        name: "User Not Found",
+        avatar: "",
+      },
+      modified: new Date(),
+    }
+    const markdownRemarkNotFound = {
+      html: "No Package Readme Found",
+      excerpt: "",
+      timeToRead: 0,
+      fields: {
+        title: npmPackage ? npmPackage.name : "Title Not Found",
+      },
+    }
+
+    return (
+      <PackageReadme
+        page={markdownRemark ? _.pick(markdownRemark, "parent") : false}
+        packageName={
+          markdownRemark
+            ? markdownRemark.fields.title
+            : markdownRemarkNotFound.fields.title
+        }
+        excerpt={
+          markdownRemark
+            ? markdownRemark.excerpt
+            : markdownRemarkNotFound.excerpt
+        }
+        html={
+          markdownRemark ? markdownRemark.html : markdownRemarkNotFound.html
+        }
+        githubUrl={`https://github.com/gatsbyjs/gatsby/tree/master/packages/${
+          markdownRemark
+            ? markdownRemark.fields.title
+            : markdownRemarkNotFound.fields.title
+        }`}
+        timeToRead={
+          markdownRemark
+            ? markdownRemark.timeToRead
+            : markdownRemarkNotFound.timeToRead
+        }
+        modified={
+          npmPackage ? npmPackage.modified : npmPackageNotFound.modified
+        }
+        keywords={
+          npmPackage ? npmPackage.keywords : npmPackageNotFound.keywords
+        }
+        lastPublisher={
+          npmPackage
+            ? npmPackage.lastPublisher
+            : npmPackageNotFound.lastPublisher
+        }
+      />
+    )
+  }
+}
+
+export default DocsLocalPackagesTemplate
+
+export const pageQuery = graphql`
+  query TemplateDocsLocalPackages($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      html
+      excerpt
+      timeToRead
+      fields {
+        title
+      }
+      ...MarkdownPageFooter
+    }
+    npmPackage(slug: { eq: $slug }) {
+      name
+      keywords
+      lastPublisher {
+        name
+        avatar
+      }
+      modified
+    }
+  }
+`
diff --git a/www/src/templates/template-docs-packages.js b/www/src/templates/template-docs-packages.js
deleted file mode 100644
index d7807540e2400..0000000000000
--- a/www/src/templates/template-docs-packages.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from "react"
-import Helmet from "react-helmet"
-
-import MarkdownPageFooter from "../components/markdown-page-footer"
-import { rhythm, scale } from "../utils/typography"
-import presets from "../utils/presets"
-import Container from "../components/container"
-
-class DocsPackagesTemplate extends React.Component {
-  render() {
-    const packageName = this.props.data.markdownRemark.fields.title
-    const page = this.props.data.markdownRemark
-    return (
-      <Container>
-        <Helmet>
-          <title>{page.fields.title}</title>
-          <meta name="description" content={page.excerpt} />
-          <meta name="og:description" content={page.excerpt} />
-          <meta name="twitter:description" content={page.excerpt} />
-          <meta name="og:title" content={page.fields.title} />
-          <meta name="og:type" content="article" />
-          <meta name="twitter.label1" content="Reading time" />
-          <meta name="twitter:data1" content={`${page.timeToRead} min read`} />
-        </Helmet>
-        <strong>
-          <a
-            href={`https://github.com/gatsbyjs/gatsby/tree/master/packages/${packageName}`}
-            css={{
-              position: `absolute`,
-            }}
-          >
-            Browse source code for this package on GitHub
-          </a>
-        </strong>
-        <div
-          css={{
-            position: `relative`,
-          }}
-          dangerouslySetInnerHTML={{
-            __html: this.props.data.markdownRemark.html,
-          }}
-        />
-        <MarkdownPageFooter page={page} packagePage />
-      </Container>
-    )
-  }
-}
-
-export default DocsPackagesTemplate
-
-export const pageQuery = graphql`
-  query TemplateDocsPackages($slug: String!) {
-    markdownRemark(fields: { slug: { eq: $slug } }) {
-      html
-      excerpt
-      timeToRead
-      fields {
-        title
-      }
-      ...MarkdownPageFooter
-    }
-  }
-`
diff --git a/www/src/templates/template-docs-remote-packages.js b/www/src/templates/template-docs-remote-packages.js
new file mode 100644
index 0000000000000..c7dc0164228cb
--- /dev/null
+++ b/www/src/templates/template-docs-remote-packages.js
@@ -0,0 +1,55 @@
+import React from "react"
+
+import PackageReadme from "../components/package-readme"
+
+class DocsRemotePackagesTemplate extends React.Component {
+  render() {
+    const { data: { npmPackage, markdownRemark } } = this.props
+    return (
+      <PackageReadme
+        page={markdownRemark}
+        packageName={npmPackage.name}
+        excerpt={npmPackage.readme.childMarkdownRemark.excerpt}
+        html={npmPackage.readme.childMarkdownRemark.html}
+        githubUrl={
+          npmPackage.repository !== null
+            ? npmPackage.repository.url
+            : `https://github.com/search?q=${npmPackage.name}`
+        }
+        modified={npmPackage.modified}
+        timeToRead={npmPackage.readme.childMarkdownRemark.timeToRead}
+        keywords={npmPackage.keywords}
+        lastPublisher={npmPackage.lastPublisher}
+      />
+    )
+  }
+}
+
+export default DocsRemotePackagesTemplate
+
+export const pageQuery = graphql`
+  query TemplateDocsRemotePackages($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      ...MarkdownPageFooter
+    }
+    npmPackage(slug: { eq: $slug }) {
+      name
+      description
+      keywords
+      lastPublisher {
+        name
+        avatar
+      }
+      modified
+      repository {
+        url
+      }
+      readme {
+        childMarkdownRemark {
+          html
+          timeToRead
+        }
+      }
+    }
+  }
+`