asciidoctor-revealjs 3.1.0 → 4.0.0

data/examples/level-sectnums.adoc

@@ -0,0 +1,24 @@
+// .sections
+// Demonstration of section numbers and their specific reveal.js integration.
+// :include: //div[@class="slides"]
+// :header_footer:
+= Sectnums
+:backend: revealjs
+:sectnums:
+:sectnumlevels: 2
+
+== First level
+
+First content
+
+== Vertical
+
+Vertical slides are using level 2 sections
+
+=== Level 2
+
+==== Level 3 does not have sectnum, sectnumlevels is 2
+
+== Horizontal slide
+
+=== Also supports levels

data/examples/links-preview.adoc

@@ -0,0 +1,32 @@
+// .links-with-preview
+// Demonstration of reveal.js global data-preview-link feature
+// :include: //div[@class="slides"] | //body/*[last()-1]
+// :header_footer:
+= Links With Preview Tests
+:revealjs_previewlinks: True
+:imagesdir: images/
+
+== Set Globally
+
+https://en.wikipedia.org/wiki/February_4[Here's a link]
+
+== Disabled Locally
+
+https://en.wikipedia.org/wiki/February_4[Link One, preview=false]
+
+https://en.wikipedia.org/wiki/February_4[Link Two, preview=0]
+
+https://en.wikipedia.org/wiki/February_4[Link Three, preview=False]
+
+== Image block with a Link
+
+image::70s.jpg[link="https://montrehack.ca/"]
+
+== Image block with a Link Disabled Locally
+
+image::70s.jpg[link="https://montrehack.ca/", link_preview=false]
+
+== Inlined Images
+
+image:70s.jpg[link="https://montrehack.ca/", width=200px]
+image:70s.jpg[link="https://montrehack.ca/", width=200px, link_preview=false]

data/examples/links.adoc

@@ -0,0 +1,39 @@
+// .links
+// Demonstration of reveal.js and AsciiDoc links
+// :include: //div[@class="slides"]
+// :header_footer:
+= Links
+:imagesdir: images/
+
+== Regular
+
+https://en.wikipedia.org/wiki/February_4[Link]
+
+https://en.wikipedia.org/wiki/February_4[In new Window, window="_blank"]
+
+https://en.wikipedia.org/wiki/February_4[In new Window (alternate syntax)^]
+
+
+== With iFrame Preview Overlay
+
+https://en.wikipedia.org/wiki/February_4[Link One, preview=true]
+
+https://en.wikipedia.org/wiki/February_4[Link Two, preview=1]
+
+https://en.wikipedia.org/wiki/February_4[Link Three, preview=True]
+
+
+== Image Block with a Link
+
+image::70s.jpg[link="https://montrehack.ca/", window="_blank"]
+
+
+== Image Block with a Link With iFrame Preview
+
+image::70s.jpg[link="https://montrehack.ca/", link_preview=true]
+
+
+== Inlined Images
+
+image:70s.jpg[link="https://montrehack.ca/", width=200px]
+image:70s.jpg[link="https://montrehack.ca/", width=200px, link_preview=true]

data/examples/release-4.0.adoc

@@ -0,0 +1,195 @@
+= Asciidoctor reveal.js 4.0.0
+:source-highlighter: highlight.js
+:highlightjs-languages: x86asm,asciidoc
+:icons: font
+:imagesdir: images/
+// reveal.js config
+:customcss: release-4.0.css
+:revealjs_hash: true
+:revealjs_width: 1080
+
+== Supports all of reveal.js 3.9.2 features
+
+
+[background-video="synthwave.mp4",background-opacity=0.7]
+=== Background videos
+// Video not hosted in git due to size
+// Available here: https://pixabay.com/videos/synthwave-retro-sunset-retrowave-29225/
+// Pixabay Free License (No Attribution Required)
+
+=== Automatic Source Code Highlighting!
+
+icon:exclamation-circle[] Including step-by-step line highlights
+
+[.columns.is-vcentered]
+=== Assembly from a Compiler
+
+[.column]
+[source,x86asm,highlight="3..6|7..9|10|11,12"]
+----
+main        proc near
+var_10      = dword ptr -10h
+            push ebp
+            mov ebp, esp
+            and esp, 0FFFFFFF0h
+            sub esp, 10h
+            mov eax, offset aHelloWorld
+            mov [esp+10h+var_10], eax
+            call _printf
+            mov eax, 0
+            leave
+            retn
+main        endp
+----
+
+[.column.is-one-third]
+--
+* Backed by Highlight.js
+* Many languages supported
+* Ability to focus on specific lines
+--
+
+=== With very simple source!
+
+[source,asciidoc]
+....
+[source,x86asm,highlight="3..6|7..9|10|11,12"]
+----
+main        proc near
+var_10      = dword ptr -10h
+            push ebp
+            mov ebp, esp
+            and esp, 0FFFFFFF0h
+            sub esp, 10h
+            mov eax, offset aHelloWorld
+            mov [esp+10h+var_10], eax
+            call _printf
+            mov eax, 0
+            leave
+            retn
+main        endp
+----
+....
+
+=== And More!
+
+* Background images (and gif!)
+* Speaker notes
+* Embedded videos
+* Embedded and interactive iframes
+* etc.
+
+
+[.columns.is-vcentered]
+== Plus AsciiDoc Features
+
+[.column]
+--
+image::asciidoctor-logo.svg[]
+
+Powered by Asciidoctor
+--
+
+[.column]
+.Available toolchains
+* Ruby / Bundler
+* JavaScript / NPM
+* Standalone executables
+* icon:exclamation-circle[] JVM / Maven
+
+[.columns.is-vcentered]
+=== Easy Grid Layout
+
+[.column]
+* Easy
+
+[.column]
+* Flexible
+
+[.column]
+Grid Layout
+
+[.column.is-one-third]
+--
+[source,asciidoc]
+.Source
+....
+[.columns]
+=== Easy Grid Layout
+
+[.column]
+* Easy
+
+[.column]
+* Flexible
+
+[.column]
+Grid Layout
+
+[.column.is-one-third]
+[source,asciidoc]
+[...]
+....
+--
+
+[.columns.is-vcentered]
+=== FontAwesome Integration
+
+[.column.is-one-third]
+--
+Expressive icon:palette[] Icons icon:icons[]
+at your Fingertips icon:hand-holding-heart[]
+
+[.red]
+icon:heart[size=3x]
+--
+
+[.column]
+--
+[source,asciidoc]
+.Source
+....
+Expressive icon:palette[]
+Icons icon:icons[]
+at your Fingertips
+icon:hand-holding-heart[]
+
+[.red]
+icon:heart[size=3x]
+....
+--
+
+[.columns]
+=== Includes
+
+[.column]
+You can include content from other files.
+Including source code!
+
+[.column]
+--
+[source,asciidoc]
+.Example Source
+....
+[source,python]
+----
+\include::demo.py[]
+----
+....
+--
+
+=== For Great Technical Presentations!
+
+
+[.important.white.background,transition="zoom"]
+== Can you do that PowerPoint?
+
+
+[transition=fade,transition-speed=slow]
+== Learn More!
+
+* https://github.com/asciidoctor/asciidoctor-reveal.js/[Asciidoctor reveal.js]
+* https://revealjs.com[reveal.js]
+* https://github.com/asciidoctor/asciidoctor/[Asciidoctor]
+* https://asciidoctor.org/docs/what-is-asciidoc/[What is AsciiDoc?]
+* https://github.com/asciidoctor/asciidoctor-reveal.js/raw/master/examples/release-4.0.adoc[This slide deck's AsciiDoc source]

