---
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.

$3

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
}
}
`

$3

The sidebar width can be adjusted.

`
// doczrc.js
export default {
...,
themeConfig: {
...,
sideBarWidth: 275
}
}
`

$3

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
}
}
`

$3

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
}
}
`

$3

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
}
}
`

$3

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.

$3

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.

`md


name: Button menu: Components/Actions

---

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.

`md


name: Button menu: Components/Actions

---

name: Banner menu: Components/(01) Layout

---
``