@jobber/docz-tools
v2.0.25
Published
--- name: Docz Tools menu: Packages route: /packages/docz-tools ---
Downloads
28
Maintainers
Keywords
Readme
name: Docz Tools menu: Packages route: /packages/docz-tools
Jobber Docz Tools
Jobber Docz Tools contains the theme and components to create Jobber flavored documentation. Documentation is powered by Docz and uses Theme UI for styling.
Usage
Install the package using npm
.
npm install --save @jobber/docz-tools
Next, add the theme to a gatsby-config.js
file at the root of your project.
// gatsby-config.js
module.exports = {
plugins: [
"@jobber/docz-tools",
{
resolve: "gatsby-plugin-compile-es6-packages",
options: {
modules: ["@jobber/docz-tools"],
},
},
],
};
Config
Jobber flavored documentation is powered by Docz. However
it also adds a few custom config
options added to your doczrc.js
to allow
minor customizations to the theme.
Logo
The Logo can be added by adding a relative path to the logo image that you would like to use.
// doczrc.js
export default {
...,
themeConfig: {
...,
logo: `/relative/path/to/logo/file.svg`
}
}
Sidebar Width
The sidebar width can be adjusted.
// doczrc.js
export default {
...,
themeConfig: {
...,
sideBarWidth: 275
}
}
Sidebar Offset
The sidebar offset can be adjusted if you have a wrapping component at the top,
such as a primary navigation bar. By default, it is 0
and represents
pixels / px
.
// doczrc.js
export default {
...,
themeConfig: {
...,
sidebarOffset: 100
}
}
Container Width
The container width can be adjusted. This will adjust the width that the content of the documention is displayed at.
// doczrc.js
export default {
...,
themeConfig: {
...,
containerWidth: 768
}
}
Hide / Show Actions
The actions in the top right can be hidden if required by adjusting hasActions
to false. By default it is true
.
// doczrc.js
export default {
...,
themeConfig: {
...,
hasActions: false
}
}
Hide / Show Logo
The logo within the sidebar can be hidden if required by adjusting hasLogo
to
false. By default it is true
.
// doczrc.js
export default {
...,
themeConfig: {
...,
hasLogo: false
}
}
Frontmatter
The @jobber/docz-tools
allows for some custom front matter to be added to your
mdx
files.
showDirectoryLink
Adding showDirectoryLink
will add a new link to the directory where the mdx
file is located on Github.
showDirectoryLink
must be set to a boolen of true
.
---
name: Component Name
showDirectoryLink: true
---
Prioritizing items in the navigation
@jobber/docz-tools
allows you to prioritize items within the sidebar
navigation by adding a (0x)
prefix to the name
or menu
item in the
frontmatter.
In the following example, we will prioritize the Switch
item over the Button
item in the menu.
## <!-- Button.mdx -->
name: Button menu: Components/Actions
---
## <!-- Switch.mdx -->
name: (01) Switch menu: Components/Actions
---
The same can be done for menus. In the example below, we are prioritizing the
Layout
menu before the Actions
menu.
## <!-- Button.mdx -->
name: Button menu: Components/Actions
---
## <!-- Banner.mdx -->
name: Banner menu: Components/(01) Layout
---