Merge pull request #11 from HugoGranstrom/update-0.2

Update 0.2

README.md

@@ -23,10 +23,13 @@ lots of flexibility so you can tailor it to your liking.
   - [Big Text](#big-text)
   - [Hiding code output](#hiding-code-output)
   - [Themes](#themes)
-  - [Auto-animation](#automatic-animation)
+  - [Slide Options](#slide-options)
+    - [Auto-animation](#automatic-animation)
+    - [Backgrounds](#backgrounds)
   - [Typewriter](#typewriter)
   - [Speaker View](#speaker-view)
   - [Local Reveal.js installation](#use-local-revealjs-installation)
+  - [Misc. Config](#misc-configuration)
 - [Roadmap](#roadmap-🗺)
 
 # API
@@ -173,6 +176,22 @@ slide:
 ```
 Here the three strings will be reveal one after another when a key is pressed.
 
+If you want nested lists or more control over then list you can use `orderedList`, `unorderedList` and `listItem`:
+```nim
+orderedList:
+  listItem:
+    nbText: "First"
+  listItem:
+    nbText: "Second"
+  unorderedList:
+    listItem:
+      nbText: "You can nest them as well"
+    orderedList:
+      listItem:
+        nbText: "And mix ordered and unordered lists"
+```
+`listItem` accepts as argument `FragmentAnimation` or `seq[FragmentAnimation]`. By default it uses `fadeInThenSemiOut`.
+
 ## Big Text
 If you have a short snippet of text you want to show as big as possible, use `bigText` instead of `nbText`:
 ```nim
@@ -200,21 +219,51 @@ setSlidesTheme(White)
 Available themes are: `Black`, `Beige`, `Blood`, `League`, `Moon`, `Night`, `Serif`, `Simple`, `Sky`, `Solarized`, `White`.
 The same site as above can be view with `White` theme here: https://hugogranstrom.com/nimiSlides/index_white.html
 
-## Automatic animation
+## Slide options
+There are some settings that has to be assigned to a slide to work, like a background image. Below are the available settings.
+
+### Automatic animation
 Reveal.js has support for [auto-animation](https://revealjs.com/auto-animate/) which when possible, smoothly animates the transition between slides. Here is an example where the second list element will be smoothly added after the first one:
 ```nim
 slide:
-  slide(autoAnimate=true):
+  slide(slideOptions(autoAnimate=true)):
     nbText: """
 - One element
 """
-  slide(autoAnimate=true):
+  slide(slideOptions(autoAnimate=true)):
     nbText: """
 - One element
-- Two elements    
+- Two elements
 """
 ```
 
+### Backgrounds
+There are multiple [background types](https://revealjs.com/backgrounds/) available:
+- A single color:
+```nim
+slide:
+  slide(slideOptions(colorBackground="#f1b434")):
+    nbText: "Yellow background"
+```
+- Image background:
+```nim
+slide:
+  slide(slideOptions(imageBackground="path/to/image/or/url")):
+    discard
+```
+- Video background:
+```nim
+slide:
+  slide(slideOptions(videoBackground="path/to/video/or/url")):
+    discard
+```
+- Iframe background:
+```nim
+slide:
+  slide(slideOptions(iframeBackground="url/to/website", iframeInteractive=true)):
+    discard
+```
+
 ## Typewriter
 Do you want the effect of someone writing your text letter by letter? Then `typewriter` is what you are looking for!
 ```nim
@@ -255,6 +304,12 @@ Then in your presentation `.nim` file add this line:
 nb.useLocalReveal("revealjsfolder")
 ```
 
+## Misc. Configuration
+- `useScrollWheel()`, this enables stepping forward in the presentation using the scroll-wheel.
+- `showSlideNumber()`, this enables the current slide number being shown in the corner.
+- `footer(text: string, fontSize=16, opacity=0.6, rawHtml=false)`, this will create a footer at the bottom of every slide. By default the text is treated as markdown, but if `rawHtml=true` it will inline the text as raw HTML.
+- `cornerImage(image: string, corner: Corner, size: int = 100)` allows you to place an image in the corners: `UpperLeft, UpperRight, LowerLeft, LowerRight`.
+
 # Roadmap 🗺
 - [X] Make available `fragments` (https://revealjs.com/fragments/)
   - [x] Make it work with default options
@@ -269,7 +324,7 @@ nb.useLocalReveal("revealjsfolder")
 - [X] Presenter mode note (https://revealjs.com/speaker-view/)
 - [ ] Auto-slide (https://revealjs.com/auto-slide/)
 - [x] Fit text (https://revealjs.com/layout/#fit-text)
-- [ ] Backgrounds
+- [x] Backgrounds
 - [ ] Transitions (https://revealjs.com/transitions/)
 - [X] Automatic animations
 - [X] Typewriter effect

changelog.md

@@ -0,0 +1,30 @@
+# Changelog
+
+## v0.2
+- Update to use nimib v0.3.1.
+- `slide` now accepts a `SlideOptions` created through `slideOptions` proc instead of a bool. It has the following fields:
+  - `autoAnimate` - same as previously, it tries to automatically animate the transition of slides.
+  - `colorBackground` - set the background color of the slide.
+  - `imageBackground` - set the background to an image.
+  - `videoBackground` - set the background to a video file (not Youtube, use iframe for it)
+  - `iframeBackground` - set the background to an iframe of a website (fullscreen).
+  - `iframeInteractive` - make the iframe interactive.
+- Add `showSlideNumber` template to enable showing the current slide number.
+- Add `useScrollWheel` template to enable stepping through the slides with the scroll wheel.
+- `columns` template to create equally wide columns:
+```nim
+slide:
+  columns:
+    column:
+      nbText: "Left column"
+    column:
+      nbText: "Right column"
+```
+- `footer(text: string, fontSize=20, opacity=0.6, rawHtml=false)` template to a footer to every slide. The input is a string with markdown, unless the argument `rawHtml=true` in which case it is treated as raw HTML.
+  - The footer will be shown on all slides except those with image-, video- or iframe-backgrounds.
+- Support for making lists that incrementally reveal the list items are supported using the templates `orderedList`, `unorderedList` and `listItem`.
+- `addStyle` allows you to add CSS to the document.
+- `cornerImage(image: string, corner: Corner, size: int = 100)` allows you to place an image in the corners: `UpperLeft, UpperRight, LowerLeft, LowerRight`.
+- Experimental features - the API for these are not yet stable and might change in the future:
+  - `fragmentThen` - Allows the construction of fragments like `growThenShrink` by `fragmentThen(grows, shrinks)`. The second animations happens at the same time as the next animation, reducing the number of clicks needed.
+  - `align` template to simply align its content like this: `align("left"):`

docs/fragments.html

@@ -9,12 +9,12 @@
   <body>
   <div class="reveal">
     <div class="slides">
-      <section>
+      <section data-nimib-slide-number="1" >
       <h1>Fragments</h1>
 <p>This slideshow is a showcase of the fragments capabilities of nimiSlides. For the source code, look <a href="https://github.com/HugoGranstrom/nimiSlides/blob/main/docs/fragments.nim">here</a>.</p>
       </section>
-      <section>
-      <section>
+      <section data-nimib-slide-number="2" >
+      <section data-nimib-slide-number="3" >
       <h3>The basic animation is <code>fadeIn</code>:</h3>
       <div class="fragment fade-in" data-fragment-index="0" data-fragment-index-nimib="0"> 
 
@@ -57,7 +57,7 @@ <h3>The basic animation is <code>fadeIn</code>:</h3>
 </div>
 
       </section>
-      <section>
+      <section data-nimib-slide-number="4" >
       <h3>Nesting of fragments</h3>
       <div class="fragment fade-in" data-fragment-index="11" data-fragment-index-nimib="11"> 
 
@@ -76,7 +76,7 @@ <h3>Nesting of fragments</h3>
       </div>
 
       </section>
-      <section>
+      <section data-nimib-slide-number="5" >
       <h3>Ending animations</h3>
       <div class="fragment semi-fade-out" data-fragment-index="17" data-fragment-index-nimib="17"> 
 
@@ -100,30 +100,39 @@ <h3>Ending animations</h3>
 
       </section>
       </section>
-      <section>
+      <section data-nimib-slide-number="6" >
       <h3>Let's make some animations to showcase code blocks one after another:</h3>
+      <div class="fragment semi-fade-out" data-fragment-index="19" data-fragment-index-nimib="19"> 
+
       <div class="fragment fade-in" data-fragment-index="18" data-fragment-index-nimib="18"> 
-<div class="fragment grow" data-fragment-index="19" data-fragment-index-nimib="19"> 
-<div class="fragment shrink semi-fade-out" data-fragment-index="20" data-fragment-index-nimib="20"> 
+
+      <pre style="width: 100%"><code class="nim hljs" data-noescape data-line-numbers><span class="hljs-keyword">let</span> bla = <span class="hljs-string">&quot;This will fadeIn and then semiFadeOut at the same time as the next block appears&quot;</span></code></pre>
+      </div>
+
+      </div>
+
+      <div class="fragment fade-in" data-fragment-index="19" data-fragment-index-nimib="19"> 
+<div class="fragment grow" data-fragment-index="20" data-fragment-index-nimib="20"> 
+<div class="fragment shrink semi-fade-out" data-fragment-index="21" data-fragment-index-nimib="21"> 
 
       <pre style="width: 100%"><code class="nim hljs" data-noescape data-line-numbers><span class="hljs-keyword">let</span> s = <span class="hljs-string">&quot;&quot;&quot;This code block will fadeIn,
               grows and then shrink and semiFadeOut!&quot;&quot;&quot;</span></code></pre>
       </div>
 </div>
 </div>
 
-      <div class="fragment fade-in" data-fragment-index="21" data-fragment-index-nimib="21"> 
-<div class="fragment grow" data-fragment-index="22" data-fragment-index-nimib="22"> 
-<div class="fragment shrink semi-fade-out" data-fragment-index="23" data-fragment-index-nimib="23"> 
+      <div class="fragment fade-in" data-fragment-index="22" data-fragment-index-nimib="22"> 
+<div class="fragment grow" data-fragment-index="23" data-fragment-index-nimib="23"> 
+<div class="fragment shrink semi-fade-out" data-fragment-index="24" data-fragment-index-nimib="24"> 
 
       <pre style="width: 100%"><code class="nim hljs" data-noescape data-line-numbers><span class="hljs-keyword">let</span> t = <span class="hljs-string">&quot;This code block will behave the same!&quot;</span></code></pre>
       </div>
 </div>
 </div>
 
-      <div class="fragment fade-in" data-fragment-index="24" data-fragment-index-nimib="24"> 
-<div class="fragment grow" data-fragment-index="25" data-fragment-index-nimib="25"> 
-<div class="fragment shrink semi-fade-out" data-fragment-index="26" data-fragment-index-nimib="26"> 
+      <div class="fragment fade-in" data-fragment-index="25" data-fragment-index-nimib="25"> 
+<div class="fragment grow" data-fragment-index="26" data-fragment-index-nimib="26"> 
+<div class="fragment shrink semi-fade-out" data-fragment-index="27" data-fragment-index-nimib="27"> 
 
       <pre style="width: 100%"><code class="nim hljs" data-noescape data-line-numbers><span class="hljs-keyword">proc</span> hello(world: <span class="hljs-built_in">string</span>) =
   <span class="hljs-keyword">echo</span> world
@@ -134,34 +143,34 @@ <h3>Let's make some animations to showcase code blocks one after another:</h3>
 </div>
 
       </section>
-      <section>
+      <section data-nimib-slide-number="7" >
       <p>Let's pass the green down the line!</p>
-      <div class="fragment highlight-current-green" data-fragment-index="27" data-fragment-index-nimib="27"> 
+      <div class="fragment highlight-current-green" data-fragment-index="28" data-fragment-index-nimib="28"> 
 
       <p>0</p>
       </div>
 
-      <div class="fragment highlight-current-green" data-fragment-index="28" data-fragment-index-nimib="28"> 
+      <div class="fragment highlight-current-green" data-fragment-index="29" data-fragment-index-nimib="29"> 
 
       <p>1</p>
       </div>
 
-      <div class="fragment highlight-current-green" data-fragment-index="29" data-fragment-index-nimib="29"> 
+      <div class="fragment highlight-current-green" data-fragment-index="30" data-fragment-index-nimib="30"> 
 
       <p>2</p>
       </div>
 
-      <div class="fragment highlight-current-green" data-fragment-index="30" data-fragment-index-nimib="30"> 
+      <div class="fragment highlight-current-green" data-fragment-index="31" data-fragment-index-nimib="31"> 
 
       <p>3</p>
       </div>
 
-      <div class="fragment highlight-current-green" data-fragment-index="31" data-fragment-index-nimib="31"> 
+      <div class="fragment highlight-current-green" data-fragment-index="32" data-fragment-index-nimib="32"> 
 
       <p>4</p>
       </div>
 
-      <div class="fragment highlight-current-green" data-fragment-index="32" data-fragment-index-nimib="32"> 
+      <div class="fragment highlight-current-green" data-fragment-index="33" data-fragment-index-nimib="33"> 
 
       <p>5</p>
       </div>

docs/fragments.nim

@@ -52,6 +52,9 @@ slide:
 slide:
   let codeAnimations = [@[fadeIn], @[grows], @[shrinks, semiFadeOut]] # you can save animations for easy reuse
   nbText: "### Let's make some animations to showcase code blocks one after another:"
+  fragmentThen(fadeIn, semiFadeOut):
+    nbCode:
+      let bla = "This will fadeIn and then semiFadeOut at the same time as the next block appears"
   fragment(codeAnimations):
     nbCode:
       let s = """This code block will fadeIn,

docs/index.html

@@ -9,24 +9,24 @@
   <body>
   <div class="reveal">
     <div class="slides">
-      <section>
+      <section data-nimib-slide-number="1" >
       <h2>Welcome to <a href="https://github.com/HugoGranstrom/nimiSlides">nimiSlides</a>!</h2>
 <p>These slides will show you what this theme is capable of ⛄</p>
       </section>
-      <section>
-      <section>
+      <section data-nimib-slide-number="2" >
+      <section data-nimib-slide-number="3" >
       <h2>Hello World Example</h2>
       <pre style="width: 100%"><code class="nim hljs" data-noescape data-line-numbers><span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;Hello World&quot;</span></code></pre><pre style="width: 100%;"><samp class="hljs">Hello World</samp></pre>
       </section>
-      <section>
+      <section data-nimib-slide-number="4" >
       <p>Hello Down here</p>
       </section>
-      <section>
+      <section data-nimib-slide-number="5" >
       <h2>A classic</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </section>
       </section>
-      <section>
+      <section data-nimib-slide-number="6" >
       <h2>Fragments (animations)</h2>
       <div class="fragment fade-in" data-fragment-index="0" data-fragment-index-nimib="0"> 
 
@@ -65,7 +65,7 @@ <h2>Fragments (animations)</h2>
       </div>
 
       </section>
-      <section>
+      <section data-nimib-slide-number="7" >
       <h1>Code example</h1>
       <pre style="width: 100%"><code class="nim hljs" data-noescape data-line-numbers><span class="hljs-keyword">var</span> this: <span class="hljs-built_in">int</span>
 <span class="hljs-keyword">let</span> is_a = <span class="hljs-number">1</span>
@@ -74,8 +74,8 @@ <h1>Code example</h1>
 
 code(this)</code></pre><pre style="width: 100%;"><samp class="hljs">block</samp></pre>
       </section>
-      <section>
-      <section>
+      <section data-nimib-slide-number="8" >
+      <section data-nimib-slide-number="9" >
       <h2>Generating and showing images</h2>
       <pre style="width: 100%"><code class="nim hljs" data-noescape data-line-numbers><span class="hljs-keyword">import</span> ggplotnim, random, sequtils
 randomize(<span class="hljs-number">42</span>)
@@ -86,7 +86,7 @@ <h2>Generating and showing images</h2>
   <span class="hljs-string">&quot;Type&quot;</span> : concat(newSeqWith(<span class="hljs-number">25</span>, <span class="hljs-string">&quot;background&quot;</span>),
                   newSeqWith(<span class="hljs-number">25</span>, <span class="hljs-string">&quot;candidates&quot;</span>)) })</code></pre>
       </section>
-      <section>
+      <section data-nimib-slide-number="10" >
       <pre style="width: 100%"><code class="nim hljs" data-noescape data-line-numbers>ggplot(df, aes(<span class="hljs-string">&quot;Energy&quot;</span>, <span class="hljs-string">&quot;Counts&quot;</span>)) +
   geom_histogram() +
   theme_opaque() +
@@ -97,17 +97,17 @@ <h2>Generating and showing images</h2>
 </figure>
       </section>
       </section>
-      <section>
+      <section data-nimib-slide-number="11" >
       <h2>Math</h2>
 <p>You can typeset math as well (using <code>nb.useLatex</code>):</p>
 <p>$$ e^{\pi i} = -1 $$</p>
       </section>
-      <section>
+      <section data-nimib-slide-number="12" >
       <h2 class="r-fit-text"> <p>This is big!</p> </h2>
       <h2 class="r-fit-text"> <p>This is also big!</p> </h2>
       <p>This is normal text!</p>
       </section>
-      <section>
+      <section data-nimib-slide-number="13" >
       <p>And a final <strong>reveal</strong>: These slides were created just using Nim!</p>
       </section>
     </div>