feat(examples): migrate from createPages to File System Routes (#31538)

* Refactor using-contentful to use fs routes * Upgrade gatsbygram * Fix & upgrade using-drupal
gatsbyjs · May 21, 2021 · 5ba1ac2 · 5ba1ac2
1 parent 21567d4
commit 5ba1ac2
Show file tree

Hide file tree

Showing 18 changed files with 132 additions and 322 deletions.
diff --git a/examples/gatsbygram/data/posts.json b/examples/gatsbygram/data/posts.json
@@ -10,7 +10,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/83b838f14c7d14dfe6d135169269c5b4/5B5DA593/t51.2885-15/e35/25022535_184817402253496_8516666732012634112_n.jpg",
     "image": "images/BdiU-TTFP4h.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1677771511187112561",
@@ -23,7 +23,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/2d017da97183c1b44af94f89a5c339a5/5B715B0A/t51.2885-15/e35/25023686_225296388010245_7735181992098004992_n.jpg",
     "image": "images/BdIpEzalAJx.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1632234281433883850",
@@ -36,7 +36,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/9fe5e566f6a2f052e00d93f5946573f2/5B6CF364/t51.2885-15/s1080x1080/e15/fr/22639107_756415651233391_8439041434429947904_n.jpg",
     "image": "images/Bam3G5XFOTK.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1601601194425654597",
@@ -49,7 +49,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/f8a655a6b9e098ef746f214e428519de/5B634421/t51.2885-15/e35/21576632_732996816885233_1499694509796098048_n.jpg",
     "image": "images/BY6B8z5lR1F.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1601530617317009166",
@@ -62,7 +62,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/3bc6679049dad0943ec35fddeceded1c/5B5A3CC6/t51.2885-15/e35/21436024_558002044536606_410562662628327424_n.jpg",
     "image": "images/BY5x5x2F6cO.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1565766376903475329",
@@ -75,7 +75,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/f6a2224e3d487077d05236e18fc3f828/5B534A95/t51.2885-15/e35/20213921_501593333518668_2100867941279989760_n.jpg",
     "image": "images/BW6uDlYlQCB.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1515268510112420213",
@@ -88,7 +88,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/d18ce4068dfa63b549ac14094bb97fdb/5B5E1699/t51.2885-15/e35/18513840_1901390483461632_2937117302379773952_n.jpg",
     "image": "images/BUHUK6ElhF1.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1486495736706552111",
@@ -101,7 +101,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/9ad5a7f1ebead61388662f1e6824067f/5B592AA0/t51.2885-15/e35/17663748_1153852971404500_7070241507587915776_n.jpg",
     "image": "images/BShF_8qhtEv.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1483463111452464830",
@@ -114,7 +114,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/407a3c9b5efdb77c0f77135cccb08612/5B69631A/t51.2885-15/e35/17662854_1280815928623035_937926441180332032_n.jpg",
     "image": "images/BSWUdcThRa-.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1478435327902728655",
@@ -127,7 +127,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/4ed741dd0c523a7bebce11a760271b77/5B4EF4B9/t51.2885-15/e35/17494792_1133907666737199_1768011540662845440_n.jpg",
     "image": "images/BSEdRj_B8HP.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1360516742464695325",
@@ -140,7 +140,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/987105bfff21fd4e32ae59cbbfc32ad7/5B69748B/t51.2885-15/e35/14693758_1766411793613440_7185291805863182336_n.jpg",
     "image": "images/BLhhsTZlGwd.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1346779149175505545",
@@ -153,7 +153,7 @@
     "media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/7aac4ca6f8724c7f17d3750f2f91f76e/5B6D1AB8/t51.2885-15/e35/14360137_1696760950649699_2816603071264587776_n.jpg",
     "image": "images/BKwuIApgkKJ.jpg",
     "username": "kyle__mathews",
-    "avatar": "https://scontent-amt2-1.cdninstagram.com/vp/7b94b2df396446ae99e1d51a857ded24/5D1EF8DA/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com"
+    "avatar": "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/11373674_1480574918906897_270256414_a.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=iSaRrWbsamIAX_mZD1Z&edm=ABfd0MgBAAAA&ccb=7-4&oh=80020389db1e722f5b80db03ad2ee39d&oe=60AF23E6&_nc_sid=7bff83"
   },
   {
     "id": "1270677182602272387",

diff --git a/examples/gatsbygram/gatsby-config.js b/examples/gatsbygram/gatsby-config.js
@@ -29,6 +29,7 @@ module.exports = {
     // images with the NPM package “sharp”. It's used by
     // several other plugins.
     `gatsby-plugin-sharp`,
+    `gatsby-plugin-image`,
     // This plugin identifies file nodes that are images and
     // transforms these to create new “ImageSharp” nodes.
     // With them you can resize images and

diff --git a/examples/gatsbygram/gatsby-node.js b/examples/gatsbygram/gatsby-node.js
diff --git a/examples/gatsbygram/package.json b/examples/gatsbygram/package.json
@@ -5,12 +5,12 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "core-js": "^2.6.11",
     "gatsby": "next",
     "gatsby-core-utils": "next",
     "gatsby-image": "next",
     "gatsby-plugin-glamor": "next",
     "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-image": "^1.5.0",
     "gatsby-plugin-manifest": "next",
     "gatsby-plugin-offline": "next",
     "gatsby-plugin-sharp": "next",
@@ -25,15 +25,14 @@
     "mousetrap": "^1.6.5",
     "progress": "^2.0.3",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-gravatar": "^2.6.3",
-    "react-icons": "^2.2.7",
+    "react-icons": "2",
     "react-modal": "^3.11.2",
     "react-typography": "^0.16.19",
     "request": "^2.88.2",
-    "slug": "^0.9.4",
-    "typeface-space-mono": "0.0.71",
+    "typeface-space-mono": "1.1.13",
     "typography": "^0.16.19"
   },
   "keywords": [
@@ -57,4 +56,4 @@
     "gatsby-cypress": "^0.4.10",
     "start-server-and-test": "^1.11.3"
   }
-}
+}
diff --git a/examples/gatsbygram/src/components/Avatar.js b/examples/gatsbygram/src/components/Avatar.js
@@ -2,6 +2,7 @@ import * as PropTypes from "prop-types"
 import React from "react"
 import { rhythm } from "../utils/typography"
 import { graphql } from "gatsby"
