Skip to content

Commit 5ba1ac2

Browse files
KyleAMathewsKyleAMathews
authored
feat(examples): migrate from createPages to File System Routes (#31538)
* Refactor using-contentful to use fs routes * Upgrade gatsbygram * Fix & upgrade using-drupal
1 parent 21567d4 commit 5ba1ac2

18 files changed

+132
-322
lines changed

‎examples/gatsbygram/data/posts.json

+12-12
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/83b838f14c7d14dfe6d135169269c5b4/5B5DA593/t51.2885-15/e35/25022535_184817402253496_8516666732012634112_n.jpg",
1111
"image": "images/BdiU-TTFP4h.jpg",
1212
"username": "kyle__mathews",
13-
"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"
13+
"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"
1414
},
1515
{
1616
"id": "1677771511187112561",
@@ -23,7 +23,7 @@
2323
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/2d017da97183c1b44af94f89a5c339a5/5B715B0A/t51.2885-15/e35/25023686_225296388010245_7735181992098004992_n.jpg",
2424
"image": "images/BdIpEzalAJx.jpg",
2525
"username": "kyle__mathews",
26-
"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"
26+
"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"
2727
},
2828
{
2929
"id": "1632234281433883850",
@@ -36,7 +36,7 @@
3636
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/9fe5e566f6a2f052e00d93f5946573f2/5B6CF364/t51.2885-15/s1080x1080/e15/fr/22639107_756415651233391_8439041434429947904_n.jpg",
3737
"image": "images/Bam3G5XFOTK.jpg",
3838
"username": "kyle__mathews",
39-
"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"
39+
"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"
4040
},
4141
{
4242
"id": "1601601194425654597",
@@ -49,7 +49,7 @@
4949
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/f8a655a6b9e098ef746f214e428519de/5B634421/t51.2885-15/e35/21576632_732996816885233_1499694509796098048_n.jpg",
5050
"image": "images/BY6B8z5lR1F.jpg",
5151
"username": "kyle__mathews",
52-
"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"
52+
"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"
5353
},
5454
{
5555
"id": "1601530617317009166",
@@ -62,7 +62,7 @@
6262
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/3bc6679049dad0943ec35fddeceded1c/5B5A3CC6/t51.2885-15/e35/21436024_558002044536606_410562662628327424_n.jpg",
6363
"image": "images/BY5x5x2F6cO.jpg",
6464
"username": "kyle__mathews",
65-
"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"
65+
"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"
6666
},
6767
{
6868
"id": "1565766376903475329",
@@ -75,7 +75,7 @@
7575
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/f6a2224e3d487077d05236e18fc3f828/5B534A95/t51.2885-15/e35/20213921_501593333518668_2100867941279989760_n.jpg",
7676
"image": "images/BW6uDlYlQCB.jpg",
7777
"username": "kyle__mathews",
78-
"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"
78+
"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"
7979
},
8080
{
8181
"id": "1515268510112420213",
@@ -88,7 +88,7 @@
8888
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/d18ce4068dfa63b549ac14094bb97fdb/5B5E1699/t51.2885-15/e35/18513840_1901390483461632_2937117302379773952_n.jpg",
8989
"image": "images/BUHUK6ElhF1.jpg",
9090
"username": "kyle__mathews",
91-
"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"
91+
"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"
9292
},
9393
{
9494
"id": "1486495736706552111",
@@ -101,7 +101,7 @@
101101
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/9ad5a7f1ebead61388662f1e6824067f/5B592AA0/t51.2885-15/e35/17663748_1153852971404500_7070241507587915776_n.jpg",
102102
"image": "images/BShF_8qhtEv.jpg",
103103
"username": "kyle__mathews",
104-
"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"
104+
"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"
105105
},
106106
{
107107
"id": "1483463111452464830",
@@ -114,7 +114,7 @@
114114
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/407a3c9b5efdb77c0f77135cccb08612/5B69631A/t51.2885-15/e35/17662854_1280815928623035_937926441180332032_n.jpg",
115115
"image": "images/BSWUdcThRa-.jpg",
116116
"username": "kyle__mathews",
117-
"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"
117+
"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"
118118
},
119119
{
120120
"id": "1478435327902728655",
@@ -127,7 +127,7 @@
127127
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/4ed741dd0c523a7bebce11a760271b77/5B4EF4B9/t51.2885-15/e35/17494792_1133907666737199_1768011540662845440_n.jpg",
128128
"image": "images/BSEdRj_B8HP.jpg",
129129
"username": "kyle__mathews",
130-
"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"
130+
"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"
131131
},
132132
{
133133
"id": "1360516742464695325",
@@ -140,7 +140,7 @@
140140
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/987105bfff21fd4e32ae59cbbfc32ad7/5B69748B/t51.2885-15/e35/14693758_1766411793613440_7185291805863182336_n.jpg",
141141
"image": "images/BLhhsTZlGwd.jpg",
142142
"username": "kyle__mathews",
143-
"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"
143+
"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"
144144
},
145145
{
146146
"id": "1346779149175505545",
@@ -153,7 +153,7 @@
153153
"media": "https://instagram.fslc1-1.fna.fbcdn.net/vp/7aac4ca6f8724c7f17d3750f2f91f76e/5B6D1AB8/t51.2885-15/e35/14360137_1696760950649699_2816603071264587776_n.jpg",
154154
"image": "images/BKwuIApgkKJ.jpg",
155155
"username": "kyle__mathews",
156-
"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"
156+
"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"
157157
},
158158
{
159159
"id": "1270677182602272387",

‎examples/gatsbygram/gatsby-config.js

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ module.exports = {
2929
// images with the NPM package “sharp”. It's used by
3030
// several other plugins.
3131
`gatsby-plugin-sharp`,
32+
`gatsby-plugin-image`,
3233
// This plugin identifies file nodes that are images and
3334
// transforms these to create new “ImageSharp” nodes.
3435
// With them you can resize images and

‎examples/gatsbygram/gatsby-node.js

-63
This file was deleted.

‎examples/gatsbygram/package.json

+6-7
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
"version": "1.0.0",
66
"author": "Kyle Mathews <[email protected]>",
77
"dependencies": {
8-
"core-js": "^2.6.11",
98
"gatsby": "next",
109
"gatsby-core-utils": "next",
1110
"gatsby-image": "next",
1211
"gatsby-plugin-glamor": "next",
1312
"gatsby-plugin-google-analytics": "next",
13+
"gatsby-plugin-image": "^1.5.0",
1414
"gatsby-plugin-manifest": "next",
1515
"gatsby-plugin-offline": "next",
1616
"gatsby-plugin-sharp": "next",
@@ -25,15 +25,14 @@
2525
"mousetrap": "^1.6.5",
2626
"progress": "^2.0.3",
2727
"prop-types": "^15.7.2",
28-
"react": "^16.9.0",
29-
"react-dom": "^16.9.0",
28+
"react": "^17.0.2",
29+
"react-dom": "^17.0.2",
3030
"react-gravatar": "^2.6.3",
31-
"react-icons": "^2.2.7",
31+
"react-icons": "2",
3232
"react-modal": "^3.11.2",
3333
"react-typography": "^0.16.19",
3434
"request": "^2.88.2",
35-
"slug": "^0.9.4",
36-
"typeface-space-mono": "0.0.71",
35+
"typeface-space-mono": "1.1.13",
3736
"typography": "^0.16.19"
3837
},
3938
"keywords": [
@@ -57,4 +56,4 @@
5756
"gatsby-cypress": "^0.4.10",
5857
"start-server-and-test": "^1.11.3"
5958
}
60-
}
59+
}

