You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@training.apache.org by cd...@apache.org on 2019/09/03 12:01:13 UTC
[incubator-training] 01/01: - Updated asciidoctorj to 2.1.0 -
Updated asciidoctor diagrams to 1.5.18 - Updated revealjs to 3.8.0 - Added
CSS styles for two column slides - Added CSS styles for some additional
simple colors - Added example on how to use the two-column feature - Added
example on how to use fontawesome icons (also using the color styles)
This is an automated email from the ASF dual-hosted git repository.
cdutz pushed a commit to branch feature/03-09-2019-updated-template
in repository https://gitbox.apache.org/repos/asf/incubator-training.git
commit 0308ce6578d9ebd89e9ff73790e071c792e44a46
Author: Christofer Dutz <ch...@c-ware.de>
AuthorDate: Tue Sep 3 14:01:01 2019 +0200
- Updated asciidoctorj to 2.1.0
- Updated asciidoctor diagrams to 1.5.18
- Updated revealjs to 3.8.0
- Added CSS styles for two column slides
- Added CSS styles for some additional simple colors
- Added example on how to use the two-column feature
- Added example on how to use fontawesome icons (also using the color styles)
---
.../install-deps-centos.sh | 0
.../libs/docinfo-hack/document.html.slim | 99 +++++++++++++++-------
tools/maven-revealjs-asciidoctor-template/pom.xml | 6 +-
.../src/main/asciidoc/index.adoc | 28 ++++++
.../src/main/theme/apache.css | 31 +++++++
5 files changed, 131 insertions(+), 33 deletions(-)
diff --git a/tools/maven-revealjs-asciidoctor-templte/install-deps-centos.sh b/tools/maven-revealjs-asciidoctor-template/install-deps-centos.sh
similarity index 100%
rename from tools/maven-revealjs-asciidoctor-templte/install-deps-centos.sh
rename to tools/maven-revealjs-asciidoctor-template/install-deps-centos.sh
diff --git a/tools/maven-revealjs-asciidoctor-template/libs/docinfo-hack/document.html.slim b/tools/maven-revealjs-asciidoctor-template/libs/docinfo-hack/document.html.slim
index ec9e3cf..fb1c21b 100644
--- a/tools/maven-revealjs-asciidoctor-template/libs/docinfo-hack/document.html.slim
+++ b/tools/maven-revealjs-asciidoctor-template/libs/docinfo-hack/document.html.slim
@@ -2,7 +2,10 @@ doctype 5
html lang=(attr :lang, 'en' unless attr? :nolang)
head
meta charset="utf-8"
- - revealjsdir = (attr :revealjsdir, 'reveal.js')
+ - if RUBY_ENGINE == 'opal' && JAVASCRIPT_PLATFORM == 'node'
+ - revealjsdir = (attr :revealjsdir, 'node_modules/reveal.js')
+ - else
+ - revealjsdir = (attr :revealjsdir, 'reveal.js')
- unless (asset_uri_scheme = (attr 'asset-uri-scheme', 'https')).empty?
- asset_uri_scheme = %(#{asset_uri_scheme}:)
- cdn_base = %(#{asset_uri_scheme}//cdnjs.cloudflare.com/ajax/libs)
@@ -14,14 +17,12 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"
meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" name="viewport"
link href="#{revealjsdir}/css/reveal.css" rel="stylesheet"
- link href="css/c3.min.css" rel="stylesheet"
- script src="js/d3.min.js" charset="utf-8"
- script src="js/c3.min.js"
/ Default theme required even when using custom theme
- if attr? :revealjs_customtheme
link rel='stylesheet' href=(attr :revealjs_customtheme) id='theme'
- else
link rel='stylesheet' href='#{revealjsdir}/css/theme/#{attr 'revealjs_theme', 'black'}.css' id='theme'
+ include asciidoctor_revealjs.css.slim
- if attr? :icons, 'font'
- if attr? 'iconfont-remote'
link rel='stylesheet' href=(attr 'iconfont-cdn', %(#{cdn_base}/font-awesome/4.3.0/css/font-awesome.min.css))
@@ -45,7 +46,7 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
TeX: {#{eqnums_opt}}
});
script src='#{cdn_base}/mathjax/2.4.0/MathJax.js?config=TeX-MML-AM_HTMLorMML'
- - case attr 'source-highlighter'
+ - case document.attr 'source-highlighter'
- when 'coderay'
- if (attr 'coderay-css', 'class') == 'class'
- if @safe >= Asciidoctor::SafeMode::SECURE || (attr? :linkcss)
@@ -115,19 +116,37 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
.footer
.left
.right
- script src="#{revealjsdir}/lib/js/head.min.js"
script src="#{revealjsdir}/js/reveal.js"
javascript:
+ Array.prototype.slice.call(document.querySelectorAll('.slides section')).forEach(function(slide) {
+ if (slide.getAttribute('data-background-color')) return;
+ // user needs to explicitly say he wants CSS color to override otherwise we might break custom css or theme (#226)
+ if (!(slide.classList.contains('canvas') || slide.classList.contains('background'))) return;
+ var bgColor = getComputedStyle(slide).backgroundColor;
+ if (bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
+ slide.setAttribute('data-background-color', bgColor);
+ slide.style.backgroundColor = 'transparent';
+ }
+ })
+
// See https://github.com/hakimel/reveal.js#configuration for a full list of configuration options
Reveal.initialize({
- // Display controls in the bottom right corner
+ // Display presentation control arrows
controls: #{to_boolean(attr 'revealjs_controls', true)},
+ // Help the user learn the controls by providing hints, for example by
+ // bouncing the down arrow when they first encounter a vertical slide
+ controlsTutorial: #{to_boolean(attr 'revealjs_controlsTutorial', true)},
+ // Determines where controls appear, "edges" or "bottom-right"
+ controlsLayout: '#{attr 'revealjs_controlsLayout', 'bottom-right'}',
+ // Visibility rule for backwards navigation arrows; "faded", "hidden"
+ // or "visible"
+ controlsBackArrows: '#{attr 'revealjs_controlsBackArrows', 'faded'}',
// Display a presentation progress bar
progress: #{to_boolean(attr 'revealjs_progress', true)},
- // Set a per-slide timing for speaker notes, null means none
- defaultTiming: #{attr 'revealjs_defaultTiming', 'null'},
// Display the page number of the current slide
- slideNumber: #{to_boolean(attr 'revealjs_slidenumber', false)},
+ slideNumber: #{to_valid_slidenumber(attr 'revealjs_slidenumber', false)},
+ // Control which views the slide number displays on
+ showSlideNumber: '#{attr 'revealjs_showslidenumber', 'all'}',
// Push each slide change to the browser history
history: #{to_boolean(attr 'revealjs_history', false)},
// Enable keyboard shortcuts for navigation
@@ -146,6 +165,9 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
shuffle: #{to_boolean(attr 'revealjs_shuffle', false)},
// Turns fragments on and off globally
fragments: #{to_boolean(attr 'revealjs_fragments', true)},
+ // Flags whether to include the current fragment in the URL,
+ // so that reloading brings you to the same fragment position
+ fragmentInURL: #{to_boolean(attr 'revealjs_fragmentInURL', false)},
// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen
embedded: #{to_boolean(attr 'revealjs_embedded', false)},
@@ -162,30 +184,42 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
- autoSlide: #{attr 'revealjs_autoslide', 0},
+ autoSlide: #{attr 'revealjs_autoSlide', 0},
// Stop auto-sliding after user input
- autoSlideStoppable: #{to_boolean(attr 'revealjs_autoslidestoppable', true)},
+ autoSlideStoppable: #{to_boolean(attr 'revealjs_autoSlideStoppable', true)},
+ // Use this method for navigation when auto-sliding
+ autoSlideMethod: #{attr 'revealjs_autoSlideMethod', 'Reveal.navigateNext'},
+ // Specify the average time in seconds that you think you will spend
+ // presenting each slide. This is used to show a pacing timer in the
+ // speaker view
+ defaultTiming: #{attr 'revealjs_defaultTiming', 120},
// Enable slide navigation via mouse wheel
- mouseWheel: #{to_boolean(attr 'revealjs_mousewheel', false)},
+ mouseWheel: #{to_boolean(attr 'revealjs_mouseWheel', false)},
// Hides the address bar on mobile devices
- hideAddressBar: #{to_boolean(attr 'revealjs_hideaddressbar', true)},
+ hideAddressBar: #{to_boolean(attr 'revealjs_hideAddressBar', true)},
// Opens links in an iframe preview overlay
- previewLinks: #{to_boolean(attr 'revealjs_previewlinks', false)},
- // Theme (e.g., beige, black, league, night, serif, simple, sky, solarized, white)
- // NOTE setting the theme in the config no longer works in reveal.js 3.x
- //theme: Reveal.getQueryHash().theme || '#{attr 'revealjs_theme', 'black'}',
+ // Add `data-preview-link` and `data-preview-link="false"` to customise each link
+ // individually
+ previewLinks: #{to_boolean(attr 'revealjs_previewLinks', false)},
// Transition style (e.g., none, fade, slide, convex, concave, zoom)
- transition: Reveal.getQueryHash().transition || '#{attr 'revealjs_transition', 'slide'}',
+ transition: '#{attr 'revealjs_transition', 'slide'}',
// Transition speed (e.g., default, fast, slow)
- transitionSpeed: '#{attr 'revealjs_transitionspeed', 'default'}',
+ transitionSpeed: '#{attr 'revealjs_transitionSpeed', 'default'}',
// Transition style for full page slide backgrounds (e.g., none, fade, slide, convex, concave, zoom)
- backgroundTransition: '#{attr 'revealjs_backgroundtransition', 'fade'}',
+ backgroundTransition: '#{attr 'revealjs_backgroundTransition', 'fade'}',
// Number of slides away from the current that are visible
- viewDistance: #{attr 'revealjs_viewdistance', 3},
+ viewDistance: #{attr 'revealjs_viewDistance', 3},
// Parallax background image (e.g., "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'")
- parallaxBackgroundImage: '#{attr 'revealjs_parallaxbackgroundimage', ''}',
+ parallaxBackgroundImage: '#{attr 'revealjs_parallaxBackgroundImage', ''}',
// Parallax background size in CSS syntax (e.g., "2100px 900px")
- parallaxBackgroundSize: '#{attr 'revealjs_parallaxbackgroundsize', ''}',
+ parallaxBackgroundSize: '#{attr 'revealjs_parallaxBackgroundSize', ''}',
+ // Number of pixels to move the parallax background per slide
+ // - Calculated automatically unless specified
+ // - Set to 0 to disable movement along an axis
+ parallaxBackgroundHorizontal: #{attr 'revealjs_parallaxBackgroundHorizontal', 'null'},
+ parallaxBackgroundVertical: #{attr 'revealjs_parallaxBackgroundVertical', 'null'},
+ // The display mode that will be used to show slides
+ display: '#{attr 'revealjs_display', 'block'}',
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
@@ -203,12 +237,17 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: '#{revealjsdir}/lib/js/classList.js', condition: function() { return !document.body.classList; } },
- { src: '#{revealjsdir}/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
- { src: '#{revealjsdir}/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
- #{(attr? 'source-highlighter', 'highlightjs') ? "{ src: '#{revealjsdir}/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }," : nil}
- { src: '#{revealjsdir}/plugin/zoom-js/zoom.js', async: true },
- { src: '#{revealjsdir}/plugin/notes/notes.js', async: true }
- ]
+ #{(document.attr? 'source-highlighter', 'highlightjs') ? "{ src: '#{revealjsdir}/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }," : nil}
+ #{(attr? 'revealjs_plugin_zoom', 'disabled') ? "" : "{ src: '#{revealjsdir}/plugin/zoom-js/zoom.js', async: true }," }
+ #{(attr? 'revealjs_plugin_notes', 'disabled') ? "" : "{ src: '#{revealjsdir}/plugin/notes/notes.js', async: true }," }
+ #{(attr? 'revealjs_plugin_marked', 'enabled') ? "{ src: '#{revealjsdir}/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }," : "" }
+ #{(attr? 'revealjs_plugin_markdown', 'enabled') ? "{ src: '#{revealjsdir}/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }," : "" }
+ #{(attr? 'revealjs_plugin_pdf', 'enabled') ? "{ src: '#{revealjsdir}/plugin/print-pdf/print-pdf.js', async: true }," : "" }
+ #{(attr? 'revealjs_plugins') ? File.read(attr('revealjs_plugins', '')) : ""}
+ ],
+
+ #{(attr? 'revealjs_plugins_configuration') ? File.read(attr('revealjs_plugins_configuration', '')) : ""}
+
});
- unless (docinfo_content = (docinfo :footer, '.html')).empty?
=docinfo_content
diff --git a/tools/maven-revealjs-asciidoctor-template/pom.xml b/tools/maven-revealjs-asciidoctor-template/pom.xml
index d2fe675..18ff438 100644
--- a/tools/maven-revealjs-asciidoctor-template/pom.xml
+++ b/tools/maven-revealjs-asciidoctor-template/pom.xml
@@ -44,10 +44,10 @@
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<asciidoctor.maven.plugin.version>2.0.0-RC.1</asciidoctor.maven.plugin.version>
- <asciidoctorj.version>2.0.0-RC.2</asciidoctorj.version>
- <asciidoctorj.diagram.version>1.5.16</asciidoctorj.diagram.version>
+ <asciidoctorj.version>2.1.0</asciidoctorj.version>
+ <asciidoctorj.diagram.version>1.5.18</asciidoctorj.diagram.version>
<asciidoctorj.extensions-lab.version>1.0.0</asciidoctorj.extensions-lab.version>
- <revealjs.version>3.7.0</revealjs.version>
+ <revealjs.version>3.8.0</revealjs.version>
<asciidoctor-revealjs.version>2.0.0</asciidoctor-revealjs.version>
<copy-rename-maven-plugin.version>1.0</copy-rename-maven-plugin.version>
diff --git a/tools/maven-revealjs-asciidoctor-template/src/main/asciidoc/index.adoc b/tools/maven-revealjs-asciidoctor-template/src/main/asciidoc/index.adoc
index 3e5138a..4e9d6a5 100644
--- a/tools/maven-revealjs-asciidoctor-template/src/main/asciidoc/index.adoc
+++ b/tools/maven-revealjs-asciidoctor-template/src/main/asciidoc/index.adoc
@@ -134,6 +134,34 @@ Nest lists, by duplicating the list-char
include::{sourcedir}/example/StringUtils.java[tags=contains,indent=0]
----
+== Two columns
+
+[.west]
+* Blah
+* Blah
+* Blah
+* Blah
+* Blah
+
+[.east]
+* Blah
+* Blah
+* Blah
+* Blah
+* Blah
+
+== Fontawesome Icons
+
+* icon:check[role=green]
+* icon:wrench[]
+* icon:beer[role=orange]
+
+[NOTE.speaker]
+--
+* Find icons here: https://fontawesome.com/v4.7.0/icons/
+* Color icons by defining css styles in apache.css and referencing them with "role"
+--
+
== Diagrams
Press the down arrow key to see the different types of diagrams
diff --git a/tools/maven-revealjs-asciidoctor-template/src/main/theme/apache.css b/tools/maven-revealjs-asciidoctor-template/src/main/theme/apache.css
index 079a53f..74cb7b2 100644
--- a/tools/maven-revealjs-asciidoctor-template/src/main/theme/apache.css
+++ b/tools/maven-revealjs-asciidoctor-template/src/main/theme/apache.css
@@ -281,10 +281,26 @@ body {
.reveal .slide-number {
color: #42affa; }
+/*********************************************
+ * GENERAL PURPOSE COLORS
+ *********************************************/
+
.reveal .red {
color: red;
}
+.reveal .orange {
+ color: orange;
+}
+
+.reveal .yellow {
+ color: yellow;
+}
+
+.reveal .green {
+ color: green;
+}
+
/*********************************************
* C3JS Charts
*********************************************/
@@ -347,3 +363,18 @@ body {
background-image: url("../../../images/logo-training.png");
}*/
+/*********************************************
+ * Add the ability to split into two columns
+ *********************************************/
+
+.reveal .west {
+ position: fixed;
+ left: 5%;
+}
+
+.reveal .east {
+ position: fixed;
+ right: 5%;
+}
+
+