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 @@
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.
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.