$ yarn add docz --dev76 |
.mdx file anywhere in your project
78 | {mdxExample}
80 | $ yarn docz dev82 | 89 |
42 | All documents parsed by docz 43 | 44 | - menus: `string[]`
45 | An array of unique menus setting on your docs 46 | 47 | ### Typings Definitions 48 | 49 | ```ts 50 | interface Docs { 51 | id: string 52 | filepath: string 53 | slug: string 54 | route: string 55 | name: string 56 | menu: string | null 57 | order: number 58 | settings: { 59 | [key: string]: any 60 | } 61 | } 62 | 63 | interface RenderProps { 64 | docs: Docs[] 65 | menus: string[] 66 | } 67 | 68 | interface DocsProps { 69 | children: (props: RenderProps) => React.ReactNode 70 | } 71 | 72 | export const Docs: React.SFC
90 |
100 | ))
101 | ```
102 |
103 | ### Properties
104 |
105 | - **components:** `ComponentsMap`106 | This map is responsible to render components inside your compiled `.mdx` 107 | 108 | ### Type Definitions 109 | 110 | ```ts 111 | interface ComponentsMap { 112 | loading?: React.ComponentType 113 | page?: React.ComponentType
151 | The link path 152 | 153 | - activeClassName: `string`
154 | Class that will be used when your link is active 155 | 156 | - activeStyle: `string`
157 | Style that will be used when your link is active 158 | 159 | - isActive: `(match, location) => boolean`
160 | Function to define your link is active logic 161 | 162 | ### Type Definitions 163 | 164 | ```ts 165 | import { NavLinkProps } from 'react-router-dom' 166 | 167 | export const Link: React.SFC
{config.title}
}
309 |
312 | )
313 |
314 | const themeConfig = {
315 | /* ... */
316 | }
317 |
318 | export default theme(themeConfig)(Theme)
319 | ```
320 |
321 | ### Type Definitions
322 |
323 | ```ts
324 | import { ComponentType, ReactNode } from 'react'
325 |
326 | interface ThemeConfig {
327 | [key: string]: any
328 | }
329 |
330 | function theme(config: ThemeConfig): (Component: ComponentType) => ReactNode
331 | ```
332 |
--------------------------------------------------------------------------------
/docs/documentation/pages/project-configuration/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Project Configuration
3 | route: /documentation/project-configuration
4 | parent: Documentation
5 | ---
6 |
7 | # Project Configuration
8 |
9 | The project configuration is used when you need to define some specific customizations on your project. Like use plugins, chose themes, set project title, and other things.
10 |
11 | To customize your project configuration just create `doczrc.js` following this reference.
12 |
13 | > ### Tips and tricks
14 | >
15 | > You can create a `doczrc.json` file too if you want, but we recommend that you use a `js` file because just with javascript you can set plugins in your configuration since plugins are functions!
16 |
17 | ## Basic config
18 |
19 | ### src
20 |
21 | - Type: `string`
22 | - Default: `./`
23 |
24 | Define the source folder that docz will find and parse your mdx files. Every file out of this folder will not be found.
25 |
26 | > ### Tips and tricks
27 | >
28 | > If you want to boost performance, you can limit by passing your source folder here!
29 |
30 | ### dest
31 |
32 | - Type: `string`
33 | - Default: `.docz/dist`
34 |
35 | Specify the output directory for `docz build`
36 |
37 | ### files
38 |
39 | - Type: `string`
40 | - Default: `**/*.mdx`
41 |
42 | Glob pattern used to find your files.
43 | By default, docz finds all files inside the source folder that has a `.mdx` extension.
44 | [As of v0.10](https://github.com/pedronauck/docz/releases/tag/v0.10.0), you can customize it to resolve other filetypes:
45 |
46 | ```js
47 | // doczrc.js
48 | export default {
49 | files: '**/*.{md,markdown,mdx}'
50 | }
51 | ```
52 |
53 | You can be more specific if you want and change this glob to find other rules.
54 |
55 | > It is important to keep the `.mdx` extension in this string if you specify it
56 |
57 | ### base
58 |
59 | - Type: `string`
60 | - Default: `/`
61 |
62 | The base URL of the site will be deployed at. You will need to set this if you plan to deploy your site under a subpath, for example, GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/, the base should be set to `/bar/`.
63 |
64 | > It should always start and end with a slash.
65 |
66 | The base is automatically prepend to all the URLs that start with `/` in other options, so you only need to specify it once.
67 |
68 | ### title
69 |
70 | - Type: `string`
71 | - Default: `MyDoc`
72 |
73 | The title for the site. This will be the prefix for all page titles and displayed in the sidebar in the default theme.
74 |
75 | ### description
76 |
77 | - Type: `string`
78 | - Default: `My awesome app using Docz`
79 |
80 | The description for the site. It will be rendered as a `` tag in the page HTML.
81 |
82 | ### typescript
83 |
84 | - Type: `boolean`
85 | - Default: `false`
86 |
87 | This option is used if you need to import Typescript components inside your `.mdx` files.
88 |
89 | ### propsParser
90 |
91 | - Type: `boolean`
92 | - Default: `true`
93 |
94 | To be able to use the `My badass docz theme
32 |
33 | export default theme()(Theme)
34 | ```
35 |
36 | In fact, if you just create something like above you shouldn't have nothing too much useful to show. So, is important that you use the docz [built-in components](/documentation/components-api) that will help you to create beautiful documents pages and use the parsed data from data for mount menus and other things.
37 |
38 | ## Default theme configuration
39 |
40 | Each theme has your own default `themeConfig` object that define whatever you want to turn customizable. It's very useful to set something like custom fonts, colors, spaces, some styles properties and other project global variables.
41 |
42 | ```js
43 | import React from 'react'
44 | import { theme } from 'docz'
45 |
46 | const Theme = () => My badass docz theme
47 |
48 | const themeConfig = {
49 | colors: {
50 | primary: 'tomato',
51 | secondary: 'khaki',
52 | gray: 'lightslategray',
53 | },
54 | }
55 |
56 | export default theme(themeConfig)(Theme)
57 | ```
58 |
59 | By default, docz will use this object as default configuration and merge it with the `themeConfig` setting in the project configuration. Using together with the `My theme
71 | -
157 | {docs.map(doc => (
158 |
- 159 | 160 | {doc.name} 161 | 162 | 163 | ))} 164 |
185 |
186 |
205 |
249 | {doc.hero &&
252 | )
253 | ```
254 |
255 | Simple as that! Now you can create a lot of variations of your documents page.
256 |
257 | How I told you, without pain and a lot of work your you can have a custom and very functional theme for your documentation. So, let's create your own theme and share with the community!
258 |
259 | ## Examples
260 |
261 | If you wanna see an example of theme created, you can see the [source code](https://github.com/pedronauck/docz-website) of this website that was entire build using docz or the [source code](https://github.com/pedronauck/docz/tree/master/packages/docz-theme-default) of `docz-theme-default`.
262 |
--------------------------------------------------------------------------------
/public/images/icons/settings.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
129 |
--------------------------------------------------------------------------------
/src/theme/components/ui/Loading.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import styled, { css, keyframes } from 'react-emotion'
3 |
4 | const Wrapper = styled('div')`
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | width: 100%;
9 | height: 100vh;
10 | `
11 |
12 | const dash = keyframes`
13 | to {
14 | stroke-dashoffset: 1000;
15 | }
16 | `
17 |
18 | const spinnerClass = (delay: number = 0) => css`
19 | stroke-dasharray: 100;
20 | animation: ${dash} 5s ${delay}s cubic-bezier(0.455, 0.03, 0.515, 0.955)
21 | infinite;
22 | `
23 |
24 | const Lines = styled('path')`
25 | stroke: ${p => p.theme.colors.primary};
26 | stroke-width: 3px;
27 | `
28 |
29 | const Path = styled('path')`
30 | fill: ${p => p.theme.colors.primary};
31 | `
32 |
33 | const Spinner = ({ size = 60 }) => (
34 |
83 | )
84 |
85 | export const Loading = () => (
86 |