Skip to content
This repository was archived by the owner on Mar 16, 2026. It is now read-only.

Commit 2ae97c9

Browse files
committed
chore: some adjustments
1 parent 2c05bb5 commit 2ae97c9

4 files changed

Lines changed: 28 additions & 60 deletions

File tree

src/docs/documentation/customizing/gatsby-theme.mdx

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ menu: Customizing
99

1010
If you want to use Docz in a Gatsby environment, use our `gatsby-theme-docz` is the better choice.
1111

12-
Gatsby themes is one of the coolest features of all time in Gatsby. With the introduction of theming in Gatsby,
13-
it's easier than ever to get started building a Gatsby site. Shared functionality, data sourcing, and design can all be prepackaged as a Gatsby Theme that's an NPM install away.
12+
Gatsby themes is one of the coolest features of all time in Gatsby. With the introduction of theming in Gatsby, it's easier than ever to get started building a Gatsby site. Shared functionality, data sourcing, and design can all be prepackaged as a Gatsby Theme that's an NPM install away.
1413

1514
Our theme has all components and algorithms used to render your documentation website, with it we can explore a lot of Gatsby features and put all this things together in order
1615
to create a really usefull documentation for you. Because of `gatsby-theme-docz` you can enjoy of a lot easier system to customize and improve your docs too.
@@ -21,8 +20,8 @@ If you like it, but you don't know what is a Gatsby theme, please read [the offi
2120

2221
It's so simple to use our Gatsby theme. First of all, just install some packages:
2322

24-
```
25-
yarn add gatsby gatsby-theme-docz docz react react-dom
23+
```
24+
yarn add gatsby gatsby-theme-docz@next docz@next react react-dom
2625
```
2726

2827
Then set the `gatsby-theme-docz` in the `plugins` option inside your `gatsby-config.js`
@@ -91,18 +90,15 @@ export default {
9190
}
9291
```
9392

94-
## Component Shadowing
93+
## Customizing components
9594

96-
Components shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace
97-
theme files just by creating your own file following a file naming convetion.
95+
Components shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convetion.
9896

99-
Example: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js`
100-
you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?
97+
Example: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?
10198

10299
## Adding your logo
103100

104-
So, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component
105-
but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`
101+
So, now that you know about how component shadowing works on Gatsby themes, if you don't want to override the entire `<Header>` component but just change your logo inside it, your can shadow the `<Logo>` component used in the header just by creating your own at `src/gatsby-theme-docz/components/Logo/index.js`
106102

107103
```js
108104
// src/gatsby-theme-docz/components/Logo/index.js
@@ -116,9 +112,7 @@ Easy, right?
116112

117113
## Creating your own Docz theme
118114

119-
One of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it.
120-
The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create
121-
your own theme, just create a file located at `src/gatsby-theme-docz/index.js`
115+
One of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`
122116

123117
```js
124118
import React from 'react'
@@ -160,8 +154,7 @@ More info about [here](/docs/creating-your-themes)
160154

161155
## Wrapping the entire app
162156

163-
Sometime you need to wrap your entire application in order to add some `Provider` or just to load some script.
164-
You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`
157+
Sometime you need to wrap your entire application in order to add some `Provider` or just to load some script. You can do this easily inside our theme by creating a file located at `src/gatsby-theme-docz/wrapper.js`
165158

