diff --git a/README.md b/README.md index 271903f..59088bf 100644 --- a/README.md +++ b/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 diff --git a/changelog.md b/changelog.md new file mode 100644 index 0000000..a049dd4 --- /dev/null +++ b/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"):` diff --git a/docs/fragments.html b/docs/fragments.html index 4682d48..994bc0c 100644 --- a/docs/fragments.html +++ b/docs/fragments.html @@ -9,12 +9,12 @@
-
+

Fragments

This slideshow is a showcase of the fragments capabilities of nimiSlides. For the source code, look here.

-
-
+
+

The basic animation is fadeIn:

@@ -57,7 +57,7 @@

The basic animation is fadeIn:

-
+

Nesting of fragments

@@ -76,7 +76,7 @@

Nesting of fragments

-
+

Ending animations

@@ -100,11 +100,20 @@

Ending animations

-
+

Let's make some animations to showcase code blocks one after another:

+
+
-
-
+ + 
let bla = "This will fadeIn and then semiFadeOut at the same time as the next block appears"
+
+ +
+ +
+
+
let s = """This code block will fadeIn,
               grows and then shrink and semiFadeOut!"""
@@ -112,18 +121,18 @@

Let's make some animations to showcase code blocks one after another:

-
-
-
+
+
+
let t = "This code block will behave the same!"
-
-
-
+
+
+
proc hello(world: string) =
   echo world
@@ -134,34 +143,34 @@ 
Let's make some animations to showcase code blocks one after another:
-
+

Let's pass the green down the line!

-
+

0

-
+

1

-
+

2

-
+

3

-
+

4

-
+

5

diff --git a/docs/fragments.nim b/docs/fragments.nim index ad77dc5..af30792 100644 --- a/docs/fragments.nim +++ b/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, diff --git a/docs/images/multi_layer_histogram_0.png b/docs/images/multi_layer_histogram_0.png index aa4ae3b..591197e 100644 Binary files a/docs/images/multi_layer_histogram_0.png and b/docs/images/multi_layer_histogram_0.png differ diff --git a/docs/images/splineComp.png b/docs/images/splineComp.png index c0cce0f..8cacc8a 100644 Binary files a/docs/images/splineComp.png and b/docs/images/splineComp.png differ diff --git a/docs/index.html b/docs/index.html index a89130f..4184330 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,24 +9,24 @@
-
+

Welcome to nimiSlides!

These slides will show you what this theme is capable of β›„

-
-
+
+

Hello World Example

echo "Hello World"
Hello World
-
+

Hello Down here

-
+

A classic

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.

-
+

Fragments (animations)

@@ -65,7 +65,7 @@

Fragments (animations)

-
+

Code example

var this: int
 let is_a = 1
@@ -74,8 +74,8 @@ 
Code example

 
 code(this)
block
-
-
+
+

Generating and showing images

import ggplotnim, random, sequtils
 randomize(42)
@@ -86,7 +86,7 @@ 
Generating and showing images

   "Type" : concat(newSeqWith(25, "background"),
                   newSeqWith(25, "candidates")) })
-
+ 
ggplot(df, aes("Energy", "Counts")) +
   geom_histogram() +
   theme_opaque() +
@@ -97,17 +97,17 @@ 
Generating and showing images
-
+

Math

You can typeset math as well (using nb.useLatex):

$$ e^{\pi i} = -1 $$

-
+

This is big!

This is also big!

This is normal text!

-
+

And a final reveal: These slides were created just using Nim!

diff --git a/docs/index_white.html b/docs/index_white.html index 92c4e25..8dd98f9 100644 --- a/docs/index_white.html +++ b/docs/index_white.html @@ -9,24 +9,24 @@
-
+

Welcome to nimiSlides!

These slides will show you what this theme is capable of β›„

-
-
+
+

Hello World Example

echo "Hello World"
Hello World
-
+

Hello Down here

-
+

A classic

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.

-
+

Fragments (animations)

@@ -65,7 +65,7 @@

Fragments (animations)

-
+

Code example

var this: int
 let is_a = 1
@@ -74,8 +74,8 @@ 
Code example

 
 code(this)
block
-
-
+
+

Generating and showing images

import ggplotnim, random, sequtils
 randomize(42)
@@ -86,7 +86,7 @@ 
Generating and showing images

   "Type" : concat(newSeqWith(25, "background"),
                   newSeqWith(25, "candidates")) })
-
+ 
ggplot(df, aes("Energy", "Counts")) +
   geom_histogram() +
   theme_opaque() +
@@ -97,17 +97,17 @@ 
Generating and showing images
-
+

Math

You can typeset math as well (using nb.useLatex):

$$ e^{\pi i} = -1 $$

-
+

This is big!

This is also big!

This is normal text!

-
+

And a final reveal: These slides were created just using Nim!

diff --git a/docs/showcase.html b/docs/showcase.html index 02e3bc9..c7f3eaa 100644 --- a/docs/showcase.html +++ b/docs/showcase.html @@ -9,15 +9,255 @@
-
+ +

Welcome to nimiSlides! πŸ›·

These slides will show you what this nimib theme is capable of.

-
-
+
+

You can have text, but also code:

let a = 2
 let b = 3
@@ -25,7 +265,7 @@ 
 
Welcome to 
       
You can animate the code as well! 🎞

       
echo "First this!"
 echo "But not this!"
@@ -36,9 +276,10 @@ 
 
Welcome to 
       

       
Typewriter Effect

       
 
@@ -3053,17 +3294,18 @@ 
Typewriter Effect

   return result_469762075[0];
 
 }
-var rootid_452985903_469762057 = to_469762050(parseJson_603985094(makeNimstrLit("\"karax-1\"")));
-var id_452985904_469762063 = to_469762050(parseJson_603985094(makeNimstrLit("\"typewriter0\"")));
-var localtext_452985905_469762069 = to_469762050(parseJson_603985094(makeNimstrLit("\"This text will be typed one letter at a time with the speed and alignement specified.\"")));
-var fragindex_452985906_469762100 = to_469762070(parseJson_603985094(makeNimstrLit("0")));
-var speed_452985907_469762106 = to_469762070(parseJson_603985094(makeNimstrLit("30")));
-var align_452985908_469762112 = to_469762050(parseJson_603985094(makeNimstrLit("\"left\"")));
+var rootid_452985959_469762057 = to_469762050(parseJson_603985094(makeNimstrLit("\"karax-1\"")));
+var id_452985960_469762063 = to_469762050(parseJson_603985094(makeNimstrLit("\"typewriter0\"")));
+var localtext_452985961_469762069 = to_469762050(parseJson_603985094(makeNimstrLit("\"This text will be typed one letter at a time with the speed and alignement specified.\"")));
+var fragindex_452985962_469762100 = to_469762070(parseJson_603985094(makeNimstrLit("0")));
+var speed_452985963_469762106 = to_469762070(parseJson_603985094(makeNimstrLit("30")));
+var align_452985964_469762112 = to_469762050(parseJson_603985094(makeNimstrLit("\"left\"")));
 var gid_1174405727 = [0];
 var vcomponents_1207959565 = [{}];
