Skip to content

Configuration

The theme exports its plugins from @staticbolt/docs/plugins and the Expressive Code options from @staticbolt/docs/ec-config. Everything else is the regular staticbolt pipeline. This is the config of this site:

.staticbolt.ts
import { defineConfig } from "@staticbolt/core";
import * as plugins from "@staticbolt/core/plugins";
import { rehypeExpressiveCodeOptions } from "@staticbolt/docs/ec-config";
import * as theme from "@staticbolt/docs/plugins";
import { toString } from "hast-util-to-string";
import postcssPresetEnv from "postcss-preset-env";
import rehypeAutolinkHeadings, { type Options as RehypeAutolinkHeadingsOptions } from "rehype-autolink-headings";
import rehypeCallouts from "rehype-callouts";
import rehypeKatex, { type Options as RehypeKatexOptions } from "rehype-katex";
import remarkMath from "remark-math";
const siteUrl = "https://plant.codeberg.page/staticbolt-docs";
export default defineConfig({
plugins: [
plugins.loadSourcesPlugin({ include: ["./pages/**/*.{html,md}"] }),
plugins.transformJsPlugin(),
plugins.transformCssPlugin({ plugins: [postcssPresetEnv() as never] }),
plugins.bundlePackagesPlugin(),
theme.markdownPlugin({
include: ["pages/**/*.{html,md}"],
baseDirectory: "pages",
layouts: { default: "@layouts/document.layout.html" },
customizations: {
"~/index.md": {},
"~/getting-started.md": {},
"~/configuration.md": {},
"~/layout.md": {},
"~/styles.md": {},
"~/content.md": {},
"~/parts.md": {},
"~/plugins": { collapsed: false },
"~/plugins/markdown-plugin.md": {},
"~/plugins/code-block-plugin.md": {},
"~/plugins/expressive-code.md": {},
"~/plugins/rehype-plugins.md": {},
"~/plugins/pagefind-plugin.md": {},
"~/plugins/llms-plugin.md": {},
"~/plugins/assets-plugin.md": {},
"~/overriding.md": {},
},
}),
plugins.htmlEnvOnlyPlugin(),
plugins.htmlLayoutPlugin({ tags: ["layout", "part", "icon"] }),
plugins.htmlPagesPlugin(),
plugins.htmlInsertPlugin(),
plugins.htmlSvgoPlugin(),
plugins.htmlBundleStylePlugin(),
plugins.htmlBundleScriptPlugin(),
plugins.htmlInlineScriptPlugin(),
plugins.htmlInlineStylePlugin(),
plugins.HtmlInlineSvgPlugin(),
plugins.htmlInlineTextPlugin(),
plugins.htmlIifeScriptPlugin(),
plugins.htmlMarkdownPlugin(),
plugins.htmlPreloadPlugin(),
plugins.htmlFragmentPlugin(),
plugins.htmlMergeStylesPlugin(),
plugins.htmlBuildTimeScript(),
theme.HtmlCodeBlockPlugin({ rehypeExpressiveCodeOptions }),
plugins.writeFilesPlugin({ clean: true, minify: { enabled: true } }),
plugins.convertImagePlugin(),
plugins.copyAssetsPlugin(),
theme.assetsPlugin(),
plugins.robotsTextPlugin({ rules: [{ userAgent: "*", allow: ["/"], disallow: [] }], sitemapUrl: `${siteUrl}/sitemap.xml` }),
plugins.sitemapPlugin({ sitemapUrl: `${siteUrl}/` }),
theme.pagefindPlugin(),
theme.llmsPlugin({ siteUrl, title: "@staticbolt/docs", summary: "Documentation theme for staticbolt sites." }),
plugins.analyzeOutputPlugin({
deleteUnused: true,
exclude: ["pagefind/**", "robots.txt", "sitemap.xml", "llms.txt", "llms-full.txt", "**/*.md"],
}),
plugins.developmentServerPlugin(),
plugins.coreMarkdownPlugin({
allowDangerousHtml: true,
remarkPlugins: [remarkMath],
rehypePlugins: [
[rehypeKatex, { output: "mathml" } satisfies RehypeKatexOptions],
theme.wrapTables,
[
rehypeAutolinkHeadings,
{ behavior: "append", properties: node => ({ ariaLabel: toString(node) }) } satisfies RehypeAutolinkHeadingsOptions,
],
rehypeCallouts,
theme.rehypeMermaidFence,
[theme.cachedRehypeExpressiveCode, rehypeExpressiveCodeOptions],
],
}),
theme.ecCachePlugin(),
plugins.coreHtmlPlugin(),
plugins.coreScriptPlugin(),
plugins.coreStylePlugin(),
plugins.buildCliPlugin(),
plugins.serveCliPlugin(),
],
});

Order matters

  • theme.markdownPlugin runs before the HTML plugins, it rewrites the front matter that picks the layout.
  • theme.HtmlCodeBlockPlugin comes after htmlBuildTimeScript, so code blocks written by build-time scripts get highlighted too.
  • theme.pagefindPlugin and theme.llmsPlugin run after writeFilesPlugin, they read the output.
  • theme.ecCachePlugin comes right after coreMarkdownPlugin, it persists what cachedRehypeExpressiveCode rendered.

Opt-in features

FeatureInstallConfig
Calloutsrehype-calloutsrehypeCallouts, the callouts part
Mathremark-math, rehype-katexremarkMath, rehypeKatex, assetsPlugin(), katex.css
Diagramsmermaidtheme.rehypeMermaidFence, the mermaid part

Leave out what the site does not need. tags in htmlLayoutPlugin must include "icon" when the sidebar uses icons.