BREAKING: v3 (#112)

Author: LekoArts

.eslintignore

@@ -3,5 +3,6 @@ node_modules
 packages/*/dist/**
 packages/*/lib/**
 packages/*/scripts/**
+packages/*/index.d.ts
 starters
 .github

MIGRATING.md

@@ -0,0 +1,134 @@
+# Migration Guide
+
+## Migrating from `gatsby-theme-blog` / `gatsby-theme-blog-core` / `gatsby-theme-blog-darkmode` v2 to v3
+
+The 3.0 release includes breaking changes as the theme was upgraded to Gatsby v3, Theme UI v0.7, emotion v11, and migrated from `gatsby-image` to `gatsby-plugin-image`.
+
+Before upgrading to 3.0 you'll want to update your core `gatsby` version to v3 as well: [Migrating from v2 to v3 documentation](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/).
+
+**All versions updated** - All versions (Gatsby plugins, third-party packages) were updated to their latest versions. This includes breaking changes like updating to emotion 11.
+
+**Plugin Options** - The `mdx` option was replaced by `mdxOtherwiseConfigured`.
+
+**Images** - `gatsby-image` and its queries (fluid/fixed) were replaced with the new `gatsby-plugin-image`. See [Migrating from gatsby-image to gatsby-plugin-image](https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/).
+
+**Theme UI** - Theme UI was updated to v0.7. See [Theme UI's migration guide](https://theme-ui.com/migrating).
+
+## Migrating from `gatsby-theme-notes` v2 to v3
+
+Before upgrading to 3.0 you'll want to update your core `gatsby` version to v3 as well: [Migrating from v2 to v3 documentation](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/).
+
+**All versions updated** - All versions (Gatsby plugins, third-party packages) were updated to their latest versions. This includes breaking changes like updating to emotion 11.
+
+**Plugin Options** - The `mdx` option was replaced by `mdxOtherwiseConfigured`.
+
+**Theme UI** - Theme UI was updated to v0.7. See [Theme UI's migration guide](https://theme-ui.com/migrating).
+
+## Migrating from `gatsby-theme-i18n` v1 to v2
+
+Before upgrading to 3.0 you'll want to update your core `gatsby` version to v3 as well: [Migrating from v2 to v3 documentation](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/).
+
+**New peerDependencies** - `gatsby-plugin-react-helmet` and `react-helmet` are now `peerDependencies`. You'll need to install them yourself: `npm install gatsby-plugin-react-helmet react-helmet`. Also add `gatsby-plugin-react-helmet` to your `gatsby-config.js`.
+
+## Migrating from `gatsby-theme-i18n-lingui` v1 to v2
+
+Before upgrading to 3.0 you'll want to update your core `gatsby` version to v3 as well: [Migrating from v2 to v3 documentation](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/).
+
+**Update to lingui v3** - The theme now requires lingui v3. All lingui dependencies were updated from v2 to v3. See [lingui's migration guide](https://lingui.js.org/releases/migration-3.html). This also means that you have to install `@lingui/core` as a new `dependency` and change your configuration file. See the [README](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n-lingui) for more information.
+
+## Migrating from `gatsby-theme-i18n-react-i18next` / `gatsby-theme-i18n-react-intl` v1 to v2
+
+Before upgrading to 3.0 you'll want to update your core `gatsby` version to v3 as well: [Migrating from v2 to v3 documentation](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/).
+
+**Update to peerDependencies**. These updates to the `devDependencies` / `peerDependencies` were made:
+
+- Update `i18next` from 19.x to 20.x
+- Update `react-intl` from 4.x to 5.x, so you'll have to use `react-intl` v5
+
+## Migrating from `gatsby-theme-blog` v1 to v2
+
+The 2.0 release includes breaking changes. Note that many of the changes are related to the default styling in the blog theme. If you have no interest in additional flexibility with styles the 1.6 release may be sufficient as it includes new features without the breaking changes.
+
+Before upgrading to 2.0 you'll want to update your core `gatsby` version as well.
+
+**Change in data structure** - Instead of querying for the `node` object inside the `edges` array, all queries now look for `nodes`. If you're shadowing files and accessing data directly you may need to account for this.
+
+**Removal of darkmode toggle** - This theme no longer comes with a darkmode toggle. If you'd like to use the old one it is now available as a parallel theme you can install, [`gatsby-theme-blog-darkmode`](https://www.gatsbyjs.com/plugins/gatsby-theme-blog-darkmode/). Please see the README for further instructions.
+
+### Style specific migration notes
+
+With the new version of `gatsby-plugin-theme-ui` there are a number of changes to the way styles are passed and how they compose.
+
+**Change in shadow structure** - When shadowing files in `gatsby-plugin-theme-ui` the directory can no longer be nested inside the `gatsby-theme-blog` directory. It needs to be at the root level. Additionally, all content needs to be shadowed via `index.js`. You can make use of files like `colors.js` but they will not shadow unless explicitly exported from `index.js`.
+
+**Default deepmerge** - Any shadowed styles will deepmerge with the `gatsby-theme-blog` built-in styles automatically.
+
+If your previous code look like this:
+
+```javascript
+import merge from "deepmerge"
+import defaultThemeColors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/colors"
+
+const darkBlue = `#007acc`
+const lightBlue = `#66E0FF`
+const blueGray = `#282c35`
+
+const theme = merge(defaultThemeColors, {
+  text: blueGray,
+  primary: darkBlue,
+  heading: blueGray,
+})
+
+export default theme
+```
+
+It should now look like this. Noting that the merge still occurs by default.
+
+```javascript
+const darkBlue = `#007acc`
+const lightBlue = `#66E0FF`
+const blueGray = `#282c35`
+
+const theme = {
+  text: blueGray,
+  primary: darkBlue,
+  heading: blueGray,
+}
+
+export default theme
+```
+
+If you did not merge in the official theme styles and instead overrode them you can still do so. You'll want to remove the preset by passing the option in `gatsby-config.js`
+
+```javascript
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-theme-blog`,
+      options: {
+        preset: false,
+      },
+    },
+  ],
+}
+```
+
+**No built in Typography.js** - [Typography.js](https://kyleamathews.github.io/typography.js/) is no longer part of the default styling. If you'd like to add it locally follow the [Theme UI docs](https://theme-ui.com/packages/typography/#extending-the-typographyjs-theme) or note the code snippet below. The original theme used `typography-theme-wordpress-2016` and also imported `typeface-montserrat` and `typeface-merriweather`.
+
+Another thing to keep in mind if you're pulling in typography for local shadowing is that the order of merging is different. The most common issue is that the spacing underneath code blocks is off. To fix that, include the following code in `src/gatsby-plugin-theme-ui/index.js`.
+
+```javascript
+import { toTheme } from "@theme-ui/typography"
+import wp2016 from "typography-theme-wordpress-2016"
+import { merge } from "theme-ui"
+
+const theme = merge(toTheme(wp2016), {
+  styles: {
+    pre: {
+      margin: `0 0 2 0`,
+    },
+  },
+})
+
+export default theme
+```

packages/gatsby-theme-blog-core/README.md

@@ -7,7 +7,7 @@
   The Gatsby blog core theme
 </h1>
 
-A Gatsby theme for creating a blog child theme. It includes all of the data structures you need to get up and running building a blog and includes no additional theming or style opinions.
+A Gatsby theme for creating a blog child theme. It includes all the data structures you need to get up and running building a blog and includes no additional theming or style opinions. `gatsby-theme-blog` uses this theme under the hood.
 
 ## Installation
 
@@ -134,4 +134,4 @@ The following are the defined blog post fields based on the node interface in th
 
 There are some existing components that you can import and use. Reference the full path to do so, e.g. `gatsby-blog-theme-core/src/components/post`.
 
-Also note that there are classNames on elements in these components allowing you to target them with styles.
+Also note that there are `classNames` on elements in these components allowing you to target them with styles in your CSS.

packages/gatsby-theme-blog-core/gatsby-config.js

@@ -2,10 +2,7 @@ const withDefaults = require(`./utils/default-options`)
 
 module.exports = (themeOptions) => {
   const options = withDefaults(themeOptions)
-  const {
-    mdxOtherwiseConfigured = false,
-    mdx: legacyConfigureMdxFlag = true,
-  } = themeOptions // keep mdx flag so we don't introduce a breaking change
+  const { mdxOtherwiseConfigured = false } = themeOptions
 
   return {
     siteMetadata: {
@@ -25,25 +22,24 @@ module.exports = (themeOptions) => {
       ],
     },
     plugins: [
-      !mdxOtherwiseConfigured &&
-        legacyConfigureMdxFlag && {
-          resolve: `gatsby-plugin-mdx`,
-          options: {
-            extensions: [`.mdx`, `.md`],
-            gatsbyRemarkPlugins: [
-              {
-                resolve: `gatsby-remark-images`,
-                options: {
-                  maxWidth: options.imageMaxWidth,
-                  linkImagesToOriginal: false,
-                },
+      !mdxOtherwiseConfigured && {
+        resolve: `gatsby-plugin-mdx`,
+        options: {
+          extensions: [`.mdx`, `.md`],
+          gatsbyRemarkPlugins: [
+            {
+              resolve: `gatsby-remark-images`,
+              options: {
+                maxWidth: options.imageMaxWidth,
+                linkImagesToOriginal: false,
               },
-              { resolve: `gatsby-remark-copy-linked-files` },
-              { resolve: `gatsby-remark-smartypants` },
-            ],
-            remarkPlugins: [require(`remark-slug`)],
-          },
+            },
+            { resolve: `gatsby-remark-copy-linked-files` },
+            { resolve: `gatsby-remark-smartypants` },
+          ],
+          remarkPlugins: [require(`remark-slug`)],
         },
+      },
       {
         resolve: `gatsby-source-filesystem`,
         options: {
@@ -58,6 +54,7 @@ module.exports = (themeOptions) => {
           name: options.assetPath || `content/assets`,
         },
       },
+      `gatsby-plugin-image`,
       `gatsby-transformer-sharp`,
       `gatsby-plugin-sharp`,
     ].filter(Boolean),

packages/gatsby-theme-blog-core/gatsby-node.js

@@ -49,7 +49,7 @@ const mdxResolverPassthrough = (fieldName) => async (
 exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => {
   const { excerptLength } = withDefaults(themeOptions)
   const { createTypes } = actions
-  createTypes(`interface BlogPost @nodeInterface {
+  createTypes(`interface BlogPost implements Node {
       id: ID!
       title: String!
       body: String!
@@ -292,7 +292,7 @@ exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => {
   )
 
   if (result.errors) {
-    reporter.panic(result.errors)
+    reporter.panicOnBuild(result.errors)
   }
 
   // Create Posts and Post pages.

packages/gatsby-theme-blog-core/package.json

@@ -1,6 +1,7 @@
 {
   "name": "gatsby-theme-blog-core",
-  "version": "2.1.0",
+  "description": "The core theme for gatsby-theme-blog",
+  "version": "3.0.0",
   "main": "index.js",
   "author": "christopherbiscardi <[email protected]> (@chrisbiscardi)",
   "license": "MIT",
@@ -11,31 +12,25 @@
   },
   "homepage": "https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-core#readme",
   "peerDependencies": {
-    "@mdx-js/react": "^1.0.27",
-    "gatsby": "^2.23.22",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "@mdx-js/react": "^1.6.22",
+    "gatsby": "^3.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^1.6.14",
-    "gatsby-core-utils": "^1.3.13",
-    "gatsby-plugin-mdx": "^1.2.28",
-    "gatsby-plugin-sharp": "^2.6.21",
-    "gatsby-remark-copy-linked-files": "^2.3.11",
-    "gatsby-remark-images": "^3.3.20",
-    "gatsby-remark-smartypants": "^2.3.10",
-    "gatsby-source-filesystem": "^2.3.22",
-    "gatsby-transformer-sharp": "^2.5.11",
+    "@mdx-js/mdx": "^1.6.22",
+    "gatsby-core-utils": "^2.2.0",
+    "gatsby-plugin-image": "^1.2.1",
+    "gatsby-plugin-mdx": "^2.2.0",
+    "gatsby-plugin-sharp": "^3.2.1",
+    "gatsby-remark-copy-linked-files": "^3.2.0",
+    "gatsby-remark-images": "^4.2.0",
+    "gatsby-remark-smartypants": "^3.2.0",
+    "gatsby-source-filesystem": "^3.2.0",
+    "gatsby-transformer-sharp": "^3.2.0",
     "remark-slug": "^5.1.2"
   },
-  "devDependencies": {
-    "@mdx-js/react": "^1.6.14",
-    "gatsby": "^2.24.10",
-    "prettier": "2.0.5",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
-  },
   "engines": {
-    "node": ">=10.13.0"
+    "node": ">=12.13.0"
   }
 }

packages/gatsby-theme-blog-core/src/components/post-date.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 
 const PostDate = (props) => <p className="post-date" {...props} />
 

packages/gatsby-theme-blog-core/src/components/post-hero.js

@@ -1,11 +1,11 @@
-import React from "react"
-import Image from "gatsby-image"
+import * as React from "react"
+import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
 const PostHero = ({ post }) => (
   <>
     {post?.image?.childImageSharp && (
-      <Image
-        fluid={post.image.childImageSharp.fluid}
+      <GatsbyImage
+        image={getImage(post.image)}
         alt={post.imageAlt ? post.imageAlt : post.excerpt}
         className="post-hero"
       />

packages/gatsby-theme-blog-core/src/components/post-link.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Link } from "gatsby"
 
 const PostLink = ({ title, slug, date, excerpt }) => (

packages/gatsby-theme-blog-core/src/components/post-list.js

@@ -1,5 +1,4 @@
-import React from "react"
-
+import * as React from "react"
 import PostLink from "./post-link"
 
 const PostList = ({ posts }) => (

packages/gatsby-theme-blog-core/src/components/post-title.js

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 
 const PostTitle = (props) => (
   <h1 className="post-title" {...props}>

packages/gatsby-theme-blog-core/src/components/post.js

@@ -1,7 +1,5 @@
-import React from "react"
-
+import * as React from "react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
-
 import PostTitle from "./post-title"
 import PostDate from "./post-date"
 import PostHero from "./post-hero"

packages/gatsby-theme-blog-core/src/components/posts.js

@@ -1,5 +1,4 @@
-import React from "react"
-
+import * as React from "react"
 import PostList from "./post-list"
 
 const Posts = ({ data }) => {

packages/gatsby-theme-blog-core/src/templates/post-query.js

@@ -29,21 +29,15 @@ export const query = graphql`
       date(formatString: "MMMM DD, YYYY")
       image {
         childImageSharp {
-          fluid(maxWidth: $maxWidth) {
-            ...GatsbyImageSharpFluid
-            src
-          }
+          gatsbyImageData(width: $maxWidth)
         }
       }
       imageAlt
       imageCaptionText
       imageCaptionLink
       socialImage {
         childImageSharp {
-          fluid {
-            ...GatsbyImageSharpFluid
-            src
-          }
+          gatsbyImageData(width: 1600)
         }
       }
     }