-var kxi__nimib_kxi_3 = null;
-var i_452985910_469762171 = [0];
-var timeout_452985911_469762172 = [null];
+var kxi__nimib_kxi_9 = null;
+var postrendercallback_452985965_469762168 = [null];
+var i_452985967_469762175 = [0];
+var timeout_452985968_469762176 = [null];
 
 function newSeq_1140851702(len_1140851704) {
   var result_1140851705 = [];
@@ -3230,15 +3472,15 @@ 
Typewriter Effect

     var dest_1140850944 = n_1140850943.dom;
     Label1: do {
       var i_1140850952 = 0;
-      var colontmp__469762308 = 0;
-      colontmp__469762308 = (n_1140850943.events).length;
-      var i_469762309 = 0;
+      var colontmp__469762312 = 0;
+      colontmp__469762312 = (n_1140850943.events).length;
+      var i_469762313 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762309 < colontmp__469762308)) break Label3;
-            i_1140850952 = i_469762309;
+          if (!(i_469762313 < colontmp__469762312)) break Label3;
+            i_1140850952 = i_469762313;
             n_1140850943.events[i_1140850952]["Field2"] = wrapEvent_1140850842(dest_1140850944, n_1140850943, n_1140850943.events[i_1140850952]["Field0"], n_1140850943.events[i_1140850952]["Field1"]);
-            i_469762309 += 1;
+            i_469762313 += 1;
           }
       } while (false);
     } while (false);
@@ -3250,15 +3492,15 @@ 
Typewriter Effect

     n_1241514465.style = {};
     Label1: do {
       var i_1241514479 = 0;
-      var colontmp__469762312 = 0;
-      colontmp__469762312 = (s_1241514466.length - 1);
-      var res_469762313 = 0;
+      var colontmp__469762316 = 0;
+      colontmp__469762316 = (s_1241514466.length - 1);
+      var res_469762317 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(res_469762313 <= colontmp__469762312)) break Label3;
-            i_1241514479 = res_469762313;
+          if (!(res_469762317 <= colontmp__469762316)) break Label3;
+            i_1241514479 = res_469762317;
             n_1241514465.style[s_1241514466[i_1241514479]] = s_1241514466[(i_1241514479 + 1)];
-            res_469762313 += 2;
+            res_469762317 += 2;
           }
       } while (false);
     } while (false);
@@ -3289,7 +3531,7 @@ 
Typewriter Effect

     result_1140850974 = document.createTextNode(n_1140850971.text);
     n_1140850971.dom = result_1140850974;
     if (!((n_1140850971.id == null))) {
-    kxi__nimib_kxi_3.byId[n_1140850971.id] = n_1140850971;
+    kxi__nimib_kxi_9.byId[n_1140850971.id] = n_1140850971;
     }
     
     }
@@ -3299,7 +3541,7 @@ 
Typewriter Effect

     result_1140850974.innerHTML = n_1140850971.text;
     n_1140850971.dom = result_1140850974;
     if (!((n_1140850971.id == null))) {
-    kxi__nimib_kxi_3.byId[n_1140850971.id] = n_1140850971;
+    kxi__nimib_kxi_9.byId[n_1140850971.id] = n_1140850971;
     }
     
     break BeforeRet;
@@ -3310,7 +3552,7 @@ 
Typewriter Effect

     result_1140850974 = toDom_1140850970(x_1140851014, useAttachedNode_1140850972, kxi_1140850973);
     n_1140850971.dom = result_1140850974;
     if (!((n_1140850971.id == null))) {
-    kxi__nimib_kxi_3.byId[n_1140850971.id] = n_1140850971;
+    kxi__nimib_kxi_9.byId[n_1140850971.id] = n_1140850971;
     }
     
     break BeforeRet;
@@ -3320,7 +3562,7 @@ 
Typewriter Effect

     result_1140850974 = n_1140850971.dom;
     n_1140850971.dom = result_1140850974;
     if (!((n_1140850971.id == null))) {
-    kxi__nimib_kxi_3.byId[n_1140850971.id] = n_1140850971;
+    kxi__nimib_kxi_9.byId[n_1140850971.id] = n_1140850971;
     }
     
     break BeforeRet;
@@ -3339,7 +3581,7 @@ 
Typewriter Effect

     result_1140850974 = toDom_1140850970(x_1140851042.expanded, useAttachedNode_1140850972, kxi_1140850973);
     n_1140850971.dom = result_1140850974;
     if (!((n_1140850971.id == null))) {
-    kxi__nimib_kxi_3.byId[n_1140850971.id] = n_1140850971;
+    kxi__nimib_kxi_9.byId[n_1140850971.id] = n_1140850971;
     }
     
     break BeforeRet;
