gatsbyjs · Jul 20, 2020 · Jul 20, 2020 · Jul 20, 2020 · Jul 20, 2020 · Jul 20, 2020
diff --git a/README.md b/README.md
@@ -73,7 +73,7 @@ Gatsby is a modern web framework for blazing fast websites.
   to load your data, then develop using Gatsby’s uniform GraphQL interface.
 
 - **Performance Is Baked In.** Ace your performance audits by default. Gatsby automates code
-  splitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources,
+  splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources,
   and more to ensure your site is fast — no manual tuning required.
 
 - **Host at Scale for Pennies.** Gatsby sites don’t require servers so you can host your entire

diff --git a/dictionary.txt b/dictionary.txt
@@ -372,7 +372,7 @@ CodeName
 Codenames
 codeowner
 codeowners
-Codepen
+CodePen
 CodeSandbox
 codesplitting
 collegial

diff --git a/docs/blog/2020-07-20-Khaled-Garbaya-Life-After-Recipes/index.md b/docs/blog/2020-07-20-Khaled-Garbaya-Life-After-Recipes/index.md
@@ -36,23 +36,23 @@ npm install tailwindcss gatsby-plugin-postcss
 
 2. Add `gatsby-plugin-postcss` to your `gatsby-config.js` file
 
-```javascript
+```javascript:title=gatsby-config.js
 {
   plugins: [`gatsby-plugin-postcss`]
 }
 ```
 
 3. Create a `postcss.config.js` file and add the following snippet to it:
 
-```javascript
+```javascript:title=postcss.config.js
 module.exports = {
   plugins: [require("tailwindcss"), require("autoprefixer")],
 }
 ```
 
 4. Create a `tailwind.config.js` file and add the following snippet to it:
 
