feat(www): Persist search pane on plugin lib (#10590)

Fixes #9084. Incorporate layout plugin for smoother browsing on plugin lib. ![kapture 2018-12-20 at 16 19 09](https://user-images.githubusercontent.com/3461087/50314130-4e204a80-0473-11e9-8e29-b3ccf93d3f06.gif)
gatsbyjs · Jan 9, 2019 · 3d7b1c3 · 3d7b1c3
1 parent a5b218e
commit 3d7b1c3
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 137 deletions.
diff --git a/www/gatsby-config.js b/www/gatsby-config.js
@@ -91,6 +91,7 @@ module.exports = {
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-catch-links`,
+    `gatsby-plugin-layout`,
     `gatsby-plugin-lodash`,
     {
       resolve: `gatsby-plugin-manifest`,

diff --git a/www/gatsby-node.js b/www/gatsby-node.js
@@ -414,6 +414,7 @@ exports.createPages = ({ graphql, actions }) => {
             context: {
               slug: edge.node.slug,
               id: edge.node.id,
+              layout: `plugins`,
             },
           })
         } else {
@@ -423,6 +424,7 @@ exports.createPages = ({ graphql, actions }) => {
             context: {
               slug: edge.node.slug,
               id: edge.node.id,
+              layout: `plugins`,
             },
           })
         }
@@ -664,6 +666,15 @@ exports.onCreatePage = ({ page, actions }) => {
     deletePage(oldPage)
     createPage(page)
   }
+
+  if (page.path === `/plugins/`) {
+    const { createPage, deletePage } = actions
+    const oldPage = Object.assign({}, page)
+
+    page.context.layout = `plugins`
+    deletePage(oldPage)
+    createPage(page)
+  }
 }
 
 exports.onPostBuild = () => {

diff --git a/www/package.json b/www/package.json
@@ -21,6 +21,7 @@
     "gatsby-plugin-google-analytics": "^2.0.5",
     "gatsby-plugin-google-tagmanager": "^2.0.5",
     "gatsby-plugin-guess-js": "^1.0.0",
+    "gatsby-plugin-layout": "^1.0.10",
     "gatsby-plugin-lodash": "^3.0.1",
     "gatsby-plugin-mailchimp": "^2.2.3",
     "gatsby-plugin-manifest": "^2.0.2",

diff --git a/www/src/components/layout/plugin-library-wrapper.js b/www/src/components/layout/plugin-library-wrapper.js
@@ -0,0 +1,24 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+import Layout from "../layout"
+import PageWithPluginSearchBar from "../page-with-plugin-searchbar"
+
+const PluginLibraryWrappedLayout = props => {
+  const { children, location } = props
+
+  return (
+    <Layout location={location}>
+      <PageWithPluginSearchBar isPluginsIndex location={location}>
+        {children}
+      </PageWithPluginSearchBar>
+    </Layout>
+  )
+}
+
+PluginLibraryWrappedLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+  location: PropTypes.object.isRequired,
+}
+
+export default PluginLibraryWrappedLayout
diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
@@ -0,0 +1,13 @@
+import React from "react"
+import PluginLibraryWrapper from "../components/layout/plugin-library-wrapper"
+
+export default props => {
+  if (props.pageContext.layout === `plugins`) {
+    return (
+      <PluginLibraryWrapper location={props.location}>
+        {props.children}
+      </PluginLibraryWrapper>
+    )
+  }
+  return <>{props.children}</>
+}
diff --git a/www/src/pages/plugins.js b/www/src/pages/plugins.js
@@ -1,7 +1,5 @@
 import React, { Component } from "react"
-import Layout from "../components/layout"
 import Container from "../components/container"
-import PageWithPluginSearchBar from "../components/page-with-plugin-searchbar"
 import Unbird from "../components/unbird"
 import { Link } from "gatsby"
 import logo from "../monogram.svg"
@@ -11,73 +9,69 @@ import presets, { colors } from "../utils/presets"
 class Plugins extends Component {
   render() {
     return (
-      <Layout location={this.props.location}>
-        <PageWithPluginSearchBar isPluginsIndex location={this.props.location}>
-          <Container
+      <Container
+        css={{
+          alignItems: `center`,
+          display: `flex`,
+          minHeight: `calc(100vh - (${presets.headerHeight} + ${
+            presets.bannerHeight
+          }))`,
+        }}
+      >
+        <div
+          css={{
+            display: `flex`,
+            flexDirection: `column`,
+          }}
+        >
+          <img
+            src={logo}
             css={{
-              alignItems: `center`,
-              display: `flex`,
-              minHeight: `calc(100vh - (${presets.headerHeight} + ${
-                presets.bannerHeight
-              }))`,
+              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 Plugin Library!
+          </h1>
+          <p
+            css={{
+              color: colors.gray.calm,
+              marginLeft: rhythm(3),
+              marginRight: rhythm(3),
+              fontSize: rhythm(3 / 4),
+              fontFamily: options.headerFontFamily.join(`,`),
+              textAlign: `center`,
             }}
           >
-            <div
-              css={{
-                display: `flex`,
-                flexDirection: `column`,
-              }}
-            >
-              <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 Plugin Library!
-              </h1>
-              <p
-                css={{
-                  color: colors.gray.calm,
-                  marginLeft: rhythm(3),
-                  marginRight: rhythm(3),
-                  fontSize: rhythm(3 / 4),
-                  fontFamily: options.headerFontFamily.join(`,`),
-                  textAlign: `center`,
-                }}
-              >
-                Please use the search bar to find plugins that will make your
-                blazing fast site even more awesome. If you
-                {`'`}d like to create your own plugin, see the
-                {` `}
-                <Link to="/docs/plugin-authoring/">Plugin Authoring</Link> page
-                in the docs! To learn more about Gatsby plugins, visit the
-                {` `}
-                <Link to="/docs/plugins">plugins doc page</Link>.
-              </p>
-            </div>
-            <Unbird
-              dataSetId="5c1ac24b4a828a169b6c235c"
-              publicKey={process.env.UNBIRD_FEEDBACK_KEY_PLUGINLIB}
-              feedbackPrompt="Have feedback on the Plugin Library?"
-            />
-          </Container>
-        </PageWithPluginSearchBar>
-      </Layout>
+            Please use the search bar to find plugins that will make your
+            blazing fast site even more awesome. If you
+            {`'`}d like to create your own plugin, see the
+            {` `}
+            <Link to="/docs/plugin-authoring/">Plugin Authoring</Link> page in
+            the docs! To learn more about Gatsby plugins, visit the
+            {` `}
+            <Link to="/docs/plugins">plugins doc page</Link>.
+          </p>
+        </div>
+        <Unbird
+          dataSetId="5c1ac24b4a828a169b6c235c"
+          publicKey={process.env.UNBIRD_FEEDBACK_KEY_PLUGINLIB}
+          feedbackPrompt="Have feedback on the Plugin Library?"
+        />
+      </Container>
     )
   }
 }