@@ -3348,23 +3590,23 @@ 
Typewriter Effect

       result_1140850974 = document.createElement(toTag_1174405469[n_1140850971.kind]);
       n_1140850971.dom = result_1140850974;
       if (!((n_1140850971.id == null))) {
-      kxi__nimib_kxi_3.byId[n_1140850971.id] = n_1140850971;
+      kxi__nimib_kxi_9.byId[n_1140850971.id] = n_1140850971;
       }
       
       Label1: do {
         var k_1140851077 = null;
         Label2: do {
-          var i_469762293 = 0;
-          var colontmp__469762294 = 0;
-          colontmp__469762294 = (n_1140850971.kids).length;
-          var i_469762295 = 0;
+          var i_469762297 = 0;
+          var colontmp__469762298 = 0;
+          colontmp__469762298 = (n_1140850971.kids).length;
+          var i_469762299 = 0;
           Label3: do {
               Label4: while (true) {
-              if (!(i_469762295 < colontmp__469762294)) break Label4;
-                i_469762293 = i_469762295;
-                k_1140851077 = n_1140850971.kids[i_469762293];
+              if (!(i_469762299 < colontmp__469762298)) break Label4;
+                i_469762297 = i_469762299;
+                k_1140851077 = n_1140850971.kids[i_469762297];
                 result_1140850974.appendChild(toDom_1140850970(k_1140851077, useAttachedNode_1140850972, kxi_1140850973));
-                i_469762295 += 1;
+                i_469762299 += 1;
               }
           } while (false);
         } while (false);
@@ -3387,21 +3629,21 @@ 
Typewriter Effect

       var k_1140851078 = null;
       var v_1140851079 = null;
       Label6: do {
-        var i_469762303 = 0;
-        var colontmp__469762304 = 0;
-        colontmp__469762304 = ((n_1140850971.attrs).length - 2);
-        var res_469762305 = 0;
+        var i_469762307 = 0;
+        var colontmp__469762308 = 0;
+        colontmp__469762308 = ((n_1140850971.attrs).length - 2);
+        var res_469762309 = 0;
         Label7: do {
             Label8: while (true) {
-            if (!(res_469762305 <= colontmp__469762304)) break Label8;
-              i_469762303 = res_469762305;
-              k_1140851078 = n_1140850971.attrs[i_469762303];
-              v_1140851079 = n_1140850971.attrs[(i_469762303 + 1)];
+            if (!(res_469762309 <= colontmp__469762308)) break Label8;
+              i_469762307 = res_469762309;
+              k_1140851078 = n_1140850971.attrs[i_469762307];
+              v_1140851079 = n_1140850971.attrs[(i_469762307 + 1)];
               if (!((v_1140851079 == null))) {
               result_1140850974.setAttribute(k_1140851078, v_1140851079);
               }
               
-              res_469762305 += 2;
+              res_469762309 += 2;
             }
         } while (false);
       } while (false);
@@ -3454,7 +3696,7 @@ 
Typewriter Effect

   var result_1140851122 = false;
 
   BeforeRet: do {
-    if (kxi__nimib_kxi_3.orphans.hasOwnProperty(n_1140851119.id)) {
+    if (kxi__nimib_kxi_9.orphans.hasOwnProperty(n_1140851119.id)) {
     result_1140851122 = true;
     break BeforeRet;
     }
@@ -3481,19 +3723,19 @@ 
Typewriter Effect

     
     Label3: do {
       var i_1140851158 = 0;
-      var colontmp__469762316 = 0;
-      colontmp__469762316 = len_1174405816(n_1140851119);
-      var i_469762317 = 0;
+      var colontmp__469762320 = 0;
+      colontmp__469762320 = len_1174405816(n_1140851119);
+      var i_469762321 = 0;
       Label4: do {
           Label5: while (true) {
-          if (!(i_469762317 < colontmp__469762316)) break Label5;
-            i_1140851158 = i_469762317;
+          if (!(i_469762321 < colontmp__469762320)) break Label5;
+            i_1140851158 = i_469762321;
             if (!(same_1140851118(HEX5BHEX5D_1174405823(n_1140851119, i_1140851158), e_1140851120.childNodes[i_1140851158], (nesting_1140851121 + 1)))) {
             result_1140851122 = false;
             break BeforeRet;
             }
             
-            i_469762317 += 1;
+            i_469762321 += 1;
           }
       } while (false);
     } while (false);
@@ -3555,19 +3797,19 @@ 
Typewriter Effect

     
     Label1: do {
       var i_1241514276 = 0;
-      var colontmp__469762343 = 0;
-      colontmp__469762343 = a_1241514239.length;
-      var i_469762344 = 0;
+      var colontmp__469762347 = 0;
+      colontmp__469762347 = a_1241514239.length;
+      var i_469762348 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762344 < colontmp__469762343)) break Label3;
-            i_1241514276 = i_469762344;
+          if (!(i_469762348 < colontmp__469762347)) break Label3;
+            i_1241514276 = i_469762348;
             if (!((a_1241514239[i_1241514276] == b_1241514240[i_1241514276]))) {
             result_1241514241 = false;
             break BeforeRet;
             }
             
-            i_469762344 += 1;
+            i_469762348 += 1;
           }
       } while (false);
     } while (false);
@@ -3587,19 +3829,19 @@ 
Typewriter Effect

     result_1174405982 = true;
     Label1: do {
       var i_1174405996 = 0;
-      var colontmp__469762347 = 0;
-      colontmp__469762347 = (a_1174405980.attrs).length;
-      var i_469762348 = 0;
+      var colontmp__469762351 = 0;
+      colontmp__469762351 = (a_1174405980.attrs).length;
+      var i_469762352 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762348 < colontmp__469762347)) break Label3;
-            i_1174405996 = i_469762348;
+          if (!(i_469762352 < colontmp__469762351)) break Label3;
+            i_1174405996 = i_469762352;
             if (!((a_1174405980.attrs[i_1174405996] == b_1174405981.attrs[i_1174405996]))) {
             result_1174405982 = false;
             break BeforeRet;
             }
             
-            i_469762348 += 1;
+            i_469762352 += 1;
           }
       } while (false);
     } while (false);
@@ -3655,19 +3897,19 @@ 
Typewriter Effect

     
     Label1: do {
       var i_1140851193 = 0;
-      var colontmp__469762335 = 0;
-      colontmp__469762335 = len_1174405816(a_1140851173);
-      var i_469762336 = 0;
+      var colontmp__469762339 = 0;
+      colontmp__469762339 = len_1174405816(a_1140851173);
+      var i_469762340 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762336 < colontmp__469762335)) break Label3;
-            i_1140851193 = i_469762336;
+          if (!(i_469762340 < colontmp__469762339)) break Label3;
+            i_1140851193 = i_469762340;
             if ((eq_1140851172(HEX5BHEX5D_1174405823(a_1140851173, i_1140851193), HEX5BHEX5D_1174405823(b_1140851174, i_1140851193), recursive_1140851175) == 1)) {
             result_1140851176 = 1;
             break BeforeRet;
             }
             
-            i_469762336 += 1;
+            i_469762340 += 1;
           }
       } while (false);
     } while (false);
@@ -3721,19 +3963,19 @@ 
Typewriter Effect

     
     Label6: do {
       var i_1140851219 = 0;
-      var colontmp__469762339 = 0;
-      colontmp__469762339 = len_1174405816(a_1140851173);
-      var i_469762340 = 0;
+      var colontmp__469762343 = 0;
+      colontmp__469762343 = len_1174405816(a_1140851173);
+      var i_469762344 = 0;
       Label7: do {
           Label8: while (true) {
-          if (!(i_469762340 < colontmp__469762339)) break Label8;
-            i_1140851219 = i_469762340;
+          if (!(i_469762344 < colontmp__469762343)) break Label8;
+            i_1140851219 = i_469762344;
             if (!((eq_1140851172(HEX5BHEX5D_1174405823(a_1140851173, i_1140851219), HEX5BHEX5D_1174405823(b_1140851174, i_1140851219), true) == 3))) {
             result_1140851176 = 1;
             break BeforeRet;
             }
             
-            i_469762340 += 1;
+            i_469762344 += 1;
           }
       } while (false);
     } while (false);
