diff --git a/.changeset/eighty-years-cough.md b/.changeset/eighty-years-cough.md new file mode 100644 index 000000000..f12b2ad98 --- /dev/null +++ b/.changeset/eighty-years-cough.md @@ -0,0 +1,31 @@ +--- +"@lekoarts/gatsby-theme-minimal-blog": major +"@lekoarts/gatsby-theme-minimal-blog-core": major +--- + +Compatibility with **Gatsby 4**. Upgrade your theme to be able to use the new Gatsby release. Leverage Deferred Static Generation (DSG), Server-Side Rendering (SSR) and Parallel Query Running (PQR) with this new release. [Learn more about Gatsby 4](https://www.gatsbyjs.com/gatsby-4/). + +All Gatsby related packages were also upgraded to their latest new major version. + +[See Gatsby 4 Migration Guide](https://gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/) + +**BREAKING CHANGES:** + +- Minimum required Node.js version: `>=14.15.0` +- Minimum required `gatsby` version: `^4.0.0` +- Upgraded Theme UI (packages) from `^0.9.0` to `^0.11.0` + +**New Features:** + +- You can now use `defer: true` in the frontmatter of your page/post to mark the page as deferred (for Deferred Static Generation) + +**Bug Fixes:** + +- The `slug` key on posts now correctly respects the `postsPrefix` option (fixes https://github.com/LekoArts/gatsby-themes/issues/699). This means that the URL now also contains the `postsPrefix` option (which is potentially breaking if you rely on this being different). +- The `slug` key on pages now correctly respects the `basePath` option. This means that the URL now also contains the `basePath` option (which is potentially breaking if you rely on this being different). + +**Migration:** + +- If you relied on `slug` both for posts or pages you'll need to check if your URLs are still as expected +- If you used Theme UI in custom components, check the [Theme UI changelog](https://github.com/system-ui/theme-ui/blob/develop/CHANGELOG.md) +- Update CI/local environment to account for the new Node.js requirement diff --git a/.changeset/green-hornets-appear.md b/.changeset/green-hornets-appear.md new file mode 100644 index 000000000..6a360d321 --- /dev/null +++ b/.changeset/green-hornets-appear.md @@ -0,0 +1,38 @@ +--- +"@lekoarts/gatsby-theme-status-dashboard": major +--- + +Compatibility with **Gatsby 4**. Upgrade your theme to be able to use the new Gatsby release. Leverage Deferred Static Generation (DSG), Server-Side Rendering (SSR) and Parallel Query Running (PQR) with this new release. [Learn more about Gatsby 4](https://www.gatsbyjs.com/gatsby-4/). + +All Gatsby related packages were also upgraded to their latest new major version. + +[See Gatsby 4 Migration Guide](https://gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/) + +**BREAKING CHANGES:** + +- Minimum required Node.js version: `>=14.15.0` +- Minimum required `gatsby` version: `^4.0.0` +- Upgraded Theme UI (packages) from `^0.9.0` to `^0.11.0` + +Moreover, the `` and `` components and their props had breaking changes. + +The Card component now takes these props: + +```ts +type Props = { + name: string; + netlify_id?: string; + website?: string; + repo: string; + netlify?: boolean; + circleci?: boolean; + circleci_id?: string; +}; +``` + +The Grid component now normalized the entries from Netlify and CircleCI and merges them together. Current behavior is that a card will render when the site is on Netlify and then optionally the CircleCI information is added. New behavior is that also entries are shown that are only on CircleCI. + +**Migration:** + +- If you used Theme UI in custom components, check the [Theme UI changelog](https://github.com/system-ui/theme-ui/blob/develop/CHANGELOG.md) +- Update CI/local environment to account for the new Node.js requirement diff --git a/.changeset/lovely-fireants-kiss.md b/.changeset/lovely-fireants-kiss.md new file mode 100644 index 000000000..f3981e60d --- /dev/null +++ b/.changeset/lovely-fireants-kiss.md @@ -0,0 +1,27 @@ +--- +"@lekoarts/gatsby-theme-emilia": major +"@lekoarts/gatsby-theme-emilia-core": major +"@lekoarts/gatsby-theme-emma": major +"@lekoarts/gatsby-theme-emma-core": major +--- + +Compatibility with **Gatsby 4**. Upgrade your theme to be able to use the new Gatsby release. Leverage Deferred Static Generation (DSG), Server-Side Rendering (SSR) and Parallel Query Running (PQR) with this new release. [Learn more about Gatsby 4](https://www.gatsbyjs.com/gatsby-4/). + +All Gatsby related packages were also upgraded to their latest new major version. + +[See Gatsby 4 Migration Guide](https://gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/) + +**BREAKING CHANGES:** + +- Minimum required Node.js version: `>=14.15.0` +- Minimum required `gatsby` version: `^4.0.0` +- Upgraded Theme UI (packages) from `^0.9.0` to `^0.11.0` + +**Features:** + +- You can now use `defer: true` in the frontmatter of your page/post to mark the page as deferred (for Deferred Static Generation) + +**Migration:** + +- If you used Theme UI in custom components, check the [Theme UI changelog](https://github.com/system-ui/theme-ui/blob/develop/CHANGELOG.md) +- Update CI/local environment to account for the new Node.js requirement diff --git a/.changeset/shy-sloths-yawn.md b/.changeset/shy-sloths-yawn.md new file mode 100644 index 000000000..e78042e02 --- /dev/null +++ b/.changeset/shy-sloths-yawn.md @@ -0,0 +1,33 @@ +--- +"@lekoarts/gatsby-theme-jodie": major +"@lekoarts/gatsby-theme-jodie-core": major +--- + +Compatibility with **Gatsby 4**. Upgrade your theme to be able to use the new Gatsby release. Leverage Deferred Static Generation (DSG), Server-Side Rendering (SSR) and Parallel Query Running (PQR) with this new release. [Learn more about Gatsby 4](https://www.gatsbyjs.com/gatsby-4/). + +All Gatsby related packages were also upgraded to their latest new major version. + +[See Gatsby 4 Migration Guide](https://gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/) + +**BREAKING CHANGES:** + +- Minimum required Node.js version: `>=14.15.0` +- Minimum required `gatsby` version: `^4.0.0` +- Upgraded Theme UI (packages) from `^0.9.0` to `^0.11.0` + +**Features:** + +- You can now use `defer: true` in the frontmatter of your page/post to mark the page as deferred (for Deferred Static Generation) + +**Bug Fixes:** + +- The `slug` key on projects now correctly respects the `projectsPrefix` option. This means that the URL now also contains the `projectsPrefix` option (which is potentially breaking if you rely on this being different). +- The `slug` key on pages now correctly respects the `basePath` option. This means that the URL now also contains the `basePath` option (which is potentially breaking if you rely on this being different). +- The items in the `navigation` option are now prefixed with the `basePath` in the `navigation.tsx` component. If you've shadowed the file you'll need to update your component. +- The logo link (in the `sidebar.tsx` component) now goes to `basePath` and not `/` (this way the link correctly works with `basePath` option). If you've shadowed the file you'll need to update your component. + +**Migration:** + +- If you relied on `slug` both for posts or pages you'll need to check if your URLs are still as expected +- If you used Theme UI in custom components, check the [Theme UI changelog](https://github.com/system-ui/theme-ui/blob/develop/CHANGELOG.md) +- Update CI/local environment to account for the new Node.js requirement diff --git a/.changeset/some-random-words.md b/.changeset/some-random-words.md new file mode 100644 index 000000000..99f77861f --- /dev/null +++ b/.changeset/some-random-words.md @@ -0,0 +1,23 @@ +--- +"@lekoarts/gatsby-theme-cara": major +"@lekoarts/gatsby-theme-graphql-playground": major +"@lekoarts/gatsby-theme-specimens": major +"@lekoarts/gatsby-theme-styleguide": major +--- + +Compatibility with **Gatsby 4**. Upgrade your theme to be able to use the new Gatsby release. Leverage Deferred Static Generation (DSG), Server-Side Rendering (SSR) and Parallel Query Running (PQR) with this new release. [Learn more about Gatsby 4](https://www.gatsbyjs.com/gatsby-4/). + +All Gatsby related packages were also upgraded to their latest new major version. + +[See Gatsby 4 Migration Guide](https://gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/) + +**BREAKING CHANGES:** + +- Minimum required Node.js version: `>=14.15.0` +- Minimum required `gatsby` version: `^4.0.0` +- Upgraded Theme UI (packages) from `^0.9.0` to `^0.11.0` + +**Migration:** + +- If you used Theme UI in custom components, check the [Theme UI changelog](https://github.com/system-ui/theme-ui/blob/develop/CHANGELOG.md) +- Update CI/local environment to account for the new Node.js requirement diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 000000000..aaa956222 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v14.16.1 \ No newline at end of file diff --git a/cypress/e2e/status-dashboard.ts b/cypress/e2e/status-dashboard.ts index 04f1d4d1f..d7e5b85b5 100755 --- a/cypress/e2e/status-dashboard.ts +++ b/cypress/e2e/status-dashboard.ts @@ -20,18 +20,12 @@ describe(`gatsby-theme-status-dashboard`, () => { it(`should render the repository title`, () => { cy.findByText(/chakra-ui-advanced-components/i) }) - it.skip(`should render the circleci icon`, () => { - cy.findByLabelText(/view gatsby-themes on circleci/i) - }) it(`should render the github icon`, () => { cy.findByLabelText(/view chakra-ui-advanced-components source on github/i) }) it(`should render the netlify status badge`, () => { cy.findByAltText(/netlify deploy status of chakra-ui-advanced-components/i) }) - it.skip(`should render the circleci status badge`, () => { - cy.findByAltText(/circleci status of gatsby-themes/i) - }) it(`should render the footer`, () => { cy.findByTestId(/footer/i).should(`have.text`, `LekoArts`) }) diff --git a/examples/cara/README.md b/examples/cara/README.md index 8ce1c91d5..96e1788cf 100755 --- a/examples/cara/README.md +++ b/examples/cara/README.md @@ -31,7 +31,7 @@ Also be sure to check out other [Free & Open Source Gatsby Themes](https://theme ## ✨ Features - Theme UI-based theming -- react-spring parallax effect +- react-spring Parallax Effect - CSS Animations on Shapes ## 🚀 Getting Started diff --git a/examples/cara/gatsby-config.js b/examples/cara/gatsby-config.js index afef1194d..db94fe396 100755 --- a/examples/cara/gatsby-config.js +++ b/examples/cara/gatsby-config.js @@ -1,7 +1,6 @@ require(`dotenv`).config() const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE -const googleAnalyticsTrackingId = process.env.GOOGLE_ANALYTICS_ID module.exports = { siteMetadata: { @@ -16,12 +15,6 @@ module.exports = { // See the theme's README for all available options options: {}, }, - googleAnalyticsTrackingId && { - resolve: `gatsby-plugin-google-analytics`, - options: { - trackingId: process.env.GOOGLE_ANALYTICS_ID, - }, - }, { resolve: `gatsby-plugin-manifest`, options: { @@ -30,7 +23,9 @@ module.exports = { description: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`, start_url: `/`, background_color: `#141821`, - theme_color: `#f6ad55`, + // This will impact how browsers show your PWA/website + // https://css-tricks.com/meta-theme-color-and-trickery/ + // theme_color: `#f6ad55`, display: `standalone`, icons: [ { @@ -46,9 +41,7 @@ module.exports = { ], }, }, - `gatsby-plugin-offline`, `gatsby-plugin-gatsby-cloud`, - `gatsby-plugin-netlify`, shouldAnalyseBundle && { resolve: `gatsby-plugin-webpack-bundle-analyser-v2`, options: { diff --git a/examples/cara/package.json b/examples/cara/package.json index b8165526e..24c11bdc3 100755 --- a/examples/cara/package.json +++ b/examples/cara/package.json @@ -17,12 +17,9 @@ }, "dependencies": { "@lekoarts/gatsby-theme-cara": "^2.0.0", - "gatsby": "^3.6.1", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-google-analytics": "^3.6.0", - "gatsby-plugin-manifest": "^3.6.0", - "gatsby-plugin-netlify": "^3.6.1", - "gatsby-plugin-offline": "^4.6.0", + "gatsby": "^4.0.0", + "gatsby-plugin-gatsby-cloud": "^4.0.0", + "gatsby-plugin-manifest": "^4.0.0", "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22", "react": "^17.0.2", "react-dom": "^17.0.2" diff --git a/examples/emilia/README.md b/examples/emilia/README.md index 293c6903d..8716a2462 100755 --- a/examples/emilia/README.md +++ b/examples/emilia/README.md @@ -35,9 +35,8 @@ Also be sure to check out other [Free & Open Source Gatsby Themes](https://theme - Light Mode / Dark Mode - Page Transitions - Masonry grid and focus on big images -- Google Analytics Support - SEO (Sitemap, OpenGraph tags, Twitter tags) -- Offline Support & WebApp Manifest +- WebApp Manifest ## 🚀 Getting Started @@ -85,6 +84,8 @@ New projects will be shown on the index page of this theme and can be added by c 1. Add images to the created folder (from step 1) 1. Reference your desired images as your `cover` in the frontmatter 1. Write your content below the frontmatter (optional) +1. Use `defer` to opt-in into Deferred Static Generation (DSG) (optional) +1. Add a `slug` to the frontmatter to use a custom slug, e.g. `slug: "/my-slug"` (Optional) **Frontmatter reference:** @@ -93,6 +94,8 @@ New projects will be shown on the index page of this theme and can be added by c cover: "./sean-foley-0JD7kvxAq0Y-unsplash.jpg" date: "2019-09-10" title: "Emilia" +defer: false +slug: "/my-slug" areas: - Neon - Lights diff --git a/examples/emilia/gatsby-config.js b/examples/emilia/gatsby-config.js index b81faeab5..d0c0e8110 100755 --- a/examples/emilia/gatsby-config.js +++ b/examples/emilia/gatsby-config.js @@ -1,7 +1,6 @@ require(`dotenv`).config() const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE -const googleAnalyticsTrackingId = process.env.GOOGLE_ANALYTICS_ID module.exports = { siteMetadata: { @@ -16,12 +15,6 @@ module.exports = { // See the theme's README for all available options options: {}, }, - googleAnalyticsTrackingId && { - resolve: `gatsby-plugin-google-analytics`, - options: { - trackingId: process.env.GOOGLE_ANALYTICS_ID, - }, - }, `gatsby-plugin-sitemap`, { resolve: `gatsby-plugin-manifest`, @@ -31,7 +24,9 @@ module.exports = { description: `Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI.`, start_url: `/`, background_color: `#fff`, - theme_color: `#3182ce`, + // This will impact how browsers show your PWA/website + // https://css-tricks.com/meta-theme-color-and-trickery/ + // theme_color: `#3182ce`, display: `standalone`, icons: [ { @@ -47,9 +42,7 @@ module.exports = { ], }, }, - `gatsby-plugin-offline`, `gatsby-plugin-gatsby-cloud`, - `gatsby-plugin-netlify`, shouldAnalyseBundle && { resolve: `gatsby-plugin-webpack-bundle-analyser-v2`, options: { diff --git a/examples/emilia/package.json b/examples/emilia/package.json index 8103823ba..f57e38e8d 100755 --- a/examples/emilia/package.json +++ b/examples/emilia/package.json @@ -17,13 +17,10 @@ }, "dependencies": { "@lekoarts/gatsby-theme-emilia": "^2.0.0", - "gatsby": "^3.6.1", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-google-analytics": "^3.6.0", - "gatsby-plugin-manifest": "^3.6.0", - "gatsby-plugin-netlify": "^3.6.1", - "gatsby-plugin-offline": "^4.6.0", - "gatsby-plugin-sitemap": "^4.2.0", + "gatsby": "^4.0.0", + "gatsby-plugin-gatsby-cloud": "^4.0.0", + "gatsby-plugin-manifest": "^4.0.0", + "gatsby-plugin-sitemap": "^5.0.0", "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22", "react": "^17.0.2", "react-dom": "^17.0.2" diff --git a/examples/emma/README.md b/examples/emma/README.md index acf17781e..a5bef5f2b 100755 --- a/examples/emma/README.md +++ b/examples/emma/README.md @@ -35,9 +35,8 @@ Also be sure to check out other [Free & Open Source Gatsby Themes](https://theme - Optional MDX pages which automatically get added to the navigation - Fully customizable through the usage of Gatsby Themes (and Theme UI) - Light Mode / Dark Mode -- Google Analytics Support - SEO (Sitemap, OpenGraph tags, Twitter tags) -- Offline Support & WebApp Manifest +- WebApp Manifest ## 🚀 Getting Started @@ -86,6 +85,7 @@ New projects will be shown on the index page of this theme and can be added by c 1. Create a new `index.mdx` file, and add the frontmatter 1. Add an image to the created folder (from step 1) 1. Reference this image as your `cover` in the frontmatter +1. Use `defer` to opt-in into Deferred Static Generation (DSG) 1. Write your content below the frontmatter **Frontmatter reference:** @@ -98,6 +98,7 @@ cover: "./image.jpg" date: "2019-06-10" service: "Theme" color: "#8e9d31" +defer: false --- ``` @@ -109,6 +110,7 @@ Additional pages will be shown in the navigation (left side) and allow you to di 1. Create a new `index.mdx` file, and add the frontmatter 1. Add an image to the created folder (from step 1) 1. Reference this image as your `cover` in the frontmatter +1. Use `defer` to opt-in into Deferred Static Generation (DSG) (optional) 1. Write your content below the frontmatter **Frontmatter reference:** @@ -118,6 +120,7 @@ Additional pages will be shown in the navigation (left side) and allow you to di title: "Name" slug: "/name" cover: "./name.jpg" +defer: false --- ``` diff --git a/examples/emma/gatsby-config.js b/examples/emma/gatsby-config.js index 05fb8de92..2c4a63bcf 100755 --- a/examples/emma/gatsby-config.js +++ b/examples/emma/gatsby-config.js @@ -1,7 +1,6 @@ require(`dotenv`).config() const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE -const googleAnalyticsTrackingId = process.env.GOOGLE_ANALYTICS_ID module.exports = { siteMetadata: { @@ -16,12 +15,6 @@ module.exports = { // See the theme's README for all available options options: {}, }, - googleAnalyticsTrackingId && { - resolve: `gatsby-plugin-google-analytics`, - options: { - trackingId: process.env.GOOGLE_ANALYTICS_ID, - }, - }, `gatsby-plugin-sitemap`, { resolve: `gatsby-plugin-manifest`, @@ -31,7 +24,9 @@ module.exports = { description: `Minimalistic bright portfolio with full-width grid and large images`, start_url: `/`, background_color: `#fff`, - theme_color: `#b83280`, + // This will impact how browsers show your PWA/website + // https://css-tricks.com/meta-theme-color-and-trickery/ + // theme_color: `#b83280`, display: `standalone`, icons: [ { @@ -47,9 +42,7 @@ module.exports = { ], }, }, - `gatsby-plugin-offline`, `gatsby-plugin-gatsby-cloud`, - `gatsby-plugin-netlify`, shouldAnalyseBundle && { resolve: `gatsby-plugin-webpack-bundle-analyser-v2`, options: { diff --git a/examples/emma/package.json b/examples/emma/package.json index 5334246a3..b21d448a7 100755 --- a/examples/emma/package.json +++ b/examples/emma/package.json @@ -17,13 +17,10 @@ }, "dependencies": { "@lekoarts/gatsby-theme-emma": "^2.0.0", - "gatsby": "^3.6.1", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-google-analytics": "^3.6.0", - "gatsby-plugin-manifest": "^3.6.0", - "gatsby-plugin-netlify": "^3.6.1", - "gatsby-plugin-offline": "^4.6.0", - "gatsby-plugin-sitemap": "^4.2.0", + "gatsby": "^4.0.0", + "gatsby-plugin-gatsby-cloud": "^4.0.0", + "gatsby-plugin-manifest": "^4.0.0", + "gatsby-plugin-sitemap": "^5.0.0", "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22", "react": "^17.0.2", "react-dom": "^17.0.2" diff --git a/examples/graphql-playground/gatsby-config.js b/examples/graphql-playground/gatsby-config.js index c4f46c9c5..3349eea65 100755 --- a/examples/graphql-playground/gatsby-config.js +++ b/examples/graphql-playground/gatsby-config.js @@ -10,7 +10,6 @@ module.exports = { options: {}, }, `gatsby-plugin-gatsby-cloud`, - `gatsby-plugin-netlify`, shouldAnalyseBundle && { resolve: `gatsby-plugin-webpack-bundle-analyser-v2`, options: { diff --git a/examples/graphql-playground/package.json b/examples/graphql-playground/package.json index 87b2f6ec0..c19c53da6 100755 --- a/examples/graphql-playground/package.json +++ b/examples/graphql-playground/package.json @@ -17,9 +17,8 @@ }, "dependencies": { "@lekoarts/gatsby-theme-graphql-playground": "^2.0.0", - "gatsby": "^3.6.1", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-netlify": "^3.6.1", + "gatsby": "^4.0.0", + "gatsby-plugin-gatsby-cloud": "^4.0.0", "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22", "react": "^17.0.2", "react-dom": "^17.0.2" diff --git a/examples/jodie/README.md b/examples/jodie/README.md index 3f0e51a98..2aff322ed 100755 --- a/examples/jodie/README.md +++ b/examples/jodie/README.md @@ -35,9 +35,8 @@ Also be sure to check out other [Free & Open Source Gatsby Themes](https://theme - Create a project by creating an MDX file and dropping the images into the same folder - Extensible custom pages - Define colors for each page and the sidebar & content will adapt while maintaining WCAG 2 AA contrast ratios -- Google Analytics Support - SEO (Sitemap, OpenGraph tags, Twitter tags) -- Offline Support & WebApp Manifest +- WebApp Manifest ## 🚀 Getting Started diff --git a/examples/jodie/gatsby-config.js b/examples/jodie/gatsby-config.js index c44365882..4c891c3ab 100755 --- a/examples/jodie/gatsby-config.js +++ b/examples/jodie/gatsby-config.js @@ -1,6 +1,5 @@ require(`dotenv`).config() -const googleAnalyticsTrackingId = process.env.GOOGLE_ANALYTICS_ID const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE module.exports = { @@ -19,12 +18,6 @@ module.exports = { ], }, }, - googleAnalyticsTrackingId && { - resolve: `gatsby-plugin-google-analytics`, - options: { - trackingId: process.env.GOOGLE_ANALYTICS_ID, - }, - }, { resolve: `gatsby-omni-font-loader`, options: { @@ -51,7 +44,9 @@ module.exports = { description: `Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.`, start_url: `/`, background_color: `#ffffff`, - theme_color: `#b75e09`, + // This will impact how browsers show your PWA/website + // https://css-tricks.com/meta-theme-color-and-trickery/ + // theme_color: `#b75e09`, display: `standalone`, icons: [ { @@ -67,9 +62,7 @@ module.exports = { ], }, }, - `gatsby-plugin-offline`, `gatsby-plugin-gatsby-cloud`, - `gatsby-plugin-netlify`, shouldAnalyseBundle && { resolve: `gatsby-plugin-webpack-bundle-analyser-v2`, options: { diff --git a/examples/jodie/package.json b/examples/jodie/package.json index f93933f05..a1719ec24 100755 --- a/examples/jodie/package.json +++ b/examples/jodie/package.json @@ -17,14 +17,11 @@ }, "dependencies": { "@lekoarts/gatsby-theme-jodie": "^2.0.0", - "gatsby": "^3.6.1", + "gatsby": "^4.0.0", "gatsby-omni-font-loader": "^1.3.1", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-google-analytics": "^3.6.0", - "gatsby-plugin-manifest": "^3.6.0", - "gatsby-plugin-netlify": "^3.6.1", - "gatsby-plugin-offline": "^4.6.0", - "gatsby-plugin-sitemap": "^4.2.0", + "gatsby-plugin-gatsby-cloud": "^4.0.0", + "gatsby-plugin-manifest": "^4.0.0", + "gatsby-plugin-sitemap": "^5.0.0", "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22", "react": "^17.0.2", "react-dom": "^17.0.2" diff --git a/examples/minimal-blog/README.md b/examples/minimal-blog/README.md index 0c14b57b7..17fa54cbe 100755 --- a/examples/minimal-blog/README.md +++ b/examples/minimal-blog/README.md @@ -37,9 +37,8 @@ Also be sure to check out other [Free & Open Source Gatsby Themes](https://theme - Tags/Categories support - Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support. Also allows adding line numbers, line highlighting, language tabs, and file titles. - RSS Feed for blog posts -- Google Analytics Support - SEO (Sitemap, OpenGraph tags, Twitter tags) -- Offline Support & WebApp Manifest +- WebApp Manifest ## 🚀 Getting Started @@ -158,6 +157,8 @@ New blog posts will be shown on the index page (the three most recent ones) of t 1. Add images to the created folder (from step 1) you want to reference in your blog post 1. Reference an image as your `banner` in the frontmatter 1. Write your content below the frontmatter +1. Add a `slug` to the frontmatter to use a custom slug, e.g. `slug: "/my-slug"` (Optional) +1. Use `defer` to opt-in into Deferred Static Generation (DSG) (optional) **Frontmatter reference:** @@ -166,25 +167,28 @@ New blog posts will be shown on the index page (the three most recent ones) of t title: Introduction to "Defence against the Dark Arts" date: 2019-11-07 description: Defence Against the Dark Arts (abbreviated as DADA) is a subject taught at Hogwarts School of Witchcraft and Wizardry and Ilvermorny School of Witchcraft and Wizardry. +defer: false tags: - Tutorial - Dark Arts banner: ./defence-against-the-dark-arts.jpg +canonicalUrl: https://random-blog-about-curses.com/curses-counter-curses-and-more --- ``` -**The fields `description` and `banner` are optional!** If no description is provided, an excerpt of the blog post will be used. If no banner is provided, the default `siteImage` (from `siteMetadata`) is used. +**The fields `description`, `banner`, `defer` and `canonicalUrl` are optional!** If no description is provided, an excerpt of the blog post will be used. If no banner is provided, the default `siteImage` (from `siteMetadata`) is used. If no `canonicalUrl` is provided, it will not be included in the header. The `date` field has to be written in the format `YYYY-MM-DD`! #### Adding a new page -Additional pages can be created by placing MDX files inside `contents/pages`, e.g. an "About" or "Contact" page. You'll manually need to link to those pages, for example by adding them to the navigation (in `navigation` option of the theme). General instructions: +Additional pages can be created by placing MDX files inside `contents/pages`, e.g. an "About" or "Contact" page. You'll manually need to link to those pages, for example by adding them to the navigation (in `siteMetadata`). General instructions: 1. Create a new folder inside `content/pages` 1. Create a new `index.mdx` file, and add the frontmatter 1. Write your content below the frontmatter 1. Optionally add files/images to the folder you want to reference from the page +1. Use `defer` to opt-in into Deferred Static Generation (DSG) (optional) **Frontmatter reference:** @@ -192,6 +196,7 @@ Additional pages can be created by placing MDX files inside `contents/pages`, e. --- title: About slug: "/about" +defer: false --- ``` diff --git a/examples/minimal-blog/gatsby-config.js b/examples/minimal-blog/gatsby-config.js index f77eaed73..f540a7589 100755 --- a/examples/minimal-blog/gatsby-config.js +++ b/examples/minimal-blog/gatsby-config.js @@ -1,7 +1,6 @@ require(`dotenv`).config() const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE -const googleAnalyticsTrackingId = process.env.GOOGLE_ANALYTICS_ID module.exports = { siteMetadata: { @@ -54,12 +53,6 @@ module.exports = { ], }, }, - googleAnalyticsTrackingId && { - resolve: `gatsby-plugin-google-analytics`, - options: { - trackingId: process.env.GOOGLE_ANALYTICS_ID, - }, - }, `gatsby-plugin-sitemap`, { resolve: `gatsby-plugin-manifest`, @@ -69,7 +62,9 @@ module.exports = { description: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and code highlighting.`, start_url: `/`, background_color: `#fff`, - theme_color: `#6B46C1`, + // This will impact how browsers show your PWA/website + // https://css-tricks.com/meta-theme-color-and-trickery/ + // theme_color: `#6B46C1`, display: `standalone`, icons: [ { @@ -85,9 +80,6 @@ module.exports = { ], }, }, - `gatsby-plugin-offline`, - `gatsby-plugin-gatsby-cloud`, - `gatsby-plugin-netlify`, { resolve: `gatsby-plugin-feed`, options: { @@ -137,6 +129,7 @@ module.exports = { ], }, }, + `gatsby-plugin-gatsby-cloud`, shouldAnalyseBundle && { resolve: `gatsby-plugin-webpack-bundle-analyser-v2`, options: { diff --git a/examples/minimal-blog/package.json b/examples/minimal-blog/package.json index 4bfb6cfa6..8a71ad012 100755 --- a/examples/minimal-blog/package.json +++ b/examples/minimal-blog/package.json @@ -17,15 +17,12 @@ }, "dependencies": { "@lekoarts/gatsby-theme-minimal-blog": "^3.0.0", - "gatsby": "^3.6.1", + "gatsby": "^4.0.0", "gatsby-omni-font-loader": "^1.3.1", - "gatsby-plugin-feed": "^3.6.0", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-google-analytics": "^3.6.0", - "gatsby-plugin-manifest": "^3.6.0", - "gatsby-plugin-netlify": "^3.6.1", - "gatsby-plugin-offline": "^4.6.0", - "gatsby-plugin-sitemap": "^4.2.0", + "gatsby-plugin-feed": "^4.0.0", + "gatsby-plugin-gatsby-cloud": "^4.0.0", + "gatsby-plugin-manifest": "^4.0.0", + "gatsby-plugin-sitemap": "^5.0.0", "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22", "react": "^17.0.2", "react-dom": "^17.0.2" diff --git a/examples/specimens/gatsby-config.js b/examples/specimens/gatsby-config.js index 2dfdc59fd..22c6c45cb 100755 --- a/examples/specimens/gatsby-config.js +++ b/examples/specimens/gatsby-config.js @@ -44,7 +44,9 @@ module.exports = { description: `Leverage the wide variety of powerful React components to build your design system. Display your colors, typography or any other design tokens with ease and focus on the design system itself, not on how to showcase it. Works seamlessly with MDX.`, start_url: `/`, background_color: `#fff`, - theme_color: `#5a67d8`, + // This will impact how browsers show your PWA/website + // https://css-tricks.com/meta-theme-color-and-trickery/ + // theme_color: `#5a67d8`, display: `standalone`, icons: [ { @@ -60,9 +62,7 @@ module.exports = { ], }, }, - `gatsby-plugin-offline`, `gatsby-plugin-gatsby-cloud`, - `gatsby-plugin-netlify`, shouldAnalyseBundle && { resolve: `gatsby-plugin-webpack-bundle-analyser-v2`, options: { diff --git a/examples/specimens/package.json b/examples/specimens/package.json index 02c74f341..d0dac0103 100755 --- a/examples/specimens/package.json +++ b/examples/specimens/package.json @@ -17,20 +17,18 @@ }, "dependencies": { "@lekoarts/gatsby-theme-specimens": "^3.0.0", - "@loadable/component": "5.13.1", + "@loadable/component": "^5.15.0", "@mdx-js/mdx": "^1.6.22", - "@theme-ui/presets": "^0.9.1", - "gatsby": "^3.6.1", - "gatsby-plugin-catch-links": "^3.6.0", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-manifest": "^3.6.0", - "gatsby-plugin-mdx": "^2.6.0", - "gatsby-plugin-netlify": "^3.6.1", - "gatsby-plugin-offline": "^4.6.0", - "gatsby-plugin-react-helmet": "^4.6.0", + "@theme-ui/presets": "^0.11.1", + "gatsby": "^4.0.0", + "gatsby-plugin-catch-links": "^4.0.0", + "gatsby-plugin-gatsby-cloud": "^4.0.0", + "gatsby-plugin-manifest": "^4.0.0", + "gatsby-plugin-mdx": "^3.0.0", + "gatsby-plugin-react-helmet": "^5.0.0", "gatsby-plugin-theme-ui": "^0.9.1", "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22", - "gatsby-source-filesystem": "^3.6.0", + "gatsby-source-filesystem": "^4.0.0", "mdx-utils": "^0.2.0", "prism-react-renderer": "^1.2.1", "react": "^17.0.2", @@ -38,7 +36,7 @@ "react-helmet": "^6.1.0", "react-live": "^2.2.3", "remark-slug": "^6.0.0", - "theme-ui": "^0.9.1" + "theme-ui": "^0.11.1" }, "devDependencies": { "cross-env": "^7.0.3" diff --git a/examples/status-dashboard/gatsby-config.js b/examples/status-dashboard/gatsby-config.js index 27af5351c..1f54cb0ec 100755 --- a/examples/status-dashboard/gatsby-config.js +++ b/examples/status-dashboard/gatsby-config.js @@ -21,14 +21,14 @@ module.exports = { description: process.env.SITE_DESCRIPTION, start_url: `/`, background_color: `#f0f2fd`, - theme_color: `#3490dc`, + // This will impact how browsers show your PWA/website + // https://css-tricks.com/meta-theme-color-and-trickery/ + // theme_color: `#3490dc`, display: `standalone`, icon: `assets/favicon.png`, }, }, - `gatsby-plugin-offline`, `gatsby-plugin-gatsby-cloud`, - `gatsby-plugin-netlify`, shouldAnalyseBundle && { resolve: `gatsby-plugin-webpack-bundle-analyser-v2`, options: { diff --git a/examples/status-dashboard/package.json b/examples/status-dashboard/package.json index 78bbf2dc5..b96d7f046 100755 --- a/examples/status-dashboard/package.json +++ b/examples/status-dashboard/package.json @@ -18,13 +18,11 @@ "dependencies": { "@emotion/react": "^11.4.0", "@lekoarts/gatsby-theme-status-dashboard": "^2.0.0", - "gatsby": "^3.6.1", - "gatsby-plugin-emotion": "^6.6.0", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-manifest": "^3.6.0", - "gatsby-plugin-netlify": "^3.6.1", - "gatsby-plugin-offline": "^4.6.0", - "gatsby-plugin-react-helmet": "^4.6.0", + "gatsby": "^4.0.0", + "gatsby-plugin-emotion": "^7.0.0", + "gatsby-plugin-gatsby-cloud": "^4.0.0", + "gatsby-plugin-manifest": "^4.0.0", + "gatsby-plugin-react-helmet": "^5.0.0", "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/examples/styleguide/gatsby-config.js b/examples/styleguide/gatsby-config.js index fa54b911d..20df8a791 100755 --- a/examples/styleguide/gatsby-config.js +++ b/examples/styleguide/gatsby-config.js @@ -23,7 +23,6 @@ module.exports = { }, }, `gatsby-plugin-gatsby-cloud`, - `gatsby-plugin-netlify`, shouldAnalyseBundle && { resolve: `gatsby-plugin-webpack-bundle-analyser-v2`, options: { diff --git a/examples/styleguide/package.json b/examples/styleguide/package.json index d2f5fdab0..418afd07e 100755 --- a/examples/styleguide/package.json +++ b/examples/styleguide/package.json @@ -17,16 +17,15 @@ }, "dependencies": { "@lekoarts/gatsby-theme-styleguide": "^2.0.0", - "gatsby": "^3.6.1", - "gatsby-plugin-gatsby-cloud": "^2.6.1", - "gatsby-plugin-netlify": "^3.6.1", - "gatsby-plugin-react-helmet": "^4.6.0", + "gatsby": "^4.0.0", + "gatsby-plugin-gatsby-cloud": "^4.0.0", + "gatsby-plugin-react-helmet": "^5.0.0", "gatsby-plugin-theme-ui": "^0.9.1", "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22", "react": "^17.0.2", "react-dom": "^17.0.2", "react-helmet": "^6.1.0", - "theme-ui": "^0.9.1" + "theme-ui": "^0.11.1" }, "devDependencies": { "cross-env": "^7.0.3" diff --git a/themes/gatsby-theme-cara/package.json b/themes/gatsby-theme-cara/package.json index 2b9ac8fc8..84626431e 100755 --- a/themes/gatsby-theme-cara/package.json +++ b/themes/gatsby-theme-cara/package.json @@ -15,7 +15,7 @@ "clean": "gatsby clean" }, "peerDependencies": { - "gatsby": "^3.0.0", + "gatsby": "^4.0.0", "react": "^17.0.1", "react-dom": "^17.0.1" }, @@ -23,13 +23,13 @@ "@mdx-js/mdx": "^1.6.22", "@react-spring/parallax": "^9.2.5", "@react-spring/web": "^9.2.5", - "@theme-ui/presets": "^0.9.1", - "gatsby-plugin-mdx": "^2.14.0", - "gatsby-plugin-react-helmet": "^4.14.0", - "gatsby-plugin-theme-ui": "^0.9.1", - "gatsby-source-filesystem": "^3.14.0", + "@theme-ui/presets": "^0.11.1", + "gatsby-plugin-mdx": "^3.0.0", + "gatsby-plugin-react-helmet": "^5.0.0", + "gatsby-plugin-theme-ui": "^0.11.1", + "gatsby-source-filesystem": "^4.0.0", "react-helmet": "^6.1.0", - "theme-ui": "^0.9.1" + "theme-ui": "^0.11.1" }, "keywords": [ "gatsby", @@ -45,5 +45,8 @@ "type": "git", "url": "https://github.com/LekoArts/gatsby-themes.git", "directory": "themes/gatsby-theme-cara" + }, + "engines": { + "node": ">=14.15.0" } } diff --git a/themes/gatsby-theme-emilia-core/README.md b/themes/gatsby-theme-emilia-core/README.md index 68d6b5ed7..7beeb8d1f 100755 --- a/themes/gatsby-theme-emilia-core/README.md +++ b/themes/gatsby-theme-emilia-core/README.md @@ -42,18 +42,18 @@ npm install @lekoarts/gatsby-theme-emilia-core ### Theme options -| Key | Default Value | Description | -| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -| `basePath` | `/` | Root url for the theme | -| `projectsPath` | `content/projects` | Location of projects | -| `assetsPath` | `content/assets` | Location of assets (such as the avatar in the header) | -| `mdx` | `true` | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) | -| `sharp` | `true` | Configure `gatsby-plugin-sharp` (if your website already is using the plugin pass `false` to turn this off) | -| `name` | `LekoArts` | The name displayed as the title on the homepage, and the link to the homepage (top left corner) | -| `location` | `Germany` | Shown below the title | -| `socialMedia` | `` [{ title: `Twitter`, href: `https://twitter.com/lekoarts_de` }, { title: `Instagram`, href: `https://www.instagram.com/lekoarts.de/` }] `` | An array of objects (with the keys "title" and "href" display on the homepage. Can of course hold any kind of links (not limited to social media) | -| `showThemeAuthor` | `true` | Show the "Theme by LekoArts" in the footer | -| `formatString` | `DD.MM.YYYY` | Configure the date format for Date fields | +| Key | Default Value | Description | +| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| `basePath` | `/` | Root url for the theme | +| `projectsPath` | `content/projects` | Location of projects | +| `assetsPath` | `content/assets` | Location of assets (such as the avatar in the header) | +| `mdx` | `true` | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) | +| `sharp` | `true` | Configure `gatsby-plugin-sharp` (if your website already is using the plugin pass `false` to turn this off) | +| `name` | `LekoArts` | The name displayed as the title on the homepage, and the link to the homepage (top left corner) | +| `location` | `Germany` | Shown below the title | +| `socialMedia` | `` [{ title: `Twitter`, href: `https://twitter.com/lekoarts_de` }, { title: `Homepage`, href: `https://www.lekoarts.de` }] `` | An array of objects (with the keys "title" and "href" display on the homepage. Can of course hold any kind of links (not limited to social media) | +| `showThemeAuthor` | `true` | Show the "Theme by LekoArts" in the footer | +| `formatString` | `DD.MM.YYYY` | Configure the date format for Date fields | ### Shadowing diff --git a/themes/gatsby-theme-emilia-core/gatsby-node.js b/themes/gatsby-theme-emilia-core/gatsby-node.js index be42d147f..f9e42e79c 100755 --- a/themes/gatsby-theme-emilia-core/gatsby-node.js +++ b/themes/gatsby-theme-emilia-core/gatsby-node.js @@ -48,11 +48,26 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { }, }) + createFieldExtension({ + name: `defaultFalse`, + extend() { + return { + resolve(source, _args, _context, info) { + if (source[info.fieldName] == null) { + return false + } + return source[info.fieldName] + }, + } + }, + }) + createTypes(` interface Project implements Node { id: ID! title: String! slug: String! @slugify + defer: Boolean @defaultFalse date: Date! @dateformat areas: [String!]! cover: File! @fileByRelativePath @@ -63,6 +78,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { type MdxProject implements Node & Project { title: String! slug: String! @slugify + defer: Boolean @defaultFalse date: Date! @dateformat areas: [String!]! cover: File! @fileByRelativePath @@ -107,6 +123,7 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDig cover: node.frontmatter.cover, date: node.frontmatter.date, areas: node.frontmatter.areas, + defer: node.frontmatter.defer, } const mdxProjectId = createNodeId(`${node.id} >>> MdxProject`) @@ -198,6 +215,7 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { gatsbyImageData(width: 770, quality: 90, aspectRatio: 1.777778) } } + defer } } } @@ -226,6 +244,7 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { next, formatString, }, + defer: project.defer, }) }) } diff --git a/themes/gatsby-theme-emilia-core/package.json b/themes/gatsby-theme-emilia-core/package.json index 9f84524f9..7a86e30c3 100755 --- a/themes/gatsby-theme-emilia-core/package.json +++ b/themes/gatsby-theme-emilia-core/package.json @@ -15,17 +15,17 @@ "clean": "gatsby clean" }, "peerDependencies": { - "gatsby": "^3.0.0", + "gatsby": "^4.0.0", "react": "^17.0.1", "react-dom": "^17.0.1" }, "dependencies": { "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "gatsby-plugin-mdx": "^2.14.0", - "gatsby-plugin-sharp": "^3.14.0", - "gatsby-source-filesystem": "^3.14.0", - "gatsby-transformer-sharp": "^3.14.0", + "gatsby-plugin-mdx": "^3.0.0", + "gatsby-plugin-sharp": "^4.0.0", + "gatsby-source-filesystem": "^4.0.0", + "gatsby-transformer-sharp": "^4.0.0", "lodash.kebabcase": "^4.1.1" }, "keywords": [ @@ -42,5 +42,8 @@ "type": "git", "url": "https://github.com/LekoArts/gatsby-themes.git", "directory": "themes/gatsby-theme-emilia-core" + }, + "engines": { + "node": ">=14.15.0" } } diff --git a/themes/gatsby-theme-emilia/README.md b/themes/gatsby-theme-emilia/README.md index d2f3f0aac..8d0479fe3 100755 --- a/themes/gatsby-theme-emilia/README.md +++ b/themes/gatsby-theme-emilia/README.md @@ -64,18 +64,18 @@ gatsby new emilia LekoArts/gatsby-starter-portfolio-emilia ### Theme options -| Key | Default Value | Description | -| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -| `basePath` | `/` | Root url for the theme | -| `projectsPath` | `content/projects` | Location of projects | -| `assetsPath` | `content/assets` | Location of assets (such as the avatar in the header) | -| `mdx` | `true` | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) | -| `sharp` | `true` | Configure `gatsby-plugin-sharp` (if your website already is using the plugin pass `false` to turn this off) | -| `name` | `LekoArts` | The name displayed as the title on the homepage, and the link to the homepage (top left corner) | -| `location` | `Germany` | Shown below the title | -| `socialMedia` | `` [{ title: `Twitter`, href: `https://twitter.com/lekoarts_de` }, { title: `Instagram`, href: `https://www.instagram.com/lekoarts.de/` }] `` | An array of objects (with the keys "title" and "href" display on the homepage. Can of course hold any kind of links (not limited to social media) | -| `showThemeAuthor` | `true` | Show the "Theme by LekoArts" in the footer | -| `formatString` | `DD.MM.YYYY` | Configure the date format for Date fields | +| Key | Default Value | Description | +| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| `basePath` | `/` | Root url for the theme | +| `projectsPath` | `content/projects` | Location of projects | +| `assetsPath` | `content/assets` | Location of assets (such as the avatar in the header) | +| `mdx` | `true` | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) | +| `sharp` | `true` | Configure `gatsby-plugin-sharp` (if your website already is using the plugin pass `false` to turn this off) | +| `name` | `LekoArts` | The name displayed as the title on the homepage, and the link to the homepage (top left corner) | +| `location` | `Germany` | Shown below the title | +| `socialMedia` | `` [{ title: `Twitter`, href: `https://twitter.com/lekoarts_de` }, { title: `Homepage`, href: `https://www.lekoarts.de` }] `` | An array of objects (with the keys "title" and "href" display on the homepage. Can of course hold any kind of links (not limited to social media) | +| `showThemeAuthor` | `true` | Show the "Theme by LekoArts" in the footer | +| `formatString` | `DD.MM.YYYY` | Configure the date format for Date fields | #### Example usage @@ -143,6 +143,7 @@ New projects will be shown on the index page of this theme and can be added by c 1. Add images to the created folder (from step 1) 1. Reference your desired images as your `cover` in the frontmatter 1. Write your content below the frontmatter (optional) +1. Use `defer` to opt-in into Deferred Static Generation (DSG) (optional) 1. Add a `slug` to the frontmatter to use a custom slug, e.g. `slug: "/my-slug"` (Optional) **Frontmatter reference:** @@ -152,6 +153,8 @@ New projects will be shown on the index page of this theme and can be added by c cover: "./sean-foley-0JD7kvxAq0Y-unsplash.jpg" date: "2019-09-10" title: "Emilia" +defer: false +slug: "/my-slug" areas: - Neon - Lights diff --git a/themes/gatsby-theme-emilia/package.json b/themes/gatsby-theme-emilia/package.json index e9c8a60c0..a109d3f9a 100755 --- a/themes/gatsby-theme-emilia/package.json +++ b/themes/gatsby-theme-emilia/package.json @@ -15,20 +15,20 @@ "clean": "gatsby clean" }, "peerDependencies": { - "gatsby": "^3.0.0", + "gatsby": "^4.0.0", "react": "^17.0.1", "react-dom": "^17.0.1" }, "dependencies": { "@lekoarts/gatsby-theme-emilia-core": "^2.0.6", - "@theme-ui/presets": "^0.9.1", - "gatsby-plugin-image": "^1.14.0", - "gatsby-plugin-react-helmet": "^4.14.0", - "gatsby-plugin-theme-ui": "^0.9.1", + "@theme-ui/presets": "^0.11.1", + "gatsby-plugin-image": "^2.0.0", + "gatsby-plugin-react-helmet": "^5.0.0", + "gatsby-plugin-theme-ui": "^0.11.1", "polished": "^4.1.3", "react-helmet": "^6.1.0", "react-spring": "^9.2.5", - "theme-ui": "^0.9.1" + "theme-ui": "^0.11.1" }, "keywords": [ "gatsby", @@ -44,5 +44,8 @@ "type": "git", "url": "https://github.com/LekoArts/gatsby-themes.git", "directory": "themes/gatsby-theme-emilia" + }, + "engines": { + "node": ">=14.15.0" } } diff --git a/themes/gatsby-theme-emma-core/gatsby-node.js b/themes/gatsby-theme-emma-core/gatsby-node.js index 209314c05..5293fc742 100755 --- a/themes/gatsby-theme-emma-core/gatsby-node.js +++ b/themes/gatsby-theme-emma-core/gatsby-node.js @@ -47,11 +47,26 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { }, }) + createFieldExtension({ + name: `defaultFalse`, + extend() { + return { + resolve(source, _args, _context, info) { + if (source[info.fieldName] == null) { + return false + } + return source[info.fieldName] + }, + } + }, + }) + createTypes(` interface Project implements Node { id: ID! slug: String! @slugify title: String! + defer: Boolean @defaultFalse client: String! service: String! color: String! @@ -64,6 +79,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { interface Page implements Node { id: ID! slug: String! + defer: Boolean @defaultFalse title: String! cover: File! @fileByRelativePath excerpt(pruneLength: Int = 160): String! @@ -72,6 +88,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { type MdxProject implements Node & Project { title: String! + defer: Boolean @defaultFalse slug: String! @slugify client: String! service: String! @@ -84,6 +101,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { type MdxPage implements Node & Page { slug: String! + defer: Boolean @defaultFalse title: String! cover: File! @fileByRelativePath excerpt(pruneLength: Int = 140): String! @mdxpassthrough(fieldName: "excerpt") @@ -118,6 +136,7 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDig date: node.frontmatter.date, service: node.frontmatter.service, color: node.frontmatter.color, + defer: node.frontmatter.defer, } const mdxProjectId = createNodeId(`${node.id} >>> MdxProject`) @@ -145,6 +164,7 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDig title: node.frontmatter.title, slug: node.frontmatter.slug, cover: node.frontmatter.cover, + defer: node.frontmatter.defer, } const mdxPageId = createNodeId(`${node.id} >>> MdxPage`) @@ -187,11 +207,13 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { allProject(sort: { fields: date, order: DESC }) { nodes { slug + defer } } allPage { nodes { slug + defer } } } @@ -212,6 +234,7 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { slug: project.slug, formatString, }, + defer: project.defer, }) }) @@ -225,6 +248,7 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { context: { slug: page.slug, }, + defer: page.defer, }) }) } diff --git a/themes/gatsby-theme-emma-core/package.json b/themes/gatsby-theme-emma-core/package.json index 086f17d93..ddcab839a 100755 --- a/themes/gatsby-theme-emma-core/package.json +++ b/themes/gatsby-theme-emma-core/package.json @@ -15,18 +15,18 @@ "clean": "gatsby clean" }, "peerDependencies": { - "gatsby": "^3.0.0", + "gatsby": "^4.0.0", "react": "^17.0.1", "react-dom": "^17.0.1" }, "dependencies": { "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "gatsby-plugin-mdx": "^2.14.0", - "gatsby-plugin-sharp": "^3.14.0", - "gatsby-remark-images": "^5.11.0", - "gatsby-source-filesystem": "^3.14.0", - "gatsby-transformer-sharp": "^3.14.0", + "gatsby-plugin-mdx": "^3.0.0", + "gatsby-plugin-sharp": "^4.0.0", + "gatsby-remark-images": "^6.0.0", + "gatsby-source-filesystem": "^4.0.0", + "gatsby-transformer-sharp": "^4.0.0", "lodash.kebabcase": "^4.1.1" }, "keywords": [ @@ -43,5 +43,8 @@ "type": "git", "url": "https://github.com/LekoArts/gatsby-themes.git", "directory": "themes/gatsby-theme-emma-core" + }, + "engines": { + "node": ">=14.15.0" } } diff --git a/themes/gatsby-theme-emma/README.md b/themes/gatsby-theme-emma/README.md index bc4e505b6..bdf588170 100755 --- a/themes/gatsby-theme-emma/README.md +++ b/themes/gatsby-theme-emma/README.md @@ -136,6 +136,7 @@ New projects will be shown on the index page of this theme and can be added by c 1. Add an image to the created folder (from step 1) 1. Reference this image as your `cover` in the frontmatter 1. Write your content below the frontmatter +1. Use `defer` to opt-in into Deferred Static Generation (DSG) (optional) 1. Add a `slug` to the frontmatter to use a custom slug, e.g. `slug: "/my-slug"` (Optional) **Frontmatter reference:** @@ -148,6 +149,7 @@ cover: "./image.jpg" date: "2019-06-10" service: "Theme" color: "#8e9d31" +defer: false --- ``` @@ -160,6 +162,7 @@ Additional pages will be shown in the navigation (left side) and allow you to di 1. Add an image to the created folder (from step 1) 1. Reference this image as your `cover` in the frontmatter 1. Write your content below the frontmatter +1. Use `defer` to opt-in into Deferred Static Generation (DSG) (optional) **Frontmatter reference:** @@ -168,6 +171,7 @@ Additional pages will be shown in the navigation (left side) and allow you to di title: "Name" slug: "/name" cover: "./name.jpg" +defer: false --- ``` diff --git a/themes/gatsby-theme-emma/package.json b/themes/gatsby-theme-emma/package.json index 6f967c5b5..fa9f74327 100755 --- a/themes/gatsby-theme-emma/package.json +++ b/themes/gatsby-theme-emma/package.json @@ -15,22 +15,22 @@ "clean": "gatsby clean" }, "peerDependencies": { - "gatsby": "^3.0.0", + "gatsby": "^4.0.0", "react": "^17.0.1", "react-dom": "^17.0.1" }, "dependencies": { "@lekoarts/gatsby-theme-emma-core": "^2.0.6", "@mdx-js/mdx": "^1.6.22", - "@theme-ui/presets": "^0.9.1", - "gatsby-plugin-catch-links": "^3.14.0", - "gatsby-plugin-image": "^1.14.0", - "gatsby-plugin-react-helmet": "^4.14.0", - "gatsby-plugin-theme-ui": "^0.9.1", + "@theme-ui/presets": "^0.11.1", + "gatsby-plugin-catch-links": "^4.0.0", + "gatsby-plugin-image": "^2.0.0", + "gatsby-plugin-react-helmet": "^5.0.0", + "gatsby-plugin-theme-ui": "^0.11.1", "polished": "^4.1.3", "react-helmet": "^6.1.0", "react-spring": "^9.2.5", - "theme-ui": "^0.9.1" + "theme-ui": "^0.11.1" }, "keywords": [ "gatsby", @@ -46,5 +46,8 @@ "type": "git", "url": "https://github.com/LekoArts/gatsby-themes.git", "directory": "themes/gatsby-theme-emma" + }, + "engines": { + "node": ">=14.15.0" } } diff --git a/themes/gatsby-theme-graphql-playground/package.json b/themes/gatsby-theme-graphql-playground/package.json index 319d37e2c..16a0f4cde 100755 --- a/themes/gatsby-theme-graphql-playground/package.json +++ b/themes/gatsby-theme-graphql-playground/package.json @@ -15,23 +15,23 @@ "clean": "gatsby clean" }, "peerDependencies": { - "gatsby": "^3.0.0", + "gatsby": "^4.0.0", "react": "^17.0.1", "react-dom": "^17.0.1" }, "dependencies": { "@mdx-js/mdx": "^1.6.22", - "@theme-ui/presets": "^0.9.1", - "@theme-ui/prism": "^0.9.1", - "@theme-ui/sidenav": "^0.9.1", - "gatsby-plugin-mdx": "^2.14.0", - "gatsby-plugin-react-helmet": "^4.14.0", - "gatsby-plugin-theme-ui": "^0.9.1", - "gatsby-source-filesystem": "^3.14.0", + "@theme-ui/presets": "^0.11.1", + "@theme-ui/prism": "^0.11.1", + "@theme-ui/sidenav": "^0.11.1", + "gatsby-plugin-mdx": "^3.0.0", + "gatsby-plugin-react-helmet": "^5.0.0", + "gatsby-plugin-theme-ui": "^0.11.1", + "gatsby-source-filesystem": "^4.0.0", "is-absolute-url": "^3.0.3", "re-resizable": "^6.9.1", "react-helmet": "^6.1.0", - "theme-ui": "^0.9.1" + "theme-ui": "^0.11.1" }, "keywords": [ "gatsby", @@ -47,5 +47,8 @@ "type": "git", "url": "https://github.com/LekoArts/gatsby-themes.git", "directory": "themes/gatsby-theme-graphql-playground" + }, + "engines": { + "node": ">=14.15.0" } } diff --git a/themes/gatsby-theme-jodie-core/gatsby-node.js b/themes/gatsby-theme-jodie-core/gatsby-node.js index d20b51ba6..8cf162871 100755 --- a/themes/gatsby-theme-jodie-core/gatsby-node.js +++ b/themes/gatsby-theme-jodie-core/gatsby-node.js @@ -18,12 +18,12 @@ const mdxResolverPassthrough = (fieldName) => async (source, args, context, info exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { const { createTypes, createFieldExtension } = actions - const { basePath } = withDefaults(themeOptions) + const { basePath, projectsPrefix } = withDefaults(themeOptions) const slugify = (source) => { const slug = source.slug ? source.slug : kebabCase(source.title) - return `/${basePath}/${slug}`.replace(/\/\/+/g, `/`) + return `/${basePath}/${projectsPrefix}/${slug}`.replace(/\/\/+/g, `/`) } createFieldExtension({ @@ -51,7 +51,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { name: `defaultFalse`, extend() { return { - resolve(source, args, context, info) { + resolve(source, _args, _context, info) { if (source[info.fieldName] == null) { return false } @@ -66,6 +66,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { id: ID! title: String! shortTitle: String! + defer: Boolean @defaultFalse category: String! slug: String! @slugify date: Date! @dateformat @@ -79,6 +80,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { title: String! shortTitle: String! category: String! + defer: Boolean @defaultFalse slug: String! @slugify date: Date! @dateformat color: String @@ -90,6 +92,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { interface Page implements Node { id: ID! slug: String! + defer: Boolean @defaultFalse title: String! color: String custom: Boolean @defaultFalse @@ -102,6 +105,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { slug: String! title: String! color: String + defer: Boolean @defaultFalse custom: Boolean @defaultFalse cover: File! @fileByRelativePath excerpt(pruneLength: Int = 140): String! @mdxpassthrough(fieldName: "excerpt") @@ -122,7 +126,7 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => { exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDigest }, themeOptions) => { const { createNode, createParentChildLink } = actions - const { projectsPath, pagesPath } = withDefaults(themeOptions) + const { projectsPath, pagesPath, basePath } = withDefaults(themeOptions) // Make sure that it's an MDX node if (node.internal.type !== `Mdx`) { @@ -145,6 +149,7 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDig date: node.frontmatter.date, category: node.frontmatter.category, color: node.frontmatter.color ? node.frontmatter.color : undefined, + defer: node.frontmatter.defer, } const mdxProjectId = createNodeId(`${node.id} >>> MdxProject`) @@ -170,10 +175,11 @@ exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDig if (node.internal.type === `Mdx` && source === pagesPath) { const fieldData = { title: node.frontmatter.title, - slug: node.frontmatter.slug, + slug: `/${basePath}/${node.frontmatter.slug}`.replace(/\/\/+/g, `/`), color: node.frontmatter.color ? node.frontmatter.color : undefined, custom: node.frontmatter.custom, cover: node.frontmatter.cover, + defer: node.frontmatter.defer, } const mdxPageId = createNodeId(`${node.id} >>> MdxPage`) @@ -235,8 +241,7 @@ const pageTemplate = require.resolve(`./src/templates/page-query.tsx`) exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { const { createPage } = actions - const { basePath, projectsUrl, projectsPrefix, formatString, homepagePageLimit, homepageProjectLimit } = - withDefaults(themeOptions) + const { basePath, projectsUrl, formatString, homepagePageLimit, homepageProjectLimit } = withDefaults(themeOptions) createPage({ path: basePath, @@ -257,6 +262,7 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { allProject(sort: { fields: date, order: DESC }) { nodes { slug + defer ... on MdxProject { parent { ... on Mdx { @@ -273,6 +279,7 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { allPage { nodes { slug + defer } } } @@ -288,13 +295,14 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { if (projects.length > 0) { projects.forEach((project) => { createPage({ - path: `/${basePath}${projectsPrefix}${project.slug}`.replace(/\/\/+/g, `/`), + path: project.slug, component: projectTemplate, context: { slug: project.slug, formatString, relativeDirectory: project.parent.parent.relativeDirectory, }, + defer: project.defer, }) }) } @@ -304,11 +312,12 @@ exports.createPages = async ({ actions, graphql, reporter }, themeOptions) => { if (pages.length > 0) { pages.forEach((page) => { createPage({ - path: `/${basePath}/${page.slug}`.replace(/\/\/+/g, `/`), + path: page.slug, component: pageTemplate, context: { slug: page.slug, }, + defer: page.defer, }) }) } diff --git a/themes/gatsby-theme-jodie-core/package.json b/themes/gatsby-theme-jodie-core/package.json index 76d6d4249..94d9ba4eb 100755 --- a/themes/gatsby-theme-jodie-core/package.json +++ b/themes/gatsby-theme-jodie-core/package.json @@ -15,17 +15,17 @@ "clean": "gatsby clean" }, "peerDependencies": { - "gatsby": "^3.0.0", + "gatsby": "^4.0.0", "react": "^17.0.1", "react-dom": "^17.0.1" }, "dependencies": { "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "gatsby-plugin-mdx": "^2.14.0", - "gatsby-plugin-sharp": "^3.14.0", - "gatsby-source-filesystem": "^3.14.0", - "gatsby-transformer-sharp": "^3.14.0", + "gatsby-plugin-mdx": "^3.0.0", + "gatsby-plugin-sharp": "^4.0.0", + "gatsby-source-filesystem": "^4.0.0", + "gatsby-transformer-sharp": "^4.0.0", "lodash.kebabcase": "^4.1.1" }, "keywords": [ @@ -42,5 +42,8 @@ "type": "git", "url": "https://github.com/LekoArts/gatsby-themes.git", "directory": "themes/gatsby-theme-jodie-core" + }, + "engines": { + "node": ">=14.15.0" } } diff --git a/themes/gatsby-theme-jodie/package.json b/themes/gatsby-theme-jodie/package.json index e3e570362..d9be195ad 100755 --- a/themes/gatsby-theme-jodie/package.json +++ b/themes/gatsby-theme-jodie/package.json @@ -15,20 +15,20 @@ "clean": "gatsby clean" }, "peerDependencies": { - "gatsby": "^3.0.0", + "gatsby": "^4.0.0", "react": "^17.0.1", "react-dom": "^17.0.1" }, "dependencies": { "@lekoarts/gatsby-theme-jodie-core": "^2.0.6", - "@theme-ui/presets": "^0.9.1", - "@theme-ui/prism": "^0.9.1", - "gatsby-plugin-image": "^1.14.0", - "gatsby-plugin-react-helmet": "^4.14.0", - "gatsby-plugin-theme-ui": "^0.9.1", + "@theme-ui/presets": "^0.11.1", + "@theme-ui/prism": "^0.11.1", + "gatsby-plugin-image": "^2.0.0", + "gatsby-plugin-react-helmet": "^5.0.0", + "gatsby-plugin-theme-ui": "^0.11.1", "polished": "^4.1.3", "react-helmet": "^6.1.0", - "theme-ui": "^0.9.1" + "theme-ui": "^0.11.1" }, "keywords": [ "gatsby", @@ -44,5 +44,8 @@ "type": "git", "url": "https://github.com/LekoArts/gatsby-themes.git", "directory": "themes/gatsby-theme-jodie" + }, + "engines": { + "node": ">=14.15.0" } } diff --git a/themes/gatsby-theme-jodie/src/components/navigation.tsx b/themes/gatsby-theme-jodie/src/components/navigation.tsx index 909c5a79c..a267f7119 100755 --- a/themes/gatsby-theme-jodie/src/components/navigation.tsx +++ b/themes/gatsby-theme-jodie/src/components/navigation.tsx @@ -3,10 +3,11 @@ import { jsx, Link as TLink } from "theme-ui" import * as React from "react" import { Link } from "gatsby" import { readableColor } from "polished" +import { replaceSlashes } from "../utils/replace-slashes" import useJodieConfig from "../hooks/use-jodie-config" const Navigation = ({ bg }: { bg: string }) => { - const { navigation } = useJodieConfig() + const { navigation, basePath } = useJodieConfig() return (