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

Commit 334cb10

Browse files
committed
docs: add build and deploy
1 parent 25f9898 commit 334cb10

File tree

1 file changed

+61
-70
lines changed

1 file changed

+61
-70
lines changed

README.md

Lines changed: 61 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<p align="center">
66
<a href="https://www.npmjs.com/package/docz" target="_blank">
77
<img src="https://badgen.net/npm/v/docz" alt="">
8-
</>
8+
</a>
99
<a href="LICENSE.md" target="_blank">
1010
<img src="https://badgen.net/badge/license/MIT/blue" alt="">
1111
</a>
@@ -25,19 +25,27 @@ Create MDX files showcasing your code and Docz turns them into a live-reloading,
2525

2626
## Table of Contents
2727

28-
- [📟 &nbsp; Start a New Project](#--start-a-new-project)
29-
- [&nbsp; Add Docz to an Existing Project](#--add-docz-to-an-existing-project)
30-
- [🎩 &nbsp; Features](#--features)
31-
- [🤔 &nbsp; Why?](#--why)
32-
- [🗃 &nbsp; Examples](#--examples)
33-
- [👉🏻 &nbsp; More info on our website](#--more-info-on-our-website)
34-
- [🎛 &nbsp; Plugins](#--plugins)
35-
- [🌍 &nbsp; Around the world](#--around-the-world)
36-
- [💪🏻 &nbsp; Contributors](#--contributors)
37-
- [🤝 &nbsp; Contributing](#--contributing)
38-
- [💭 &nbsp; Need Help?](#--need-help)
3928

40-
## 📟 &nbsp; Start a New Project
29+
- [Why ?](#why)
30+
- [Start a New Project](#start-a-new-project)
31+
- [Add Docz to an Existing Project](#add-docz-to-an-existing-project)
32+
- [Build](#build)
33+
- [Deploy](#deploy)
34+
- [Examples](#examples)
35+
- [More info on docz.site](#more-info-on-doczsite)
36+
- [Used by](#used-by)
37+
- [Contributors](#contributors)
38+
- [Contributing](#contributing)
39+
40+
## Why ?
41+
42+
Documenting code is one of the most important and time-heavy processes when developing software.
43+
44+
A lot of time is spent on building and maintaining custom documentation sites.
45+
46+
Docz enables you to quickly create live-reloading, seo-friendly, production-ready documentation sites with MDX and customize the look, feel and behavior when required by leveraging [GatsbyJS](https://www.gatsbyjs.org) and [Gatsby theme shadowing](https://www.gatsbyjs.org/docs/themes/shadowing/).
47+
48+
## Start a New Project
4149

4250
Use [create-docz-app](https://www.npmjs.com/package/create-docz-app) to quickly get started :
4351

@@ -47,16 +55,16 @@ npx create-docz-app my-docz-app
4755
yarn create docz-app my-docz-app --example typescript
4856
```
4957

50-
## &nbsp; Add Docz to an Existing Project
58+
## Add Docz to an Existing Project
5159

5260
Start by adding `docz` as a dependency :
5361

5462
```bash
55-
$ yarn add --dev docz@next # react react-dom
63+
$ yarn add docz@next # react react-dom
5664

5765
# or
5866

59-
$ npm install --save-dev docz@next # react react-dom
67+
$ npm install docz@next # react react-dom
6068
```
6169

6270
> **Note**: `react` and `react-dom` will not be installed automatically. You'll have to install them yourself.
@@ -94,7 +102,7 @@ const Button = ({ children, type }) => <button type={type}>{children}</button>
94102

95103
Button.propTypes = {
96104
/**
97-
* This is a pretty good description for this prop.
105+
* This is a description for this prop.
98106
* Button type.
99107
*/
100108
type: t.oneOf(['button', 'submit', 'reset']),
@@ -105,58 +113,48 @@ Button.defaultProps = {
105113
export default Button
106114
```
107115

108-
Finally, run the Docz development server:
116+
Finally, run:
109117

110118
```bash
111-
$ yarn docz dev
119+
yarn docz dev
112120
```
113121

114-
That's it! You now have an interactive site to showcase and debug your components, and some badass documentation as a nice bonus 👊
122+
This will start a local development server and open your documentation site in the browser.
115123

116-
## 🎩 &nbsp; Features
124+
## Build
117125

118-
- 🔩 **Powered by Gatsby.** Bundling and ecosystem powered by [Gatsby](https://gatsbyjs.org).
119-
- 🧘 **Zero config and easy.** Don't worry about complex configurations steps.
120-
- ⚡️ **Blazing Fast.** Hot reload support and automatic code splitting out of the box.
121-
- 💅 **Easy to customize.** Create and use real customizable themes.
122-
- 📝 **[MDX](https://github.com/mdx-js/mdx) Based.** Write markdown enhanced by the power of components.
123-
- 🎛 **Pluggable.** Use plugins to manipulate and customize Docz to suit your needs.
124-
- 🔐 **Typescript Support.** Full support for TypeScript. Write your type definitions with no extra setup required.
126+
`yarn docz build` will generate a static site for your site in `.docz/dist/`.
125127

126-
Still not convinced? Check [our docs](http://docz.site) to learn more about **Docz**!
128+
You can try it out with `yarn docz serve` or by serving the generated site with your favorite static file server (e.g. `npx serve .docz/dist`).
127129

128-
## 🤔 &nbsp; Why?
130+
You can have `yarn docz build` emit to a different directory by providing a path to the `dest` field in your doczrc.js or from the command line : `yarn docz build --dest docs-site-directory`.
129131

130-
Libraries that make development easier are appearing every day. Style guides and design systems are growing in popularity. Today, tools that allow us to get our best work done and be efficient are necessary. We shouldn't be spending too much time on tasks that should be trivial. This is why we created **Docz**.
132+
## Deploy
131133

132-
Documenting code is one of the most important and time-heavy processes when you're creating something new. A lot of time is wasted on unnecessarily attempting to build a documentation site that will match the style you want.
134+
The output of docz consists of static assets only. This allows you to deploy your generated `docz` site with any static site hosting provider you'd like.
133135

134-
## 🗃 &nbsp; Examples
136+
Start by building your site with `yarn docz build`, if you haven't provided a `dest` flag to your config then you will find your generated files in `.docz/dist` to copy to the server.
135137

136-
- **[basic](https://github.com/pedronauck/docz/tree/master/examples/basic)** - Barebones example.
137-
- **[gatsby](https://github.com/pedronauck/docz/tree/master/examples/gatsby)** - Example using Docz in a Gastby project.
138-
- **[react native](https://github.com/pedronauck/docz/tree/master/examples/react-native)** - Using Docz in a React Native project.
139-
- **[styled-components](https://github.com/pedronauck/docz/tree/master/examples/styled-components)** - Using Docz with `styled-components`.
140-
- **[with typescript](https://github.com/pedronauck/docz/tree/master/examples/typescript)** - Using Docz with Typescript.
141-
- **[with flow](https://github.com/pedronauck/docz/tree/master/examples/flow)** - Using Docz with Flow.
142-
- **[with images](https://github.com/pedronauck/docz/tree/master/examples/images)** - Using Docz with images in mdx and jsx.
143-
- **[with custom themes](https://github.com/pedronauck/docz/tree/master/examples/with-themes-dir)** - Using Docz with a custom themes directory.
138+
## Examples
144139

145-
- **[with sass](https://github.com/pedronauck/docz/tree/master/examples/sass)** - Using Docz parsing CSS with SASS.
146-
- **[with less](https://github.com/pedronauck/docz/tree/master/examples/less)** - Using Docz parsing CSS with LESS.
147-
- **[with stylus](https://github.com/pedronauck/docz/tree/master/examples/css-stylus)** - Using Docz parsing CSS with Stylus.
148-
- **with css modules**: works out of the box with gatsby
140+
- **[basic](https://github.com/doczjs/docz/tree/master/examples/basic)** - Barebones example.
141+
- **[gatsby](https://github.com/doczjs/docz/tree/master/examples/gatsby)** - Example using Docz in a Gastby project.
142+
- **[react native](https://github.com/doczjs/docz/tree/master/examples/react-native)** - Using Docz in a React Native project.
143+
- **[styled-components](https://github.com/doczjs/docz/tree/master/examples/styled-components)** - Using Docz with `styled-components`.
144+
- **[with typescript](https://github.com/doczjs/docz/tree/master/examples/typescript)** - Using Docz with Typescript.
145+
- **[with flow](https://github.com/doczjs/docz/tree/master/examples/flow)** - Using Docz with Flow.
146+
- **[with images](https://github.com/doczjs/docz/tree/master/examples/images)** - Using Docz with images in mdx and jsx.
149147

150-
## 👉🏻 &nbsp; More info on [our website](https://docz.site)
148+
- **[with sass](https://github.com/doczjs/docz/tree/master/examples/sass)** - Using Docz parsing CSS with SASS.
149+
- **[with less](https://github.com/doczjs/docz/tree/master/examples/less)** - Using Docz parsing CSS with LESS.
150+
- **[with stylus](https://github.com/doczjs/docz/tree/master/examples/css-stylus)** - Using Docz parsing CSS with Stylus.
151+
- **with css modules**: works out of the box with gatsby
151152

152-
## 🎛 &nbsp; Plugins
153+
You can check the complete list of docz examples [here](https://github.com/doczjs/docz/tree/master/examples).
153154

154-
- **[gatsby-theme-docz](https://github.com/pedronauck/docz/tree/master/core/gatsby-theme-docz)** - Use Docz as a theme for Gatsby.
155-
- **[netlify](https://github.com/nicholasess/docz-plugin-netlify)** - Deploy your Docz site to [Netlify](http://netlify.com/).
156-
- **[svg sprite loader](https://github.com/trustedhousesitters/docz-plugin-svg-sprite-loader)** - Docz plugin for SVG sprite loader.
157-
- **[snapshots](https://github.com/JosephConradBlack/docz-plugin-snapshots)** - A plugin for Docz that creates jest snapshots for all documented component usages.
155+
## More info on [docz.site](https://docz.site)
158156

159-
## 🌍 &nbsp; Around the world
157+
## Used by
160158

161159
- **[Smooth UI](https://smooth-ui.smooth-code.com/)** - Modern React UI library.
162160
- **[Set Protocol Docs](https://docs.setprotocol.com/)** - Documentation site of Set Protocol.
@@ -167,25 +165,25 @@ Documenting code is one of the most important and time-heavy processes when you'
167165
- **[React Hotkey Tooltip](https://react-hotkey-tooltip.netlify.com/#/)** - A global Hotkey provider with built in tooltip for React.
168166
- **[Sajari React SDK](https://sajari-sdk-react.netlify.com/)** - Library of React Components for the Sajari.
169167

170-
## 💪🏻 &nbsp; Contributors
168+
## Contributors
171169

172170
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
173171

174-
<a href="https://github.com/pedronauck/docz/graphs/contributors"><img src="https://opencollective.com/docz/contributors.svg?width=890&button=false" /></a>
172+
<a href="https://github.com/doczjs/docz/graphs/contributors"><img src="https://opencollective.com/docz/contributors.svg?width=890&button=false" /></a>
175173

176-
## 🤝 &nbsp; Contributing
174+
## Contributing
177175

178176
All kinds of contributions are very welcome and appreciated !
179177

180-
If you want to contribute time to docz then here's a list to get you started :
178+
If you want to contribute time to docz then here's a list of suggestions to get you started :
181179

182-
1. ⭐️ Star the project
183-
2. 💬 Help people in the [issues](https://github.com/doczjs/docz/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) by sharing your knowledge and experience
184-
3. 🐛 Find and report issues
185-
4. 📥 Submit PRs to help solve issues or add features
186-
5. Influence the future of docz with feature requests
180+
1. Star the project.
181+
2. Help people in the [issues](https://github.com/doczjs/docz/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) by sharing your knowledge and experience.
182+
3. Find and report issues.
183+
4. Submit PRs to help solve issues or add features.
184+
5. Influence the future of docz with feature requests.
187185

188-
If you're looking for a place to start make sure to check issues tagged with
186+
If you're looking for a place to start make sure to check issues tagged with :
189187

190188
[![Good First Issue](https://img.shields.io/github/issues/doczjs/docz/good%20first%20issue.svg)](https://github.com/doczjs/docz/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
191189

@@ -197,11 +195,4 @@ You can also contribute money to help secure docz's future.
197195
<a href="https://opencollective.com/docz" target="_blank">
198196
<img src="https://cdn-std.dprcdn.net/files/acc_649651/Q5nVhT" height="80" alt="Open Collective">
199197
</a>
200-
<a href="https://www.patreon.com/pedronauck" target="_blank">
201-
<img src="https://cdn-std.dprcdn.net/files/acc_649651/plrSCT" height="80" alt="Patreon">
202-
</a>
203-
</p>
204-
205-
## 💭 &nbsp; Need Help?
206-
207-
If you need some help, feel free to open an issue with a description of the problem you're facing or chat with us on [our Spectrum Community](https://spectrum.chat/docz).
198+
</p>

0 commit comments

Comments
 (0)