Kitchen Sink Showcase

Synchronized Content Tabs (sphinx-inline-tabs)

Switch between tabs below—active tab selection is automatically persisted and synchronized across tab groups:

package io.github.mepcotterell.skins;
import java.util.List;
public record SupaSkinConfig(
    String defaultTheme,
    boolean tocSidebar,
    int tocMaxDepth,
    List<String> languages
) {
    public static SupaSkinConfig defaults() {
        return new SupaSkinConfig("auto", true, 4, List.of("java", "kotlin", "xml", "ts"));
    }
}

package io.github.mepcotterell.skins
data class SupaSkinConfig(
    val defaultTheme: String = "auto",
    val tocSidebar: Boolean = true,
    val tocMaxDepth: Int = 4,
    val languages: List<String> = listOf("java", "kotlin", "xml", "ts")
)

TypeScript & Bootstrap 6 ESM Example

import Dialog from 'bootstrap/js/dist/dialog.js';
import Drawer from 'bootstrap/js/dist/drawer.js';
import ScrollSpy from 'bootstrap/js/dist/scrollspy.js';

export function openSearchModal(dialogEl: HTMLDialogElement): void {
  const modal = Dialog.getOrCreateInstance(dialogEl);
  modal.show();
}

Unified Diff Example

 <skin>
-  <groupId>org.apache.maven.skins</groupId>
-  <artifactId>maven-fluido-skin</artifactId>
-  <version>2.0.0-M11</version>
+  <groupId>io.github.mepcotterell</groupId>
+  <artifactId>supa-maven-skin</artifactId>
+  <version>0.2.0</version>
 </skin>

Bootstrap Icons (Markdown Shortcodes, HTML & Velocity Macro)

All Bootstrap Icons are bundled offline in Supa Maven Skin (bootstrap-icons.woff2) and can be authored using Markdown shortcodes (:bi-<name>: or :bi-<name> <classes>:), Markdown + HTML (<i class="bi bi-..."></i>), or the Velocity macro (#bi in .md.vm templates):

Inline icons with optional utility classes:
:bi-rocket-takeoff: Launch
:bi-check-circle-fill text-success fs-5: Verified
:bi-lightning-charge-fill text-warning: Fast Vite Build

<i class="bi bi-rocket-takeoff text-primary fs-5" aria-hidden="true"></i> Launch
<i class="bi bi-check-circle-fill text-success fs-5" aria-hidden="true"></i> Verified
<i class="bi bi-github fs-5" aria-hidden="true"></i> GitHub Actions

#parse( "site-macros.vm" )
#bi( "rocket-takeoff" ) Launch
#bi( "check-circle-fill" "text-success fs-5" ) Verified
#bi( "universal-access-circle" "text-info fs-5" "Accessible" ) WCAG 2.2 AAA

Collapsible Details Disclosure

Mermaid Architecture Diagram

When a page contains a mermaid code block, Supa Maven Skin lazily loads Mermaid from CDN and renders it with matching Light/Dark theme variables:

flowchart TD
    A["pom.xml & site.xml"] --> B["frontend-maven-plugin (Vite + SCSS + TS)"]
    B --> C["supa-maven-skin.jar"]
    C --> D["maven-site-plugin 3.21.0 (Doxia 2.0)"]
    D --> E["3-Column Furo HTML5 Site"]

KaTeX Math Rendering

Inline math like $E = mc^2$ and display equations are automatically rendered when <katex>auto</katex> detects math delimiters:

$$ \mathcal{L}(\theta) = \frac{1}{N} \sum_{i=1}^{N} \left( y_i - f_\theta(x_i) \right)^2 + \lambda |\theta|_2^2 $$

Inline Formatting, Blockquotes & Lists

“Documentation should be effortless to read, navigate, and maintain—in both light and dark environments.”

• Bold text, italicized text, strikethrough, and inline code tokens.
• Keyboard shortcuts: ⌘ + K, /, and Esc.
• Automatic heading permalinks (#) on h2 through h4 headings:
  1. First ordered item
  2. Second ordered item with nested bullets:
     • Sub-item A (--color-brand-primary)
     • Sub-item B (--color-brand-content)

Definition Lists

Doxia Sitetools 2.0

The Apache Maven site rendering engine that processes Velocity templates and Markdown/APT/XDoc content.

Bootstrap 6 (6.0.0-alpha.1)

Next-generation Bootstrap featuring native HTML5 <dialog> modals and drawers, .prose typography, and light-dark() CSS tokens.

Headings in Other Scripts

Heading anchors keep the letters and digits of every script. The German and Japanese headings below get the anchors #überblick and #概要, and a Markdown link names them as written: Überblick and 概要. Their # permalinks copy the percent-encoded form (#%C3%BCberblick), which browsers decode again.