Apache Maven Fluido Skin

The Apache Maven Fluido Skin is an Apache Maven site skin built on top of Twitter's bootstrap.

A sample page is provided to see the skin in action, and 2 complete sites to show skin configurations: one for sidebar layout (default) and the other for topbar layout.

Usage

To use this skin in your project, use the skin element of the site.xml site descriptor:

<project name="xxx">
  [...]
  <skin>
    <groupId>org.apache.maven.skins</groupId>
    <artifactId>maven-fluido-skin</artifactId>
    <version>1.1</version>
  </skin>
  [...]
</project>

TopBar and/or sideBar

The skin supports different layouts, enabling/disabling the left sidebar menu and the topbar menu. Users have just play with flags in the custom.fluidoSkin element in site.xml:

<project name="xxx">
  [...]
  <custom>
    <fluidoSkin>
      <topBarEnabled>true</topBarEnabled>
      <sideBarEnabled>false</sideBarEnabled>
    </fluidoSkin>
  </custom>
  [...]
</project>

That allows users having 4 skins in only 1!

  1. sidebar only;
  2. topbar only;
  3. both side/top bars;
  4. none at all.

Default skin setting is the option 1.

TopBarIcon

When users decide to enable the topbar, they can plug a small icon/logo there (typically 108*20 px) just configuring the custom.fluidoSkin.topBarIcon element in site.xml:

<project name="xxx">
  [...]
  <custom>
    <fluidoSkin>
      <topBarEnabled>true</topBarEnabled>
      <topBarIcon>
        <name>Maven Fluido Skin</name>
        <alt>Maven Fluido Skin</alt>
        <src>/images/topbar-logo.png</src>
        <href>/index.html</href>
      </topBarIcon>
    </fluidoSkin>
  </custom>
  [...]
</project>

GoogleSearch

Users can optionally enable the Google Search for the generated site, requirements are:

  • the project.url property in pom.xml, unless the custom.fluidoSkin.googleSearch.sitesearch property is set in the site.xml:
    <project name="xxx">
      [...]
      <url>http://maven.apache.org/skins/maven-fluido-skin</url>
      [...]
    </project>
  • the custom.fluidoSkin.googleSearch element in site.xml:
    <project name="xxx">
      [...]
      <custom>
        <fluidoSkin>
          <googleSearch>
            <sitesearch/>
          </googleSearch>
        </fluidoSkin>
      </custom>
      [...]
    </project>

By default, the search form:

  • is not enabled; adding custom.fluidoSkin.googleSearch> is enough to enable the searchbox.
  • is rendered in the sidebar, if the topbar only is available it will be rendered there.

External links are either rendered in the sidebar or the topbar. When both sidebar and topbar are enabled, they are rendered as dropdown in the topbar only.

SourceLineNumbers

Source code sections are enhanced by Google Code Prettify, users can optionally enable line numbers rendering (disabled by default):

<project name="xxx">
  [...]
  <custom>
    <fluidoSkin>
      <sourceLineNumbersEnabled>true</sourceLineNumbersEnabled>
    </fluidoSkin>
  </custom>
  [...]
</project>

Footers placeholders

Since #eval Velocity macro is not supported yet, the only placeholder available in additional footers is @project.name@.

GitHub ribbons

Since version 1.1, fluido-skin supports GitHub ribbons to simplify the Fork me on GitHub banner integration. Users must define:

  • custom.fluidoSkin.gitHub.projectId: required, it is the project id on GitHub and will be used to build the project page URL;
  • custom.fluidoSkin.gitHub.ribbonOrientation: optional, it is the the ribbon position, left/right only accepted (left by default);
  • custom.fluidoSkin.gitHub.ribbonColor: optional, it is the the ribbon color, red/green/black/orange/gray only accepted only accepted (red by default).
    <project name="xxx">
      [...]
      <custom>
        <fluidoSkin>
          <gitHub>
            <projectId>99soft/backport-spi</projectId>
            <ribbonOrientation>right</ribbonOrientation>
            <ribbonColor>black</ribbonColor>
          </gitHub>
        </fluidoSkin>
      </custom>
      [...]
    </project>

Project profile

As shown in the MOJOs list, plugins life-cycle are characterized by different status/stages:

  • Production
  • Pre-release
  • Sandbox
  • Graveyard (retired projects)

    Users can configure different backgrounds depending on the project status (except the production) to warrant users they are not using a production ready software:

    <project name="xxx">
      [...]
      <custom>
        <fluidoSkin>
          <profile>(pre-release|sandbox|retired)</profile>
        </fluidoSkin>
      </custom>
      [...]
    </project>

Twitter follow button

Since version 1.1, fluido-skin supports the Twitter follow button to simplify its integration. Users must define:

  • custom.fluidoSkin.twitter.user: required, it is the Twitter id to suggest to follow;
  • custom.fluidoSkin.twitter.showUser: optional, flag to mark the user has to be shown (false by default);
  • custom.fluidoSkin.twitter.showFollowers: optional, flag to mark the followers ribbon has to be shown (false by default).
    <project name="xxx">
      [...]
      <custom>
        <fluidoSkin>
          <twitter>
            <user>simonetripodi</user>
            <showUser>true</showUser>
            <showFollowers>true</showFollowers>
          </twitter>
        </fluidoSkin>
      </custom>
      [...]
    </project>

    By default, it is rendered in the sidebar, if the topbar only is available it will be rendered there.

Ohloh widgets

Since version 1.1, fluido-skin supports the Ohloh widgets to simplify its integration. Users must define:

  • custom.fluidoSkin.ohloh.projectId: required, it is the project identifier in Ohloh (could be the numeric id or the project name);
  • custom.fluidoSkin.ohloh.widget: optional, it is the kind of widget has to be rendered, admitted values are:
    • users-logo (default)
    • users-green
    • users-red
    • users-blue
    • users-gray
    • users-rainbow
    • users
    • thin-badge
    • partner-badge
    • languages
    • factoids
    • cocomo
    • stats
      <project name="xxx">
        [...]
        <custom>
          <fluidoSkin>
            <ohloh>
              <projectId>3499</projectId>
              <widget>factoids</widget>
            </ohloh>
          </fluidoSkin>
        </custom>
        [...]
      </project>

    Ohloh widgets will be rendered always in the footer as last element