= Asciidoc Slides: Getting started
:author: Nikolai Alex
:revnumber: 0.1.0
:revdate: 2020-06-01
:toc:
:docinfodir: dist/docinfo
:stylesdir: dist/css
:imagesdir: images
:docinfo: shared
:source-highlighter: rouge
:stylesheet!:
:linkcss:
:nofooter:

== Getting started
I was looking for an easy way to create HTML slides from Asciidoc. Since I was not happy with RevealJS, I came up with this simple framework.

== Features
* Focus on the content using Asciidoc.
* Use web standard to create a simple and lightweight implementation.
* Give user full control over stylings.

== A slide
A slide is simply a level 2 section in Asciidoc.

[source,asciidoc]
----
== Your slide title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua.
----

[.notes]
****
A slide is simply a level 2 section.
****

== A slide with a background image
[.background]
[link=https://unsplash.com/photos/jFCViYFYcus]
image::forest.jpg[]

[.notes]
Photo by Lukasz Szmigiel on Unsplash

== Awesome bullet points
* Milk
* Eggs
* Sugar
* Bread
* Cheese

== Put all your knowledge on one slide

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

[.notes]
****
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.
****

== Slides are HTML

So you can do whatever you want.

++++
<iframe height="451" style="width: 100%;" scrolling="no" title="Pure CSS Playing Card No.1 - King of Hearts" src="https://codepen.io/ivorjetski/embed/ExaKmjw?height=451&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/ivorjetski/pen/ExaKmjw'>Pure CSS Playing Card No.1 - King of Hearts</a> by Ben Evans
  (<a href='https://codepen.io/ivorjetski'>@ivorjetski</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
++++

== Themes
Just link your css at the end and override or add styles. Modify the file ``dist/docinfo/docinfo-footer.html`` to add your custom css or just edit the ``dist/css/theme-simple.css``

== Asciidoc
The slides are generated from Asciidoc. Unfourtunalty, I had to modify the HTML output. For that you have to require a ruby class.

[source,shell]
----
$ asciidoctor -r ./dist/lib/asciidoc_slides_converter.rb getting_started.adoc
----

== Speaker notes
Use **N** to switch into presentation mode. You can add notes using the following code.

[source,asciidoc]
----
[.notes]
* Your help text.
* You can use all Asciidoc features for writing notes.
----

[.notes]
****
These are your notes. Never forget what you want to say.

[source,asciidoc]
----
[.notes]
* Your help text.
* You can use all Asciidoc features for writing notes.
----
****

== Some images
You can also use inline images.

image:forest.jpg[height=400px]
image:forest.jpg[height=400px]

[.notes]
****
Photo by Sebastian Unrau on Unsplash

[source,asciidoc]
----
== Some images
You can also use inline images.

image:forest.jpg[height=400px]
image:forest.jpg[height=400px]
----
****

== A quote

[quote, Benjamin Franklin]
Either write something worth reading or do something worth writing.

== Some code

[source,java]
----
Foo foo = new Foo();
Bar bar = foo.bar();
System.out.println(bar);
----

== Tabular Tables

[options="header"]
|===
| Column A | Column B
| Lorem    | Ipsum
| dolor    | sit
|===

== Fantastic printing
Just print this page. The ''print.css'' should take care of everything.

== Take a Moment
Press **B** or **.** on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

== Fullscreen
Press **F** to enter or leave fullscreen mode.

== Help
Pressing **H** displays the help dialog with all shortcut options.