Quick Start Guide

This guide walks you through setting up Terminal Javadocs with detailed explanations of each configuration option.

Prerequisites

  • Maven 3.6+
  • Java 8+

Step 1: Add the Parent POM

In your project's pom.xml, set Terminal Javadocs as your parent:

<parent>
    <groupId>com.guinetik</groupId>
    <artifactId>terminaljavadocs</artifactId>
    <version>1.0.2</version>
</parent>

This gives your project access to:

  • Pre-configured Maven Site Plugin
  • Javadoc Plugin with terminal theme
  • JaCoCo Plugin for coverage reports
  • All the CSS/JS resources for the dark theme

Step 2: Create the Site Descriptor

Maven uses a file called site.xml to control how your documentation site looks. Create this file at src/site/site.xml.

The Complete site.xml

Here's a full example with every option explained:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/DECORATION/1.8.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/DECORATION/1.8.0
        https://maven.apache.org/xsd/decoration-1.8.0.xsd"
    name="My Project">

    <!-- The skin controls the overall look and feel -->
    <skin>
        <groupId>org.apache.maven.skins</groupId>
        <artifactId>maven-fluido-skin</artifactId>
        <version>2.0.0-M8</version>
    </skin>

    <!-- Fluido Skin configuration options -->
    <custom>
        <fluidoSkin>
            <!-- Navigation bar at the top of the page -->
            <topBarEnabled>true</topBarEnabled>

            <!-- Sidebar with table of contents (disable for cleaner look) -->
            <sideBarEnabled>false</sideBarEnabled>

            <!-- Your logo in the navbar -->
            <topBarIcon>
                <name>My Project</name>
                <alt>My Project Logo</alt>
                <src>https://example.com/logo.svg</src>
                <href>/index.html</href>
            </topBarIcon>

            <!-- IMPORTANT: Use navbar-dark for the terminal theme -->
            <navBarStyle>navbar-dark</navBarStyle>

            <!-- Show line numbers in code blocks -->
            <sourceLineNumbersEnabled>true</sourceLineNumbersEnabled>

            <!-- Hide the generation date in footer -->
            <skipGenerationDate>true</skipGenerationDate>
        </fluidoSkin>
    </custom>

    <body>
        <!-- Include our theme CSS and syntax highlighting -->
        <head>
            <![CDATA[
                <!-- Prism.js for syntax highlighting -->
                <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
                <!-- Our terminal-themed Prism override -->
                <link href="./css/prism-terminal.css" rel="stylesheet" />
                <!-- Prism core -->
                <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" defer></script>
                <!-- Java syntax support -->
                <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js" defer></script>
                <!-- Our custom JS enhancements -->
                <script src="./js/custom.js" defer></script>
            ]]>
        </head>

        <!-- Navigation menu structure -->
        <menu name="Overview">
            <item name="Introduction" href="index.html"/>
        </menu>

        <menu name="Documentation">
            <item name="Javadoc" href="apidocs/index.html"/>
        </menu>

        <!-- Automatically includes project reports -->
        <menu name="Project Information" ref="reports"/>
    </body>
</project>

Understanding the Fluido Skin Options

Layout Options

Option Values Description
topBarEnabled true/false Shows a navigation bar at the top with your logo and menu
sideBarEnabled true/false Shows a sidebar with page table of contents. Disable for a cleaner look
navBarStyle navbar-dark, navbar-light Must be navbar-dark for Terminal Javadocs theme

Top Bar Icon (Logo)

<topBarIcon>
    <name>Display Name</name>      <!-- Text shown next to logo -->
    <alt>Alt text</alt>            <!-- Accessibility text -->
    <src>https://url/logo.svg</src> <!-- URL to your logo image -->
    <href>/index.html</href>       <!-- Where clicking the logo goes -->
</topBarIcon>

Display Options

Option Values Description
sourceLineNumbersEnabled true/false Show line numbers in code blocks
skipGenerationDate true/false Hide “Generated on…” in footer
gitHub URL Adds a GitHub ribbon/link to your repo

Adding a GitHub Ribbon

<fluidoSkin>
    <gitHub>
        <projectId>username/repo</projectId>
        <ribbonOrientation>right</ribbonOrientation>
        <ribbonColor>gray</ribbonColor>
    </gitHub>
</fluidoSkin>

Twitter Follow Button

Add a Twitter follow button to your site:

<fluidoSkin>
    <twitter>
        <user>your_username</user>
        <showUser>true</showUser>
        <showFollowers>true</showFollowers>
    </twitter>
</fluidoSkin>
Option Description
user Your Twitter/X username (without @)
showUser Display the username in the button
showFollowers Show follower count

Google Analytics

Track your site visitors:

<fluidoSkin>
    <googleAnalytics>
        <accountId>G-XXXXXXXXXX</accountId>
        <anonymizeIp>false</anonymizeIp>
        <forceSSL>false</forceSSL>
    </googleAnalytics>
</fluidoSkin>
Option Description
accountId Your GA4 measurement ID (starts with G-)
anonymizeIp Anonymize visitor IP addresses
forceSSL Force HTTPS for analytics requests

Step 3: Add Content Pages

Create markdown files in src/site/markdown/:

src/site/
├── site.xml
└── markdown/
    ├── index.md        # Your home page
    └── guide.md        # Additional pages

Example index.md

# Welcome to My Project

This is the home page of your documentation.

## Code Example

Here's some Java code with syntax highlighting:

\`\`\`java
public class Example {
    public static void main(String[] args) {
        System.out.println("Hello!");
    }
}
\`\`\`

Step 4: Build Your Site

mvn clean site

Open target/site/index.html in your browser to see the result.

Using Maven Properties

You can use Maven properties in site.xml to avoid hardcoding values:

In your pom.xml:

<properties>
    <terminaljavadocs.project.name>My Project</terminaljavadocs.project.name>
    <terminaljavadocs.project.logo>https://example.com/logo.svg</terminaljavadocs.project.logo>
</properties>

In your site.xml:

<project name="${terminaljavadocs.project.name}">
    ...
    <topBarIcon>
        <name>${terminaljavadocs.project.name}</name>
        <src>${terminaljavadocs.project.logo}</src>
    </topBarIcon>
    ...
</project>

Adding More Prism Language Support

The default setup includes Java. To highlight other languages, add more Prism components:

<head>
    <![CDATA[
        <!-- ... existing includes ... -->

        <!-- Add XML support -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-xml-doc.min.js" defer></script>

        <!-- Add Bash support -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js" defer></script>

        <!-- Add Python support -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js" defer></script>
    ]]>
</head>

See Prism.js components for all available languages.

Next Steps