Merge pull request #240 from apollographql/jg/gatsby-v3

Upgrade to Gatsby v3

example/README.md

@@ -2,6 +2,10 @@
 
 This directory is an example project to show how you can use Apollo's docs theme for non-Apollo usage.
 
+## Local development
+
+This project uses yarn workspaces. To spin up this example project locally, run `yarn workspace example start` in the root of the `gatsby-theme-apollo` directory (not inside of this `example` directory).
+
 ## Overrides
 
 To replace the logo, create a custom React component in `src/gatsby-theme-apollo-core/components/logo.js`. You can import your own SVG and use styled components to achieve your desired look.

example/package.json

@@ -7,8 +7,8 @@
     "build": "gatsby build"
   },
   "dependencies": {
-    "gatsby": "^2.23.18",
-    "gatsby-theme-apollo-docs": "^5.3.2",
+    "gatsby": "^3.0.0",
+    "gatsby-theme-apollo-docs": "^5.3.13-alpha.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   }

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

@@ -9,7 +9,9 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-less',
       options: {
-        modifyVars: mapKeys(colors, (value, key) => `color-${key}`)
+        lessOptions: {
+          modifyVars: mapKeys(colors, (value, key) => `color-${key}`)
+        }
       }
     }
   ]

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

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-apollo-core",
-  "version": "3.0.37",
+  "version": "3.0.38-alpha.1",
   "main": "index.js",
   "description": "A theme for bootstrapping Gatsby websites at Apollo",
   "author": "Trevor Blades <blades@apollographql.com>",
