Skip to content

Commit 6d0c63d

Browse files
PyraxPyrax
authored
docs: migrate to gatsby v4 (#51)
* docs: migrate to gatsby v4 * ci: use node 16.x
1 parent 8e6a2d3 commit 6d0c63d

16 files changed

+7014
-8991
lines changed

‎.github/workflows/github-pages.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ jobs:
1717
- name: Setup Node
1818
uses: actions/setup-node@v1
1919
with:
20-
node-version: '12.x'
20+
node-version: '16.x'
2121

2222
- name: Cache dependencies
2323
uses: actions/cache@v2

‎.github/workflows/publish-github-packages.yml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ jobs:
1313
- name: Setup Node
1414
uses: actions/setup-node@v1
1515
with:
16-
node-version: '12.x'
16+
node-version: '16.x'
1717
registry-url: 'https://npm.pkg.github.com'
1818
scope: '@Pyrax'
1919

@@ -25,7 +25,6 @@ jobs:
2525
restore-keys: |
2626
${{ runner.os }}-node-
2727
- run: yarn install --frozen-lockfile
28-
2928
- name: Autoscope package.json
3029
uses: khaazz/action-autoscope@master
3130

‎.github/workflows/release.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ jobs:
1717
- name: Setup Node
1818
uses: actions/setup-node@v1
1919
with:
20-
node-version: '12.x'
20+
node-version: '16.x'
2121

2222
- name: Cache dependencies
2323
uses: actions/cache@v2

‎www/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["babel-preset-gatsby"]
3+
}

‎www/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
.cache/
3+
public

‎www/gatsby-browser.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
export { wrapPageElement } from './src/utils/wrap-page-element'
1+
const React = require('react')
2+
const Layout = require('./src/components/layout').default
3+
4+
exports.wrapPageElement = ({ element, props }) => {
5+
return <Layout {...props}>{element}</Layout>
6+
}

‎www/gatsby-config.js

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,30 @@ require('dotenv').config({
22
path: `.env`
33
})
44

