Upgrade Gatsbygram

This proved fairly difficult — Gatsbygram's modal architecture is always a good canary in the coalmine for ensuring Gatsby's architecture is flexible. It ended up being quite elegant though: * Used <StaticQuery> to load the image metadata into the Modal component so it could loop through the images. * Exposed <PageRenderer> through the Gatsby package so that the layout could render the index page underneath the modal when it is showing * Use <React.Fragment> around the Index/Modal components so that the Index page component didn't need rendered to the DOM again * To detect if this was the initial render, I implemented onInitialClientRender and set a global on the window so that the post template component would know *not* to use the modal if the user went directly to a post page.
gatsbyjs · Apr 21, 2018 · 6cf01c4 · 6cf01c4
1 parent 7be5472
commit 6cf01c4
Show file tree

Hide file tree

Showing 20 changed files with 446 additions and 623 deletions.
diff --git a/examples/gatsbygram/.babelrc b/examples/gatsbygram/.babelrc
diff --git a/examples/gatsbygram/gatsby-browser.js b/examples/gatsbygram/gatsby-browser.js
@@ -9,3 +9,7 @@ exports.shouldUpdateScroll = args => {
     return false
   }
 }
+
+exports.onInitialClientRender = () => {
+  window.___GATSBYGRAM_INITIAL_RENDER_COMPLETE = true
+}
diff --git a/examples/gatsbygram/gatsby-config.js b/examples/gatsbygram/gatsby-config.js
@@ -67,5 +67,11 @@ module.exports = {
         trackingId: `UA-91652198-1`,
       },
     },
+    {
+      resolve: `gatsby-plugin-typography`,
+      options: {
+        pathToConfigModule: `src/utils/typography`,
+      },
+    },
   ],
 }
diff --git a/examples/gatsbygram/package.json b/examples/gatsbygram/package.json
@@ -5,30 +5,35 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "gatsby": "latest",
-    "gatsby-image": "^1.0.5",
-    "gatsby-plugin-glamor": "^1.6.8",
-    "gatsby-plugin-google-analytics": "^1.0.8",
-    "gatsby-plugin-manifest": "^1.0.8",
-    "gatsby-plugin-offline": "^1.0.9",
-    "gatsby-plugin-sharp": "^1.6.8",
-    "gatsby-source-filesystem": "^1.5.2",
-    "gatsby-transformer-json": "^1.0.8",
-    "gatsby-transformer-sharp": "^1.6.8",
+    "core-js": "^2.5.5",
+    "gatsby": "canary",
+    "gatsby-image": "canary",
+    "gatsby-plugin-glamor": "canary",
+    "gatsby-plugin-google-analytics": "canary",
+    "gatsby-plugin-manifest": "canary",
+    "gatsby-plugin-offline": "canary",
+    "gatsby-plugin-sharp": "canary",
+    "gatsby-plugin-typography": "^2.1.0-alpha.e9c3027b",
+    "gatsby-source-filesystem": "canary",
+    "gatsby-transformer-json": "canary",
+    "gatsby-transformer-sharp": "canary",
+    "glamor": "^2.20.40",
     "instagram-screen-scrape": "^2.0.0",
     "lodash": "^4.16.4",
     "mkdirp": "^0.5.1",
     "mousetrap": "^1.6.0",
-    "progress": "^1.1.8",
+    "progress": "^2.0.0",
     "prop-types": "^15.5.8",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "react-gravatar": "^2.6.1",
     "react-icons": "^2.2.3",
-    "react-modal": "^1.7.6",
-    "react-typography": "^0.15.0",
+    "react-modal": "^3.4.2",
+    "react-typography": "^0.16.13",
     "request": "^2.79.0",
     "slug": "^0.9.1",
