Skip to content
@staticbolt/docs

Overriding

Every part is a plain HTML file. To change one, copy it out of the package and point at the copy.

Terminal window
cp -r node_modules/@staticbolt/docs/sources/parts/header sources/parts/header

Layout parts

Parts placed by the layout are swapped in the layout:

<part src="@parts/header/header.part.html" title="My Project">

The copied part keeps working as long as its relative references stay valid. header includes ../pagefind/pagefind.part.html and ../color-scheme-switch/..., change those to @staticbolt/docs/parts/pagefind/pagefind.part.html and @staticbolt/docs/parts/color-scheme-switch/color-scheme-switch.part.html in the copy.

The sidebar, folder, and link parts are rendered by markdownPlugin, so they are swapped there:

theme.markdownPlugin({
  sidebarLayout: { path: "@parts/sidebar/sidebar.part.html" },
  directoryLayout: { path: "@parts/sidebar/directory.part.html" },
  linkLayout: { path: "@parts/sidebar/item.part.html" },
});
OptionFields
sidebarLayoutpath, tag (from the file name), sourceAttribute (src), slotName (sidebar).
directoryLayoutpath, tag, sourceAttribute.
linkLayoutpath, tag, sourceAttribute.

The tree is injected into <slot name="sidebar"> of the sidebar part. Folder and link parts receive their node as $data:

Part$data
directorytitle, collapsed, iconSrc, plus the node’s data keys.
itemtitle, fullTitle, href, iconSrc, plus the node’s data keys.

A link part that shows a description from data:

sources/parts/sidebar/item.part.html
<a class="sidebar-link" data-title="{{ $data.fullTitle }}" href="{{ $data.href }}">
  {{ $data.title }}
  {{ $data.description ? `<small>${$data.description}</small>` : "" }}
</a>
customizations: {
  "~/guides/setup.md": { data: { description: "Ten minutes" } },
},

Styles

The theme’s docs.css imports every part’s stylesheet. A copied part’s styles still come from the package, override selectors in theme.css or import the copy’s stylesheet after docs.css.

Expressive Code

Spread rehypeExpressiveCodeOptions and change what is needed, see Expressive Code.