data/examples/release-4.0.css

@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
+section.white.background {
+  background-color: white;
+}
+
+section.important h2 {
+    font-family: 'Permanent Marker', cursive;
+    text-transform: none;
+    font-size: 3em;
+}
+
+div.red > p > span.icon {
+  color: red;
+}
+
+/* theme overrides */
+.reveal pre code {
+  max-height: none;
+}
+.reveal section img {
+  background: none;
+  border: none;
+}

data/examples/source-coderay.adoc

@@ -31,3 +31,18 @@ to your `Gemfile` and re-run:
 
 puts 'Hello, world!'
 ----
+
+== Highlight Lines
+
+// TODO linenums CSS negatively affects the output
+// TODO highlighting is invisible
+
+[source,ruby,highlight=2..5]
+----
+ORDERED_LIST_KEYWORDS = {
+  'loweralpha' => 'a',
+  'lowerroman' => 'i',
+  'upperalpha' => 'A',
+  'upperroman' => 'I',
+}
+----

data/examples/source-emphasis.adoc

@@ -0,0 +1,128 @@
+// .source-emphasis
+// Demonstration of highlighting portions of source
+// :include: //div[@class="slides"]
+// :header_footer:
+= Source Code Emphasis
+:icons: font
+:source-highlighter: highlightjs
+:highlightjs-languages: x86asm
+:revealjs_hash: yes
+:revealjs_height: 1080
+:revealjs_width: 1920
+
+== Using Asciidoctor features
+
+=== Bold markers and `subs="+quotes,+macros"` attribute
+
+[source,java,subs="+quotes,+macros"]
+----
+protected void configure(HttpSecurity http) throws Exception {
+    http
+        .authorizeRequests()
+            **.antMatchers("/resources/$$**$$").permitAll()**
+            .anyRequest().authenticated()
+            .and()
+        .formLogin()
+            .loginPage("/login")
+            .permitAll();
+----
+
+=== Callouts
+
+[source, rust]
+----
+fn main() {
+    println!("Hello World!"); // <1>
+}
+----
+<1> `println!` is a macro.
+
+
+== Using reveal.js <mark> tags
+
+Needs `subs="none"` attribute
+
+[source, rust, subs="none"]
+----
+fn main() {
+    <mark>println!</mark>("Hello marked World!");
+}
+----
+
+== Using reveal.js data-line-numbers
+
+// This example was taken from Reveal.js README
+// https://github.com/hakimel/reveal.js/blob/master/README.md#line-numbers--highlights
+
+Highlights are using Asciidoctor syntax not reveal.js.
+Ex: `4..8,11` instead of `4-8,11`.
+
+[source, javascript, highlight="4..8,11"]
+----
+import React, { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+----
+
+== Step by Step with data-line-numbers
+
+// Requires reveal.js 3.9.0+
+Highlights are using Asciidoctor syntax not reveal.js.
+Ex: `1|2..3|4,6..10` instead of `1|2-3|4,6-10`.
+
+[source, javascript, highlight="1|2..3|4,6..10"]
+----
+import React, { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+----
+
+[.columns]
+== ASM from Compiler
+
+[source.column,x86asm,highlight="3..6|7..9|10|11,12"]
+----
+main        proc near
+var_10      = dword ptr -10h
+            push ebp                      <1>
+            mov ebp, esp
+            and esp, 0FFFFFFF0h
+            sub esp, 10h
+            mov eax, offset aHelloWorld   <2>
+            mov [esp+10h+var_10], eax
+            call _printf
+            mov eax, 0                    <3>
+            leave                         <4>
+            retn
+main        endp
+----
+
+[.column]
+--
+<1> Function prologue
+<2> Preparing arguments and calling `printf`
+<3> Clean-up registers
+<4> Function epilogue
+--