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

…#599)

.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

.eslintrc.js

@@ -5,7 +5,6 @@ module.exports = {
     `plugin:@typescript-eslint/recommended`,
     `plugin:import/typescript`,
     `plugin:prettier/recommended`,
-    `prettier/@typescript-eslint`,
   ],
   plugins: [`@typescript-eslint`, `prettier`, `react-hooks`],
   parserOptions: {

.github/workflows/publish-starters.yml

@@ -8,10 +8,10 @@ jobs:
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v2
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@v1
+      - name: Setup Node.js 14.x
+        uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
       - name: Publish Starters
         uses: johno/actions-push-subdirectories@master
         env:

.github/workflows/release.yml

@@ -12,10 +12,10 @@ jobs:
         uses: actions/checkout@v2
         with:
           fetch-depth: 0
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@v1
+      - name: Setup Node.js 14.x
+        uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
       - name: Install Dependencies
         run: yarn --frozen-lockfile
       - name: Create Release Pull Request or Publish to npm

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.nvmrc

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

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://www.lekoarts.de/en">
-    <img alt="LekoArts" src="https://img.lekoarts.de/gatsby/lekoarts-monogram.svg" width="80" />
+    <img alt="LekoArts" src="https://img.lekoarts.de/gatsby/lekoarts-monogram-v2.svg" width="100" />
   </a>
 </p>
 <h1 align="center">
@@ -75,10 +75,10 @@ Please star this project, share it on Social Media or consider supporting me on
 
 ### Articles from lekoarts.de
 
-- [How I used Theme UI to build my Gatsby Themes library](https://www.lekoarts.de/en/blog/how-i-used-theme-ui-to-build-my-gatsby-themes-library)
-- [Setting up a Gatsby Themes workspace with TypeScript, ESLint & Cypress](https://www.lekoarts.de/en/blog/setting-up-a-gatsby-themes-workspace-with-typescript-eslint-and-cypress)
-- [Specimens for Gatsby powered Design Systems](https://www.lekoarts.de/en/blog/specimens-for-gatsby-powered-design-systems)
-- [Creating your own Status Dashboard with Gatsby](https://www.lekoarts.de/en/blog/creating-your-own-status-dashboard-with-gatsby)
+- [How I used Theme UI to build my Gatsby Themes library](https://www.lekoarts.de/javascript/how-i-used-theme-ui-to-seamlessly-convert-design-to-code?utm_source=gatsby-themes&utm_medium=README)
+- [Setting up a Gatsby Themes workspace with TypeScript, ESLint & Cypress](https://www.lekoarts.de/javascript/setting-up-a-yarn-workspace-with-typescript-eslint-and-cypress?utm_source=gatsby-themes&utm_medium=README)
+- [Specimens for Gatsby powered Design Systems](https://www.lekoarts.de/garden/specimens-for-gatsby-powered-design-systems?utm_source=gatsby-themes&utm_medium=README)
+- [Creating your own Status Dashboard with Gatsby](https://www.lekoarts.de/garden/creating-your-own-status-dashboard-with-gatsby?utm_source=gatsby-themes&utm_medium=README)
 
 ### Official resources