@@ -13,12 +13,13 @@
   "dependencies": {
     "@apollo/space-kit": "^5.6.0",
     "@emotion/core": "^10.0.7",
-    "@emotion/styled": "^10.0.7",
-    "@svgr/webpack": "^4.2.0",
-    "gatsby-plugin-emotion": "^4.0.3",
-    "gatsby-plugin-less": "^3.0.1",
-    "gatsby-plugin-react-helmet": "^3.0.2",
-    "gatsby-plugin-svgr": "^2.0.1",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@svgr/webpack": "^5.0.0",
+    "gatsby-plugin-emotion": "^6.0.0",
+    "gatsby-plugin-less": "^5.0.0",
+    "gatsby-plugin-react-helmet": "^4.0.0",
+    "gatsby-plugin-svgr": "3.0.0-beta.0",
     "less": "^3.10.1",
     "lodash": "^4.17.14",
     "polished": "^2.3.3",
@@ -27,12 +28,12 @@
     "react-use": "^9.11.0"
   },
   "devDependencies": {
-    "gatsby": "^2.24.23",
+    "gatsby": "^3.0.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
   "peerDependencies": {
-    "gatsby": "^2.13.80",
+    "gatsby": "^3.0.0",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   }

packages/gatsby-theme-apollo-core/src/components/sidebar-nav.js

@@ -139,7 +139,8 @@ function NavItems(props) {
             {page.anchor ? (
               <a href={page.path} target="_blank" rel="noopener noreferrer">
                 {pageTitle}
-                <StyledOutlinkIcon />
+                {/* `size(14) style is being overriden by a 25px height from emotion */}
+                <StyledOutlinkIcon style={{height: '14px'}} />
               </a>
             ) : (
               <Link

packages/gatsby-theme-apollo-docs/gatsby-node.js

@@ -5,6 +5,14 @@ const {createFilePath} = require('gatsby-source-filesystem');
 const {getVersionBasePath} = require('./src/utils');
 const {default: getShareImage} = require('@jlengstorf/get-share-image');
 
+exports.onCreateWebpackConfig = ({actions}) => {
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {path: require.resolve('path-browserify')}
+    }
+  });
+};
+
 function getConfigPaths(baseDir) {
   return [
     path.join(baseDir, 'gatsby-config.js'), // new gatsby config

packages/gatsby-theme-apollo-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-apollo-docs",
-  "version": "5.3.12",
+  "version": "5.3.13-y.3",
   "main": "index.js",
   "description": "A Gatsby theme for building documentation websites",
   "author": "Trevor Blades <blades@apollographql.com>",
@@ -29,23 +29,24 @@
     "classnames": "^2.2.6",
     "gatsby-plugin-algolia": "^0.20.1",
     "gatsby-plugin-apollo-onetrust": "apollographql/gatsby-plugin-apollo-onetrust",
-    "gatsby-plugin-google-analytics": "^2.2.5",
-    "gatsby-plugin-google-gtag": "^2.8.0",
-    "gatsby-plugin-google-tagmanager": "^2.11.0",
+    "gatsby-plugin-google-analytics": "^3.0.0",
+    "gatsby-plugin-google-gtag": "^3.0.0",
+    "gatsby-plugin-google-tagmanager": "^3.0.0",
     "gatsby-plugin-mdx": "^1.0.23",
-    "gatsby-remark-autolink-headers": "^2.3.11",
+    "gatsby-remark-autolink-headers": "4.11.0",
     "gatsby-remark-check-links": "^2.1.0",
     "gatsby-remark-code-titles": "^1.1.0",
-    "gatsby-remark-copy-linked-files": "^2.0.12",
+    "gatsby-remark-copy-linked-files": "^3.0.0",
     "gatsby-remark-mermaid": "^1.2.0",
-    "gatsby-remark-prismjs": "^3.2.8",
+    "gatsby-remark-prismjs": "^5.0.0",
     "gatsby-remark-rewrite-relative-links": "^1.0.8",
-    "gatsby-source-filesystem": "^2.0.29",
+    "gatsby-source-filesystem": "^3.0.0",
     "gatsby-source-git": "^1.0.1",
-    "gatsby-theme-apollo-core": "^3.0.37",
-    "gatsby-transformer-remark": "^2.6.30",
+    "gatsby-theme-apollo-core": "^3.0.38-alpha.1",
+    "gatsby-transformer-remark": "^4.11.0",
     "js-yaml": "^3.13.1",
     "lodash": "^4.17.21",
+    "path-browserify": "^1.0.1",
     "prismjs": "^1.15.0",
     "recompose": "^0.30.0",
     "rehype-react": "^3.1.0",
@@ -58,13 +59,13 @@
     "subscriptions-transport-ws": "^0.9.19"
   },
   "devDependencies": {
-    "gatsby": "^2.24.23",
+    "gatsby": "^3.0.0",
     "jest": "^27.0.6",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
   "peerDependencies": {
-    "gatsby": "^2.13.80",
+    "gatsby": "^3.0.0",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   }

packages/gatsby-theme-apollo-docs/src/components/header-button.js

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import {IconProceed} from '@apollo/space-kit/icons/IconProceed';
 import {breakpoints} from 'gatsby-theme-apollo-core';
 import {colors} from '@apollo/space-kit/colors';
+import {size} from 'polished';
 
 const Container = styled.div({
   display: 'flex',
@@ -28,8 +29,7 @@ const StyledLink = styled.a({
   }
 });
 
-const StyledIcon = styled(IconProceed)({
-  height: '0.75em',
+const StyledIcon = styled(IconProceed)(size('0.75em'), {
   marginLeft: '0.5em'
 });
 

packages/gatsby-theme-apollo-docs/src/gatsby-theme-apollo-core/components/logo.js

@@ -9,7 +9,6 @@ const Wrapper = styled.div({
 });
 
 const StyledApolloIcon = styled(ApolloIcon)({
-  height: '1em',
   marginRight: '0.2857142857em'
 });
 
@@ -21,7 +20,8 @@ const StyledDocsIcon = styled(DocsIcon)({
 export default function Logo() {
   return (
     <Wrapper>
-      <StyledApolloIcon />
+      {/* having the height in `StyledApolloIcon` gets overridden by a 293px from emotion */}
+      <StyledApolloIcon style={{height: '1em'}} />
       <StyledDocsIcon />
     </Wrapper>
   );

packages/gatsby-theme-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-apollo",
-  "version": "3.1.5",
+  "version": "3.1.6-alpha.0",
   "main": "index.js",
   "description": "Sets up your Gatsby website for use with Apollo",
   "author": "Trevor Blades <blades@apollographql.com>",
@@ -17,10 +17,10 @@
   ],
   "peerDependencies": {
     "@apollo/client": "^3.0.2",
-    "gatsby": ">=2.13.80"
+    "gatsby": "^3.0.0"
   },
   "devDependencies": {
     "@apollo/client": "^3.0.2",
-    "gatsby": "^2.24.23"
+    "gatsby": "^3.0.0"
   }
 }