[v2] WIP implementing RFC #2 removing special layout component (#4887)

[v2] Implement RFC #2 removing special layout component

Author: KyleAMathews

.babel-preset.js

@@ -42,6 +42,7 @@ function preset(context, options = {}) {
     ],
     plugins: [
       r("@babel/plugin-proposal-class-properties"),
+      r("@babel/plugin-proposal-optional-chaining"),
       [
         r("@babel/plugin-transform-runtime"),
         {

Breaking Changes.md

@@ -5,4 +5,4 @@
 * Remove explicit polyfill and use the new builtins: usage support in babel 7.
 * Changed `modifyBabelrc` to `onCreateBabelConfig`
 * Changed `modifyWebpackConfig` to `onCreateWebpackConfig`
-* inlining css changed — remove it as done automatically by core now.
+* inlining css changed — remove it from any custom html.js as done automatically by core now.

docs/docs/api-specification.md

@@ -56,9 +56,9 @@ See
 ## Concepts
 
 * _Page_ — a site page with a pathname, a template component, and optional
-  graphql query and layout component
+  graphql query.
 * _Page Component_ — React.js component that renders a page and can optionally
-  specify a layout component and a graphql query
+  specify a graphql query
 * _Component extensions_ — extensions that are resolvable as components. `.js`
   and `.jsx` are supported by core. But plugins can add support for other
   compile-to-js languages.

docs/docs/building-with-components.md

@@ -40,10 +40,7 @@ A basic directory structure of a project might look like this:
     │       └── 01-03-2017
     │           └── index.md
     ├── templates
-    │   └── post.jsx
-    │
-    └── layouts
-        └── index.jsx
+        └── post.jsx
 ```
 
 ### Page components
@@ -117,31 +114,6 @@ export const pageQuery = graphql`
 `;
 ```
 
-### Layout components
-
-`src/layouts/index.jsx` (optional) wraps page components. You can use it for
-portions of pages that are shared across pages like headers and footers.
-
-You can use the `location` prop to render conditionally based on the page
-URL.
-
-Example:
-
-```jsx
-import React from "react";
-import Navigation from "../components/Navigation/Navigation.jsx";
-
-export default class Template extends React.Component {
-  render() {
-    if (this.props.location.pathname !== "/") {
-      return <Navigation>{this.props.children()}</Navigation>;
-    } else {
-      return this.props.children();
-    }
-  }
-}
-```
-
 ### HTML component
 
 `src/html.jsx` is responsible for everything other than where Gatsby lives in

docs/docs/creating-and-modifying-pages.md

@@ -84,8 +84,6 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
           createPage({
             path,
             component: blogPostTemplate,
-            // If you have a layout component at src/layouts/blog-layout.js
-            layout: `blog-layout`,
             // In your blog post template's graphql query, you can use path
             // as a GraphQL variable to query for data from the markdown file.
             context: {
@@ -133,33 +131,3 @@ exports.onCreatePage = ({ page, boundActionCreators }) => {
   });
 };
 ```
-
-### Choosing the page layout
-
-By default, all pages will use the layout found at `/layouts/index.js`.
-
-You may wish to choose a custom layout for certain pages (such as removing
-header and footer for landing pages). You can choose the layout component when
-creating pages with the `createPage` action by adding a layout key to the page
-object or modify pages created elsewhere using the `onCreatePage` API. All
-components in the `/layouts/` directory are automatically available.
-
-```javascript
-// Implement the Gatsby API “onCreatePage”. This is
-// called after every page is created.
-exports.onCreatePage = async ({ page, boundActionCreators }) => {
-  const { createPage } = boundActionCreators;
-
-  return new Promise((resolve, reject) => {
-    if (page.path.match(/^\/landing-page/)) {
-      // It's assumed that `landingPage.js` exists in the `/layouts/` directory
-      page.layout = "landingPage";
-
-      // Update the page.
-      createPage(page);
-    }
-
-    resolve();
-  });
-};
-```

examples/client-only-paths/gatsby-config.js

@@ -4,11 +4,10 @@ module.exports = {
   },
   plugins: [
     {
-      resolve: `gatsby-plugin-google-analytics`,
+      resolve: `gatsby-plugin-typography`,
       options: {
-        trackingId: `UA-93349937-2`,
+        pathToConfigModule: `src/utils/typography`,
       },
     },
-    `gatsby-plugin-offline`,
   ],
 }

examples/client-only-paths/package.json

@@ -5,16 +5,16 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
-    "gatsby": "latest",
-    "gatsby-plugin-google-analytics": "latest",
-    "gatsby-plugin-offline": "latest",
-    "gatsby-source-drupal": "latest",
+    "gatsby": "canary",
+    "gatsby-plugin-typography": "canary",
     "lodash": "^4.16.4",
+    "react": "^16.3.1",
     "react-addons-css-transition-group": "^15.5.2",
-    "react-typography": "^0.15.0",
+    "react-dom": "^16.3.1",
+    "react-typography": "^0.16.13",
     "slash": "^1.0.0",
-    "typography": "^0.15.8",
-    "typography-breakpoint-constants": "^0.14.0"
+    "typography": "^0.16.6",
+    "typography-breakpoint-constants": "^0.15.10"
   },
   "keywords": [
     "gatsby"
@@ -25,4 +25,4 @@
     "develop": "gatsby develop",
     "build": "gatsby build"
   }
-}
+}

examples/client-only-paths/src/html.js

@@ -1,7 +1,8 @@
 import React from "react"
 import { Link } from "gatsby"
 
-import { rhythm } from "../utils/typography"
+import typography from "../utils/typography"
+const { rhythm } = typography
 
 class DefaultLayout extends React.Component {
   render() {
@@ -21,7 +22,7 @@ class DefaultLayout extends React.Component {
             Example of adding client only paths
           </h3>
         </Link>
-        {this.props.children()}
+        {this.props.children}
       </div>
     )
   }

examples/client-only-paths/src/layouts/index.js

@@ -4,51 +4,54 @@ import ReactCSSTransitionGroup from "react-addons-css-transition-group"
 import { Route, Redirect } from "react-router-dom"
 
 import "./main.css"
+import Layout from "../layouts"
 
 class AnimationExample extends React.Component {
   render() {
     return (
-      <div style={{ position: `relative`, minHeight: `80vh` }}>
-        <Route
-          render={({ location }) => (
-            <div style={styles.fill}>
-              <Route
-                exact
-                path="/"
-                render={() => <Redirect to="/10/90/50" />}
-              />
+      <Layout>
+        <div style={{ position: `relative`, minHeight: `80vh` }}>
+          <Route
+            render={({ location }) => (
+              <div style={styles.fill}>
+                <Route
+                  exact
+                  path="/"
+                  render={() => <Redirect to="/10/90/50" />}
+                />
 
-              <ul style={styles.nav}>
-                <NavLink to="/10/90/50">Red</NavLink>
-                <NavLink to="/120/100/40">Green</NavLink>
-                <NavLink to="/200/100/40">Blue</NavLink>
-                <NavLink to="/310/100/50">Pink</NavLink>
-              </ul>
+                <ul style={styles.nav}>
+                  <NavLink to="/10/90/50">Red</NavLink>
+                  <NavLink to="/120/100/40">Green</NavLink>
+                  <NavLink to="/200/100/40">Blue</NavLink>
+                  <NavLink to="/310/100/50">Pink</NavLink>
+                </ul>
 
-              <div style={styles.content}>
-                <ReactCSSTransitionGroup
-                  transitionName="fade"
-                  transitionEnterTimeout={300}
-                  transitionLeaveTimeout={300}
-                >
-                  {/* no different than other usage of
+                <div style={styles.content}>
+                  <ReactCSSTransitionGroup
+                    transitionName="fade"
+                    transitionEnterTimeout={300}
+                    transitionLeaveTimeout={300}
+                  >
+                    {/* no different than other usage of
                 ReactCSSTransitionGroup, just make
                 sure to pass `location` to `Route`
                 so it can match the old location
                 as it animates out
             */}
-                  <Route
-                    location={location}
-                    key={location.key}
-                    path="/:h/:s/:l"
-                    component={HSL}
-                  />
-                </ReactCSSTransitionGroup>
+                    <Route
+                      location={location}
+                      key={location.key}
+                      path="/:h/:s/:l"
+                      component={HSL}
+                    />
+                  </ReactCSSTransitionGroup>
+                </div>
               </div>
-            </div>
-          )}
-        />
-      </div>
+            )}
+          />
+        </div>
+      </Layout>
     )
   }
 }

examples/client-only-paths/src/pages/index.js

@@ -9,3 +9,7 @@ exports.shouldUpdateScroll = args => {
     return false
   }
 }
+
+exports.onInitialClientRender = () => {
+  window.___GATSBYGRAM_INITIAL_RENDER_COMPLETE = true
+}

examples/gatsbygram/.babelrc

@@ -67,5 +67,11 @@ module.exports = {
         trackingId: `UA-91652198-1`,
       },
     },
+    {
+      resolve: `gatsby-plugin-typography`,
+      options: {
+        pathToConfigModule: `src/utils/typography`,
+      },
+    },
   ],
 }