Welcome to Apache Maven Fluido Skin!
The Apache Maven Fluido Skin is an Apache Maven site skin built on top of Twitter's Bootstrap 2.3.2.
A sample page is provided to see the skin in action, and two complete sites to show skin configurations: one for sidebar layout (default) and the other for topbar layout.
Notice: since version 1.5 of this skin, Velocity 1.7 (used by Maven Site Plugin version 3.5) is required. But in previous versions of the skin, it was Velocity 1.5, which has some incompatibilities. If you need to mix versions, please see the migration guide to override Velocity version used by Maven Site Plugin as per your specific skin and site plugin requirements.
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>2.0.0-M11</version>
</skin>
[...]
</project>
The following aspects may be configured:
- Topbar and/or Sidebar
- Topbar Icon
- Topbar Container Style
- Navbar Style
- Configuring column class
- Matomo (e.g. Apache Analytics)
- Google Analytics
- Google Search
- Source code line numbers
- Copyright class
- head/footer placeholders
- GitHub Ribbons
- Project profile
- Twitter follow button
- Facebook like button
- Flattr button
- AnchorJS
- Skip generation date
- Breadcrumb Divider
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!
- sidebar only;
- topbar only;
- both side/top bars;
- none at all.
Default skin setting is the option 1.
Topbar Icon
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>
Topbar Container Style
You can configure the style attribute value of the div container for your topbar
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<topBarEnabled>true</topBarEnabled>
<topBarContainerStyle>width: 90%;</topBarContainerStyle>
</fluidoSkin>
</custom>
[...]
</project>
Navbar Style
You can configure style of your top bar nav (since bootstrap 2.1.0 is not anymore black by default). Use navbar-inverse to have the black one.
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<topBarEnabled>true</topBarEnabled>
<navBarStyle>navbar-inverse</navBarStyle>
</fluidoSkin>
</custom>
[...]
</project>
Configuring column class
When using sidebar, the navigation column uses by default span2
class and body column uses span10
. To prevent weird/ugly result, the sum must be 12. You can change that using:
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<leftColumnClass>span3</leftColumnClass>
<bodyColumnClass>span9</bodyColumnClass>
</fluidoSkin>
</custom>
[...]
</project>
Matomo (e.g. Apache Analytics)
Users can optionally enable Matomo. How to configure it for Apache Analytics, the options element will contain some configuration (here some privacy setup):
<project name="xxx">
[...]
<custom>
<matomo>
<siteId>xxx</siteId>
<url>https://analytics.apache.org</url>
<options>
<disableCookies/>
<trackPageView/>
<enableLinkTracking/>
</options>
</matomo>
</custom>
[...]
</project>
Google Analytics
Users can optionally enable Google Analytics for the generated site:
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<googleAnalytics>
<accountId>UA-12345...</accountId>
</googleAnalytics>
</fluidoSkin>
</custom>
[...]
</project>
By default, forceSSL
and anonymizeIp
are enabled. You can disable both, but this might be illegal in several countries or regions (e.g., in the EU due to GDPR):
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<googleAnalytics>
<accountId>UA-12345...</accountId>
<anonymizeIp>true/false</anonymizeIp>
<forceSSL>true/false</forceSSL>
</googleAnalytics>
</fluidoSkin>
</custom>
[...]
</project>
Google Search
Users can optionally enable the Google Search for the generated site, requirements are:
- the
project.url
property inpom.xml
, unless thecustom.fluidoSkin.googleSearch.sitesearch
property is set in thesite.xml
:<project name="xxx"> [...] <url>http://maven.apache.org/skins/maven-fluido-skin</url> [...] </project>
- the
custom.fluidoSkin.googleSearch
element insite.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.
Source code line numbers
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>
Copyright class
Since version 1.3.1, you can configure a copyright class:
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<copyrightClass>pull-right</copyrightClass>
</fluidoSkin>
</custom>
[...]
</project>
head/footer placeholders
This skin will pass your custom head/footer to $render.eval()
and replace all variables known to the Velocity context.
GitHub Ribbons
Since version 1.11.1, fluido-skin supports GitHub ribbons to simplify the Fork me on GitHub banner integration. Users must define:
custom.fluidoSkin.gitHub.projectId
: required, the project id on GitHub and will be used to build the project page URL;custom.fluidoSkin.gitHub.ribbonOrientation
: optional, the ribbon position,left-top
> (left
)/right-top
(right
)/left-bottom
/right-bottom
are accepted only (left-top
by default);custom.fluidoSkin.gitHub.ribbonColor
: optional, the ribbon color,red
/green
/black
/darkblue
/orange
/gray
are accepted only (red
by default).<project name="xxx"> [...] <custom> <fluidoSkin> <gitHub> <projectId>apache/maven-skins</projectId> <ribbonOrientation>right</ribbonOrientation> <ribbonColor>black</ribbonColor> </gitHub> </fluidoSkin> </custom> [...] </project>
Project profile
As shown in MojoHaus Maven plugins 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.
Facebook like button
Since version 1.2, fluido-skin supports the Facebook like integration. Users can define similar option to Facebook SDK:
custom.fluidoSkin.facebookLike.recommend
: optional, if set totrue
Recommend button will be rendered instead of Likecustom.fluidoSkin.facebookLike.shareButton
: optional, if set totrue
Share Button will be included.custom.fluidoSkin.facebookLike.layout
: optional facebook layout, Can be one of:standard
button_count
: default if sidebar is not enabledbutton
box_count
: default if sidebar is enabled<project name="xxx"> [...] <custom> <fluidoSkin> <facebookLike> <recommend>true/false</recommend> <shareButton>true/false</shareButton> <layout>box_count</layout> </facebookLike> </fluidoSkin> </custom> [...] </project>
By default, it is rendered in the sidebar, if the topbar only is available it will be rendered there.
Note in order the Facebook like button appears,
${project.url}
property must be set in thepom.xml
!
Flattr button
As of version 2.0.0-M9, support for Flattr buttons in fluido-skin has been removed.
AnchorJS
You can optionally enable anchor ID generation with AnchorJS:
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<anchorJs />
</fluidoSkin>
</custom>
[...]
</project>
Note that the generated IDs are not compatible with IDs generated by the underlying Doxia framework.
Additionally you can provide a CSS selector for the add()
function and options:
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<anchorJs>
<cssSelector>h1, h2, h3, h4, h5</cssSelector>
<options>
<class>.anchor</class>
<titleText>foo</titleText>
</options>
</anchorJs>
</fluidoSkin>
</custom>
[...]
</project>
Skip generation date
Since version 1.3.1, you can skip generation date from the line "Generated by Apache Maven Doxia at <date>" to enable it:
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<skipGenerationDate>true</skipGenerationDate>
</fluidoSkin>
</custom>
[...]
</project>
Breadcrumb Divider
Since version 1.3.1, you can configure the breadcrumb divider (default is a slash):
<project name="xxx">
[...]
<custom>
<fluidoSkin>
<breadcrumbDivider>»</breadcrumbDivider>
</fluidoSkin>
</custom>
[...]
</project>
Acknowledgment
Apache Maven Fluido Skin contains/redistributes Glyphicons Halflings as part of Bootstrap by Twitter, released under Creative Commons Attribution 3.0 Unported (CC BY 3.0).