diff --git a/www/src/templates/template-docs-local-packages.js b/www/src/templates/template-docs-local-packages.js
@@ -1,8 +1,7 @@
 import React from "react"
 import { graphql } from "gatsby"
 import _ from "lodash"
-import Layout from "../components/layout"
-import PageWithPluginSearchBar from "../components/page-with-plugin-searchbar"
+
 import PackageReadme from "../components/package-readme"
 import Unbird from "../components/unbird"
 
@@ -29,54 +28,52 @@ class DocsLocalPackagesTemplate extends React.Component {
     }
 
     return (
-      <Layout location={this.props.location}>
-        <PageWithPluginSearchBar location={this.props.location}>
-          <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
-                ? npmPackage.modified
-                : npmPackageNotFound.modified
-            }
-            keywords={
-              npmPackage ? npmPackage.keywords : npmPackageNotFound.keywords
-            }
-            lastPublisher={
-              npmPackage
-                ? npmPackage.lastPublisher
-                : npmPackageNotFound.lastPublisher
-            }
-          />
-          <Unbird
-            dataSetId="5c1ac24b4a828a169b6c235c"
-            publicKey={process.env.UNBIRD_FEEDBACK_KEY_PLUGINLIB}
-            feedbackPrompt="Have feedback on the Plugin Library?"
-          />
-        </PageWithPluginSearchBar>
-      </Layout>
+      <>
+        <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
+              ? npmPackage.modified
+              : npmPackageNotFound.modified
+          }
+          keywords={
+            npmPackage ? npmPackage.keywords : npmPackageNotFound.keywords
+          }
+          lastPublisher={
+            npmPackage
+              ? npmPackage.lastPublisher
+              : npmPackageNotFound.lastPublisher
+          }
+        />
+        <Unbird
+          dataSetId="5c1ac24b4a828a169b6c235c"
+          publicKey={process.env.UNBIRD_FEEDBACK_KEY_PLUGINLIB}
+          feedbackPrompt="Have feedback on the Plugin Library?"
+        />
+      </>
     )
   }
 }

diff --git a/www/src/templates/template-docs-remote-packages.js b/www/src/templates/template-docs-remote-packages.js
@@ -1,8 +1,6 @@
 import React from "react"
 import { graphql } from "gatsby"
 
-import Layout from "../components/layout"
-import PageWithPluginSearchBar from "../components/page-with-plugin-searchbar"
 import PackageReadme from "../components/package-readme"
 
 class DocsRemotePackagesTemplate extends React.Component {
@@ -11,25 +9,21 @@ class DocsRemotePackagesTemplate extends React.Component {
       data: { npmPackage, markdownRemark },
     } = this.props
     return (
-      <Layout location={this.props.location}>
-        <PageWithPluginSearchBar location={this.props.location}>
-          <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}
-          />
-        </PageWithPluginSearchBar>
-      </Layout>
+      <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}
+      />
     )
   }
 }