Skip to content
This repository was archived by the owner on Nov 21, 2025. It is now read-only.

Commit db0cb23

Browse files
committed
docs: update migration guide
1 parent ecb4ef4 commit db0cb23

1 file changed

Lines changed: 22 additions & 13 deletions

File tree

MIGRATION_GUIDE.md

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
# Migration Guide
22

3-
The [v2 release](https://github.com/pedronauck/docz/pull/950) is our biggest release in terms of changes on our core scripts. Our bundler system was entirely modified in order to use Gatsby as default bundler and you will need to update your code if you’re coming from a previous version. It’s not a big deal, but you need to follow this guide in order to get Docz running properly on your project after the upgrade.
3+
The [v2 release](https://github.com/pedronauck/docz/pull/950) is our biggest release in terms of changes to our core scripts. Our bundler system was entirely modified in order to use Gatsby as default bundler and you will need to update your code if you’re coming from a previous version.
4+
5+
It’s not a big deal, but you will need to follow this guide in order to get Docz running properly on your project after the upgrade.
46

57
## Gatsby as default bundler
6-
The biggest change in the new v2 is that now our core is entirely build using Gatsby behind the scenes. This is a huge win for Docz, since now we can focus on build new features instead of handling with a lot of bundlers issues (our biggest bottleneck) and enjoy all Gatsby ecosystem.
78

8-
So, in order to refactoring our core, we need to change a lot of things and remove others that no longer make sense. The most expressive changes here is about the configuration for `doczrc.js` and the plugin system.
9+
The biggest change in the new v2 is that our core is now entirely built using Gatsby behind the scenes. This is a huge win for Docz, since now we can focus on building new features instead of handling a lot of bundlers issues (our biggest bottleneck) and leverage the entire Gatsby ecosystem.
10+
11+
So, in order to refactor our core, we need to change a lot of things and remove others that no longer make sense. The most expressive changes here is about the configuration for `doczrc.js` and the plugin system.
912

1013
### List of removed properties from `doczrc.js`
1114
* **`websocketHost`** ▶︎ _no longer need_
@@ -31,7 +34,7 @@ The `createPlugin` method also changed in order to fit with Gatsby now.
3134
* **`onPreRender`** ▶︎ _removed_
3235
* **`onPostRender`** ▶︎ _removed_
3336

34-
> All methods that changed now are using the same API of Gatsby hooks.
37+
> All methods that changed now are using the same API as Gatsby hooks.
3538
> You can have more details about then [here](https://www.gatsbyjs.org/docs/node-apis).
3639
3740
## `docz-theme-default` removed
@@ -42,25 +45,31 @@ Make sure to remove `docz-theme-default` from your dependencies when migrating :
4245
yarn remove docz-theme-default # npm uninstall docz-theme-default
4346
```
4447

45-
The main reason that made us change our core to use Gatsby is that now it have a feature called themes. In the last major version we launched our own `gatsby-theme-docz` and this was impressive since we could use Docz inside a Gatsby project and brings a lot of new possibilites when creating a documentation.
48+
The main reason that made us change our core to use Gatsby is that they have added a feature called themes.
4649

47-
So, indeed we were using Gatsby theme at all, but in the wrong way. One of the best benefits of Gatsby theme are the feature called Component Shadowing, that’s the ability to replace theme files just by creating your own file following a file naming convention. This is awesome and is something that people always ask for me, like: “I want just to change the head in the Docz theme”.
50+
In the last major version we launched our own Gatsby theme `gatsby-theme-docz` and this was a huge step forward because we can now use Docz inside a Gatsby project and bring a lot of new possibilities when creating documentation.
4851

49-
In order to get Docz running with component shadowing we removed `docz-theme-default` and now you don’t need to install it anymore. You can just add `docz` and your project is done.
52+
One of the best benefits of Gatsby themes is a feature called Component Shadowing, that’s the ability to replace theme files just by creating your own file following a file naming convention. This is awesome and is something that people very often ask, for example: “I want just to change the head in the Docz theme”.
5053

51-
Check [here](h) readme for more information.
54+
In order to get Docz running with component shadowing we removed `docz-theme-default` and now you don’t need to install it anymore. You can just add `docz` to your project.
55+
56+
Check [here](https://github.com/doczjs/docz/tree/master/core/gatsby-theme-docz#customizing-components) for more information about customizing the Gatsby theme.
5257

5358
### Code highlight with PrismJS
54-
In the last version of Docz we’re using Codemirror to highlight code inside `<Playground>` and code blocks. Now we are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) together with Theme UI.
5559

56-
Check [here](h) for more information.
60+
In the last version of Docz we used Codemirror to highlight code inside `<Playground>` and code blocks. Starting from v2 docz uses [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) together with Theme UI.
61+
62+
Check [here](https://github.com/FormidableLabs/prism-react-renderer) for more information.
5763

5864
### New `themeConfig` properties
59-
Another great thing launched in the newest version is the integration with the [Theme UI](https://theme-ui.com). Theme UI it’s a library for build consistent, themeable React apps based on constraint-based design principles. So, in order to integration it with our new theme, a lot of changes are made inside the `themeConfig` object.
6065

61-
Check [here](h) for more information.
66+
Another great thing launched in the newest version is the integration with [Theme UI](https://theme-ui.com). Theme UI is a library for building consistent, themeable React apps based on constraint-based design principles.
67+
68+
So, in order to integrate it with our new theme, a lot of changes have been made inside the `themeConfig` object.
69+
6270

6371
## `theme` property removed
72+
6473
The property used to define your Docz theme inside the `doczrc.js` was removed. But you can still create and use your own theme from scratch if you want.
6574

6675
If you want to use your own theme, just create a file called `src/gatsby-theme-docz/index.js` in order to use component shadowing and replace it with your new theme.
@@ -94,7 +103,7 @@ export default ({ children }) => (
94103

95104
CSS preprocessors and modules were handled by [`docz-plugin-css`](https://github.com/doczjs/docz-plugin-css) which hooked into the bundler config to add different loader support via webpack.
96105

97-
With the change to gatsby preprocessors like `sass` can be handled by gatby via [Plugins](https://www.gatsbyjs.org/plugins/)
106+
With the change to gatsby, css preprocessors like `sass` can be handled by gatsby via [Plugins](https://www.gatsbyjs.org/plugins/)
98107

99108
These plugins are added by adding a `gatsby-config.js` in your project root or modifying an existing one. For example if you want to add support for `sass` you would do the following:
100109

0 commit comments

Comments
 (0)