This is an automated email from the ASF dual-hosted git repository.
michaelo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/maven-fluido-skin.git
The following commit(s) were added to refs/heads/master by this push:
new 518e724 [MSKINS-194] Load GitHub ribbon with CSS only
518e724 is described below
commit 518e7249f0ea021fd6a54cfdd494fcfe1d20d52d
Author: Konrad Windszus <[email protected]>
AuthorDate: Mon Jun 13 08:55:46 2022 +0200
[MSKINS-194] Load GitHub ribbon with CSS only
This closes #37
---
pom.xml | 2 +
src/main/resources/META-INF/maven/site-macros.vm | 45 ++++----
src/main/resources/META-INF/maven/site.vm | 1 +
src/main/resources/css/gh-fork-ribbon.css | 124 +++++++++++++++++++++++
src/site/apt/index.apt.vm | 10 +-
5 files changed, 156 insertions(+), 26 deletions(-)
diff --git a/pom.xml b/pom.xml
index 7647eb1..7d579bd 100644
--- a/pom.xml
+++ b/pom.xml
@@ -164,6 +164,7 @@ under the License.
<exclude>src/main/resources/js/prettify.js</exclude>
<exclude>src/main/resources/js/jquery-*.js</exclude>
<exclude>src/main/resources/js/anchor-*.js</exclude>
+ <exclude>src/main/resources/css/gh-fork-ribbon.css</exclude>
</excludes>
</configuration>
</plugin>
@@ -202,6 +203,7 @@ under the License.
<cssSourceFile>maven-base.css</cssSourceFile>
<cssSourceFile>maven-theme.css</cssSourceFile>
<cssSourceFile>prettify.css</cssSourceFile>
+ <cssSourceFile>gh-fork-ribbon.css</cssSourceFile>
</cssSourceFiles>
<cssFinalFile>apache-maven-fluido-${project.version}.css</cssFinalFile>
<jsSourceDir>js</jsSourceDir>
diff --git a/src/main/resources/META-INF/maven/site-macros.vm
b/src/main/resources/META-INF/maven/site-macros.vm
index 0418f30..90428c9 100644
--- a/src/main/resources/META-INF/maven/site-macros.vm
+++ b/src/main/resources/META-INF/maven/site-macros.vm
@@ -633,38 +633,41 @@ $indent </ul>##
</form>
#end
##
-#macro ( forkMeOnGitHub )
-#**##if ( $decoration.getCustomChild( 'fluidoSkin.gitHub.projectId' ) )
-##
-#* *##set ( $gitHubProjectId = $decoration.getCustomValue(
'fluidoSkin.gitHub.projectId' ) )
-##
-#* *##set ( $leftRibbon = { "red" : "forkme_left_red_aa0000.png", "green" :
"forkme_left_green_007200.png", "black" : "forkme_left_darkblue_121621.png",
"darkblue" : "forkme_left_darkblue_121621.png", "orange" :
"forkme_left_orange_ff7600.png", "gray" : "forkme_left_gray_6d6d6d.png" } )
-#* *##set ( $rightRibbon = { "red" : "forkme_right_red_aa0000.png", "green" :
"forkme_right_green_007200.png", "black" : "forkme_right_darkblue_121621.png",
"darkblue" : "forkme_right_darkblue_121621.png", "orange" :
"forkme_right_orange_ff7600.png", "gray" : "forkme_right_gray_6d6d6d.png" } )
-##
-#* *##set ( $ribbon = $leftRibbon )
-#* *##set ( $ribbonOrientation = 'left' )
-#* *##if ( $decoration.getCustomValue( 'fluidoSkin.gitHub.ribbonOrientation',
'' ).equalsIgnoreCase( 'right' ) )
-#* *##set ( $ribbonOrientation = 'right' )
-#* *##set ( $ribbon = $rightRibbon )
-#* *##end
+#macro ( forkMeOnGitHubHead )
##
#* *##set ( $ribbonColor = 'red' )
#* *##set ( $definedRibbonColor = $decoration.getCustomChild(
'fluidoSkin.gitHub.ribbonColor' ) )
##
#* *##if ( $definedRibbonColor
- && ( $definedRibbonColor.getValue().equalsIgnoreCase( "red" )
- || $definedRibbonColor.getValue().equalsIgnoreCase( "green" )
+ && ($definedRibbonColor.getValue().equalsIgnoreCase( "green" )
|| $definedRibbonColor.getValue().equalsIgnoreCase( "black" )
|| $definedRibbonColor.getValue().equalsIgnoreCase( "orange" )
|| $definedRibbonColor.getValue().equalsIgnoreCase( "gray" ) ) )
#* *##set ( $ribbonColor = $definedRibbonColor.getValue().toLowerCase() )
+ <style>.github-fork-ribbon:before { background-color: $ribbonColor;
}</style>
+#* *##end
+#end
+##
+#macro ( forkMeOnGitHub )
+#**##if ( $decoration.getCustomChild( 'fluidoSkin.gitHub.projectId' ) )
+##
+#* *##set ( $gitHubProjectId = $decoration.getCustomValue(
'fluidoSkin.gitHub.projectId' ) )
+##
+#* *##set ( $ribbonOrientation = 'left-top' )
+#* *##if ( $decoration.getCustomValue( 'fluidoSkin.gitHub.ribbonOrientation',
'' ).equalsIgnoreCase( 'right' )
+ || $decoration.getCustomValue(
'fluidoSkin.gitHub.ribbonOrientation', '' ).equalsIgnoreCase( 'right-top' ) )
+#* *##set ( $ribbonOrientation = 'right-top' )
+#* *##end
+#* *##if ( $decoration.getCustomValue( 'fluidoSkin.gitHub.ribbonOrientation',
'' ).equalsIgnoreCase( 'left' )
+ || $decoration.getCustomValue(
'fluidoSkin.gitHub.ribbonOrientation', '' ).equalsIgnoreCase( 'left-top' ) )
+#* *##set ( $ribbonOrientation = 'left-top' )
+#* *##end
+#* *##if ( $decoration.getCustomValue( 'fluidoSkin.gitHub.ribbonOrientation',
'' ).equalsIgnoreCase( 'right-bottom' )
+ || $decoration.getCustomValue(
'fluidoSkin.gitHub.ribbonOrientation', '' ).equalsIgnoreCase( 'left-bottom' ) )
+#* *##set ( $ribbonOrientation = "$decoration.getCustomValue(
'fluidoSkin.gitHub.ribbonOrientation' ) fixed" )
#* *##end
##
- <a href="https://github.com/$gitHubProjectId";>
- <img style="position: absolute; top: 0; $ribbonOrientation: 0; border:
0; z-index: 10000;"
- src="https://s3.amazonaws.com/github/ribbons/$ribbon.get( $ribbonColor
)"
- alt="Fork me on GitHub">
- </a>
+ <a class="github-fork-ribbon $ribbonOrientation"
href="https://github.com/$gitHubProjectId"; data-ribbon="Fork me on GitHub"
title="Fork me on GitHub">Fork me on GitHub</a>
#**##end
#end
##
diff --git a/src/main/resources/META-INF/maven/site.vm
b/src/main/resources/META-INF/maven/site.vm
index eea8f63..9d49dbd 100644
--- a/src/main/resources/META-INF/maven/site.vm
+++ b/src/main/resources/META-INF/maven/site.vm
@@ -56,6 +56,7 @@
#**##googleAnalytics( $decoration.googleAnalyticsAccountId )
#**##matomo( $decoration.custom.getChild('matomo') )
#**##flattrHead()
+#**##forkMeOnGitHubHead()
</head>
#**##set ( $topBarEnabled = $convert.toBoolean( $decoration.getCustomValue(
'fluidoSkin.topBarEnabled', 'false' ) ) )
#**##if ( $topBarEnabled )
diff --git a/src/main/resources/css/gh-fork-ribbon.css
b/src/main/resources/css/gh-fork-ribbon.css
new file mode 100644
index 0000000..fe17c73
--- /dev/null
+++ b/src/main/resources/css/gh-fork-ribbon.css
@@ -0,0 +1,124 @@
+/*!
+ * "Fork me on GitHub" CSS ribbon v0.2.3 | MIT License
+ * https://github.com/simonwhitaker/github-fork-ribbon-css
+*/
+
+.github-fork-ribbon {
+ width: 12.1em;
+ height: 12.1em;
+ position: absolute;
+ overflow: hidden;
+ top: 0;
+ right: 0;
+ z-index: 9999;
+ pointer-events: none;
+ font-size: 13px;
+ text-decoration: none;
+ text-indent: -999999px;
+}
+
+.github-fork-ribbon.fixed {
+ position: fixed;
+}
+
+.github-fork-ribbon:hover, .github-fork-ribbon:active {
+ background-color: rgba(0, 0, 0, 0.0);
+}
+
+.github-fork-ribbon:before, .github-fork-ribbon:after {
+ /* The right and left classes determine the side we attach our banner to */
+ position: absolute;
+ display: block;
+ width: 15.38em;
+ height: 1.54em;
+
+ top: 3.23em;
+ right: -3.23em;
+
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.github-fork-ribbon:before {
+ content: "";
+
+ /* Add a bit of padding to give some substance outside the "stitching" */
+ padding: .38em 0;
+
+ /* Set the base colour */
+ background-color: #a00;
+
+ /* Set a gradient: transparent black at the top to almost-transparent black
at the bottom */
+ background-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
+ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0,
0, 0.15));
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0,
0.15));
+ background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0,
0.15));
+ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0,
0.15));
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0,
0.15));
+
+ /* Add a drop shadow */
+ -webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+ box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
+
+ pointer-events: auto;
+}
+
+.github-fork-ribbon:after {
+ /* Set the text from the data-ribbon attribute */
+ content: attr(data-ribbon);
+
+ /* Set the text properties */
+ color: #fff;
+ font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
+ line-height: 1.54em;
+ text-decoration: none;
+ text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
+ text-align: center;
+ text-indent: 0;
+
+ /* Set the layout properties */
+ padding: .15em 0;
+ margin: .15em 0;
+
+ /* Add "stitching" effect */
+ border-width: .08em 0;
+ border-style: dotted;
+ border-color: #fff;
+ border-color: rgba(255, 255, 255, 0.7);
+}
+
+.github-fork-ribbon.left-top, .github-fork-ribbon.left-bottom {
+ right: auto;
+ left: 0;
+}
+
+.github-fork-ribbon.left-bottom, .github-fork-ribbon.right-bottom {
+ top: auto;
+ bottom: 0;
+}
+
+.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after,
.github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after {
+ right: auto;
+ left: -3.23em;
+}
+
+.github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after,
.github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after
{
+ top: auto;
+ bottom: 3.23em;
+}
+
+.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after,
.github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after
{
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
\ No newline at end of file
diff --git a/src/site/apt/index.apt.vm b/src/site/apt/index.apt.vm
index c49ba8f..48c3943 100644
--- a/src/site/apt/index.apt.vm
+++ b/src/site/apt/index.apt.vm
@@ -334,16 +334,16 @@ Welcome to ${project.name}!
This skin will pass your custom head/footer to <<<${esc.d}render.eval()>>>
and replace all variables
known to the Velocity context.
-** GitHub ribbons
+** GitHub Ribbons
- Since version <<1.1>>, fluido-skin supports
{{{https://github.com/blog/273-github-ribbons}GitHub ribbons}} to simplify
+ Since version <<1.11.1>>, fluido-skin supports
{{{https://github.com/simonwhitaker/github-fork-ribbon-css}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.projectId>>>: <<required>>, 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.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>>, it is the the
ribbon color,
<<<red>>>/<<<green>>>/<<<black>>>/<<darkblue>>/<<<orange>>>/<<<gray>>> only
accepted only accepted (<<<red>>> 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">