‎examples/gatsbygram/src/components/Avatar.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as PropTypes from "prop-types"
22
import React from "react"
33
import { rhythm } from "../utils/typography"
44
import { graphql } from "gatsby"
5+
import { StaticImage } from "gatsby-plugin-image"
56

67
const propTypes = {
78
user: PropTypes.shape({
@@ -12,8 +13,10 @@ const propTypes = {
1213

1314
function Avatar({ user }) {
1415
return (
15-
<img
16-
src={user.avatar}
16+
<StaticImage
17+
src={
18+
"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"
19+
}
1720
alt={user.username}
1821
css={{
1922
display: `block`,

‎examples/gatsbygram/src/components/modal.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Close from "react-icons/lib/md/close"
66
import findIndex from "lodash/findIndex"
77
import mousetrap from "mousetrap"
88
import * as PropTypes from "prop-types"
9-
import { push, StaticQuery, graphql } from "gatsby"
9+
import { navigate, StaticQuery, graphql } from "gatsby"
1010

1111
import { rhythm } from "../utils/typography"
1212

@@ -55,7 +55,7 @@ class GatsbyGramModal extends React.Component {
5555
} else {
5656
nextPost = posts[currentIndex + 1]
5757
}
58-
push(`/${nextPost.id}/`)
58+
navigate(nextPost.gatsbyPath)
5959
}
6060
}
6161

@@ -72,7 +72,7 @@ class GatsbyGramModal extends React.Component {
7272
} else {
7373
previousPost = posts[currentIndex - 1]
7474
}
75-
push(`/${previousPost.id}/`)
75+
navigate(previousPost.gatsbyPath)
7676
}
7777
}
7878

@@ -84,7 +84,7 @@ class GatsbyGramModal extends React.Component {
8484
allPostsJson {
8585
edges {
8686
node {
87-
id
87+
gatsbyPath(filePath: "/{PostsJson.id}")
8888
}
8989
}
9090
}
@@ -97,7 +97,7 @@ class GatsbyGramModal extends React.Component {
9797
return (
9898
<Modal
9999
isOpen={this.props.isOpen}
100-
onRequestClose={() => push(`/`)}
100+
onRequestClose={() => navigate(`/`)}
101101
style={{
102102
overlay: {
103103
position: `fixed`,
@@ -123,7 +123,7 @@ class GatsbyGramModal extends React.Component {
123123
contentLabel="Modal"
124124
>
125125
<div
126-
onClick={() => push(`/`)}
126+
onClick={() => navigate(`/`)}
127127
css={{
128128
display: `flex`,
129129
position: `relative`,
@@ -164,7 +164,7 @@ class GatsbyGramModal extends React.Component {
164164
</div>
165165
<Close
166166
data-testid="modal-close"
167-
onClick={() => push(`/`)}
167+
onClick={() => navigate(`/`)}
168168
css={{
169169
cursor: `pointer`,
170170
color: `rgba(255,255,255,0.8)`,

‎examples/gatsbygram/src/templates/post-page.js renamed to ‎examples/gatsbygram/src/pages/{PostsJson.id}.js

File renamed without changes.

0 commit comments

Comments
 (0)