@@ -3776,18 +4018,18 @@ 
Typewriter Effect

       var k_1140851269 = null;
       var __1140851270 = null;
       Label2: do {
-        var i_469762352 = 0;
-        var colontmp__469762353 = 0;
-        colontmp__469762353 = ((oldNode_1140851264.attrs).length - 2);
-        var res_469762354 = 0;
+        var i_469762356 = 0;
+        var colontmp__469762357 = 0;
+        colontmp__469762357 = ((oldNode_1140851264.attrs).length - 2);
+        var res_469762358 = 0;
         Label3: do {
             Label4: while (true) {
-            if (!(res_469762354 <= colontmp__469762353)) break Label4;
-              i_469762352 = res_469762354;
-              k_1140851269 = oldNode_1140851264.attrs[i_469762352];
-              __1140851270 = oldNode_1140851264.attrs[(i_469762352 + 1)];
+            if (!(res_469762358 <= colontmp__469762357)) break Label4;
+              i_469762356 = res_469762358;
+              k_1140851269 = oldNode_1140851264.attrs[i_469762356];
+              __1140851270 = oldNode_1140851264.attrs[(i_469762356 + 1)];
               oldNode_1140851264.dom.removeAttribute(k_1140851269);
-              res_469762354 += 2;
+              res_469762358 += 2;
             }
         } while (false);
       } while (false);
@@ -3796,21 +4038,21 @@ 
Typewriter Effect

       var k_1140851271 = null;
       var v_1140851272 = null;
       Label6: do {
-        var i_469762358 = 0;
-        var colontmp__469762359 = 0;
-        colontmp__469762359 = ((newNode_1140851263.attrs).length - 2);
-        var res_469762360 = 0;
+        var i_469762362 = 0;
+        var colontmp__469762363 = 0;
+        colontmp__469762363 = ((newNode_1140851263.attrs).length - 2);
+        var res_469762364 = 0;
         Label7: do {
             Label8: while (true) {
-            if (!(res_469762360 <= colontmp__469762359)) break Label8;
-              i_469762358 = res_469762360;
-              k_1140851271 = newNode_1140851263.attrs[i_469762358];
-              v_1140851272 = newNode_1140851263.attrs[(i_469762358 + 1)];
+            if (!(res_469762364 <= colontmp__469762363)) break Label8;
+              i_469762362 = res_469762364;
+              k_1140851271 = newNode_1140851263.attrs[i_469762362];
+              v_1140851272 = newNode_1140851263.attrs[(i_469762362 + 1)];
               if (!((v_1140851272 == null))) {
               oldNode_1140851264.dom.setAttribute(k_1140851271, v_1140851272);
               }
               
-              res_469762360 += 2;
+              res_469762364 += 2;
             }
         } while (false);
       } while (false);
@@ -3828,19 +4070,19 @@ 
Typewriter Effect

   BeforeRet: do {
     Label1: do {
       var i_1174405807 = 0;
-      var colontmp__469762363 = 0;
-      colontmp__469762363 = ((n_1174405796.attrs).length - 2);
-      var res_469762364 = 0;
+      var colontmp__469762367 = 0;
+      colontmp__469762367 = ((n_1174405796.attrs).length - 2);
+      var res_469762368 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(res_469762364 <= colontmp__469762363)) break Label3;
-            i_1174405807 = res_469762364;
+          if (!(res_469762368 <= colontmp__469762367)) break Label3;
+            i_1174405807 = res_469762368;
             if ((n_1174405796.attrs[i_1174405807] == key_1174405797)) {
             result_1174405798 = n_1174405796.attrs[(i_1174405807 + 1)];
             break BeforeRet;
             }
             
-            res_469762364 += 2;
+            res_469762368 += 2;
           }
       } while (false);
     } while (false);
@@ -3854,15 +4096,15 @@ 
Typewriter Effect

     if (!((d_1140850807.karaxEvents == null))) {
     Label1: do {
       var i_1140850823 = 0;
-      var colontmp__469762367 = 0;
-      colontmp__469762367 = d_1140850807.karaxEvents.length;
-      var i_469762368 = 0;
+      var colontmp__469762371 = 0;
+      colontmp__469762371 = d_1140850807.karaxEvents.length;
+      var i_469762372 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762368 < colontmp__469762367)) break Label3;
-            i_1140850823 = i_469762368;
+          if (!(i_469762372 < colontmp__469762371)) break Label3;
+            i_1140850823 = i_469762372;
             d_1140850807.removeEventListener(d_1140850807.karaxEvents[i_1140850823]["Field0"], d_1140850807.karaxEvents[i_1140850823]["Field1"]);
-            i_469762368 += 1;
+            i_469762372 += 1;
           }
       } while (false);
     } while (false);
