nimiSlides 🛷 Create beautiful slideshows in Nim 👑

[hugogranstrom]

# nimiSlides 🛷 Create beautiful slideshows in Nim 👑

[nimiSlide](https://github.com/HugoGranstrom/nimiSlides) is a library for 
making presentations about Nim, in Nim. It's a 
[nimib](https://github.com/pietroppeter/nimib) theme which uses 
[Reveal.js](https://revealjs.com/) to make the slideshows. But you don't have 
to write a line of neither HTML nor Javascript to use it, it's all Nim code for 
the user.

Sorry, your browser doesn't support embedded videos 

You can view the presentation from the video yourself 
[here](https://hugogranstrom.com/nimiSlides/showcase.html) and the source code 
can be found 
[here.](https://github.com/HugoGranstrom/nimiSlides/blob/87765a7e358a78a3772bcc755268ea81e1290a69/docs/showcase.nim)

## Features

nimiSlides has support for many of the Reveal's features:

  * Themes
  * Vertical slides
  * [Fragments](https://revealjs.com/fragments/) (equivalent of animations in 
PowerPoint)
  * [Step-by-step animation of code 
blocks](https://revealjs.com/code/#step-by-step-highlights)
  * [Speaker View](https://revealjs.com/speaker-view/)
  * [Math/Latex](https://revealjs.com/math/)
  * Big text
  * And more to come!



We are also developing our own custom components that aren't bundled with 
Reveal:

  * Typewriter, types your text one character at a time like if someone was 
typing it in realtime.
  * And of course all standard command from nimib:
    * `nbCode`: not only shows the code but runs it and captures its output. 
This makes sure the code you are showing actually compiles!
    * `nbImage`: show an image
    * `nbText`: write markdown and we handle the conversion to HTML for you.
    * `nbPython`: works similarly to `nbCode` but it uses `nimpy` to run Python 
code blocks.
  * And if you want to add a feature yourself you can use these nimib functions:
    * `nbCodeToJs`: write Nim code and we compile it to Javascript for you and 
inline it in the HTML.
    * `nbRawOutput`: inline raw HTML.



## How it works

The imports and setup you need:
    
    
    import nimib
    import nimiSlides
    
    nbInit(theme = revealTheme)
    
    
    Run

The basic building block of a slideshow is the `slide` template. If you want an 
ordinary horizontal (↔️) slide, use a single level of `slide:` like this:
    
    
    slide:
      nbText: "This is the first slide"
    
    slide:
      nbText: "This is to the right of the last slide"
    
    
    Run

If you want to use slide vertical (↕️) slides, you nest it two levels instead:
    
    
    slide:
      slide:
        nbText: "This is at the top"
      
      slide:
        nbText: "And this is below it"
    
    # You can of course mix them:
    slide:
      nbText: "And this is to the right of them"
    
    
    Run

## Code animations

Reveal.js has really pretty [step-by-step animation of code 
blocks](https://revealjs.com/code/#step-by-step-highlights) which can be used 
in nimiSlides like this:
    
    
    slide:
      animateCode(1, 3..4, 5):
        echo "First this!"
        echo "But not this!"
        echo "Then..."
        echo "...these"
        echo "And last this!"
    
    
    Run

The arguments to `animateCode` are the order to highlight the different lines 
of code. In this case the first line will be highlighted first. Then the third 
& fourth together and lastly the fifth line.

## Animations (fragments)

If you want to reveal different parts of your slide when you step forward, for 
example revealing a list item at a time, then you should checkout fragments. If 
you simply want to fade-in the different parts you can use `fragmentFadeIn` 
like this:
    
    
    slide:
      fragmentFadeIn:
        nbText: "Show this first"
      fragmentFadeIn:
        nbText: "Show this afterwards"
    
    
    Run

You can also use the more fundamental `fragment` which accepts [any of these 
animations](https://github.com/HugoGranstrom/nimiSlides#list-of-fragment-animations):
    
    
    slide:
      fragment(highlightBlue):
        nbText: "This will be blue"
    
    
    Run

If you want to apply multiple animations **at the same time** , you can pass 
them in all at once:
    
    
    slide:
      fragment(highlightBlue, grows):
        nbText: "This will be blue AND grow"
    
    
    Run

If you want to apply multiple animations **after each other** , you must use 
the seq-overload:
    
    
    slide:
      fragment(@[highlightBlue], @[grows]):
        nbText: "This will be blue and THEN grow"
    
    
    Run

Each seq will be executed one at a time, so first it will turn blue and on the 
next step it will grow.

Fragments can also be played _after_ others has been performed:
    
    
    slide:
      fragmentEnd(semiFadeOut):
        fragmentFadeIn:
          nbText: "Show this first"
        fragmentFadeIn:
          nbText: "Show this afterwards"
    
    
    Run

After the two fadeIn-animations has been shown, both of them will semiFadeOut.

There are more features mentioned in the README and used in the showcase at the 
top. Please try it out and let me know if you have any questions :D