Skip to content

chore: Update to latest Gatsby v4 #165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

chore: Update to latest Gatsby v4 #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a778af9
update to latest v4
mister-ben Dec 13, 2022
641d19c
postcss needed explicitly now
mister-ben Dec 13, 2022
ac642cf
migrate helment to head
mister-ben Dec 13, 2022
efe2bb3
replace placeholder text
mister-ben Jan 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ module.exports = {
description: `Make your player yours with the internet's most popular open source video player framework`,
author: `@videojs`,
},
flags: {
// Set to `true` to enable server side rendering, needed now to see the `lang="en"` added to `<html>`
DEV_SSR: false
},
plugins: [
'gatsby-plugin-styled-components',
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
Expand Down
7 changes: 6 additions & 1 deletion gatsby-ssr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,9 @@
* See: https://www.gatsbyjs.org/docs/ssr-apis/
*/

// You can delete this file if you're not using it
import React from "react"

// Replaces gatsby head
export function onRenderBody({ setHtmlAttributes }) {
setHtmlAttributes({ lang: "en" })
}
36,226 changes: 13,760 additions & 22,466 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

59 changes: 29 additions & 30 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,53 +5,52 @@
"version": "0.1.0",
"author": "Matthew McClure <[email protected]>",
"dependencies": {
"@babel/core": "^7.17.12",
"@babel/core": "^7.20.5",
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@reach/router": "^1.3.4",
"@videojs/themes": "^1.0",
"acorn": "^8.7.1",
"@videojs/themes": "^1.0.1",
"acorn": "^8.8.1",
"babel-eslint": "^10.1.0",
"babel-plugin-styled-components": "^2.0.7",
"core-js": "^3.22.5",
"core-js": "^3.26.1",
"cosmiconfig": "^6.0.0",
"gatsby": "^4.14.1",
"gatsby-plugin-google-analytics": "^4.14.0",
"gatsby-plugin-image": "^2.14.1",
"gatsby-plugin-manifest": "^4.14.0",
"gatsby-plugin-mdx": "^3.14.0",
"gatsby-plugin-offline": "^5.14.1",
"gatsby-plugin-react-helmet": "^5.14.0",
"gatsby-plugin-sharp": "^4.14.1",
"gatsby-plugin-styled-components": "^5.14.0",
"gatsby-remark-prismjs": "^6.14.0",
"gatsby-source-filesystem": "^4.14.0",
"gatsby-transformer-json": "^4.14.0",
"gatsby-transformer-sharp": "^4.14.0",
"github-slugger": "^1.4.0",
"gatsby": "^4.25.0",
"gatsby-plugin-google-analytics": "^4.25.0",
"gatsby-plugin-image": "^2.25.0",
"gatsby-plugin-manifest": "^4.25.0",
"gatsby-plugin-mdx": "^3.20.0",
"gatsby-plugin-offline": "^5.25.0",
"gatsby-plugin-sharp": "^4.25.0",
"gatsby-plugin-styled-components": "^5.25.0",
"gatsby-remark-prismjs": "^6.25.0",
"gatsby-source-filesystem": "^4.25.0",
"gatsby-transformer-json": "^4.25.0",
"gatsby-transformer-sharp": "^4.25.0",
"github-slugger": "^1.5.0",
"lodash": "^4.17.21",
"polished": "^3.4.1",
"postcss-preset-env": "^7.5.0",
"prismjs": "^1.28.0",
"prop-types": "^15.7.2",
"polished": "^3.7.2",
"postcss": "^8.4.20",
"postcss-preset-env": "^7.8.3",
"prismjs": "^1.29.0",
"prop-types": "^15.8.1",
"query-string": "^5.1.1",
"react": "^16.14.0",
"react-burger-menu": "^2.6.11",
"react-burger-menu": "^2.9.2",
"react-dom": "^16.14.0",
"react-helmet": "^5.2.1",
"react-input-slider": "^5.0.15",
"shortid": "^2.2.14",
"styled-components": "^5.3.5",
"react-input-slider": "^5.1.7",
"shortid": "^2.2.16",
"styled-components": "^5.3.6",
"typescript": "^2.9.2",
"video.js": "^7.20.1",
"videojs-mux": "^4.6.6",
"video.js": "^7.20.3",
"videojs-mux": "^4.9.1",
"videojs-playlist": "^4.3.1",
"videojs-playlist-ui": "^4.1.0"
},
"devDependencies": {
"bluebird": "^3.7.2",
"deepmerge": "^4.2.2",
"prettier": "^1.17.0"
"prettier": "^1.19.1"
},
"keywords": [
"gatsby"
Expand Down
2 changes: 0 additions & 2 deletions src/components/BlogComponents/BlogLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';

import Layout from '../Layout';
import Seo from '../SEO';
import Container from '../Container';
import BlogHero from './BlogHero';
import BlogTags from './BlogTags';
Expand Down Expand Up @@ -38,7 +37,6 @@ const Sidebar = styled.aside`

const BlogLayout = ({ children, seo }) => (
<Layout>
<Seo {...seo} />
<BlogHero />
<StyledContainer>
<Sidebar>
Expand Down
6 changes: 0 additions & 6 deletions src/components/GuidesComponents/GuidesLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';

import Layout from '../Layout';
import Seo from '../SEO';
import Container from '../Container';
import GuidesHero from './GuidesHero';

Expand All @@ -18,18 +17,13 @@ const StyledContainer = styled(Container)`

const GuidesLayout = ({ children, seo }) => (
<Layout>
<Seo {...seo} />
<GuidesHero />
<StyledContainer>
{children}
</StyledContainer>
</Layout>
);

GuidesLayout.defaultProps = {
seo: {},
};

GuidesLayout.propTypes = {
children: PropTypes.node.isRequired,
seo: PropTypes.object,
Expand Down
6 changes: 0 additions & 6 deletions src/components/Layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/

import React from 'react';
import Helmet from 'react-helmet';
import PropTypes from 'prop-types';
import { StaticQuery, graphql } from 'gatsby';
import { ThemeProvider, createGlobalStyle } from 'styled-components';
Expand Down Expand Up @@ -155,11 +154,6 @@ const Layout = ({ children, heroTheme }) => {
<ThemeProvider theme={{ ...theme, currentTheme: heroTheme || {} }}>
<>
<GlobalStyles />
{heroTheme ? (
<Helmet>
<link href={heroTheme.style} rel="stylesheet" />
</Helmet>
) : null}
<Header siteTitle={data.site.siteMetadata.title} />
<main>{children}</main>
<Footer heroVideoDetails={heroTheme && heroTheme.videoDetails} />
Expand Down
158 changes: 55 additions & 103 deletions src/components/SEO.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,107 +5,59 @@
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/

import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import { useStaticQuery, graphql } from 'gatsby';
import React from 'react';
import PropTypes from 'prop-types';
import { useStaticQuery, graphql } from 'gatsby';

function Seo({ description, lang, meta, keywords, title, ...props }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
}
}
}
`
);

function Seo({ description, lang, meta, keywords, title, ...props }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
}
}
}
`
);

const metaDescription = description || site.siteMetadata.description;

return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
link={[
{
rel: 'shortcut icon',
href: '/favicon.ico',
},
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Montserrat:300,400,600',
},
]}
meta={[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: `${title}${title.includes('Video.js') ? '' : ' | Video.js'}`,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
name: `twitter:card`,
content: `summary`,
},
{
name: `twitter:creator`,
content: site.siteMetadata.author,
},
{
name: `twitter:title`,
content: `${title}${title.includes('Video.js') ? '' : ' | Video.js'}`,
},
{
name: `twitter:description`,
content: metaDescription,
},
]
.concat(
keywords.length > 0
? {
name: `keywords`,
content: keywords.join(`, `),
}
: []
)
.concat(meta)}
{...props}
/>
);
}