@@ -3983,28 +4225,28 @@ 
Typewriter Effect

       var pos_1140851476 = (nimMin(oldPos_1140851462, newPos_1140851463) + 1);
       Label8: do {
         var i_1140851481 = 0;
-        var colontmp__469762322 = 0;
-        colontmp__469762322 = (pos_1140851476 - 1);
-        var res_469762323 = commonPrefix_1140851453;
+        var colontmp__469762326 = 0;
+        colontmp__469762326 = (pos_1140851476 - 1);
+        var res_469762327 = commonPrefix_1140851453;
         Label9: do {
             Label10: while (true) {
-            if (!(res_469762323 <= colontmp__469762322)) break Label10;
-              i_1140851481 = res_469762323;
+            if (!(res_469762327 <= colontmp__469762326)) break Label10;
+              i_1140851481 = res_469762327;
               diff_1140851413(HEX5BHEX5D_1174405823(newNode_1140851414, i_1140851481), HEX5BHEX5D_1174405823(oldNode_1140851415, i_1140851481), current_1140851417, current_1140851417.childNodes[i_1140851481], kxi_1140851418);
-              res_469762323 += 1;
+              res_469762327 += 1;
             }
         } while (false);
       } while (false);
       if (((oldPos_1140851462 + 1) == oldLength_1140851444)) {
       Label11: do {
         var i_1140851486 = 0;
-        var res_469762326 = pos_1140851476;
+        var res_469762330 = pos_1140851476;
         Label12: do {
             Label13: while (true) {
-            if (!(res_469762326 <= newPos_1140851463)) break Label13;
-              i_1140851486 = res_469762326;
+            if (!(res_469762330 <= newPos_1140851463)) break Label13;
+              i_1140851486 = res_469762330;
               addPatch_1140851282(kxi_1140851418, 2, current_1140851417, null, HEX5BHEX5D_1174405823(newNode_1140851414, i_1140851486), null);
-              res_469762326 += 1;
+              res_469762330 += 1;
             }
         } while (false);
       } while (false);
@@ -4013,13 +4255,13 @@ 
Typewriter Effect

         var before_1140851487 = current_1140851417.childNodes[(oldPos_1140851462 + 1)];
         Label14: do {
           var i_1140851492 = 0;
-          var res_469762329 = pos_1140851476;
+          var res_469762333 = pos_1140851476;
           Label15: do {
               Label16: while (true) {
-              if (!(res_469762329 <= newPos_1140851463)) break Label16;
-                i_1140851492 = res_469762329;
+              if (!(res_469762333 <= newPos_1140851463)) break Label16;
+                i_1140851492 = res_469762333;
                 addPatch_1140851282(kxi_1140851418, 3, current_1140851417, before_1140851487, HEX5BHEX5D_1174405823(newNode_1140851414, i_1140851492), null);
-                res_469762329 += 1;
+                res_469762333 += 1;
               }
           } while (false);
         } while (false);
@@ -4027,20 +4269,20 @@ 
Typewriter Effect

       
       Label17: do {
         var i_1140851497 = 0;
-        var res_469762332 = pos_1140851476;
+        var res_469762336 = pos_1140851476;
         Label18: do {
             Label19: while (true) {
-            if (!(res_469762332 <= oldPos_1140851462)) break Label19;
-              i_1140851497 = res_469762332;
-              addPatch_1140851282(kxi__nimib_kxi_3, 4, null, null, null, HEX5BHEX5D_1174405823(oldNode_1140851415, i_1140851497));
+            if (!(res_469762336 <= oldPos_1140851462)) break Label19;
+              i_1140851497 = res_469762336;
+              addPatch_1140851282(kxi__nimib_kxi_9, 4, null, null, null, HEX5BHEX5D_1174405823(oldNode_1140851415, i_1140851497));
               addPatch_1140851282(kxi_1140851418, 1, current_1140851417, current_1140851417.childNodes[i_1140851497], null, null);
-              res_469762332 += 1;
+              res_469762336 += 1;
             }
         } while (false);
       } while (false);
       break;
     case 1:
-      addPatch_1140851282(kxi__nimib_kxi_3, 4, null, null, null, oldNode_1140851415);
+      addPatch_1140851282(kxi__nimib_kxi_9, 4, null, null, null, oldNode_1140851415);
       addPatch_1140851282(kxi_1140851418, 0, parent_1140851416, current_1140851417, newNode_1140851414, null);
       break;
     case 4:
@@ -4072,7 +4314,7 @@ 
Typewriter Effect

           x_1140851519.expanded = x_1140851519.renderImpl(x_1140851519);
           x_1140851519.renderedVersion = x_1140851519.version;
           if ((oldExpanded_1140851527 == null)) {
-          addPatch_1140851282(kxi__nimib_kxi_3, 4, null, null, null, x_1140851519);
+          addPatch_1140851282(kxi__nimib_kxi_9, 4, null, null, null, x_1140851519);
           addPatch_1140851282(kxi_1140851513, 0, parent_1140851526, current_1140851525, x_1140851519.expanded, null);
           }
           else {
@@ -4094,20 +4336,20 @@ 
Typewriter Effect

     dest_1140851348.dom = src_1140851349.dom;
     src_1140851349.dom = null;
     if (!((dest_1140851348.id == null))) {
-    kxi__nimib_kxi_3.byId[dest_1140851348.id] = dest_1140851348;
+    kxi__nimib_kxi_9.byId[dest_1140851348.id] = dest_1140851348;
     }
     
     Label1: do {
       var i_1140851363 = 0;
-      var colontmp__469762378 = 0;
-      colontmp__469762378 = len_1174405816(dest_1140851348);
-      var i_469762379 = 0;
+      var colontmp__469762382 = 0;
+      colontmp__469762382 = len_1174405816(dest_1140851348);
+      var i_469762383 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762379 < colontmp__469762378)) break Label3;
-            i_1140851363 = i_469762379;
+          if (!(i_469762383 < colontmp__469762382)) break Label3;
+            i_1140851363 = i_469762383;
             moveDom_1140851347(HEX5BHEX5D_1174405823(dest_1140851348, i_1140851363), HEX5BHEX5D_1174405823(src_1140851349, i_1140851363));
-            i_469762379 += 1;
+            i_469762383 += 1;
           }
       } while (false);
     } while (false);
@@ -4124,11 +4366,11 @@ 
Typewriter Effect

 function applyPatch_1140851364(kxi_1140851365) {
     Label1: do {
       var i_1140851370 = 0;
-      var i_469762372 = 0;
+      var i_469762376 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762372 < kxi_1140851365.patchLen)) break Label3;
-            i_1140851370 = i_469762372;
+          if (!(i_469762376 < kxi_1140851365.patchLen)) break Label3;
+            i_1140851370 = i_469762376;
             var p_1140851371 = nimCopy(null, kxi_1140851365.patches[i_1140851370], NTI1140850694);
             switch (p_1140851371.k) {
             case 0:
@@ -4181,21 +4423,21 @@ 
Typewriter Effect

               
               break;
             }
-            i_469762372 += 1;
+            i_469762376 += 1;
           }
       } while (false);
     } while (false);
     kxi_1140851365.patchLen = 0;
     Label4: do {
       var i_1140851402 = 0;
-      var i_469762375 = 0;
+      var i_469762379 = 0;
       Label5: do {
           Label6: while (true) {
-          if (!(i_469762375 < kxi_1140851365.patchLenV)) break Label6;
-            i_1140851402 = i_469762375;
+          if (!(i_469762379 < kxi_1140851365.patchLenV)) break Label6;
+            i_1140851402 = i_469762379;
             var p_1140851403 = nimCopy(null, kxi_1140851365.patchesV[i_1140851402], NTI1140850695);
             HEX5BHEX5DHEX3D_1174405827(p_1140851403.parent, p_1140851403.pos, p_1140851403.newChild);
-            i_469762375 += 1;
+            i_469762379 += 1;
           }
       } while (false);
     } while (false);
@@ -4266,12 +4508,12 @@ 
Typewriter Effect

 function init_1140851671(ev_1140851672) {
     
 function HEX3Aanonymous_1140851673() {
-        dodraw_1140851608(kxi__nimib_kxi_3);
+        dodraw_1140851608(kxi__nimib_kxi_9);
 
       
     }
 
-    kxi__nimib_kxi_3.renderId = window.requestAnimationFrame(HEX3Aanonymous_1140851673);
+    kxi__nimib_kxi_9.renderId = window.requestAnimationFrame(HEX3Aanonymous_1140851673);
 
   
 }
