refactor(www): Move out pageWithSidebar from layout (#21333)

* Move out pageWithSidebar from layout and into the templates/pages that actually need it. * update based on recent merges * doh * dont generate sidebar if itemlist doenst exist * fix stuff * get rid of unneeded import * remove enableScrollSync prop
gatsbyjs · Feb 14, 2020 · 9f8ddb6 · 9f8ddb6
1 parent 82eaf4f
commit 9f8ddb6
Show file tree

Hide file tree

Showing 8 changed files with 335 additions and 332 deletions.
diff --git a/www/src/components/layout.js b/www/src/components/layout.js
@@ -4,29 +4,19 @@ import React from "react"
 
 import { Global } from "@emotion/core"
 
-import { getItemList } from "../utils/sidebar/item-list"
 import { globalStyles } from "../utils/styles/global"
 import { breakpointGutter } from "../utils/styles"
 import Banner from "../components/banner"
 import Navigation from "../components/navigation"
 import MobileNavigation from "../components/navigation-mobile"
-import PageWithSidebar from "../components/page-with-sidebar"
 import SiteMetadata from "../components/site-metadata"
 import SkipNavLink from "../components/skip-nav-link"
 import "../assets/fonts/futura"
 import { defaultLang } from "../utils/i18n"
 
 export const LocaleContext = React.createContext(defaultLang)
 
-export default function DefaultLayout({
-  location,
-  locale,
-  enableScrollSync,
-  children,
-}) {
-  const itemList = getItemList(location.pathname)
-  const isSidebarDisabled = !itemList
-
+export default function DefaultLayout({ location, locale, children }) {
   return (
     <LocaleContext.Provider value={locale || defaultLang}>
       <Global styles={globalStyles} />
@@ -47,13 +37,7 @@ export default function DefaultLayout({
           },
         }}
       >
-        <PageWithSidebar
-          disable={isSidebarDisabled}
-          itemList={itemList}
-          location={location}
-          enableScrollSync={enableScrollSync}
-          renderContent={() => children}
-        />
+        {children}
       </div>
       <MobileNavigation />
     </LocaleContext.Provider>

diff --git a/www/src/components/page-with-sidebar.js b/www/src/components/page-with-sidebar.js
@@ -2,38 +2,39 @@
 import { jsx } from "theme-ui"
 import { Fragment } from "react"
 
+import { getItemList } from "../utils/sidebar/item-list"
 import StickyResponsiveSidebar from "./sidebar/sticky-responsive-sidebar"
 
-export default props => {
-  if (props.disable) {
-    return props.renderContent()
-  } else {
-    return (
-      <Fragment>
-        <div
-          sx={{
-            pl: [
-              null,
-              null,
-              null,
-              t => t.sizes.sidebarWidth.default,
-              t => t.sizes.sidebarWidth.large,
-            ],
-          }}
-        >
-          {props.renderContent()}
-        </div>
-        <StickyResponsiveSidebar
-          enableScrollSync={props.enableScrollSync}
-          itemList={props.itemList.items}
-          title={props.itemList.title}
-          sidebarKey={props.itemList.key}
-          disableExpandAll={props.itemList.disableExpandAll}
-          disableAccordions={props.itemList.disableAccordions}
-          key={props.location.pathname}
-          location={props.location}
-        />
-      </Fragment>
-    )
+export default ({ children, enableScrollSync, location }) => {
+  const itemList = getItemList(location.pathname)
+  if (!itemList) {
+    return children
   }
+  return (
+    <Fragment>
+      <div
+        sx={{
+          pl: [
+            null,
+            null,
+            null,
+            t => t.sizes.sidebarWidth.default,
+            t => t.sizes.sidebarWidth.large,
+          ],
+        }}
+      >
+        {children}
+      </div>
+      <StickyResponsiveSidebar
+        enableScrollSync={enableScrollSync}
+        itemList={itemList.items}
+        title={itemList.title}
+        sidebarKey={itemList.key}
+        disableExpandAll={itemList.disableExpandAll}
+        disableAccordions={itemList.disableAccordions}
+        key={location.pathname}
+        location={location}
+      />
+    </Fragment>
+  )
 }
diff --git a/www/src/pages/features.js b/www/src/pages/features.js
@@ -11,6 +11,7 @@ import FooterLinks from "../components/shared/footer-links"
 import LegendTable from "../components/features/legend-table"
 import FeaturesFooter from "../components/features/features-footer"
 import SimpleEvaluationTable from "../components/features/simple-evaluation-table"
+import PageWithSidebar from "../components/page-with-sidebar"
 
 const FeaturesHeader = () => (
   <section>
@@ -104,34 +105,36 @@ const FeaturesHeader = () => (
 class FeaturesPage extends Component {
   render() {
     return (
-      <Layout location={this.props.location} enableScrollSync={true}>
-        <Helmet>
-          <title>Features</title>
-          <meta
-            name="description"
-            content="Learn how specific features like performance and support for modern technologies make Gatsby worth using."
-          />
-        </Helmet>
-        <Container>
-          <main id={`reach-skip-nav`}>
-            <FeaturesHeader />
-            <SimpleEvaluationTable
-              title="Feature Comparison"
-              headers={[
-                { display: `Category`, nodeFieldProperty: `Category` },
-                { display: `Gatsby`, nodeFieldProperty: `Gatsby` },
-                {
-                  display: `JAMstack frameworks`,
-                  nodeFieldProperty: `Jamstack`,
-                },
-                { display: `Traditional CMS`, nodeFieldProperty: `Cms` },
-              ]}
-              data={this.props.data.allGatsbyFeaturesSpecsCsv.edges}
+      <Layout location={this.props.location}>
+        <PageWithSidebar location={this.props.location}>
+          <Helmet>
+            <title>Features</title>
+            <meta
+              name="description"
+              content="Learn how specific features like performance and support for modern technologies make Gatsby worth using."
             />
-            <FeaturesFooter />
-          </main>
-          <FooterLinks />
-        </Container>
+          </Helmet>
+          <Container>
+            <main id={`reach-skip-nav`}>
+              <FeaturesHeader />
+              <SimpleEvaluationTable
+                title="Feature Comparison"
+                headers={[
+                  { display: `Category`, nodeFieldProperty: `Category` },
+                  { display: `Gatsby`, nodeFieldProperty: `Gatsby` },
+                  {
+                    display: `JAMstack frameworks`,
+                    nodeFieldProperty: `Jamstack`,
+                  },
+                  { display: `Traditional CMS`, nodeFieldProperty: `Cms` },
+                ]}
+                data={this.props.data.allGatsbyFeaturesSpecsCsv.edges}
+              />
+              <FeaturesFooter />
+            </main>
+            <FooterLinks />
+          </Container>
+        </PageWithSidebar>
       </Layout>
     )
   }

diff --git a/www/src/pages/features/cms.js b/www/src/pages/features/cms.js
@@ -4,6 +4,7 @@ import { graphql } from "gatsby"
 
 import Button from "../../components/button"
 import Layout from "../../components/layout"
+import PageWithSidebar from "../../components/page-with-sidebar"
 import EvaluationTable from "../../components/features/evaluation-table"
 import { getFeaturesData } from "../../utils/get-csv-features-data"
 import Container from "../../components/container"
@@ -35,60 +36,62 @@ const CmsFeaturesPage = ({ data, location }) => {
   )
 
   return (
-    <Layout location={location} enableScrollSync={true}>
-      <Container>
-        <main id={`reach-skip-nav`}>
-          <Breadcrumb location={location} />
-          <FeaturesHeader />
-          <h3>Comparison</h3>
-          <p>
-            To see a filtered view of Gatsby compared with specific CMS
-            technologies, choose the technologies to compare and then press
-            Compare:
-          </p>
-          <div sx={{ pb: 10 }}>
-            <div
-              sx={{
-                display: `grid`,
-                gridTemplateColumns: `repeat(auto-fit, minmax(75px, 1fr))`,
-                gridAutoRows: `1fr`,
-                gridGap: 2,
-                pb: 4,
-              }}
-            >
-              {featureComparisonOptions.cms.map(
-                ({ key: optionKey, display }) => (
-                  <CompareButton
-                    key={optionKey}
-                    optionKey={optionKey}
-                    selected={selected[optionKey]}
-                    setSelected={setSelected}
-                  >
-                    {display}
-                  </CompareButton>
-                )
-              )}
+    <Layout location={location}>
+      <PageWithSidebar location={location}>
+        <Container>
+          <main id={`reach-skip-nav`}>
+            <Breadcrumb location={location} />
+            <FeaturesHeader />
+            <h3>Comparison</h3>
+            <p>
+              To see a filtered view of Gatsby compared with specific CMS
+              technologies, choose the technologies to compare and then press
+              Compare:
+            </p>
+            <div sx={{ pb: 10 }}>
+              <div
+                sx={{
+                  display: `grid`,
+                  gridTemplateColumns: `repeat(auto-fit, minmax(75px, 1fr))`,
+                  gridAutoRows: `1fr`,
+                  gridGap: 2,
+                  pb: 4,
+                }}
+              >
+                {featureComparisonOptions.cms.map(
+                  ({ key: optionKey, display }) => (
+                    <CompareButton
+                      key={optionKey}
+                      optionKey={optionKey}
+                      selected={selected[optionKey]}
+                      setSelected={setSelected}
+                    >
+                      {display}
+                    </CompareButton>
+                  )
+                )}
+              </div>
+              <Button
+                to={
+                  hasSelected
+                    ? `/features/cms/gatsby-vs-${comparators.join(`-vs-`)}`
+                    : location.pathname
+                }
+              >
+                Compare with Gatsby
+              </Button>
             </div>
-            <Button
-              to={
-                hasSelected
-                  ? `/features/cms/gatsby-vs-${comparators.join(`-vs-`)}`
-                  : location.pathname
-              }
-            >
-              Compare with Gatsby
-            </Button>
-          </div>
-          <LegendTable />
-          <EvaluationTable
-            options={featureComparisonOptions.cms}
-            sections={sections}
-            sectionHeaders={sectionHeaders}
-          />
-          <FeaturesFooter />
-        </main>
-        <FooterLinks />
-      </Container>
+            <LegendTable />
+            <EvaluationTable
+              options={featureComparisonOptions.cms}
+              sections={sections}
+              sectionHeaders={sectionHeaders}
+            />
+            <FeaturesFooter />
+          </main>
+          <FooterLinks />
+        </Container>
+      </PageWithSidebar>
     </Layout>
   )
 }