BREAKING: Next major version of all themes (Gatsby v3, Theme UI v0.9) (#599)

Author: LekoArts

.changeset/clever-items-march.md

@@ -0,0 +1,39 @@
+---
+"@lekoarts/gatsby-theme-emma": major
+"@lekoarts/gatsby-theme-emma-core": major
+---
+
+### Breaking Changes
+
+1. Using `lessBabel` option for `gatsby-plugin-mdx`
+1. Updating `react-spring` from v8 to v9
+1. Updating `theme-ui` from v0.3 to v0.9 and thus also `emotion` from v10 to v11
+1. Removed `@emotion/styled`
+1. Updating all Gatsby related packages to latest
+1. Migrated from `gatsby-image` to `gatsby-plugin-image`
+1. Removed `gatsby-plugin-typescript` & `gatsby-plugin-emotion`
+
+#### Migrating
+
+1. The `lessBabel` option might break your setup in some edge cases. If it doesn't work, turn on the `mdx` option and choose your own config for `gatsby-plugin-mdx`
+1. You can find the migration guide for `react-spring` here: https://react-spring.io/changelog#v900
+1. The changelog/migration guide for `theme-ui` is here: https://theme-ui.com/migrating and for `emotion` here: https://emotion.sh/docs/emotion-11
+1. If you still want to use `@emotion/styled` you'll need to install it separately now
+1. Gatsby v3 migration guide: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/
+1. The theme itself is completely migrated to the new image plugin, but if you shadowed components and relied on the old structure, you'll need to migrate to `gatsby-plugin-image`: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/
+1. The TypeScript plugin isn't necessary anymore with Gatsby v3 -- if you want to continue to use `@emotion/styled` you'll need to add `gatsby-plugin-emotion` yourself
+
+### Improvements
+
+- You can use the `sharp` theme option to be able to configure `gatsby-plugin-sharp` on your own (helpful for defaults for `gatsby-plugin-image`)
+- Performance improvements from `react-spring` and `theme-ui` upgrades
+- Eagerly load the first image in the grid (better lighthouse score)
+- Update header/navigation for better mobile view
+
+### Updates to Starter
+
+If you only cloned the starter (https://github.com/LekoArts/gatsby-starter-portfolio-emma) and didn't change anything else this section will be more relevant to you.
+
+- Conditionally add `gatsby-plugin-google-analytics`
+- Add `FAST_DEV` flag
+- Update to all latest Gatsby (+ plugins) versions

.changeset/clever-toys-thank.md

@@ -0,0 +1,24 @@
+---
+"@lekoarts/gatsby-theme-graphql-playground": major
+---
+
+### Breaking Changes
+
+1. Using `lessBabel` option for `gatsby-plugin-mdx`
+1. Removed `gatsby-plugin-typescript` & `gatsby-plugin-emotion`
+
+#### Migrating
+
+1. The `lessBabel` option might break your setup in some edge cases. If it doesn't work, turn on the `mdx` option and choose your own config for `gatsby-plugin-mdx`
+1. The TypeScript plugin isn't necessary anymore with Gatsby v3
+
+### Improvements
+
+- Performance improvements from `theme-ui` upgrade
+
+### Updates to Starter
+
+If you only cloned the starter (https://github.com/LekoArts/gatsby-starter-graphql-playground) and didn't change anything else this section will be more relevant to you.
+
+- Add `FAST_DEV` flag
+- Update to all latest Gatsby (+ plugins) versions

.changeset/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@1.4.0/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@1.6.0/schema.json",
   "changelog": [
     "@changesets/changelog-github",
     { "repo": "LekoArts/gatsby-themes" }

.changeset/light-birds-beam.md

@@ -0,0 +1,36 @@
+---
+"@lekoarts/gatsby-theme-cara": major
+---
+
+### Breaking Changes
+
+1. Using `lessBabel` option for `gatsby-plugin-mdx`
+1. Updating `react-spring` from v8 to v9
+1. Updating `theme-ui` from v0.3 to v0.9 and thus also `emotion` from v10 to v11
+1. Removed `@emotion/styled`
+1. Updating all Gatsby related packages to latest
+1. Removed `gatsby-plugin-typescript` & `gatsby-plugin-emotion`
+
+#### Migrating
+
+1. The `lessBabel` option might break your setup in some edge cases. If it doesn't work, turn on the `mdx` option and choose your own config for `gatsby-plugin-mdx`
+1. You can find the migration guide for `react-spring` here: https://react-spring.io/changelog#v900. The most notable change is the import that was used inside the components. From `import { ParallaxLayer } from "react-spring/renderprops-addons.cjs"` to `import { ParallaxLayer } from "@react-spring/parallax"`
+1. The changelog/migration guide for `theme-ui` is here: https://theme-ui.com/migrating and for `emotion` here: https://emotion.sh/docs/emotion-11
+1. If you still want to use `@emotion/styled` you'll need to install it separately now
+1. Gatsby v3 migration guide: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/
+1. The TypeScript plugin isn't necessary anymore with Gatsby v3 -- if you want to continue to use `@emotion/styled` you'll need to add `gatsby-plugin-emotion` yourself
+
+### Improvements
+
+- You can use the `sharp` theme option to be able to configure `gatsby-plugin-sharp` on your own (helpful for defaults for `gatsby-plugin-image`)
+- Performance improvements from `react-spring` and `theme-ui` upgrades
+- Additional props to the `ProjectCard` component are now spread by default in the `components` config of `gatsby-plugin-theme-ui`
+
+### Updates to Starter
+
+If you only cloned the starter (https://github.com/LekoArts/gatsby-starter-portfolio-cara) and didn't change anything else this section will be more relevant to you.
+
+- Conditionally add `gatsby-plugin-google-analytics`
+- Add `FAST_DEV` flag
+- Update to all latest Gatsby (+ plugins) versions
+- Add 404 page

.changeset/metal-badgers-fail.md

@@ -0,0 +1,23 @@
+---
+"@lekoarts/gatsby-theme-specimens": major
+---
+
+### Breaking Changes
+
+1. Removed `gatsby-plugin-typescript`
+1. Updating `theme-ui` from v0.3 to v0.9 and thus also `emotion` from v10 to v11
+
+#### Migrating
+
+1. The TypeScript plugin isn't necessary anymore with Gatsby v3
+1. The changelog/migration guide for `theme-ui` is here: https://theme-ui.com/migrating and for `emotion` here: https://emotion.sh/docs/emotion-11
+
+### Updates to Starter
+
+If you only cloned the starter (https://github.com/LekoArts/gatsby-starter-specimens) and didn't change anything else this section will be more relevant to you.
+
+- Add `FAST_DEV` flag
+- Update to all latest Gatsby (+ plugins) versions
+- Add `lessBabel` option to `gatsby-plugin-mdx`
+- Update usage of `wrapPageElement` API in `gatsby-browser.js` and `gatsby-ssr.js`
+- Update `theme-ui` from v0.3 to v0.9

.changeset/nervous-falcons-lie.md

@@ -0,0 +1,19 @@
+---
+"@lekoarts/gatsby-theme-styleguide": major
+---
+
+### Breaking Changes
+
+1. `peerDependencies` of `theme-ui` v0.9, React v17 and Gatsby v3
+
+#### Migrating
+
+1. Update your packages to the necessary `peerDependency` versions
+
+### Updates to Starter
+
+If you only cloned the starter (https://github.com/LekoArts/gatsby-starter-styleguide) and didn't change anything else this section will be more relevant to you.
+
+- Add `FAST_DEV` flag
+- Update to all latest Gatsby (+ plugins) versions
+- Update `emotion` from v10 to v11

.changeset/quick-socks-relax.md

@@ -0,0 +1,25 @@
+---
+"@lekoarts/gatsby-theme-status-dashboard": major
+---
+
+### Breaking Changes
+
+1. Removed `gatsby-plugin-typescript`
+1. Updating `theme-ui` from v0.3 to v0.9 and thus also `emotion` from v10 to v11
+
+#### Migrating
+
+1. The TypeScript plugin isn't necessary anymore with Gatsby v3
+1. The changelog/migration guide for `theme-ui` is here: https://theme-ui.com/migrating and for `emotion` here: https://emotion.sh/docs/emotion-11
+
+### Improvements
+
+- Performance improvements from `theme-ui` upgrade
+
+### Updates to Starter
+
+If you only cloned the starter (https://github.com/LekoArts/gatsby-status-dashboard) and didn't change anything else this section will be more relevant to you.
+
+- Add `FAST_DEV` flag
+- Update to all latest Gatsby (+ plugins) versions
+- Update `emotion` from v10 to v11

.changeset/tame-stingrays-compete.md

@@ -0,0 +1,37 @@
+---
+"@lekoarts/gatsby-theme-jodie": major
+"@lekoarts/gatsby-theme-jodie-core": major
+---
+
+### Breaking Changes
+
+1. Using `lessBabel` option for `gatsby-plugin-mdx`
+1. Updating `theme-ui` from v0.3 to v0.9 and thus also `emotion` from v10 to v11
+1. Updating all Gatsby related packages to latest
+1. Migrated from `gatsby-image` to `gatsby-plugin-image`
+1. Removed `fontsource-work-sans` npm package
+
+#### Migrating
+
+1. The `lessBabel` option might break your setup in some edge cases. If it doesn't work, turn on the `mdx` option and choose your own config for `gatsby-plugin-mdx`
+1. The changelog/migration guide for `theme-ui` is here: https://theme-ui.com/migrating and for `emotion` here: https://emotion.sh/docs/emotion-11
+1. Gatsby v3 migration guide: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/
+1. The theme itself is completely migrated to the new image plugin, but if you shadowed components and relied on the old structure, you'll need to migrate to `gatsby-plugin-image`: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/
+1. The starter now handles loading the font (via `gatsby-omni-font-loader`). This enables you to switch the primary font more easily (once you updated the Theme UI config). You can copy the configuration from there into your own `gatsby-config.js`
+
+### Improvements
+
+- You can use the `sharp` theme option to be able to configure `gatsby-plugin-sharp` on your own (helpful for defaults for `gatsby-plugin-image`)
+- Performance improvements from `theme-ui` upgrade
+- Eagerly load the first image in the grid (better lighthouse score)
+
+### Updates to Starter
+
+If you only cloned the starter (https://github.com/LekoArts/gatsby-starter-portfolio-jodie) and didn't change anything else this section will be more relevant to you.
+
+- Conditionally add `gatsby-plugin-google-analytics`
+- Conditionally add `gatsby-plugin-webpack-bundle-analyser-v2`
+- Use `gatsby-omni-font-loader` to load the primary font ("Work Sans") instead of in the theme itself
+- Add `FAST_DEV` flag
+- Update to all latest Gatsby (+ plugins) versions
+- Remove `gatsby-source-instagram` as Instagram locked down its API (and public scraping methods) even further. The page is now called `/art` and showcases the custom page in the same way

.changeset/thick-donuts-juggle.md

@@ -0,0 +1,43 @@
+---
+"@lekoarts/gatsby-theme-emilia": major
+"@lekoarts/gatsby-theme-emilia-core": major
+---
+
+### Breaking Changes
+
+1. Using `lessBabel` option for `gatsby-plugin-mdx`
+1. Updating `react-spring` from v8 to v9
+1. Updating `theme-ui` from v0.3 to v0.9 and thus also `emotion` from v10 to v11
+1. Removed `@emotion/styled`
+1. Updating all Gatsby related packages to latest
+1. Migrated from `gatsby-image` to `gatsby-plugin-image`
+1. Removed `gatsby-plugin-typescript` & `gatsby-plugin-emotion`
+1. Removed the `colorThief` node field
+1. Normal CSS grid layout (instead of Masonry layout)
+
+#### Migrating
+
+1. The `lessBabel` option might break your setup in some edge cases. If it doesn't work, turn on the `mdx` option and choose your own config for `gatsby-plugin-mdx`
+1. You can find the migration guide for `react-spring` here: https://react-spring.io/changelog#v900. The most notable change is the import that was used inside the components. From `import { ParallaxLayer } from "react-spring/renderprops-addons.cjs"` to `import { ParallaxLayer } from "@react-spring/parallax"`
+1. The changelog/migration guide for `theme-ui` is here: https://theme-ui.com/migrating and for `emotion` here: https://emotion.sh/docs/emotion-11
+1. If you still want to use `@emotion/styled` you'll need to install it separately now
+1. Gatsby v3 migration guide: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/
+1. The theme itself is completely migrated to the new image plugin, but if you shadowed components and relied on the old structure, you'll need to migrate to `gatsby-plugin-image`: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/
+1. The TypeScript plugin isn't necessary anymore with Gatsby v3 -- if you want to continue to use `@emotion/styled` you'll need to add `gatsby-plugin-emotion` yourself
+1. The `gatsby-plugin-image` now exposes the dominant color via the `placeholder` itself
+1. The Masonry layout was a bit hacky, so I switched it to a normal CSS grid layout. You could shadow the `card` component to try something on your own. Once the CSS spec itself has a native masonry layout I'll add it back
+
+### Improvements
+
+- You can use the `sharp` theme option to be able to configure `gatsby-plugin-sharp` on your own (helpful for defaults for `gatsby-plugin-image`)
+- Performance improvements from `react-spring` and `theme-ui` upgrades
+- Eagerly load the first image in the grid (better lighthouse score)
+
+### Updates to Starter
+
+If you only cloned the starter (https://github.com/LekoArts/gatsby-starter-portfolio-emilia) and didn't change anything else this section will be more relevant to you.
+
+- Conditionally add `gatsby-plugin-google-analytics`
+- Add `FAST_DEV` flag
+- Update to all latest Gatsby (+ plugins) versions
+- Add 404 page

.changeset/tricky-glasses-love.md

@@ -0,0 +1,37 @@
+---
+"@lekoarts/gatsby-theme-minimal-blog": major
+"@lekoarts/gatsby-theme-minimal-blog-core": major
+---
+
+### Breaking Changes
+
+1. Using `lessBabel` option for `gatsby-plugin-mdx`
+1. Updating `theme-ui` from v0.3 to v0.9 and thus also `emotion` from v10 to v11
+1. Updating all Gatsby related packages to latest
+1. Removed `gatsby-plugin-typescript`
+1. Removed `gatsby-plugin-feed`
+1. Removed `typeface-ibm-plex-sans` npm package
+
+#### Migrating
+
+1. The `lessBabel` option might break your setup in some edge cases. If it doesn't work, turn on the `mdx` option and choose your own config for `gatsby-plugin-mdx`
+1. The changelog/migration guide for `theme-ui` is here: https://theme-ui.com/migrating and for `emotion` here: https://emotion.sh/docs/emotion-11
+1. Gatsby v3 migration guide: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/
+1. The TypeScript plugin isn't necessary anymore with Gatsby v3
+1. The plugin and its config was moved to the starter. You can copy the configuration from there into your own `gatsby-config.js`
+1. The starter now handles loading the font (via `gatsby-omni-font-loader`). This enables you to switch the primary font more easily (once you updated the Theme UI config). You can copy the configuration from there into your own `gatsby-config.js`
+
+### Improvements
+
+- Performance improvements from `theme-ui` upgrade
+- Fixed https://github.com/LekoArts/gatsby-themes/issues/415
+
+### Updates to Starter
+
+If you only cloned the starter (https://github.com/LekoArts/gatsby-starter-minimal-blog) and didn't change anything else this section will be more relevant to you.
+
+- Conditionally add `gatsby-plugin-google-analytics`
+- Add `FAST_DEV` flag
+- Update to all latest Gatsby (+ plugins) versions
+- Move `gatsby-plugin-feed` from theme to starter
+- Use `gatsby-omni-font-loader` to load the primary font ("IBM Plex Sans") instead of in the theme itself