A next-generation tool to create blazing-fast documentation sites
API
created:8/1/2020
,
updated:2/15/2021

component-controls allows extensive customization of the user interface - from theming, SEO tags to toolbars, sidebars, and footer. Most of the user-interface customizations can be set up in your .config/runtime.js file.

In the following examples, you can play with control values and see live the source code changes to be copy/pasted in the buildtime.js configuration file.

Site meta

The site meta settings are used both for SEO purposes as page <meta /> tags and displayed in the application user interface.

.config/runtime.js

export default {
logo: 'https://upload.wikimedia.org/wikipedia/commons/b/b8/Netlify_logo.svg',
copyright: 'Copyright © 2021',
}
Copyright © 2021

Name
Description
Default
Controls
title

Standalone site title. Default is "Component controls"

text
logo

Custom logo url - set to null to remove the logo

text
https://upload.wikimedia.org/wikipedia/commons/b/b8/Netlify_logo.svg
description

Site description. Used in page "description" meta tag

text
copyright

Copyright notice displayed in the footer

text
Copyright © 2021
language

Site language, Default is "en"

text
author

Site author. Default is "@component-controls"

text

Wrapping the app

You can wrap the application and create any additional components or insert styles.

.config/runtime.js

export default {
app: ({ children }) => <div style={{ background: 'pink'}}>{children}</div>,
}
Copyright © 2021

Installing a theme

You can use any theme-ui theme as a starting point for customizing the user interface. You can select below one of the themes shipping with the @theme-ui/presets package and observe the user interface changes.

.config/runtime.js

export default {
theme: {},
}

Name
Description
Default
Controls
theme
options
none

Toolbar

The toolbar consists of two sections: left and right, where the left section is still displayed in responsive screen sizes, while the right section is hidden. The toolbar items are ActionBar items that can be extended, overrriden and changed as usual ActionItems.

Add toolbar items

To add new items to the toolbar, you need to specify a left or right array of new items.

.config/runtime.js

import { Box, Text } from 'theme-ui';
import { OctofaceIcon, MailIcon } from '@primer/octicons-react';
export default {
toolbar: {
right: [
{
node: (
<Link href="https://component-controls.com" >
<Box sx={{ mr: 1, display: 'flex', flexDirection: 'row', alignItems: 'center'}} >
<OctofaceIcon />
<Text sx={{ ml: '2px'}}>
first
</Text>
</Box>
</Link>
),
},
{
node: (
<Link href="https://component-controls.com" >
<Box sx={{ mr: 1, display: 'flex', flexDirection: 'row', alignItems: 'center'}} >
<MailIcon />
<Text sx={{ ml: '2px'}}>
second
</Text>
</Box>
</Link>
),
}
],
}
}
first

Name
Description
Default
Controls
first (5 properties)
visible
boolean
true
type
options
link
side
options
right
text
text
first
icon
options
OctofaceIcon
second (5 properties)
visible
boolean
true
type
options
link
side
options
right
text
text
second
icon
options
MailIcon

Insert toolbar item

You can insert a toolbar item at any position, by specifying the order property.

.config/runtime.js

export default {
toolbar: {
left: [{
order: -1,
node: (
<svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" width={32} height={32} fill="currentColor" >
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z">
</path>
</svg>
),
}]
}
}

Name
Description
Default
Controls
order
number
-1

Remove toolbar items

The remove toolbar items, you can override them by id and set hidden: true.

Name
Description
Default
Controls
home
boolean
true
search
boolean
true
colormode
boolean
true

Customize sidebar

The sidebar items are also ActionBar and can be customized as such. By default, a document type title and a filter input are displayed.

.config/runtime.js

export default {
sidebar:[
{
order: 0,
node: (
<Box sx={{ my: 2 }}>
<svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" width={32} height={32} fill="currentColor" >
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z">
</path>
</svg>
</Box>
),
},
{ id: 'filter', hidden: false },
]
}

Name
Description
Default
Controls
logo order
number
0
title
boolean
true
filter
boolean
true

The footer is also customizable with a left and right section as the toolbar.

Name
Description
Default
Controls
first (5 properties)
visible
boolean
true
type
options
link
side
options
right
text
text
first
icon
options
OctofaceIcon
second (5 properties)
visible
boolean
true
type
options
link
side
options
right
text
text
second
icon
options
MailIcon