Refactor gatsbyjs.org for no layout component

gatsbyjs · Apr 21, 2018 · 3c9e3c3 · 3c9e3c3
1 parent e9c3027
commit 3c9e3c3
Show file tree

Hide file tree

Showing 14 changed files with 555 additions and 506 deletions.
diff --git a/www/package.json b/www/package.json
@@ -6,35 +6,35 @@
   "dependencies": {
     "bluebird": "^3.5.1",
     "email-validator": "^1.1.1",
-    "gatsby": "next",
-    "gatsby-image": "next",
-    "gatsby-plugin-canonical-urls": "next",
-    "gatsby-plugin-catch-links": "next",
-    "gatsby-plugin-feed": "next",
-    "gatsby-plugin-glamor": "next",
-    "gatsby-plugin-google-analytics": "next",
-    "gatsby-plugin-lodash": "next",
-    "gatsby-plugin-manifest": "next",
-    "gatsby-plugin-netlify": "next",
-    "gatsby-plugin-nprogress": "next",
-    "gatsby-plugin-offline": "next",
-    "gatsby-plugin-react-helmet": "next",
-    "gatsby-plugin-sharp": "next",
-    "gatsby-plugin-sitemap": "next",
-    "gatsby-plugin-twitter": "next",
-    "gatsby-plugin-typography": "next",
-    "gatsby-remark-autolink-headers": "next",
-    "gatsby-remark-copy-linked-files": "next",
-    "gatsby-remark-images": "next",
-    "gatsby-remark-prismjs": "next",
-    "gatsby-remark-responsive-iframe": "next",
-    "gatsby-remark-smartypants": "next",
-    "gatsby-source-filesystem": "next",
-    "gatsby-transformer-csv": "next",
-    "gatsby-transformer-documentationjs": "next",
-    "gatsby-transformer-remark": "next",
-    "gatsby-transformer-sharp": "next",
-    "gatsby-transformer-yaml": "next",
+    "gatsby": "canary",
+    "gatsby-image": "canary",
+    "gatsby-plugin-canonical-urls": "canary",
+    "gatsby-plugin-catch-links": "canary",
+    "gatsby-plugin-feed": "canary",
+    "gatsby-plugin-glamor": "canary",
+    "gatsby-plugin-google-analytics": "canary",
+    "gatsby-plugin-lodash": "canary",
+    "gatsby-plugin-manifest": "canary",
+    "gatsby-plugin-netlify": "canary",
+    "gatsby-plugin-nprogress": "canary",
+    "gatsby-plugin-offline": "canary",
+    "gatsby-plugin-react-helmet": "canary",
+    "gatsby-plugin-sharp": "canary",
+    "gatsby-plugin-sitemap": "canary",
+    "gatsby-plugin-twitter": "canary",
+    "gatsby-plugin-typography": "canary",
+    "gatsby-remark-autolink-headers": "canary",
+    "gatsby-remark-copy-linked-files": "canary",
+    "gatsby-remark-images": "canary",
+    "gatsby-remark-prismjs": "canary",
+    "gatsby-remark-responsive-iframe": "canary",
+    "gatsby-remark-smartypants": "canary",
+    "gatsby-source-filesystem": "canary",
+    "gatsby-transformer-csv": "canary",
+    "gatsby-transformer-documentationjs": "canary",
+    "gatsby-transformer-remark": "canary",
+    "gatsby-transformer-sharp": "canary",
+    "gatsby-transformer-yaml": "canary",
     "glamor": "^2.20.40",
     "graphql-request": "^1.4.0",
     "gray-percentage": "^2.0.0",

diff --git a/www/src/components/docsearch-content.js b/www/src/components/docsearch-content.js
@@ -0,0 +1,5 @@
+import React from "react"
+
+export default ({ children }) => (
+  <div className={`docSearch-content`}>{children}</div>
+)
diff --git a/www/src/components/page-with-sidebar.js b/www/src/components/page-with-sidebar.js
@@ -0,0 +1,31 @@
+import React from "react"
+
+import SidebarBody from "./sidebar-body"
+import presets from "../utils/presets"
+import { rhythm } from "../utils/typography"
+
+export default props => {
+  if (props.disable) {
+    return props.renderContent()
+  } else {
+    return (
+      <div>
+        <div
+          css={{
+            [presets.Tablet]: { paddingLeft: rhythm(10) },
+            [`${presets.Tablet} and (max-width:980px)`]: {
+              ".gatsby-highlight": {
+                marginLeft: 0,
+                marginRight: 0,
+              },
+            },
+            [presets.Desktop]: { paddingLeft: rhythm(12) },
+          }}
+        >
+          {props.renderContent()}
+        </div>
+        <SidebarBody yaml={props.yaml} />
+      </div>
+    )
+  }
+}
diff --git a/www/src/components/sidebar-body.js b/www/src/components/sidebar-body.js
@@ -1,5 +1,6 @@
 import React from "react"
 import { Link } from "gatsby"
+import hex2rgba from "hex2rgba"
 
 import { rhythm, scale, options } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
@@ -200,6 +201,38 @@ class SidebarBody extends React.Component {
     return (
       <div
         css={{
+          borderRight: `1px solid ${colors.ui.light}`,
+          backgroundColor: colors.ui.whisper,
+          boxShadow: `inset 0 4px 5px 0 ${hex2rgba(
+            colors.gatsby,
+            presets.shadowKeyPenumbraOpacity
+          )}, inset 0 1px 10px 0 ${hex2rgba(
+            colors.lilac,
+            presets.shadowAmbientShadowOpacity
+          )}, inset 0 2px 4px -1px ${hex2rgba(
+            colors.lilac,
+            presets.shadowKeyUmbraOpacity
+          )}`,
+          width: rhythm(10),
+          position: `fixed`,
+          top: `calc(${presets.headerHeight} - 1px)`,
+          overflowY: `auto`,
+          height: `calc(100vh - ${presets.headerHeight} + 1px)`,
+          WebkitOverflowScrolling: `touch`,
+          "::-webkit-scrollbar": {
+            width: `6px`,
+            height: `6px`,
+          },
+          "::-webkit-scrollbar-thumb": {
+            background: colors.ui.bright,
+          },
+          "::-webkit-scrollbar-track": {
+            background: colors.ui.light,
+          },
+          [presets.Desktop]: {
+            width: rhythm(12),
+            padding: rhythm(1),
+          },
           padding: isInline ? 0 : rhythm(3 / 4),
         }}
         className="docSearch-sidebar"

diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
@@ -3,14 +3,8 @@ import Helmet from "react-helmet"
 
 import Navigation from "../components/navigation"
 import MobileNavigation from "../components/navigation-mobile"
-import SidebarBody from "../components/sidebar-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"
-import { rhythm, scale } from "../utils/typography"
-import presets, { colors } from "../utils/presets"
-import hex2rgba from "hex2rgba"
 import "../css/prism-coy.css"
+import presets from "../utils/presets"
 
 // Import Futura PT typeface
 import "../fonts/Webfonts/futurapt_book_macroman/stylesheet.css"
@@ -25,47 +19,6 @@ import "typeface-space-mono"
 class DefaultLayout extends React.Component {
   render() {
     const isHomepage = this.props.location.pathname == `/`
-    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
-    const sidebarStyles = {
-      borderRight: `1px solid ${colors.ui.light}`,
-      backgroundColor: colors.ui.whisper,
-      boxShadow: `inset 0 4px 5px 0 ${hex2rgba(
-        colors.gatsby,
-        presets.shadowKeyPenumbraOpacity
-      )}, inset 0 1px 10px 0 ${hex2rgba(
-        colors.lilac,
-        presets.shadowAmbientShadowOpacity
-      )}, inset 0 2px 4px -1px ${hex2rgba(
-        colors.lilac,
-        presets.shadowKeyUmbraOpacity
-      )}`,
-      width: rhythm(10),
-      display: `none`,
-      position: `fixed`,
-      top: `calc(${presets.headerHeight} - 1px)`,
-      overflowY: `auto`,
-      height: `calc(100vh - ${presets.headerHeight} + 1px)`,
-      WebkitOverflowScrolling: `touch`,
-      "::-webkit-scrollbar": {
-        width: `6px`,
-        height: `6px`,
-      },
-      "::-webkit-scrollbar-thumb": {
-        background: colors.ui.bright,
-      },
-      "::-webkit-scrollbar-track": {
-        background: colors.ui.light,
-      },
-      [presets.Desktop]: {
-        width: rhythm(12),
-        padding: rhythm(1),
-      },
-    }
 
     return (
       <div className={isHomepage ? `is-homepage` : ``}>
@@ -77,7 +30,7 @@ class DefaultLayout extends React.Component {
         </Helmet>
         <Navigation pathname={this.props.location.pathname} />
         <div
-          className={hasSidebar ? `main-body has-sidebar` : `main-body`}
+          className={`main-body`}
           css={{
             paddingTop: 0,
             [presets.Tablet]: {
@@ -86,63 +39,7 @@ class DefaultLayout extends React.Component {
             },
           }}
         >
-          {/* TODO Move this under docs/index.js once Gatsby supports multiple levels
-               of layouts */}
-          <div
-            css={{
-              ...sidebarStyles,
-              [presets.Tablet]: {
-                display:
-                  this.props.location.pathname.slice(0, 6) === `/docs/` ||
-                  this.props.location.pathname.slice(0, 10) === `/packages/`
-                    ? `block`
-                    : `none`,
-              },
-            }}
-          >
-            <SidebarBody yaml={docsSidebar} />
-          </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`,
-              },
-            }}
-          >
-            <SidebarBody yaml={tutorialSidebar} />
-          </div>
-          <div
-            css={{
-              ...sidebarStyles,
-              [presets.Tablet]: {
-                display:
-                  this.props.location.pathname.slice(0, 9) === `/features`
-                    ? `block`
-                    : `none`,
-              },
-            }}
-          >
-            <SidebarBody yaml={featuresSidebar} />
-          </div>
-          <div
-            css={{
-              [presets.Tablet]: {
-                paddingLeft: hasSidebar ? rhythm(10) : 0,
-              },
-              [presets.Desktop]: {
-                paddingLeft: hasSidebar ? rhythm(12) : 0,
-              },
-            }}
-            className={isSearchSource && `docSearch-content`}
-          >
-            {this.props.children()}
-          </div>
+          {this.props.children}
         </div>
         <MobileNavigation />
       </div>

diff --git a/www/src/pages/404.js b/www/src/pages/404.js
@@ -1,12 +1,15 @@
 import React from "react"
 import Container from "../components/container"
+import GlobalLayout from "../layouts"
 
 class FourOhFour extends React.Component {
   render() {
     return (
-      <Container>
-        <h1>Page not found</h1>
-      </Container>
+      <GlobalLayout location={this.props.location}>
+        <Container>
+          <h1>Page not found</h1>
+        </Container>
+      </GlobalLayout>
     )
   }
 }