5+
// Wrap ESM plugin to import them dynamically.
6+
// require('...') -> await import('...')
7+
const wrapESMPlugin = (name) =>
8+
function wrapESM(opts) {
9+
return async (...args) => {
10+
const mod = await import(name)
11+
const plugin = mod.default(opts)
12+
return plugin(...args)
13+
}
14+
}
15+
516
module.exports = {
617
pathPrefix: `/react-netlify-forms`,
718
siteMetadata: {
819
title: `react-netlify-forms`,
920
description: `React components and hooks giving you the power of Netlify Forms. Start building serverless forms on Netlify with React.`,
10-
author: `Pyrax`
21+
image: `/favicon.png`,
22+
siteUrl: `https://pyrax.github.io/react-netlify-forms/`
1123
},
1224
plugins: [
13-
`gatsby-plugin-react-helmet`,
14-
`gatsby-plugin-theme-ui`,
1525
`gatsby-plugin-catch-links`,
26+
'gatsby-plugin-theme-ui',
1627
{
17-
resolve: `gatsby-plugin-mdx`,
18-
options: {
19-
extensions: ['.mdx', '.md'],
20-
remarkPlugins: [
21-
require('remark-slug'),
22-
[require('remark-toc'), { tight: true }],
23-
require('remark-abbr')
24-
]
25-
}
26-
},
27-
{
28-
resolve: `gatsby-plugin-manifest`,
28+
resolve: 'gatsby-plugin-manifest',
2929
options: {
3030
name: `react-netlify-forms`,
3131
short_name: `react-netlify-forms`,
@@ -35,6 +35,24 @@ module.exports = {
3535
display: `minimal-ui`,
3636
icon: `src/images/favicon.png`
3737
}
38+
},
39+
{
40+
resolve: `gatsby-plugin-mdx`,
41+
options: {
42+
extensions: [`.mdx`, `.md`],
43+
remarkPlugins: [
44+
wrapESMPlugin('remark-slug'),
45+
[wrapESMPlugin('remark-toc'), { tight: true }]
46+
]
47+
}
48+
},
49+
{
50+
resolve: 'gatsby-source-filesystem',
51+
options: {
52+
name: 'pages',
53+
path: './src/pages/'
54+
},
55+
__key: 'pages'
3856
}
3957
]
4058
}

‎www/gatsby-ssr.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
export { wrapPageElement } from './src/utils/wrap-page-element'
1+
const React = require('react')
2+
const Layout = require('./src/components/layout').default
3+
4+
exports.wrapPageElement = ({ element, props }) => {
5+
return <Layout {...props}>{element}</Layout>
6+
}
7+
8+
exports.onRenderBody = ({ setHtmlAttributes }) => {
9+
setHtmlAttributes({ lang: 'en' })
10+
}

‎www/package.json

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,48 @@
33
"homepage": ".",
44
"version": "0.0.0",
55
"private": true,
6-
"dependencies": {
7-
"@fortawesome/fontawesome-svg-core": "^1.2.28",
8-
"@fortawesome/free-solid-svg-icons": "^5.13.0",
9-
"@fortawesome/react-fontawesome": "^0.1.10",
10-
"@mdx-js/mdx": "^1.6.5",
11-
"@mdx-js/react": "^1.6.5",
12-
"@theme-ui/components": "^0.4.0-alpha.3",
13-
"@theme-ui/prism": "^0.3.0",
14-
"formik": "^2.1.4",
15-
"gatsby": "2.22.12",
16-
"gatsby-plugin-catch-links": "^2.3.3",
17-
"gatsby-plugin-manifest": "^2.4.9",
18-
"gatsby-plugin-mdx": "^1.2.13",
19-
"gatsby-plugin-react-helmet": "^3.3.2",
20-
"gatsby-plugin-theme-ui": "^0.4.0-alpha.3",
21-
"react": "link:../node_modules/react",
22-
"react-dom": "link:../node_modules/react-dom",
23-
"react-helmet": "^6.0.0",
24-
"react-hook-form": "^5.7.2",
25-
"react-live": "^2.2.2",
26-
"react-netlify-forms": "link:..",
27-
"remark-abbr": "^1.4.0",
28-
"remark-slug": "^6.0.0",
29-
"remark-toc": "^7.0.0",
30-
"theme-ui": "^0.4.0-alpha.3",
31-
"theme-ui-sketchy-preset": "^0.1.3",
32-
"typeface-architects-daughter": "^0.0.72",
33-
"typescript": "^3.9.3"
34-
},
6+
"description": "www",
7+
"author": "Pyrax",
8+
"keywords": [
9+
"gatsby"
10+
],
3511
"scripts": {
3612
"start": "npm run develop",
3713
"build": "gatsby build",
3814
"build:prefix": "gatsby build --prefix-paths",
3915
"develop": "gatsby develop",
16+
"serve": "gatsby serve",
4017
"clean": "gatsby clean",
4118
"test": "echo \"No tests available yet.\""
4219
},
20+
"dependencies": {
21+
"@emotion/react": "^11.10.4",
22+
"@emotion/styled": "^11.10.4",
23+
"@fortawesome/fontawesome-svg-core": "^6.2.0",
24+
"@fortawesome/free-solid-svg-icons": "^6.2.0",
25+
"@fortawesome/react-fontawesome": "^0.2.0",
26+
"@mdx-js/mdx": "^1.6.22",
27+
"@mdx-js/react": "^1.6.22",
28+
"@theme-ui/components": "^0.14.7",
29+
"@theme-ui/prism": "^0.14.7",
30+
"formik": "^2.2.9",
31+
"gatsby": "^4.21.1",
32+
"gatsby-plugin-catch-links": "^4.22.0",
33+
"gatsby-plugin-manifest": "^4.22.0",
34+
"gatsby-plugin-mdx": "^3.2.0",
35+
"gatsby-plugin-theme-ui": "^0.14.7",
36+
"gatsby-source-filesystem": "^4.22.0",
37+
"react": "link:../node_modules/react",
38+
"react-dom": "link:../node_modules/react-dom",
39+
"react-hook-form": "^5.7.2",
40+
"react-live": "^2.4.1",
41+
"react-netlify-forms": "link:..",
42+
"remark-slug": "^7.0.1",
43+
"remark-toc": "^8.0.1",
44+
"theme-ui": "^0.14.7",
45+
"theme-ui-sketchy-preset": "^0.1.3",
46+
"typeface-architects-daughter": "^1.1.13"
47+
},
4348
"eslintConfig": {
4449
"extends": "react-app"
4550
},
@@ -48,5 +53,15 @@
4853
"not dead",
4954
"not ie <= 11",
5055
"not op_mini all"
51-
]
56+
],
57+
"devDependencies": {
58+
"@babel/core": "^7.18.13",
59+
"@babel/plugin-proposal-decorators": "^7.18.10",
60+
"babel-eslint": "^10.1.0",
61+
"babel-loader": "^8.2.5",
62+
"babel-preset-gatsby": "^2.22.0",
63+
"core-js": "^3.25.0",
64+
"eslint": "^8.23.0",
65+
"webpack": "^5.74.0"
66+
}
5267
}

‎www/src/components/layout.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/** @jsx jsx */
2-
import { jsx, Styled } from 'theme-ui'
2+
import { jsx, Themed } from 'theme-ui'
33
import { MDXProvider } from '@mdx-js/react'
44
import { Location } from '@reach/router'
55
import { Container } from '@theme-ui/components'
66
import { Global } from '@emotion/core'
77