@@ -4295,7 +4537,7 @@ 
Typewriter Effect

 function setRenderer_1140851684(renderer_1140851687, root_1140851688, clientPostRenderCallback_1140851691) {
     
 function HEX3Aanonymous_1140851750() {
-        redraw_1140851665(kxi__nimib_kxi_3);
+        redraw_1140851665(kxi__nimib_kxi_9);
 
       
     }
@@ -4308,7 +4550,7 @@ 
Typewriter Effect

     }
     
     result_1140851692 = {rootId: root_1140851688, renderer: renderer_1140851687, postRenderCallback: clientPostRenderCallback_1140851691, patches: newSeq_1140851702(60), patchesV: newSeq_1140851723(30), components: [], surpressRedraws: false, byId: {}, orphans: {}, currentTree: null, toFocus: null, toFocusV: null, renderId: 0, rendering: false, patchLen: 0, patchLenV: 0, runCount: 0};
-    kxi__nimib_kxi_3 = result_1140851692;
+    kxi__nimib_kxi_9 = result_1140851692;
     window.addEventListener("load", init_1140851671, false);
     window.onhashchange = HEX3Aanonymous_1140851750;
 
@@ -4365,13 +4607,13 @@ 
Typewriter Effect

     result_1174405897 = newVNode_1174405891(kind_1174405895);
     Label1: do {
       var k_1174405909 = null;
-      var i_469762383 = 0;
+      var i_469762387 = 0;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762383 < (kids_1174405896).length)) break Label3;
-            k_1174405909 = kids_1174405896[i_469762383];
+          if (!(i_469762387 < (kids_1174405896).length)) break Label3;
+            k_1174405909 = kids_1174405896[i_469762387];
             add_1174405831(result_1174405897, k_1174405909);
-            i_469762383 += 1;
+            i_469762387 += 1;
           }
       } while (false);
     } while (false);
@@ -4396,18 +4638,18 @@ 
Typewriter Effect

           s_1241514286.push("");
           Label3: do {
             var j_1241514330 = 0;
-            var colontmp__469762387 = 0;
-            var colontmp__469762388 = 0;
-            colontmp__469762387 = (s_1241514286.length - 1);
-            colontmp__469762388 = (i_1241514289 + 3);
-            var res_469762390 = colontmp__469762387;
+            var colontmp__469762391 = 0;
+            var colontmp__469762392 = 0;
+            colontmp__469762391 = (s_1241514286.length - 1);
+            colontmp__469762392 = (i_1241514289 + 3);
+            var res_469762394 = colontmp__469762391;
             Label4: do {
                 Label5: while (true) {
-                if (!(colontmp__469762388 <= res_469762390)) break Label5;
-                  j_1241514330 = res_469762390;
+                if (!(colontmp__469762392 <= res_469762394)) break Label5;
+                  j_1241514330 = res_469762394;
                   s_1241514286[j_1241514330] = s_1241514286[(j_1241514330 - 2)];
                   s_1241514286[(j_1241514330 - 1)] = s_1241514286[(j_1241514330 - 3)];
-                  res_469762390 -= 2;
+                  res_469762394 -= 2;
                 }
             } while (false);
           } while (false);
@@ -4451,18 +4693,18 @@ 
Typewriter Effect

 
 }
 
-function createdom_452985876_469762188() {
-  var result_469762189 = null;
+function createdom_452985954_469762192() {
+  var result_469762193 = null;
 
-    var tmp_469762220 = tree_1174405894(44, []);
-    var tmp_469762221 = tree_1174405894(32, []);
-    tmp_469762221.id = toJSStr(id_452985904_469762063);
-    tmp_469762221.style = style_1241514444(160, toJSStr(align_452985908_469762112));
-    add_1174405831(tmp_469762221, text_1174405949(toJSStr(localtext_452985905_469762069)));
-    add_1174405831(tmp_469762220, tmp_469762221);
-    result_469762189 = tmp_469762220;
+    var tmp_469762224 = tree_1174405894(44, []);
+    var tmp_469762225 = tree_1174405894(32, []);
+    tmp_469762225.id = toJSStr(id_452985960_469762063);
+    tmp_469762225.style = style_1241514444(160, toJSStr(align_452985964_469762112));
+    add_1174405831(tmp_469762225, text_1174405949(toJSStr(localtext_452985961_469762069)));
+    add_1174405831(tmp_469762224, tmp_469762225);
+    result_469762193 = tmp_469762224;
 
-  return result_469762189;
+  return result_469762193;
 
 }
 
@@ -4472,18 +4714,18 @@ 
Typewriter Effect

   BeforeRet: do {
     Label1: do {
       var node_1308622884 = null;
-      var i_469762394 = 0;
-      var L_469762395 = (el_1308622863.attributes).length;
+      var i_469762398 = 0;
+      var L_469762399 = (el_1308622863.attributes).length;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762394 < L_469762395)) break Label3;
-            node_1308622884 = el_1308622863.attributes[i_469762394];
+          if (!(i_469762398 < L_469762399)) break Label3;
+            node_1308622884 = el_1308622863.attributes[i_469762398];
             if ((node_1308622884.nodeName == "data-line-numbers")) {
             result_1308622864 = true;
             break BeforeRet;
             }
             
-            i_469762394 += 1;
+            i_469762398 += 1;
           }
       } while (false);
     } while (false);
@@ -4613,19 +4855,19 @@ 
Typewriter Effect

   BeforeRet: do {
     Label1: do {
       var node_1308622909 = null;
-      var i_469762398 = 0;
-      var L_469762399 = (el_1308622904.attributes).length;
+      var i_469762402 = 0;
+      var L_469762403 = (el_1308622904.attributes).length;
       Label2: do {
           Label3: while (true) {
-          if (!(i_469762398 < L_469762399)) break Label3;
-            node_1308622909 = el_1308622904.attributes[i_469762398];
+          if (!(i_469762402 < L_469762403)) break Label3;
+            node_1308622909 = el_1308622904.attributes[i_469762402];
             if ((node_1308622909.nodeName == "data-fragment-index-nimib")) {
             var fragmentIndex_1308622910 = nsuParseInt(cstrToNimstr(node_1308622909.nodeValue));
             result_1308622905 = fragmentIndex_1308622910;
             break BeforeRet;
             }
             
-            i_469762398 += 1;
+            i_469762402 += 1;
           }
       } while (false);
     } while (false);
@@ -4636,41 +4878,41 @@ 
Typewriter Effect

 
 }
 