-    "typeface-space-mono": "^0.0.22",
-    "typography": "^0.15.0"
+    "typeface-space-mono": "0.0.54",
+    "typography": "^0.16.6"
   },
   "keywords": [
     "gatsby"

diff --git a/examples/gatsbygram/src/components/modal.js b/examples/gatsbygram/src/components/modal.js
@@ -6,15 +6,16 @@ import Close from "react-icons/lib/md/close"
 import findIndex from "lodash/findIndex"
 import mousetrap from "mousetrap"
 import * as PropTypes from "prop-types"
-import { navigateTo } from "gatsby"
+import { navigateTo, StaticQuery } from "gatsby"
 
 import { rhythm } from "../utils/typography"
 
+let posts
+
 class GatsbyGramModal extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool,
     location: PropTypes.object.isRequired,
-    posts: PropTypes.array.isRequired,
   }
 
   componentDidMount() {
@@ -32,7 +33,7 @@ class GatsbyGramModal extends React.Component {
   findCurrentIndex() {
     let index
     index = findIndex(
-      this.props.posts,
+      posts,
       post => post.id === this.props.location.pathname.split(`/`)[1]
     )
 
@@ -45,7 +46,6 @@ class GatsbyGramModal extends React.Component {
     }
     const currentIndex = this.findCurrentIndex()
     if (currentIndex || currentIndex === 0) {
-      const posts = this.props.posts
       let nextPost
       // Wrap around if at end.
       if (currentIndex + 1 === posts.length) {
@@ -63,7 +63,6 @@ class GatsbyGramModal extends React.Component {
     }
     const currentIndex = this.findCurrentIndex()
     if (currentIndex || currentIndex === 0) {
-      const posts = this.props.posts
       let previousPost
       // Wrap around if at start.
       if (currentIndex === 0) {
@@ -77,94 +76,106 @@ class GatsbyGramModal extends React.Component {
 
   render() {
     return (
-      <Modal
-        isOpen={this.props.isOpen}
-        onRequestClose={() => navigateTo(`/`)}
-        style={{
-          overlay: {
-            position: `fixed`,
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: `rgba(0, 0, 0, 0.75)`,
-          },
-          content: {
-            position: `absolute`,
-            border: `none`,
-            background: `none`,
-            padding: 0,
-            top: 0,
-            bottom: 0,
-            right: 0,
-            left: 0,
-            overflow: `auto`,
-            WebkitOverflowScrolling: `touch`,
-          },
-        }}
-        contentLabel="Modal"
-      >
-        <div
-          onClick={() => navigateTo(`/`)}
-          css={{
-            display: `flex`,
-            position: `relative`,
-            height: `100vh`,
-          }}
-        >
-          <div
-            css={{
-              display: `flex`,
-              alignItems: `center`,
-              justifyItems: `center`,
-              maxWidth: rhythm(40.25), // Gets it right around Instagram's maxWidth.
-              margin: `auto`,
-              width: `100%`,
-            }}
-          >
-            <CaretLeft
-              css={{
-                cursor: `pointer`,
-                fontSize: `50px`,
-                color: `rgba(255,255,255,0.7)`,
-                userSelect: `none`,
-              }}
-              onClick={e => this.previous(e)}
-            />
-            {this.props.children({
-              location: { pathname: this.props.location.pathname },
-            })}
-            <CaretRight
-              css={{
-                cursor: `pointer`,
-                fontSize: `50px`,
-                color: `rgba(255,255,255,0.7)`,
-                userSelect: `none`,
+      <StaticQuery
+        query={graphql`
+          query ModalPosts {
+            allPostsJson {
+              edges {
+                node {
+                  id
+                }
+              }
+            }
+          }
+        `}
+        render={data => {
+          if (!posts) {
+            posts = data.allPostsJson.edges.map(e => e.node)
+          }
+          return (
+            <Modal
+              isOpen={this.props.isOpen}
+              onRequestClose={() => navigateTo(`/`)}
+              style={{
+                overlay: {
+                  position: `fixed`,
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  backgroundColor: `rgba(0, 0, 0, 0.75)`,
+                },
+                content: {
+                  position: `absolute`,
+                  border: `none`,
+                  background: `none`,
+                  padding: 0,
+                  top: 0,
+                  bottom: 0,
+                  right: 0,
+                  left: 0,
+                  overflow: `auto`,
+                  WebkitOverflowScrolling: `touch`,
+                },
               }}
-              onClick={e => this.next(e)}
-            />
-          </div>
-          <Close
-            onClick={() => navigateTo(`/`)}
-            css={{
-              cursor: `pointer`,
-              color: `rgba(255,255,255,0.8)`,
-              fontSize: `30px`,
-              position: `absolute`,
-              top: rhythm(1 / 4),
-              right: rhythm(1 / 4),
-            }}
-          />
-        </div>
-      </Modal>
+              contentLabel="Modal"
+            >
+              <div
+                onClick={() => navigateTo(`/`)}
+                css={{
+                  display: `flex`,
+                  position: `relative`,
+                  height: `100vh`,
+                }}
+              >
+                <div
+                  css={{
+                    display: `flex`,
+                    alignItems: `center`,
+                    justifyItems: `center`,
+                    maxWidth: rhythm(40.25), // Gets it right around Instagram's maxWidth.
+                    margin: `auto`,
+                    width: `100%`,
+                  }}
+                >
+                  <CaretLeft
+                    css={{
+                      cursor: `pointer`,
+                      fontSize: `50px`,
+                      color: `rgba(255,255,255,0.7)`,
+                      userSelect: `none`,
+                    }}
+                    onClick={e => this.previous(e)}
+                  />
+                  {this.props.children}
+                  <CaretRight
+                    css={{
+                      cursor: `pointer`,
+                      fontSize: `50px`,
+                      color: `rgba(255,255,255,0.7)`,
+                      userSelect: `none`,
+                    }}
+                    onClick={e => this.next(e)}
+                  />
+                </div>
+                <Close
+                  onClick={() => navigateTo(`/`)}
+                  css={{
+                    cursor: `pointer`,
+                    color: `rgba(255,255,255,0.8)`,
+                    fontSize: `30px`,
+                    position: `absolute`,
+                    top: rhythm(1 / 4),
+                    right: rhythm(1 / 4),
+                  }}
+                />
+              </div>
+            </Modal>
+          )
+        }}
+      />
     )
   }
 }
 
 export default GatsbyGramModal
-
-export const modalFragment = graphql`
-  fragment Modal_posts on PostsJson {
-    id
-  }
-`
diff --git a/examples/gatsbygram/src/components/post.js b/examples/gatsbygram/src/components/post.js
@@ -2,6 +2,7 @@ import * as PropTypes from "prop-types"
 import React from "react"
 import HeartIcon from "react-icons/lib/fa/heart"
 import { Link } from "gatsby"
+import Img from "gatsby-image"
 
 import { rhythm, scale } from "../utils/typography"
 import presets from "../utils/presets"

diff --git a/examples/gatsbygram/src/html.js b/examples/gatsbygram/src/html.js