next (#641)

.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

.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 `<Grid>` and `<Card>` 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

.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

.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

.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

.nvmrc

@@ -0,0 +1 @@
+v14.16.1

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`)
   })

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

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: {

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"

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

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: {

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"

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
 ---
 ```