Skip to content

Commit 560fe69

Browse files
mattboldtmattboldt
committed
lots of gatsby updates
1 parent dd955b5 commit 560fe69

File tree

16 files changed

+381
-320
lines changed

16 files changed

+381
-320
lines changed

‎gatsby/gatsby-config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ module.exports = {
3131
postCssPlugins: [require('tailwindcss'), require('autoprefixer')],
3232
sassOptions: {
3333
precision: 5, // SASS default: 5
34+
silenceDeprecations: ['import', 'legacy-js-api'],
3435
},
3536
},
3637
},
37-
`gatsby-plugin-react-helmet`,
3838
{
3939
resolve: `gatsby-source-filesystem`,
4040
options: {

‎gatsby/gatsby-node.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const { slugify, convertFilePathToObject, pageParser } = require(`./utils`)
99
const pagesQuery = `
1010
{
1111
allMarkdownRemark(
12-
sort: { fields: [frontmatter___date], order: DESC }
12+
sort: { frontmatter: { date: DESC } }
1313
) {
1414
edges {
1515
node {
@@ -163,11 +163,15 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
163163
}
164164

165165
// Sass and Lodash.
166-
exports.onCreateWebpackConfig = ({ stage, actions }) => {
167-
switch (stage) {
168-
case `build-javascript`:
169-
actions.setWebpackConfig({
170-
plugins: [new LodashModuleReplacementPlugin()],
171-
})
166+
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
167+
const config = getConfig()
168+
if (stage === 'build-javascript' || stage === 'develop') {
169+
const miniCssExtractPlugin = config.plugins.find(
170+
(plugin) => plugin.constructor.name === 'MiniCssExtractPlugin'
171+
)
172+
if (miniCssExtractPlugin) {
173+
miniCssExtractPlugin.options.ignoreOrder = true
174+
}
175+
actions.replaceWebpackConfig(config)
172176
}
173177
}

‎gatsby/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
"gatsby-plugin-image": "^3.14.0",
1414
"gatsby-plugin-manifest": "^5.14.0",
1515
"gatsby-plugin-offline": "^6.14.0",
16-
"gatsby-plugin-react-helmet": "^6.14.0",
1716
"gatsby-plugin-sass": "^6.14.0",
1817
"gatsby-plugin-sharp": "^5.14.0",
1918
"gatsby-plugin-sitemap": "^6.14.0",
@@ -31,7 +30,6 @@
3130
"prop-types": "^15.8.1",
3231
"react": "^18.2.0",
3332
"react-dom": "^18.2.0",
34-
"react-helmet": "^6.1.0",
3533
"react-share": "^5.2.2",
3634
"sass": "^1.69.5",
3735
"tailwindcss": "^3.3.3",

‎gatsby/src/components/geo-animation.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class GeoAnimation extends React.Component {
1414
this.init()
1515

1616
const animate = () => {
17-
setTimeout(function() {
17+
setTimeout(function () {
1818
requestAnimationFrame(animate)
1919
}, 1000 / 30)
2020
this.animateShapes()
@@ -112,11 +112,13 @@ class GeoAnimation extends React.Component {
112112
mesh.position.set(x, y, 0)
113113

114114
if (skew) {
115-
for (var i = 0, l = geometry.vertices.length; i < l; i++) {
115+
const positions = geometry.attributes.position
116+
for (let i = 0; i < positions.count; i++) {
116117
// we'll move the x & y position of each vertice by a random amount
117-
geometry.vertices[i].x += -0.1 + Math.random() * 0.2
118-
geometry.vertices[i].y += -0.1 + Math.random() * 0.2
118+
positions.setX(i, positions.getX(i) + (-0.1 + Math.random() * 0.2))
119+
positions.setY(i, positions.getY(i) + (-0.1 + Math.random() * 0.2))
119120
}
121+
positions.needsUpdate = true
120122
}
121123

122124
this.scene.add(mesh)

‎gatsby/src/components/head.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import { useStaticQuery, graphql } from 'gatsby'
4+
5+
// This function now acts as a Head component that Gatsby will use to populate <head>
6+
export function Head({
7+
lang = 'en',
8+
meta = [],
9+
keywords = '',
10+
description = '',
11+
title,
12+
}) {
13+
const { site, placeholderImage } = useStaticQuery(graphql`
14+
query DefaultSEOQuery {
15+
site {
16+
siteMetadata {
17+
title
18+
description
19+
author
20+
}
21+
}
22+
placeholderImage: file(relativePath: { eq: "avatar.jpg" }) {
23+
childImageSharp {
24+
gatsbyImageData(width: 300, layout: FIXED)
25+
original {
26+
src
27+
}
28+
}
29+
}
30+
}
31+
`)
32+
33+
const metaDescription = description || site.siteMetadata.description
34+
35+
const imageSrc = placeholderImage.childImageSharp.original.src
36+
const allMeta = [
37+
{
38+
name: `description`,
39+
content: metaDescription,
40+
},
41+
{
42+
property: `og:title`,
43+
content: title,
44+
},
45+
{
46+
property: `og:description`,
47+
content: metaDescription,
48+
},
49+
{
50+
property: `og:type`,
51+
content: `website`,
52+
},
53+
{
54+
property: `og:image`,
55+
content: imageSrc,
56+
},
57+
{
58+
name: `twitter:card`,
59+
content: `summary`,
60+
},
61+
{
62+
name: 'twitter:site',
63+
content: site.siteMetadata.author,
64+
},
65+
{
66+
name: `twitter:creator`,
67+
content: site.siteMetadata.author,
68+
},
69+
{
70+
name: `twitter:title`,
71+
content: title,
72+
},
73+
{
74+
name: `twitter:description`,
75+
content: metaDescription,
76+
},
77+
{
78+
name: `twitter:image`,
79+
content: imageSrc,
80+
},
81+
{
82+
name: `twitter:domain`,
83+
content: `mattboldt.com`,
84+
},
85+
{
86+
name: `keywords`,
87+
content: keywords,
88+
},
89+
].concat(meta)
90+
91+
// When using Gatsby's Head API, we don't need fragments or html tag
92+
// Gatsby will automatically place these elements in the document head
93+
return (
94+
<>
95+
<title>{title} | {site.siteMetadata.title}</title>
96+
{allMeta.map((metaItem, i) => (
97+
<meta key={i} {...metaItem} />
98+
))}
99+
<link rel="shortcut icon" href="/favicon.ico" />
100+
</>
101+
)
102+
}
103+
104+
Head.propTypes = {
105+
description: PropTypes.string,
106+
lang: PropTypes.string,
107+
meta: PropTypes.array,
108+
keywords: PropTypes.string,
109+
title: PropTypes.string.isRequired,
110+
}

‎gatsby/src/components/header.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { Link } from 'gatsby'
2-
import PropTypes from 'prop-types'
32
import React from 'react'
43

5-
const Header = ({ siteTitle }) => (
4+
const Header = () => (
65
<div>
76
<nav className="mb-5 sm:flex">
87
<ul className="flex list-none w-full sm:w-1/2">
@@ -30,12 +29,4 @@ const Header = ({ siteTitle }) => (
3029
</div>
3130
)
3231

33-
Header.propTypes = {
34-
siteTitle: PropTypes.string,
35-
}
36-
37-
Header.defaultProps = {
38-
siteTitle: ``,
39-
}
40-
4132
export default Header

‎gatsby/src/components/image.js‎

Lines changed: 19 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,26 @@
11
import React from 'react'
2-
import { StaticQuery, graphql } from 'gatsby'
3-
import Img from 'gatsby-image'
2+
import { useStaticQuery, graphql } from 'gatsby'
3+
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
44

5-
/*
6-
* This component is built using `gatsby-image` to automatically serve optimized
7-
* images with lazy loading and reduced file sizes. The image is loaded using a
8-
* `StaticQuery`, which allows us to load the image from directly within this
9-
* component, rather than having to pass the image data down from pages.
10-
*
11-
* For more information, see the docs:
12-
* - `gatsby-image`: https://gatsby.app/gatsby-image
13-
* - `StaticQuery`: https://gatsby.app/staticquery
14-
*/
15-
16-
const imageQuery = graphql`
17-
query {
18-
placeholderImage: file(relativePath: { eq: "avatar.jpg" }) {
19-
childImageSharp {
20-
fluid(maxWidth: 300) {
21-
...GatsbyImageSharpFluid_noBase64
5+
const Image = () => {
6+
const data = useStaticQuery(graphql`
7+
query {
8+
placeholderImage: file(relativePath: { eq: "avatar.jpg" }) {
9+
childImageSharp {
10+
gatsbyImageData(width: 300)
2211
}
2312
}
2413
}
25-
}
26-
`
14+
`)
15+
16+
const image = getImage(data.placeholderImage)
2717

28-
const Image = () => (
29-
<StaticQuery
30-
query={`${imageQuery}`}
31-
render={(data) => (
32-
<Img
33-
fluid={data.placeholderImage.childImageSharp.fluid}
34-
className="border-4 border-grey-dark image-tag bg-black"
35-
/>
36-
)}
37-
/>
38-
)
18+
return (
19+
<GatsbyImage
20+
image={image}
21+
alt="Avatar"
22+
className="border-4 border-grey-dark image-tag bg-black"
23+
/>
24+
)
25+
}
3926
export default Image

‎gatsby/src/components/layout.js‎

Lines changed: 17 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,25 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import { StaticQuery, graphql } from 'gatsby'
43
import '../stylesheets/globals.scss'
54

6-
const titleQuery = graphql`
7-
query SiteTitleQuery {
8-
site {
9-
siteMetadata {
10-
title
11-
}
12-
}
13-
}
14-
`
15-
16-
const Layout = ({ children }) => (
17-
<StaticQuery
18-
query={`${titleQuery}`}
19-
render={(data) => (
20-
<React.Fragment>
21-
{children}
22-
<div className="container mx-auto px-4 py-4 max-w-lg">
23-
<div className="mw8 center ph3-ns text-center">
24-
<footer>
25-
&copy; Copyright &amp; Stuff {new Date().getFullYear()}. Made With
26-
❤️ | View on{' '}
27-
<a href="https://github.com/mattboldt/mattboldt.github.io">
28-
GitHub
29-
</a>
30-
</footer>
31-
</div>
5+
const Layout = ({ children }) => {
6+
return (
7+
<React.Fragment>
8+
{children}
9+
<div className="container mx-auto px-4 py-4 max-w-lg">
10+
<div className="mw8 center ph3-ns text-center">
11+
<footer>
12+
&copy; Copyright &amp; Stuff {new Date().getFullYear()}. Made With
13+
❤️ | View on{' '}
14+
<a href="https://github.com/mattboldt/mattboldt.github.io">
15+
GitHub
16+
</a>
17+
</footer>
3218
</div>
33-
</React.Fragment>
34-
)}
35-
/>
36-
)
19+
</div>
20+
</React.Fragment>
21+
)
22+
}
3723

3824
Layout.propTypes = {
3925
children: PropTypes.node.isRequired,

0 commit comments

Comments
 (0)