asciidoctor-revealjs 4.0.1 → 4.1.0.rc2

data/examples/issue-grid-layout-images.adoc

@@ -0,0 +1,25 @@
+// .issue-grid-layout-images
+// Images would get shrunk before we added a flex-basis auto exception when columns wrap
+// :include: //div[@class="slides"]
+// :header_footer:
+= Grid Wrapping Tests
+:imagesdir: images/
+// reveal.js config
+:revealjs_hash: true
+:revealjs_center: false
+:revealjs_height: 1080
+:revealjs_width: 1920
+
+[.columns.wrap]
+== Should Wrap But Doesn't
+
+[.column]
+* Things here should wrap
+* But instead images shrink
+* But now it's good
+
+[.column]
+image::cover.jpg[width=900px]
+
+[.column]
+image::70s.jpg[width=900px]

data/examples/mathjax-cdn.adoc

@@ -0,0 +1,21 @@
+// .mathjax-cdn
+// Demonstration of the Mathjax :mathjaxdir: attribute in action
+// :include: //head/link | //div[@class="slides"]
+// :header_footer:
+= MathJax
+:stem:
+:revealjsdir: https://cdn.jsdelivr.net/npm/reveal.js@3.9.2
+:mathjaxdir: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/
+
+== Math Equation
+
+Using standard latexmath:[\LaTeX] syntax:
+
+[stem]
+++++
+\sqrt{37} = \sqrt{\frac{73^2-1}{12^2}} \approx \frac{73}{12} (1 - \frac{1}{2\cdot73^2})
+++++
+
+Another one:
+
+stem:[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}]

data/examples/mathjax.adoc

@@ -0,0 +1,20 @@
+// .mathjax
+// Demonstration of our Mathjax integration
+// :include: //div[@class="slides"]
+// :header_footer:
+= MathJax
+:stem:
+:revealjsdir: https://cdn.jsdelivr.net/npm/reveal.js@3.9.2
+
+== Math Equation
+
+Using standard latexmath:[\LaTeX] syntax:
+
+[stem]
+++++
+\sqrt{37} = \sqrt{\frac{73^2-1}{12^2}} \approx \frac{73}{12} (1 - \frac{1}{2\cdot73^2})
+++++
+
+Another one:
+
+stem:[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}]

data/examples/release-4.0.adoc

@@ -1,4 +1,4 @@
-= Asciidoctor reveal.js 4.0.0
+= Asciidoctor reveal.js 4.0
 :source-highlighter: highlight.js
 :highlightjs-languages: x86asm,asciidoc
 :icons: font
@@ -11,11 +11,8 @@
 == Supports all of reveal.js 3.9.2 features
 
 