-```javascript
+```javascript:title=tailwind.config.js
 module.exports = {
   purge: ["./src/**/*.js"],
   theme: {
@@ -65,7 +65,7 @@ module.exports = {
 
 5. Create a `tailwind.css` file and add the following snippet to it:
 
-```css
+```css:title=tailwind.css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/docs/docs/building-a-contact-form.md b/docs/docs/building-a-contact-form.md
@@ -68,7 +68,7 @@ Getform is a form backend platform which offers a free-plan for handling form su
 
 Once you've made the code changes to your form, you can head over to the contact page on your site and start submitting data to the form. The submissions will then be visible on the Getform dashboard. You can add multiple email addresses to receive email notifications for the forms created, as well as manipulate the data you see on Getform using Zapier and Webhooks options that are offered.
 
-You can find more info on the registration process and form setup on the [Getform website](https://getform.io/) and find code examples (AJAX, reCAPTCHA etc) on their [Codepen](https://codepen.io/getform).
+You can find more info on the registration process and form setup on the [Getform website](https://getform.io/) and find code examples (AJAX, reCAPTCHA etc) on their [CodePen](https://codepen.io/getform).
 
 ### Netlify
 

diff --git a/docs/docs/localization-i18n.md b/docs/docs/localization-i18n.md
@@ -30,7 +30,7 @@ URL - /**en**/about
 
 React-intl is a part of the FormatJS set of i18n libraries and provides support for over 150+ languages. It builds on JavaScript's [Internationalization API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) providing enhanced APIs and components. React-intl uses React context and HOCs (Higher Order Components) to provide translations allowing you to dynamically load language modules as you need them. There are also polyfill options available for older browsers that do not support the base JavaScript i18n API.
 
-More detailed information about react-intl's [APIs](https://github.com/formatjs/react-intl/blob/master/docs/API.md) and [components](https://github.com/formatjs/react-intl/blob/master/docs/Components.md), including [demos](https://github.com/formatjs/react-intl/tree/master/examples), are available in the [documentation](https://github.com/formatjs/react-intl/tree/master/docs).
+More detailed information about react-intl's [APIs](https://github.com/formatjs/formatjs/blob/main/website/docs/react-intl/api.md) and [components](https://github.com/formatjs/formatjs/blob/main/website/docs/react-intl/components.md), including [demos](https://github.com/formatjs/formatjs/tree/main/packages/react-intl/examples), are available in the [documentation](https://github.com/formatjs/formatjs/tree/main/website/docs/react-intl).
 
 ### react-i18next
 

diff --git a/docs/docs/page-node-dependencies.md b/docs/docs/page-node-dependencies.md
@@ -2,28 +2,33 @@
 title: Page -> Node Dependency Tracking
 ---
 
-> This documentation isn't up to date with the latest [schema customization changes](/docs/schema-customization).
->
-> Outdated areas are:
->
-> - `createPageDependency` is not the only way to mutate dependencies now
-> - other helpers exist now
->
-> You can help by making a PR to [update this documentation](https://github.com/gatsbyjs/gatsby/issues/14228).
-
-In almost every GraphQL Resolver, you'll see the [createPageDependency](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/actions/add-page-dependency.ts#L5), or [getNodeAndSavePathDependency](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/nodes.ts#L108) functions. These are responsible for recording which nodes are depended on by which pages. In `develop` mode, when a node's content is changed the pages whose queries depend on that node will be re-run. This is one of the things that makes `develop` so awesome.
+Gatsby keeps a record of used nodes for each query result. This makes it possible to cache and reuse results from previous runs if used nodes didn't change and, conversely, is used to determine which query results are stale and need to be rerun.
 
 ## How dependencies are recorded
 
-Recording of Page -> Node dependencies are handled by the [createPageDependency](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/actions/add-page-dependency.ts#L5) action. It takes the page (in the form of its `path`), and either a `nodeId`, or `connection`.
+### `CREATE_COMPONENT_DEPENDENCY` action and `createPageAction` action creator
+
+The internal `CREATE_COMPONENT_DEPENDENCY` action handles the recording of Page -> Node dependencies. It takes the `path` (page path for page queries or internal id for static queries), and either a `nodeId`, or `connection`.
 
 Passing `nodeId` tells Gatsby that the page depends specifically on this node. So, if the node is changed, then the page's query needs to be re-executed.
 
-`connection` is a Type string. E.g. `MarkdownRemark`, or `File`. Calling `createPageDependency` with a page path and a `connection` tells Gatsby that this page depends on all nodes of this type. Therefore if any node of this type changes (e.g. a change to a markdown node), then this page must be rebuilt. This variant is only called from [run-sift.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/run-sift.js) when a query such as `allFile`, or `allMarkdownRemark` is run. See [Schema Connections](/docs/schema-connections/) for more info.
+`connection` is a Type string. E.g. `MarkdownRemark`, or `File`. Calling `createPageDependency` with a `path` and a `connection` tells Gatsby that this page depends on all nodes of this type. Therefore if any node of this type changes (e.g. a change to a markdown node), then this page must be rebuilt. Using connection fields (e.g. `allMarkdownRemark`) is one of the cases when this variant is used.
+
+`CREATE_COMPONENT_DEPENDENCY` action is conditionally dispatched by the internal `createPageAction` action creator. Action creator checks if we already have given dependencies stored to avoid emitting no-op actions. `createPageAction` is a low level internal API that is then used by higher level APIs.
+
+### Higher level abstractions
+
+#### Node Model
+
+[Node Model](/docs/node-model/) is an API used in GraphQL resolvers to retrieve nodes from the data store. It's used internally in resolvers provided by Gatsby core and it can be used in resolvers provided by plugins via `context.nodeModel`. It calls `createPageAction` under the hood because Node Model is aware of the path of the query as well as the nodes being retrieved.
+
+#### `getNodeAndSavePathDependency` helper
+
+[`getNodeAndSavePathDependency`](/docs/node-api-helpers/#getNodeAndSavePathDependency) is a convenience wrapper around `getNode` and `createPageDependency`. It is not used internally. It's a legacy API for plugins to record data dependencies and is equivalent to `nodeModel.getNodeById`. The Node Model variant should be used instead as its API is less error prone. (Node Model is `path` aware and doesn't require you to pass it.)
 
 ## How dependencies are stored
 
-Page -> Node dependencies are tracked via the `componentDataDependencies` redux namespace. `createPageDependency` is the only way to mutate it. The namespace is comprised of two sub structures:
+Page -> Node dependencies are tracked via the `componentDataDependencies` redux namespace.
 
 ```javascript
 {
@@ -62,14 +67,4 @@ Page -> Node dependencies are tracked via the `componentDataDependencies` redux
 
 ## How dependency information is used
 
-Page -> Node dependencies are used entirely during query execution to figure out which nodes are "dirty", and therefore which page's queries need to be re-executed. This occurs in `query/index.js` in the [findIdsWithoutDataDependencies](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/query/index.js#L39) and [popNodeQueries](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/query/index.js#L71) functions. This is described in greater detail in the [Query Execution](/docs/query-execution/) docs.
-
-## Other forms
-
-### add-page-dependency.ts
-
-[redux/actions/add-page-dependency.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/actions/add-page-dependency.ts) is a wrapper around the `createPageDependency` action that performs some additional performance optimizations. It should be used instead of the raw action.
-
-### getNodeAndSavePathDependency action
-
-The [getNodeAndSavePathDependency](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/nodes.ts#L108) action simply calls `getNode`, and then calls `createPageDependency` using that result. It is a programmer convenience.
+Page -> Node dependencies are used entirely during query execution to figure out which nodes are "dirty" and to figure out which queries don't have any dependencies yet. "Dirty" nodes are used to determine which query results are stale and need to be re-executed. Finding queries without dependencies is used as a heuristic to determine which queries haven't run yet and therefore need to run.
diff --git a/docs/sites.yml b/docs/sites.yml
@@ -11471,3 +11471,18 @@
   built_by: HiringSolved
   built_by_url: https://hiringsolved.com/home/
   featured: false
+- title: MongoDB Developer Hub
+  url: https://developer.mongodb.com
+  main_url: https://developer.mongodb.com
+  description: >
+    The MongoDB Developer Hub serves as the central location for all MongoDB developer content, programs, and resources.
+  categories:
+    - Blog
+    - Data
+    - Education
+    - Learning
+    - Programming
+    - Technology
+    - Web Development
+  built_by: MongoDB
+  featured: false
diff --git a/examples/using-css-modules/src/pages/index.js b/examples/using-css-modules/src/pages/index.js
@@ -27,7 +27,7 @@ class IndexComponent extends React.Component {
             className={indexStyles.link}
             href="https://github.com/gatsbyjs/gatsby/tree/master/examples/using-css-modules"
           >
-            cODe for eXAMple sIte on GiTHUb
+            Code for example site on GitHub
           </a>
         </p>
       </div>

diff --git a/packages/babel-preset-gatsby/CHANGELOG.md b/packages/babel-preset-gatsby/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.3](https://github.com/gatsbyjs/gatsby/compare/babel-preset-gatsby@0.5.2...babel-preset-gatsby@0.5.3) (2020-07-21)
+
+**Note:** Version bump only for package babel-preset-gatsby
+
 ## [0.5.2](https://github.com/gatsbyjs/gatsby/compare/babel-preset-gatsby@0.5.1...babel-preset-gatsby@0.5.2) (2020-07-09)
 
 ### Features

diff --git a/packages/babel-preset-gatsby/package.json b/packages/babel-preset-gatsby/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-gatsby",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "author": "Philipp Spiess <hello@philippspiess.com>",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-macros": "^2.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "gatsby-core-utils": "^1.3.12",
+    "gatsby-core-utils": "^1.3.13",
     "gatsby-legacy-polyfills": "^0.0.2"
   },
   "peerDependencies": {

diff --git a/packages/gatsby-admin/CHANGELOG.md b/packages/gatsby-admin/CHANGELOG.md
@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.97](https://github.com/gatsbyjs/gatsby/compare/gatsby-admin@0.1.96...gatsby-admin@0.1.97) (2020-07-21)
+
+### Features
+
+- **gatsby-admin:** list all pages of site ([#25744](https://github.com/gatsbyjs/gatsby/issues/25744)) ([a0c70d0](https://github.com/gatsbyjs/gatsby/commit/a0c70d0))
+- **gatsby-admin:** plugin search ([#25903](https://github.com/gatsbyjs/gatsby/issues/25903)) ([0506123](https://github.com/gatsbyjs/gatsby/commit/0506123))
+
 ## [0.1.96](https://github.com/gatsbyjs/gatsby/compare/gatsby-admin@0.1.95...gatsby-admin@0.1.96) (2020-07-20)
 
 **Note:** Version bump only for package gatsby-admin

diff --git a/packages/gatsby-admin/package.json b/packages/gatsby-admin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-admin",
-  "version": "0.1.96",
+  "version": "0.1.97",
   "main": "index.js",
   "author": "Max Stoiber",
   "license": "MIT",
@@ -13,20 +13,24 @@
   "devDependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
+    "@types/react-instantsearch-dom": "^5.2.6",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.28.0",
     "csstype": "^2.6.10",
     "formik": "^2.1.4",
-    "gatsby": "^2.24.7",
+    "gatsby": "^2.24.8",
     "gatsby-interface": "0.0.173",
     "gatsby-plugin-typescript": "^2.4.16",
     "gatsby-source-graphql": "^2.6.2",
+    "lodash-es": "^4.17.15",
     "ncp": "^2.0.0",
     "nodemon": "^2.0.4",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.10.0",
+    "react-instantsearch-dom": "^5.7.0",
+    "remove-markdown": "^0.3.0",
     "strict-ui": "^0.1.3",
     "subscriptions-transport-ws": "^0.9.16",
     "theme-ui": "^0.4.0-alpha.3",

diff --git a/packages/gatsby-admin/src/components/plugin-search.tsx b/packages/gatsby-admin/src/components/plugin-search.tsx
@@ -0,0 +1,106 @@
+/* @jsx jsx */
+import { jsx } from "strict-ui"
+import { Spinner } from "theme-ui"
+import {
+  InstantSearch,
+  Configure,
+  RefinementList,
+  ToggleRefinement,
+  connectAutoComplete,
+} from "react-instantsearch-dom"
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxPopover,
+  ComboboxList,
+  ComboboxOption,
+} from "gatsby-interface"
+import { useMutation } from "urql"
+
+const SearchCombobox: React.FC<{
+  onSelect: (value: string) => void
+}> = connectAutoComplete(({ hits, currentRefinement, refine, onSelect }) => (
+  <Combobox onSelect={onSelect}>
+    <ComboboxInput
+      sx={{ width: `20em` }}
+      aria-labelledby="plugin-search-label"
+      onChange={(e): void => refine(e.target.value)}
+      value={currentRefinement}
+    />
+    <ComboboxPopover>
+      <ComboboxList aria-labelledby="plugin-search-label">
+        {hits.map(hit => (
+          <ComboboxOption
+            key={hit.objectID}
+            selected={false}
+            value={hit.name}
+          ></ComboboxOption>
+        ))}
+      </ComboboxList>
+    </ComboboxPopover>
+  </Combobox>
+))
+
+// the search bar holds the Search component in the InstantSearch widget
+const PluginSearchInput: React.FC<{}> = () => {
+  const [{ fetching }, installGatbyPlugin] = useMutation(`
+    mutation installGatsbyPlugin($name: String!) {
+      createNpmPackage(npmPackage: {
+        name: $name,
+        dependencyType: "production"
+      }) {
+        id
+        name
+      }
+      createGatsbyPlugin(gatsbyPlugin: {
+        name: $name
+      }) {
+        id
+        name
+      }
+    }
+  `)
+
+  return (
+    <div>
+      <InstantSearch
+        apiKey="ae43b69014c017e05950a1cd4273f404"
+        appId="OFCNCOG2CU"
+        indexName="npm-search"
+      >
+        <div style={{ display: `none` }}>
+          <Configure analyticsTags={[`gatsby-plugins`]} />
+          <RefinementList
+            attribute="keywords"
+            transformItems={(items: Array<any>): Array<any> =>
+              items.map(({ count, ...item }) => {
+                return {
+                  ...item,
+                  count: count || 0,
+                }
+              })
+            }
+            defaultRefinement={[`gatsby-component`, `gatsby-plugin`]}
+          />
+          <ToggleRefinement
+            attribute="deprecated"
+            value={false}
+            label="No deprecated plugins"
+            defaultRefinement={true}
+          />
+        </div>
+        {fetching ? (
+          <Spinner />
+        ) : (
+          <SearchCombobox
+            onSelect={(value): void => {
+              installGatbyPlugin({ name: value })
+            }}
+          />
+        )}
+      </InstantSearch>
+    </div>
+  )
+}
+
+export default PluginSearchInput
diff --git a/packages/gatsby-admin/src/components/providers.tsx b/packages/gatsby-admin/src/components/providers.tsx
@@ -28,6 +28,7 @@ const theme = {
     "100%": `100%`,
     "16px": `16px`,
     "15em": `15em`,
+    "20em": `20em`,
     initial: `initial`,
   },
 }