+import { StaticImage } from "gatsby-plugin-image"
 
 const propTypes = {
   user: PropTypes.shape({
@@ -12,8 +13,10 @@ const propTypes = {
 
 function Avatar({ user }) {
   return (
-    <img
-      src={user.avatar}
+    <StaticImage
+      src={
+        "https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-19/s320x320/179966117_255763296334587_3906825879185675712_n.jpg?tp=1&_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_ohc=__IJGmHUQDsAX-sMNmb&edm=ALwy07oBAAAA&ccb=7-4&oh=19939dc18cf3da2ec783b1e19a891121&oe=60AE6EA4&_nc_sid=261c40"
+      }
       alt={user.username}
       css={{
         display: `block`,

diff --git a/examples/gatsbygram/src/components/modal.js b/examples/gatsbygram/src/components/modal.js
@@ -6,7 +6,7 @@ import Close from "react-icons/lib/md/close"
 import findIndex from "lodash/findIndex"
 import mousetrap from "mousetrap"
 import * as PropTypes from "prop-types"
-import { push, StaticQuery, graphql } from "gatsby"
+import { navigate, StaticQuery, graphql } from "gatsby"
 
 import { rhythm } from "../utils/typography"
 
@@ -55,7 +55,7 @@ class GatsbyGramModal extends React.Component {
       } else {
         nextPost = posts[currentIndex + 1]
       }
-      push(`/${nextPost.id}/`)
+      navigate(nextPost.gatsbyPath)
     }
   }
 
@@ -72,7 +72,7 @@ class GatsbyGramModal extends React.Component {
       } else {
         previousPost = posts[currentIndex - 1]
       }
-      push(`/${previousPost.id}/`)
+      navigate(previousPost.gatsbyPath)
     }
   }
 
@@ -84,7 +84,7 @@ class GatsbyGramModal extends React.Component {
             allPostsJson {
               edges {
                 node {
-                  id
+                  gatsbyPath(filePath: "/{PostsJson.id}")
                 }
               }
             }
@@ -97,7 +97,7 @@ class GatsbyGramModal extends React.Component {
           return (
             <Modal
               isOpen={this.props.isOpen}
-              onRequestClose={() => push(`/`)}
+              onRequestClose={() => navigate(`/`)}
               style={{
                 overlay: {
                   position: `fixed`,
@@ -123,7 +123,7 @@ class GatsbyGramModal extends React.Component {
               contentLabel="Modal"
             >
               <div
-                onClick={() => push(`/`)}
+                onClick={() => navigate(`/`)}
                 css={{
                   display: `flex`,
                   position: `relative`,
@@ -164,7 +164,7 @@ class GatsbyGramModal extends React.Component {
                 </div>
                 <Close
                   data-testid="modal-close"
-                  onClick={() => push(`/`)}
+                  onClick={() => navigate(`/`)}
                   css={{
                     cursor: `pointer`,
                     color: `rgba(255,255,255,0.8)`,

diff --git a/...les/gatsbygram/src/templates/post-page.js → ...es/gatsbygram/src/pages/{PostsJson.id}.js b/...les/gatsbygram/src/templates/post-page.js → ...es/gatsbygram/src/pages/{PostsJson.id}.js