-[background-video="synthwave.mp4",background-opacity=0.7]
+[background-video="https://github.com/obilodeau/asciidoctor-assets/raw/master/videos/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!
 

data/examples/release-4.1.adoc

@@ -0,0 +1,133 @@
+= Asciidoctor reveal.js 4.1
+:source-highlighter: highlight.js
+:highlightjs-theme: a11y-dark.css
+:highlightjs-languages: asciidoc
+:icons: font
+:imagesdir: images/
+// reveal.js config
+:customcss: release-4.1.css
+:revealjs_hash: true
+:revealjs_width: 1080
+
+== New Features icon:rocket[set=fas]
+
+== Steps
+
+You can use steps to [.highlight-strong.step]#highlight# or [.highlight-strong.step]#incrementally reveal individual elements# on a slide!
+
+[%notitle]
+=== Cats!
+
+[.grow,step=1]
+Here's some cute cats!
+
+image:cute-cat-1.jpg[cute-cat-laying,step=4]
+image:cute-cat-2.jpg[cute-cat-yawning,step=2]
+image:cute-cat-3.jpg[cute-cat-melting,step=3]
+
+[%notitle]
+=== List
+
+You can declare the `%step` option on lists...
+
+[%step]
+* α
+* β
+* γ
+
+[%notitle]
+=== Blocks
+
+...or on virtually any block like code blocks, tables, images or paragraphs
+
+[%step]
+--
+[.highlight-blue%step]
+blue
+
+white
+
+[.highlight-red%step]
+red
+--
+
+== Footnotesfootnote:[Just a title, nothing more.]
+
+[%notitle]
+=== Press Release
+
+The hail-and-rainbow protocol can be initiated at three levels:
+
+. doublefootnote:[The double hail-and-rainbow level makes my toes tingle.]
+. tertiary
+. supermassive
+
+A bold statement!footnote:disclaimer[Opinions are my own.]
+
+Another outrageous statement.footnote:disclaimer[]
+
+== Data attributes
+
+You can declare custom data attributes on _virtually any blocks_ using AsciiDoc attributes prefixed by `data-`. +
+Here's an example:
+
+[source, asciidoc]
+----
+== Atom podium
+
+[data-medal=gold]
+. Protons
+
+[data-medal=silver]
+. Electrons
+
+[data-medal=bronze]
+. Neutrons
+----
+
+== Font Awesome icon:font-awesome-flag[set=fab]
+
+* Version 5.13.0
+* Support icon sets (using `set` attribute)
+** *Brand:* icon:firefox[set=fab]
+** *Solid*: icon:address-book[set=fas]
+** *Regular*: icon:address-book[set=far]
+* `font-awesome-version` attribute
+
+== MathJax
+
+* Version 2.7.6
+* `mathjaxdir` attributefootnote:[Configure MathJax location.]
+
+[.text-left]
+== Built-in text alignments
+
+[%notitle]
+=== Text Alignments
+
+[.text-left]
+--
+[.text-align-attr]`[.text-left]` +
+Let's go to the left!
+--
+
+[.text-center]
+--
+[.text-align-attr]`[.text-center]` +
+Right in the middle
+--
+
+[.text-right]
+--
+[.text-align-attr]`[.text-right]` +
+Now to the right!
+--
+
+[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.1.adoc[This slide deck's AsciiDoc source]

data/examples/release-4.1.css

@@ -0,0 +1,50 @@
+.reveal .slides section .fragment.highlight-strong{
+  opacity: 1;
+  visibility: inherit;
+  background-image: linear-gradient(transparent 7px, #0352a7 0);
+  background-size: 0;
+  background-repeat: no-repeat;
+  display: inline;
+  -webkit-transition: 0.5s ease;
+  transition: 0.5s ease;
+}
+
+.reveal .slides section .fragment.highlight-strong.visible {
+  background-size: 100%;
+}
+
+.reveal .slides section :not(pre) > code {
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: #8787877a;
+  border-radius: 6px;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+}
+
+.reveal .slides .paragraph + .ulist {
+  padding-top: 2rem;
+}
+
+.reveal .slides .paragraph + .openblock {
+  padding-top: 2rem;
+}
+
+.reveal .slides .paragraph + .listingblock {
+  padding-top: 2rem;
+}
+
+.footnotes {
+  border-top: 1px solid #fff3;
+  color: #c3c3c3;
+}
+
+.reveal .slides section :not(pre) > code.text-align-attr {
+  padding: 0;
+  margin: 0;
+  font-size: 1.5rem;
+  background-color: transparent;
+  border-radius: 6px;
+  color: #f5ab35;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+}

data/examples/revealjs-custom-theme.adoc

@@ -0,0 +1,10 @@
+// .revealjs-custom-theme
+// :include: //head//link[@rel="stylesheet"]
+// :header_footer:
+= Use a Custom reveal.js Theme
+// please note that in this specific case it would be better to use :revealjs_theme: beige
+:revealjs_customtheme: reveal.js/css/theme/beige.css
+
+== Beige is the New Black
+
+Some text.

data/examples/steps.adoc

@@ -0,0 +1,87 @@
+// .steps
+// :include: //div[@class="slides"]
+// :header_footer:
+= Steps
+:revealjs_hash: true
+:revealjs_autoSlide: 2000
+
+== Unordered List
+
+[%step]
+* Edgar Allan Poe
+* Sheri S. Tepper
+* Bill Bryson
+
+== Ordered List
+
+[%step]
+. Protons
+. Electrons
+. Neutrons
+
+== Paragraphs With Style
+
+[.highlight-blue%step]
+blue
+
+[%step]
+white
+
+[.highlight-red%step]
+red
+
+== Admonition Order
+
+[TIP,step=3]
+Finally, a pro tip...
+
+[WARNING,step=1]
+First, watch out for...
+
+[IMPORTANT.fade-up,step=2]
+Second, don't forget...
+
+== Inline Images
+:imagesdir: images
+
+image:cute-cat-1.jpg[cute-cat-laying,step=3]
+image:cute-cat-2.jpg[cute-cat-yawning,step=1]
+image:cute-cat-3.jpg[cute-cat-melting,step=2]
+
+== Image Blocks
+
+image::cute-cat-1.jpg[cute-cat-laying,height="100px",step=]
+
+image::cute-cat-2.jpg[cute-cat-yawning,height="100px",step=]
+
+image::cute-cat-3.jpg[cute-cat-melting,height="100px",step=]
+
+== Lists
+
+[%step]
+--
+.First
+* a
+* b
+* c
+--
+
+[%step]
+--
+.Second
+[%step]
+* d
+* e
+* f
+--
+
+== Inline Phrases
+
+The [.step.highlight-red]#greatest glory in living# lies not in never falling,
+but in [.step.highlight-red]#rising every time we fall#.
+
+== Inside a List
+
+. [.step]#Protons#
+. [.step]#Electrons#
+. [.step]#Neutrons#

data/examples/text-alignments.adoc

@@ -0,0 +1,44 @@
+= Text Alignments
+
+== Default
+
+This is the default (boring) alignment!
+
+== Center
+
+[.text-center]
+This text is centered.
+
+== Left
+
+[.text-left]
+This text is left-aligned.
+
+== Right
+
+[.text-right]
+This text is right-aligned.
+
+== Justified
+
+[.text-justify]
+This text is justified.
+
+[.text-right]
+== Title is Right-Aligned
+
+Content too!
+
+== Back to Normal!
+
+Content too!
+
+[.text-left]
+== Title is Left-Aligned
+
+Content too!
+
+[.text-center]
+== Title is Centered
+
+Content too!

data/examples/video.adoc

@@ -4,11 +4,15 @@
 // :header_footer:
 = Video tests
 :revealjs_hash: true
+:imagesdir: images/
 
 == YouTube Auto-sized
 
+video::kZH9JtPBq7k[youtube, start=34]
+
+== YouTube Auto-sized Auto-starts
+
 video::kZH9JtPBq7k[youtube, start=34, options=autoplay]
-//video::kZH9JtPBq7k[youtube, start=34, height=600, width=800, options=autoplay]
 
 [%notitle]
 == YouTube Auto-sized notitle
@@ -25,17 +29,26 @@ This video is auto-sized!
 video::https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm[]
 
 [%notitle,background-iframe="https://www.youtube.com/embed/LaApqL4QjH8?rel=0&start=3&enablejsapi=1&autoplay=1&loop=1&controls=0&modestbranding=1"]
-== background
+== background video at URL
 
 [%notitle,background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm",background-video-loop=true,background-video-muted=true]
-== video file, named attributes
+== background video at URL with named attributes
 
 [background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm",options="loop,muted,notitle"]
+== background video at URL with options
+
+// Download this file and put in examples/images/ for this to be visible
+// https://github.com/obilodeau/asciidoctor-assets/blob/master/videos/synthwave.mp4
+[%notitle,background-video="synthwave.mp4",background-video-loop=true,background-video-muted=true]
+== background video file with named attributes
+
+// Download this file and put in examples/images/ for this to be visible
+// https://github.com/obilodeau/asciidoctor-assets/blob/master/videos/synthwave.mp4
 == video file, options
 
+video::synthwave.mp4[options="autoplay,loop"]
+
+
 == vimeo autostart
 
 video::44878206[vimeo, options=autoplay]
-
-// data-autoplay is not supported on vimeo videos
-// upstream: https://github.com/hakimel/reveal.js/issues/388