training-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From cd...@apache.org
Subject [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)
Date Tue, 03 Sep 2019 12:01:13 GMT
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 <christofer.dutz@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%;
+}
+
+


Mime
View raw message