/presentation

Presentation: Take the best from all three worlds: Asciidoc, Revealjs and Github Page

Primary LanguageHTML

Presentation with Asciidoc + Reveajs on Github Page

Build Status (Travis CI) revealjs npm try revealjs editor

Goal

  • version control your presentation

  • easy to create presentation

  • take the best of all: Asciidoc and Revealjs, and github

Steps

Clone this repo

$ git clone git@github.com:p4ali/presentation.git
$ cd presentation
$ npm install
📎
 Alternately, you can download the recent release of revealjs.js and save it under node_modules. The current version in this repo is 3.6.0

Create .adoc as presentation

Many editor support Asciidoc well:

Please refer to both asciidoctor-revealjs and Asciidoc for syntax.

Save the file as presentation.adoc (or any name you want under any folder)

Convert .adoc to .html with asciidoctor-revealjs plugin

$ ./asciidoctor-revealjs.js presentation.adoc
$ open presentation.html

The presentation.html is the final presentation to show with browser.

💡
 The asciidoctor-revealjs.js will respect the path of .adoc file, and will genereate the .html file in the same path. This allow you to use subfolder for different presentation.
💡
 For more detail regarding run Revealjs locally, please refer to https://github.com/hakimel/reveal.js, secton Basic setup or Full setup.

Publish presentation to Github

Go to Github Page, and follow the 5 steps to start.

By default, the presentaiton URL is pointing to the index.html. In reality, you may create a README.adoc, and add link to specific .html (Like Steve recommended). For example, here is the link to the presentation

💡
 You can read the presentation url from Repository Settings > Github Pages section. If not , select your source branch and save. After that, you should get presentation url.
🔥
 Github (or CDN) may cache your presentation for a while, in which case, if you update your presentations in a row in a short time, it may not show the latest presentation. Wait few minutes, try again, it should work.

Best Practice?

I am lazy and prefer to host all presentations in subfolders of same repo unless it grows too big. Please refer to another_present for detail.

diagrams

ditaa:

                   +-------------+
                   | asciidoctor |-------+
                   |  diagram    |       |
                   +-------------+       | png out
                       ^                 |
                       | ditaa in        |
                       |                 v
 +--------+   +--------+----+    /---------------\
 |        | --+ asciidoctor +--> |               |
 |  Text  |   +-------------+    |Beatiful output|
 |Document|   |   !magic!   |    |               |
 |     {d}|   |             |    |               |
 +---+----+   +-------------+    \---------------/
     :                                   ^
     |          Lots of work             |
     +-----------------------------------+

graphviz

graph ethane {
     C_0 -- H_0 [type=s];
     C_0 -- H_1 [type=s];
     C_0 -- H_2 [type=s];
     C_0 -- C_1 [type=s];
     C_1 -- H_3 [type=s];
     C_1 -- H_4 [type=s];
     C_1 -- H_5 [type=s];
}

plantuml

class BlockProcessor
class DiagramBlock
class DitaaBlock
class PlantUmlBlock

BlockProcessor <|-- DiagramBlock
DiagramBlock <|-- DitaaBlock
DiagramBlock <|-- PlantUmlBlock

Reference