Seo.defaultProps = {
lang: `en`,
meta: [],
keywords: [],
description: ``,
};

Seo.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
keywords: PropTypes.arrayOf(PropTypes.string),
title: PropTypes.string.isRequired,
};

export default Seo;
const metaDescription = description || site.siteMetadata.description;

return (
<>
<title>{`${title} | ${site.siteMetadata.title}`}</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600" />
<meta name="description" content={`${title}${title.includes('Video.js') ? '' : ' | Video.js'}`}></meta>
<meta name="og:title" content={title}></meta>
<meta name="og:description" content={metaDescription}></meta>
<meta name="og:type" content="website"></meta>
<meta name="twitter:card" content="summary"></meta>
<meta name="twitter:creator" content={site.siteMetadata.author}></meta>
<meta name="twitter:title" content={`${title}${title.includes('Video.js') ? '' : ' | Video.js'}`}></meta>
<meta name="twitter:description" content={metaDescription}></meta>
{keywords.length > 0 ? <meta name="keywords" content={keywords.join(', ')}></meta> : null}
</>
);
}

Seo.defaultProps = {
lang: `en`,
meta: [],
keywords: [],
description: ``,
};

Seo.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
keywords: PropTypes.arrayOf(PropTypes.string),
title: PropTypes.string.isRequired,
};

export default Seo;

Loading