-function typewriterlocal_452985877_469762173() {
+function typewriterlocal_452985955_469762177() {
     var Temporary1;
 
-    rawEcho(makeNimstrLit("Typing "), HEX24_318767107(fragindex_452985906_469762100));
-    var el_452985912_469762174 = document.getElementById(toJSStr(id_452985904_469762063));
-    if ((i_452985910_469762171[0] < (localtext_452985905_469762069).length)) {
-    if (null != (Temporary1 = toJSStr(nimCharToStr(localtext_452985905_469762069[i_452985910_469762171[0]])), Temporary1)) { if (null == el_452985912_469762174.innerHTML) el_452985912_469762174.innerHTML = Temporary1; else el_452985912_469762174.innerHTML += Temporary1; };
-    i_452985910_469762171[0] += 1;
-    timeout_452985911_469762172[0] = setTimeout(typewriterlocal_452985877_469762173, speed_452985907_469762106);
+    rawEcho(makeNimstrLit("Typing "), HEX24_318767107(fragindex_452985962_469762100));
+    var el_452985969_469762178 = document.getElementById(toJSStr(id_452985960_469762063));
+    if ((i_452985967_469762175[0] < (localtext_452985961_469762069).length)) {
+    if (null != (Temporary1 = toJSStr(nimCharToStr(localtext_452985961_469762069[i_452985967_469762175[0]])), Temporary1)) { if (null == el_452985969_469762178.innerHTML) el_452985969_469762178.innerHTML = Temporary1; else el_452985969_469762178.innerHTML += Temporary1; };
+    i_452985967_469762175[0] += 1;
+    timeout_452985968_469762176[0] = setTimeout(typewriterlocal_452985955_469762177, speed_452985963_469762106);
     }
     
 
   
 }
 
-function lambda_452985882_469762236(event_452985913_469762237) {
+function lambda_452985956_469762240(event_452985970_469762241) {
     
-function lambda_452985883_469762238(event_452985913_469762239) {
-        if (!(isAnimatedCode_1308622862(event_452985913_469762239.fragment))) {
-        var index_452985914_469762240 = getFragmentIndex_1308622903(event_452985913_469762239.fragment);
-        if ((fragindex_452985906_469762100 == index_452985914_469762240)) {
-        var el_452985912_469762241 = document.getElementById(toJSStr(id_452985904_469762063));
-        el_452985912_469762241.innerHTML = "";
-        i_452985910_469762171[0] = 0;
-        rawEcho(makeNimstrLit("Starting "), HEX24_318767107(fragindex_452985906_469762100));
-        typewriterlocal_452985877_469762173();
+function lambda_452985957_469762242(event_452985970_469762243) {
+        if (!(isAnimatedCode_1308622862(event_452985970_469762243.fragment))) {
+        var index_452985971_469762244 = getFragmentIndex_1308622903(event_452985970_469762243.fragment);
+        if ((fragindex_452985962_469762100 == index_452985971_469762244)) {
+        var el_452985969_469762245 = document.getElementById(toJSStr(id_452985960_469762063));
+        el_452985969_469762245.innerHTML = "";
+        i_452985967_469762175[0] = 0;
+        rawEcho(makeNimstrLit("Starting "), HEX24_318767107(fragindex_452985962_469762100));
+        typewriterlocal_452985955_469762177();
         }
         else {
-          var el_452985912_469762242 = document.getElementById(toJSStr(id_452985904_469762063));
-          i_452985910_469762171[0] = (localtext_452985905_469762069).length;
-          if (!((timeout_452985911_469762172[0] == null))) {
-          clearTimeout(timeout_452985911_469762172[0]);
+          var el_452985969_469762246 = document.getElementById(toJSStr(id_452985960_469762063));
+          i_452985967_469762175[0] = (localtext_452985961_469762069).length;
+          if (!((timeout_452985968_469762176[0] == null))) {
+          clearTimeout(timeout_452985968_469762176[0]);
           }
           
-          el_452985912_469762242.innerHTML = toJSStr(localtext_452985905_469762069);
+          el_452985969_469762246.innerHTML = toJSStr(localtext_452985961_469762069);
         }
         
         }
@@ -4679,10 +4921,10 @@ 
Typewriter Effect

       
     }
     
-function lambda_452985884_469762246(event_452985913_469762247) {
-        if (!(isAnimatedCode_1308622862(event_452985913_469762247.fragment))) {
-        var index_452985914_469762248 = getFragmentIndex_1308622903(event_452985913_469762247.fragment);
-        if ((fragindex_452985906_469762100 == index_452985914_469762248)) {
+function lambda_452985958_469762250(event_452985970_469762251) {
+        if (!(isAnimatedCode_1308622862(event_452985970_469762251.fragment))) {
+        var index_452985971_469762252 = getFragmentIndex_1308622903(event_452985970_469762251.fragment);
+        if ((fragindex_452985962_469762100 == index_452985971_469762252)) {
         }
         
         }
@@ -4691,20 +4933,20 @@ 
Typewriter Effect

       
     }
 
-    rawEcho(makeNimstrLit("Loading "), HEX24_318767107(fragindex_452985906_469762100));
-    Reveal.on("fragmentshown", lambda_452985883_469762238);
-    Reveal.on("fragmenthidden", lambda_452985884_469762246);
+    rawEcho(makeNimstrLit("Loading "), HEX24_318767107(fragindex_452985962_469762100));
+    Reveal.on("fragmentshown", lambda_452985957_469762242);
+    Reveal.on("fragmenthidden", lambda_452985958_469762250);
 
   
 }
-setRenderer_1140851796(createdom_452985876_469762188, toJSStr(rootid_452985903_469762057), null);
-window.addEventListener("load", lambda_452985882_469762236, false);
+setRenderer_1140851796(createdom_452985954_469762192, toJSStr(rootid_452985959_469762057), postrendercallback_452985965_469762168[0]);
+window.addEventListener("load", lambda_452985956_469762240, false);
-
-
+
+

Fragments (animations)

@@ -4746,7 +4988,7 @@

Who doesn't like animations? β–Ά

-
+

You can do pretty complex animations:

@@ -4773,7 +5015,7 @@

You can do pretty complex animations:

-
+

Using a for loop you can automate tedious repetition

@@ -4801,20 +5043,20 @@

Using a for loop you can automate tedious repetition

-
+

Automatic animation

  • One element
-
+

Automatic animation

  • One element
  • Two elements
-
+

Automatic animation

  • One element
    • @@ -4822,7 +5064,7 @@

    Automatic animation

  • Three elements
-
+

Fragment list

@@ -4841,14 +5083,14 @@

Fragment list

-
+

Math βž•

You can show off all your fancy equations βš› $$ e^{\pi i} = -1 $$ $$ \int_0^{\infty} \frac{1}{1 + e^x} dx$$

-
-
+
+

Images πŸ–ΌοΈ

You can have the code generating an image in the slides and then load the image. This way it's always up to date!

import numericalnim, ggplotnim, std/[sequtils, math]
@@ -4865,7 +5107,7 @@ 
Images πŸ–ΌοΈ

 df = df.gather(["exact", "spline"], value="y", key="type")
-
+

Now let's load the image we just created!

ggplot(df, aes("x", "y", color="type")) +
   geom_line() +
@@ -4880,6 +5122,9380 @@ 
Now let's load the image we just created!
+
+
+

You can have different backgrounds

+
+
+

Image background

+
+
+

Video background

+
+
+

Iframe background

+
+
+
+
+

2 Columns

+
+
+

Left

+
+
+

Right

+
+
+
+
+

3 Columns

+
+
+

Left

+
+
+

Middle

+
+
+

Right

+
+
+
+
+
+

Incremental lists

+
+
    +
    + +
  1. +

    First

    +
    2. +
    + +
    + +
  2. +

    Second

    +
    3. +
    + +
      +
      + +
    • +

      You can nest them as well

      +
      • +
      + +
        +
        + +
      1. +

        And mix ordered and unordered lists

        +
        2. +
        + +
      +
    +
+
+
+
+

Corner images

+ + + + +
+
+
diff --git a/docs/showcase.nim b/docs/showcase.nim index 29e811b..3eb4957 100644 --- a/docs/showcase.nim +++ b/docs/showcase.nim @@ -7,9 +7,10 @@ setSlidesTheme(Moon) useScrollWheel() showSlideNumber() +footer("You can have a footer. It's handy for [links](https://github.com/HugoGranstrom/nimiSlides)") slide: - bigText: "Welcome to [nimiSlides](https://github.com/HugoGranstrom/nimiSlides)! πŸ›·" + bigText: "Welcome to [nimiSlides](https://github.com/HugoGranstrom/nimiSlides)! πŸ›·" nbText: "These slides will show you what this [nimib](https://github.com/pietroppeter/nimib) theme is capable of." speakerNote "This is a note" @@ -73,18 +74,18 @@ slide: fragment(highlightCurrentBlue): nbText: text - slide(autoAnimate=true): + slide(slideOptions(autoAnimate=true)): nbText: "## Automatic animation" nbText: """ - One element """ - slide(autoAnimate=true): + slide(slideOptions(autoAnimate=true)): nbText: "## Automatic animation" nbText: """ - One element - Two elements """ - slide(autoAnimate=true): + slide(slideOptions(autoAnimate=true)): nbText: "## Automatic animation" nbText: """ - One element @@ -139,6 +140,58 @@ You can have the code generating an image in the slides and then load the image. fragment(fadeUp): nbImage("images/splineComp.png") +slide: + slide(slideOptions(colorBackground="#f1b434")): + nbText: "You can have different backgrounds" + + slide(slideOptions(imageBackground="https://images.freeimages.com/images/large-previews/3d0/london-1452422.jpg")): + nbText: "Image background" + + slide(slideOptions(videoBackground="https://user-images.githubusercontent.com/5092565/178597724-16287a00-5c31-4500-83d8-e07160a36369.mp4")): + nbText: "Video background" + + slide(slideOptions(iframeBackground="https://pietroppeter.github.io/nimib/", iframeInteractive=true)): + nbText: "Iframe background" + +slide: + slide: + nbText: "## 2 Columns" + columns: + column: + nbText: "Left" + column: + nbText: "Right" + slide: + nbText: "## 3 Columns" + columns: + column: + nbText: "Left" + column: + nbText: "Middle" + column: + nbText: "Right" + +slide: + nbText: "## Incremental lists" + align("left"): + orderedList: + listItem(@[fadeInThenSemiOut, highlightCurrentGreen]): + nbText: "First" + listItem(@[fadeInThenSemiOut, highlightCurrentGreen]): + nbText: "Second" + unorderedList: + listItem(@[fadeInThenSemiOut, highlightCurrentGreen]): + nbText: "You can nest them as well" + orderedList: + listItem(@[fadeInThenSemiOut, highlightCurrentGreen]): + nbText: "And mix ordered and unordered lists" + +slide: + nbText: "## Corner images" + cornerImage("https://hugogranstrom.com/images/avatar.png", LowerLeft, 100) + cornerImage("https://hugogranstrom.com/images/avatar.png", LowerRight, 100) + cornerImage("https://hugogranstrom.com/images/avatar.png", UpperLeft, 100) + cornerImage("https://hugogranstrom.com/images/avatar.png", UpperRight, 100) diff --git a/nimiSlides.nimble b/nimiSlides.nimble index 56620a0..ebf3865 100644 --- a/nimiSlides.nimble +++ b/nimiSlides.nimble @@ -1,6 +1,6 @@ # Package -version = "0.1" +version = "0.2" author = "Hugo GranstrΓΆm" description = "Reveal.js theme for nimib" license = "MIT" @@ -9,7 +9,7 @@ srcDir = "src" # Dependencies requires "nim >= 1.4.0" -requires "nimib >= 0.3.0" +requires "nimib >= 0.3.1" requires "toml_serialization >= 0.2.0" import os diff --git a/src/nimiSlides.nim b/src/nimiSlides.nim index 2a051d2..6390fd7 100644 --- a/src/nimiSlides.nim +++ b/src/nimiSlides.nim @@ -3,6 +3,7 @@ export os import nimib import nimib/capture import toml_serialization +import markdown type FragmentAnimation* = enum @@ -28,9 +29,27 @@ type SlidesTheme* = enum Black, Beige, Blood, League, Moon, Night, Serif, Simple, Sky, Solarized, White + Corner* = enum + UpperLeft, UpperRight, LowerLeft, LowerRight + NimiSlidesConfig* = object localReveal*: string + SlideOptions* = object + autoAnimate*: bool + colorBackground*: string + imageBackground*: string + videoBackground*: string + iframeBackground*: string + iframeInteractive*: bool + +proc slideOptions*(autoAnimate = false, iframeInteractive = true, colorBackground, imageBackground, videoBackground, iframeBackground: string = ""): SlideOptions = + SlideOptions( + autoAnimate: autoAnimate, iframeInteractive: iframeInteractive, colorBackground: colorBackground, + imageBackground: imageBackground, videoBackground: videoBackground, + iframeBackground: iframeBackground + ) + const document = """ @@ -45,6 +64,11 @@ const head = """ {{> revealCSS }} + {{#nb_style}} + + {{/nb_style}} """ @@ -55,6 +79,11 @@ const main = """ {{&.}} {{/blocks}}
+ {{#revealFooter}} + + {{/revealFooter}}
{{> revealJS }}