166159
```js
167160
// src/gatsby-theme-docz/index.js
@@ -177,8 +170,7 @@ export default ({ children }) => (
177170

178171
## Theme UI integrated
179172

180-
As default theme systeAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps
181-
based on constraint-based design principles.
173+
As default theme systeAs default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.
182174

183175
You can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally differente documentation.
184176

src/docs/documentation/general/getting-started.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Getting started with **Docz** is something really easy and quick.
1919
First of all, you will need to install **Docz** using your favorite package manager (we'll assume yarn for this example):
2020

2121
```bash
22-
$ yarn add docz react react-dom --dev
22+
$ yarn add docz@next react react-dom --dev
2323
```
2424

2525
> ### Warnings and tips

src/docs/documentation/references/migration-guide.mdx

Lines changed: 14 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,14 @@ menu: References
66
---
77

88
# Migration Guide
9-
10-
The [v2 release](https://github.com/pedronauck/docz/pull/950) is our biggest release in terms of changes on our core scripts.
11-
Our bundler system was entirely modified in order to use Gatsby as default bundler and you will need to update
12-
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
13-
properly on your project after the upgrade.
9+
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.
1410

1511
## Gatsby as default bundler
12+
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.
1613

17-
The biggest change in the new v2 is that now our core is entirely build using Gatsby behind the scenes.
18-
This is a huge win for Docz, since now we can focus on build new features instead of handling with
19-
a lot of bundlers issues (our biggest bottleneck) and enjoy all Gatsby ecosystem.
20-
21-
So, in order to refactoring our core, we need to change a lot of things and remove others that no longer make sense.
22-
The most expressive changes here is about the configuration for `doczrc.js` and the plugin system.
14+
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.
2315

2416
### List of removed properties from `doczrc.js`
25-
2617
* **`websocketHost`** ▶︎ _no longer need_
2718
* **`websocketPort`** ︎︎︎▶︎ _no longer need_
2819
* **`wrapper`** ▶︎ _removed_
@@ -34,7 +25,6 @@ The most expressive changes here is about the configuration for `doczrc.js` and
3425
* **`modifyBabelRc`** ▶︎ use Gatsby [`onCreateBabelConfig`](https://www.gatsbyjs.org/docs/node-apis/#onCreateBabelConfig) hook
3526

3627
## New hooks for plugins
37-
3828
The `createPlugin` method also changed in order to fit with Gatsby now.
3929

4030
### List of removed/changed properties from `createPlugin()`
@@ -51,42 +41,28 @@ The `createPlugin` method also changed in order to fit with Gatsby now.
5141
> You can have more details about then [here](https://www.gatsbyjs.org/docs/node-apis).
5242
5343
## `docz-theme-default` removed
44+
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.
5445

55-
The main reason that made me want to change our core to use Gatsby is that now it have a feature called themes.
56-
In the last major version we launched our own `gatsby-theme-docz` and this was impressive since we could use Docz
57-
inside a Gatsby project and brings a lot of new possibilites when creating a documentation.
58-
59-
So, indeed we were using Gatsby theme at all, but in the wrong way. One of the best benefits of Gatsby theme are
60-
the feature called Component Shadowing, that's the hability to replace theme files just by creating your own file following a file naming convetion.
61-
This is awesome and is something that people always ask for me, like: "I want just to change the head in the Docz theme".
46+
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”.
6247

63-
In order to get Docz running with component shadowing we removed `docz-theme-default` and now you don't need to install it anymore.
64-
You can just add `docz` and your project is done
48+
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.
6549

66-
Check [here]() readme for more information.
50+
Check [here](h) readme for more information.
6751

6852
### Code highlight with PrismJS
53+
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.
6954

70-
In the last version of Docz we're using Codemirror to highlight code inside `<Playground>` and code blocks.
71-
Now we are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) together with Theme UI.
72-
73-
Check [here]() for more information.
55+
Check [here](h) for more information.
7456

7557
### New `themeConfig` properties
58+
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.
7659

77-
Another great thing launched in the newest version is the integration with the [Theme UI](https://theme-ui.com).
78-
Theme UI it's a library for build consistent, themeable React apps based on constraint-based design principles.
79-
So, in order to integration it with our new theme, a lot of changes are made inside the `themeConfig` object.
80-
81-
Check [here]() for more information.
60+
Check [here](h) for more information.
8261

8362
## `theme` property removed
63+
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.
8464

85-
The property used to define your Docz theme inside the `doczrc.js` was removed. But you can still
86-
create and use your own theme from scratch if you want.
87-
88-
If you want to use your own theme, just create a file called `src/gatsby-theme-docz/index.js` in order
89-
to use component shadowing and replace it with your new theme.
65+
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.
9066

9167
```js
9268
// src/gatsby-theme-docz/index.js
@@ -99,9 +75,7 @@ export default (props) => <Theme {...props} />
9975
Check [here](https://www.docz.site/docs/creating-themes) for more information about how to create themes.
10076

10177
## `wrapper` property removed
102-
103-
The same thing happened here for the oldest `wrapper` property. Now you can wrap your entire application
104-
by just creating a file called `src/gatsby-theme-docz/wrapper.js`
78+
The same thing happened here for the oldest `wrapper` property. Now you can wrap your entire application by just creating a file called `src/gatsby-theme-docz/wrapper.js`
10579

10680
```js
10781
// src/gatsby-theme-docz/index.js

src/docs/home/components/HowTo.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,9 @@ export const HowTo = () => (
8383
<Container>
8484
<Title>How to</Title>
8585
<Text>Install Docz as a dependency</Text>
86-
<Pre className="language-bash">$ yarn add docz react react-dom --dev</Pre>
86+
<Pre className="language-bash">
87+
$ yarn add docz@next react react-dom --dev
88+
</Pre>
8789
<Text>
8890
Create an <code>.mdx</code> file anywhere in your project
8991
</Text>

0 commit comments

Comments
 (0)