8-
import SEO from './seo'
8+
import { SEO } from './seo'
99
import { MarkdownNavLink, MarkdownLink } from './markdown-link'
1010
import MenuLinks from './menu-links.mdx'
1111
import Sidenav from './sidenav'
@@ -63,7 +63,7 @@ const Layout = ({ children, ...props }) => (
6363
© {new Date().getFullYear()} Björn Clees, made with &#10084; using
6464
{` `}
6565
{/* eslint-disable-next-line react/jsx-pascal-case */}
66-
<Styled.a href='https://www.gatsbyjs.org'>Gatsby</Styled.a>
66+
<Themed.a href='https://www.gatsbyjs.org'>Gatsby</Themed.a>
6767
</footer>
6868
</Container>
6969
</div>

‎www/src/components/seo.js

Lines changed: 29 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,36 @@
11
import React from 'react'
2-
import { Helmet } from 'react-helmet'
3-
import { useStaticQuery, graphql } from 'gatsby'
2+
import { useSiteMetadata } from '../hooks/use-site-metadata'
43

5-
function SEO(props) {
6-
const { site } = useStaticQuery(
7-
graphql`
8-
query {
9-
site {
10-
siteMetadata {
11-
title
12-
description
13-
author
14-
}
15-
}
16-
}
17-
`
18-
)
19-
const { title, description } = props.pageContext.frontmatter || {}
4+
export const SEO = ({ title, subtitle, description, pathname, children }) => {
5+
const {
6+
title: defaultTitle,
7+
description: defaultDescription,
8+
image,
9+
siteUrl
10+
} = useSiteMetadata()
11+
12+
const seo = {
13+
title: title || defaultTitle,
14+
description: description || defaultDescription,
15+
image: `${siteUrl}${image}`,
16+
url: `${siteUrl}${pathname || ``}`
17+
}
2018

21-
const metaTitle = title || site.siteMetadata.title
22-
const metaDescription = description || site.siteMetadata.description
19+
const fullTitle = subtitle ? `${subtitle} | ${seo.title}` : seo.title
2320

2421
return (
25-
<Helmet
26-
htmlAttributes={{
27-
lang: 'en-US'
28-
}}
29-
title={metaTitle}
30-
titleTemplate={title ? `%s | ${site.siteMetadata.title}` : null}
31-
meta={[
32-
{
33-
name: `description`,
34-
content: metaDescription
35-
},
36-
{
37-
property: `og:title`,
38-
content: metaTitle
39-
},
40-
{
41-
property: `og:description`,
42-
content: metaDescription
43-
},
44-
{
45-
property: `og:type`,
46-
content: `website`
47-
},
48-
{
49-
name: `twitter:card`,
50-
content: `summary`
51-
},
52-
{
53-
name: `twitter:creator`,
54-
content: site.siteMetadata.author
55-
},
56-
{
57-
name: `twitter:title`,
58-
content: metaTitle
59-
},
60-
{
61-
name: `twitter:description`,
62-
content: metaDescription
63-
}
64-
]}
65-
/>
22+
<>
23+
<title>{fullTitle}</title>
24+
<meta name='description' content={seo.description} />
25+
<meta name='image' content={seo.image} />
26+
27+
<meta property='og:title' content={fullTitle} />
28+
<meta property='og:description' content={seo.description} />
29+
<meta property='og:type' content='website' />
30+
<meta property='og:site_name' content={seo.title} />
31+
32+
<link rel='icon' type='image/png' href='/favicon.png' />
33+
{children}
34+
</>
6635
)
6736
}
68-
69-
export default SEO

‎www/src/hooks/use-site-metadata.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { graphql, useStaticQuery } from 'gatsby'
2+
3+
export const useSiteMetadata = () => {
4+
const data = useStaticQuery(graphql`
5+
query {
6+
site {
7+
siteMetadata {
8+
title
9+
description
10+
image
11+
siteUrl
12+
}
13+
}
14+
}
15+
`)
16+
return data.site.siteMetadata
17+
}

‎www/src/pages/docs.mdx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,4 @@ Available props:
8888
| --------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------ |
8989
| siteKey | Y | Recaptcha public site key. |
9090
| invisible | N | Set whether reCAPTCHA should be invisible or not. |
91-
| *(any)* | N | Any other prop will be passed through to the [underlying component](https://www.npmjs.com/package/react-google-recaptcha#component-props). |
92-
93-
<!-- prettier-ignore -->
94-
*[Req]: Required
91+
| _(any)_ | N | Any other prop will be passed through to the [underlying component](https://www.npmjs.com/package/react-google-recaptcha#component-props). |

‎www/src/utils/wrap-page-element.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎www/static/logo-monochrome.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)