Configuration Reference

Theme & Branding

Controls the initial Light/Dark polarity, accessible color scheme preset, and left-sidebar brand header (.supa-sidebar-brand).

Source Repository

Configures the “View page source” and “Edit this page” action buttons in the top content header bar.

Layout & Navigation

Configures the top announcement banner, breadcrumbs, left sidebar menu tree, right-hand ScrollSpy table of contents, and bottom page navigation cards.

Language & Labels

Sets the page language and replaces the English text of the skin's own interface. Supa Maven Skin ships no translations: a site supplies its own text for any label it wants to change, and every other label stays English.

Labels

Each key below is a <labels> child element. {name} placeholders are filled in by the skin, and a translation can move them anywhere in its sentence: the links in the footer and the date stay the skin's own, so a site translates only the words around them. The color-scheme names never carry their WCAG level: the skin always appends (AA) or (AAA), which a site cannot change because the build audits it. Each control has one label, used for both its tooltip and its accessible name, so the name always contains the text a reader sees (WCAG 2.5.3 Label in Name).

The Set by column tells where a label is written: template labels are in the HTML Maven renders; script labels are added in the browser, where an overridden value reaches the scripts as a data-supa-label-<key> attribute on <body>, with the key in kebab case (searchNoResults becomes data-supa-label-search-no-results); both labels are rendered first and then rewritten by the scripts.

Responsive Drawers

Controls Bootstrap 6 off-canvas <dialog class="drawer"> behavior on tablet and mobile viewports (#supaSidebarDrawer below lg and #supaTocDrawer below xl).

Footer & Links

Controls metadata and icon links in the page footer (.supa-footer) and version badge visibility.

Code, Search, Diagrams & Math

Configures client-side code block enhancements, heading permalinks, offline search, and lazy-loaded Mermaid / KaTeX rendering.

Integrity hashes apply only to the built-in defaults (or to an override that repeats a default URL exactly). Custom URLs load without integrity or crossorigin, so keeping them trustworthy is the consumer site's responsibility.

If a custom URL is an ES module under another name (for example a self-hosted mermaid.esm.js), the skin first runs it as a classic <script>, sees that no window.mermaid or window.renderMathInElement appeared, and then loads it again with import(). Rendering still works, but the browser logs a SyntaxError from the first attempt; rename the file to .mjs to load it as a module directly. The built-in defaults never take this fallback, so they only ever run with SRI.

Once the Mermaid and KaTeX loaders have settled, whether or not they succeeded, the skin sets data-supa-ready="true" on <html>. It also waits for the on-demand scripts of the Bootstrap 6 widgets on the page (such as a Datepicker or Combobox) to load and initialize. Scripts that post-process diagrams or math can wait for it; see Running Scripts After the Skin Initializes.

Self-Hosted URLs

To serve Mermaid and KaTeX from your own site, follow Self-Hosting Mermaid & KaTeX in the Authoring Guide. Give every override a root-relative path (such as /my-project/vendor/mermaid/mermaid.min.js) or an absolute https:// URL. Classic <script src> and <link href> URLs resolve against the current page, and .mjs URLs loaded with import() resolve against js/supa-maven-skin.min.js, so a document-relative value such as vendor/mermaid/mermaid.min.js breaks on pages in subdirectories. A self-hosted classic contrib/auto-render.min.js also loads ../katex.min.js, so keep KaTeX's dist/ layout.

Content Security Policy

Supa Maven Skin emits a static inline <script> in <head> to apply the reader's theme and color scheme before first paint. Allow it by adding this hash to your script-src directive alongside the site's own bundled scripts and widget chunks:

script-src 'self' 'sha256-bFi2dl1DG0ER3uQVQ+giyr3tAmby9eSQ/l78rYKMNRk=';

This is the script allowance, not a complete policy for every page's content. If your policy also declares script-src-elem, include the same allowances there because that directive takes precedence for <script> elements. The hash covers the exact script body, including leading and trailing whitespace, without the <script> tags. It is identical across pages and site configurations: <defaultTheme> and <colorScheme> are read from HTML attributes, not interpolated into the script. For unmodified generated HTML, the hash can change only when the skin version changes; check this reference when upgrading. HTML minification or other deployment processing that changes the script's whitespace also requires a new hash. If the script is blocked, the page can flash the wrong theme or palette before the bundled script initializes it.

The optional css/site.css stylesheet link also has an inline onerror="this.remove()" handler. It removes that link element if the stylesheet fails to load, for example when the consumer site supplies no site.css. The script hash above does not authorize this event handler. A strict policy that blocks inline handlers can leave it blocked: the failed link remains in the DOM and the browser may report a CSP violation, but the skin's main stylesheet still renders the page. Only the failed-link cleanup is lost.

With the default URLs, allow https://cdn.jsdelivr.net in script-src (Mermaid and KaTeX), style-src (katex.min.css), and font-src (KaTeX fonts, which katex.min.css loads relative to itself; fonts are not executable and are not covered by SRI). None of the pinned files fetch further code at runtime, so connect-src needs nothing extra. Self-hosting removes the jsDelivr origin entirely. Mermaid's rendered SVGs carry inline <style> and style attributes, so a style-src without 'unsafe-inline' will leave diagrams unstyled.