[www] Move Plugins page from /packages to /plugins (#4705)

* move plugins page from /packages to /plugins

* revert package slug to /packages

* /packages instead of /plugins as path for packages

* fix formatting

* Update index.js

* Update index.js

* Fix sidebar

Author: tsriram

www/gatsby-node.js

@@ -34,6 +34,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
     isPermanent: true,
   })
 
+  createRedirect({
+    fromPath: `/packages/`, // Moved "Plugins" page from /packages to /plugins
+    toPath: `/plugins/`,
+    isPermanent: true,
+  })
+
   return new Promise((resolve, reject) => {
     const docsTemplate = path.resolve(`src/templates/template-docs-markdown.js`)
     const blogPostTemplate = path.resolve(`src/templates/template-blog-post.js`)

www/src/components/navigation-mobile.js

@@ -52,7 +52,7 @@ const MobileNavigation = () => (
   >
     <MobileNavItem linkTo="/docs/" label="Docs" icon={DocsIcon} />
     <MobileNavItem linkTo="/tutorial/" label="Tutorial" icon={TutorialIcon} />
-    <MobileNavItem linkTo="/packages/" label="Plugins" icon={PluginsIcon} />
+    <MobileNavItem linkTo="/plugins/" label="Plugins" icon={PluginsIcon} />
     <MobileNavItem linkTo="/blog/" label="Blog" icon={BlogIcon} />
   </div>
 )

www/src/components/navigation.js

@@ -152,7 +152,7 @@ export default ({ pathname }) => {
         >
           <NavItem linkTo="/docs/">Docs</NavItem>
           <NavItem linkTo="/tutorial/">Tutorial</NavItem>
-          <NavItem linkTo="/packages/">Plugins</NavItem>
+          <NavItem linkTo="/plugins/">Plugins</NavItem>
           <NavItem linkTo="/features/">Features</NavItem>
           <NavItem linkTo="/blog/">Blog</NavItem>
         </ul>

www/src/layouts/index.js

@@ -31,18 +31,20 @@ class DefaultLayout extends React.Component {
     const isTutorial =
       this.props.location.pathname.slice(0, 10) === `/tutorial/`
     const isFeature = this.props.location.pathname.slice(0, 9) === `/features`
-    const isPackage = this.props.location.pathname.slice(0, 9) === `/packages`
+    const isPackageSearchPage =
+      this.props.location.pathname.slice(0, 8) === `/plugins` ||
+      this.props.location.pathname.slice(0, 9) === `/packages`
     const isPackageReadme =
       this.props.location.pathname.slice(0, 16) === `/packages/gatsby`
 
     const hasSidebar =
-      isDoc || isTutorial || isFeature || isPackage || isPackageReadme
+      isDoc || isTutorial || isFeature || isPackageSearchPage || isPackageReadme
     const isSearchSource = hasSidebar || isBlog
 
     const packageSidebarWidth = rhythm(17)
 
     const leftPadding = rhythmSize => {
-      if (this.props.location.pathname.slice(0, 9) === `/packages`) {
+      if (isPackageReadme || isPackageSearchPage) {
         return packageSidebarWidth
       } else if (hasSidebar) {
         return rhythm(rhythmSize)
@@ -83,11 +85,11 @@ class DefaultLayout extends React.Component {
     let searchBarDisplayProperty
     let childrenMobileDisplay
     let childrenTabletDisplay
-    if (isPackage && !isPackageReadme) {
+    if (isPackageSearchPage && !isPackageReadme) {
       searchBarDisplayProperty = { display: `block` }
       childrenMobileDisplay = { display: `none` }
       childrenTabletDisplay = { display: `block` }
-    } else if (isPackage && isPackageReadme) {
+    } else if (isPackageSearchPage && isPackageReadme) {
       searchBarDisplayProperty = {
         [presets.Mobile]: {
           display: `none`,
@@ -155,9 +157,9 @@ class DefaultLayout extends React.Component {
             css={{
               ...searchbarStyles,
               [presets.Tablet]: {
-                display: isPackage
+                display: isPackageSearchPage
                   ? `block`
-                  : isPackage && isPackageReadme ? `block` : `none`,
+                  : isPackageSearchPage && isPackageReadme ? `block` : `none`,
                 width: packageSidebarWidth,
                 position: `fixed`,
                 background: colors.ui.whisper,