Started working on tutorial decks

app/Decker.hs

@@ -13,6 +13,7 @@ import Control.Exception
 import Control.Lens ((^.))
 import Control.Monad (when)
 import Control.Monad.Extra
+import Dachdecker
 import Data.Aeson
 import Data.IORef ()
 import Data.List
@@ -32,7 +33,6 @@ import Text.Pandoc
 import Text.Pandoc.Definition
 import Text.Printf (printf)
 import Utilities
-import Dachdecker
 
 main :: IO ()
 main = do
@@ -107,6 +107,8 @@ main = do
     --
     phony "example" $ liftIO writeExampleProject
     --
+    phony "tutorial" $ liftIO writeTutorialProject
+    --
     phony "sketch-pad-index" $ do
       indicesA >>= need
       indicesA >>=

readme.md

@@ -100,8 +100,7 @@ Exchange the `html` at the end of the command with your *decker* command of choi
 
 -   `decker pdf`
 
-    Builds PDF versions of all documents that are generated from `*-page.md`
-    files.
+    Builds PDF versions of all documents. 
 
 -   `decker pdf-decks`
 

resource/tutorial/1-tutorial-overview-deck.md

+---
+---
+
+# Tutorial Decker

resource/tutorial/2-command-line-deck.md

+# Decker Command Line
+
+# Overview over the decker command line
+
+If you can read this, you probably already know how to use decker on the command line but here is an additional overview over all possible command line arguments supported by decker.
+
+# decker example & decker tutorial
+
+- `decker example` copies an example project to the current directory
+- `decker tutorial` copies extended examples and tutorial decks to the current directory
+
+# `decker watch` and `decker server`
+
+- `decker watch` Builds HTML versions of all documents and then watches for document changes. Each change to a watched document triggers a rebuild. Watching can be terminated with `^C`.
+
+- `decker server`: Like `decker watch`. Additionally a local web server is started that serves the generated HTML files. The `*-deck.html` file is openend in the browser. Changed files are reloaded in the browser. (still requires `livereloadx`)
+
+# decker html
+
+- `decker html` creates html files without opening a server
+
+# decker pdf & decker pdf-decks
+
+- `decker pdf` creates pdf files of all files
+- `decker pdf-decks` creates pdf files only of the slide decks
+
+To use `decker pdf` or `decker pdf-decks`, Google Chrome has to be installed.    
+**Windows:** Follow the Google Chrome installer instructions.  
+**MacOS:** Follow the Google Chrome installer instructions. **Google Chrome.app** has to be located in either `/Applications/Google Chrome.app` or `/Users/username/Applications/Google Chrome.app`
+Alternatively you can add `chrome` to `$PATH`.  
+**Linux:** `chrome` has to be on `$PATH`.    
+
+# `decker clean`
+
+    Recursively removes all generated files from the current directory.
+
+# `decker plan`
+
+    Prints a list of all source files found below the current directory.
+
+# `decker meta`
+
+    Pretty prints all meta data that can be found in `*.yaml` files in the
+    current directory and below. Meta data is mainly used to perform
+    substitutions in Markdown documents using the Mustache templating system.
+
+# `decker publish`
+
+    Publish the generated files to a remote location using `rsync` if the
+    location is specified in the meta data. The keys `rsync-destination.host`
+    and `rsync-destination.path` specify the publishing destination.

resource/tutorial/3-example-deck.md

+---
+title: Decker Slide Tool Reference Guide
+history: true
+menu: true
+bibliography: example.bib
+csl: chicago-author-date.csl
+controls: true
+chalkboard: example-deck.json
+---
+
+# Navigation
+
+Navigate this presentation with the controls in the bottom-right corner, your arrow keys or the space bar.
+
+Some explanations have examples on a separate slide. These will be arranged below the respective slide and will be indicated by a down arrow in the controls. Use the down arrow key to see them.
+If you use the space bar to go through the presentation, the examples will automatically follow their explanation.
+
+The <i class="fas fa-bars"></i> icon in the bottom-left corner opens a menu showing a table of contents of all slides.
+
+# Markdown Syntax {#syntax}
+
+The Decker Slide Tool assists you in creating media-rich presentations with a few easy to use Markdown commands. This user guide will highlight some of the main styling features of Decker and provide examples on how to use each feature.
+
+Visit [http://pandoc.org](http://pandoc.org) for additional information on Pandoc-Markdown text formatting.  
+
+# New Slides {#slides}
+
+Heading 1 (h1) headers create new slides.
+
+## {.split}
+```markdown
+# Heading 1 (h1) new slide
+## Heading 2 (h2)
+### Heading 3 (h3)
+#### Heading 4 (h4)
+```
+##
+
+## Heading 2 (h2)
+
+### Heading 3 (h3)
+
+#### Heading 4 (h4)
+
+# Multicolumn Slides {#multicolumn}
+
+```markdown
+# Würzburg Sehenswürdigkeiten {layout="columns"}
+
+## Die Residenz {.left}
+Die Würzburger Residenz ist das Hauptwerk des ...
+
+## Alte Mainbrücke {.center}
+Diese erste Steinbrücke Deutschlands soll bereits um ...
+
+## Dom St. Kilian {.right}
+Ein Hauptwerk der deutschen Baukunst zur Zeit der ...
+```
+
+# Multicolumn example {layout="columns" .sub #example-multicolumn}
+
+## Die Residenz {.left}
+
+Die Würzburger Residenz ist das Hauptwerk des süddeutschen Barock.
+
+## Alte Mainbrücke {.center}
+
+Die erste Steinbrücke Deutschlands soll bereits um 1120 errichtet worden sein.
+
+## Dom St. Kilian {.right}
+
+Ein Hauptwerk der deutschen Baukunst und viertgrößte romanische Kirche Deutschlands.
+
+# Top and Bottom {#topBottom}
+
+Additionally use the `.top` and `.bottom` tags can be used.
+
+```markdown
+# Top and Bottom Example {layout="columns"}
+
+## Top Colum {.top}
+First/top column spans across the following columns.
+
+## Left Column {.left}
+
+## Right Column {.right}
+
+## Third Column {.bottom}
+Third/bottom column spans across the columns above.
+```
+
+# Top and Bottom Example {layout="columns" .sub #example-topBottom}
+
+## Top Colum {.top}
+First/top column spans across the following columns.
+
+## Left Column {.left}
+
+## Right Column {.right}
+
+## Third Column {.bottom}
+Third/bottom column spans across the columns above.
+
+# Vertical Slides {#verticalSlides}
+
+Add the {.sub} tag to any slide to place it below the previous slide.
+
+```
+# Vertical Slide Example {.sub}
+
+This slide will appear below the previous slide. 
+```
+
+# Vertical Slide Example {.sub}
+
+This slide will appear below the previous slide. 
+
+# Text Emphasis {#textEmphasis}
+
+Format text by surrounding it in appropriate symbols:
+
+## {.split}
+
+```markdown
+**This is bold text**
+__This is bold text__
+*This is italic text*
+_This is italic text_
+~~Strikethrough~~
+<u>underline</u>
+~subscript~
+^superscript^
+```  
+
+##
+
+**This is bold text**  
+__This is bold text__  
+*This is italic text*  
+_This is italic text_  
+~~Strikethrough~~  
+<u>underline</u>     
+H~2~O is a liquid.    
+2^3^ equals 8.  
+
+# Inverse Colors {#inverse .inverse background-color="black"}
+
+## Color Scheme for Dark Images {}
+
+- Add `.inverse` tag to slide header (h1)
+- Add `background-color="black"` to slide header (h1)
+
+## Definition Box {.fragment .definition}
+
+Even colored boxes look ok.
+
+# Highlight Blocks {#blocks}
+
+## {.split style="font-size:small"}
+
+```markdown
+## Alert Block {.alert}
+
+-  Alert Text
+```
+## {style="font-size:small"}
+```markdown
+## Question Block {.question}
+
+-  Question text
+```
+## {style="font-size:small"}
+```markdown
+## Answer Block {.answer}
+
+-  Answer text
+```
+## {style="font-size:small"}
+```markdown
+## Definition Block {.definition}
+
+-  Definition text
+```
+
+## {style="font-size:small"}
+
+```markdown
+## Observation Block {.observation}
+
+-  Observation text
+```
+## {style="font-size:small"}
+```markdown
+## Example Block {.example}
+
+-  Example text
+```
+## {style="font-size:small"}
+```markdown
+## Equation Block {.equation}
+
+-  Equation text
+```
+## {style="font-size:small"}
+```markdown
+## Note Block {.note}
+
+-  Note text
+```
+
+# Highlight Blocks example {#example-blocks .sub}
+
+## Alert Block {.alert .split}
+
+-  Alert Text
+
+## Question Block {.question}
+
+-  Question text
+
+## Answer Block {.answer}
+
+-  Answer text
+
+## Definition Block {.definition}
+
+-  Definition text
+
+## Observation Block {.observation}
+
+-  Observation text
+
+## Example Block {.example}
+
+-  Example text
+
+## Equation Block {.equation}
+
+-  Equation text
+
+## Note Block {.note}
+
+-  Note text
+
+# Lists {#lists}
+
+## Ordered Lists {.split}
+
+```markdown 
+1.  bread
+2.  milk
+3.  sugar
+4.  flour
+```
+## {.example}
+
+1.  bread
+2.  milk
+3.  sugar
+4.  flour
+
+## Enumerated Lists
+
+```markdown
+-  Take out trash
+-  Vaccuum
+    - Bedrooms
+-  Wash dishes
+```
+## {.example}
+
+-  Take out trash
+-  Vaccuum
+    - Bedrooms
+-  Wash dishes
+
+# Sequential Lists {#seqlists}
+
+Use the (\@) symbol to automatically number items in a list.     
+Numbered examples do not need to be in a single list.  
+
+## {style="font-size:small;"}
+
+```markdown  
+(@)  Salman Rushdie, *The Ground beneath Her Feet* (New York: Henry Holt, 1999), 25.  
+
+(@)  Bob Stewart, "Wag of the Tail: Reflecting on Pet Ownership," in *Enriching Our
+  Lives with Animals*, ed. John Jaimeson, Tony Bannerman and Selena Wong
+  (Toronto, ON: Petlove Press, 2007),100.  
+
+Additional sources:  
+
+(@)  Elliot Antokoletz, *Musical Symbolism in the Operas of Debussy and Bartok*
+  (New York: Oxford University Press, 2008),
+  doi:10.1093/acprof:oso/9780195365825.001.0001.
+```
+
+# Sequential Lists example {#example-seqlists .sub}
+
+(@)  Salman Rushdie, *The Ground beneath Her Feet* (New York: Henry Holt, 1999), 25.  
+
+(@)  Bob Stewart, "Wag of the Tail: Reflecting on Pet Ownership," in *Enriching Our
+  Lives with Animals*, ed. John Jaimeson, Tony Bannerman and Selena Wong
+  (Toronto, ON: Petlove Press, 2007),100.  
+
+Additional sources:  
+
+(@)  Elliot Antokoletz, *Musical Symbolism in the Operas of Debussy and Bartok*
+  (New York: Oxford University Press, 2008),
+  doi:10.1093/acprof:oso/9780195365825.001.0001.
+
+# Links {#links}
+
+Enter the text to be displayed followed by the URL or slide ID.
+
+```markdown
+[text-to-be-displayed](https://url-of-website)
+[text-to-be-displayed](#slide-id)
+```
+
+*Note:* Slide IDs are entered on the slide header (h1) as follows:
+
+```markdown
+# Slide Title {#slide-id}
+```
+
+# Links example {#example-links .sub}
+
+## {style="font-size:small;"}
+
+```
+Visit [http://pandoc.org](http://pandoc.org) for additional information.
+
+Read more about building [lists](#lists) in Decker.
+```
+
+##
+
+## {.example}
+
+Visit [http://pandoc.org](http://pandoc.org) for additional information.  
+Read more about building [lists](user-guide-deck.html#/lists) in Decker.
+
+
+# Images {#images}
+
+Include images in presentations:
+
+```markdown
+![Image Caption](image-file-location){css-formatting}
+```
+
+# Images example {#example-images .sub}
+
+##
+```markdown
+![Haskell](img/haskell.png){width="30%"}
+```
+
+##
+
+![Haskell](img/haskell.png){width="30%"}
+
+
+# Videos {#video}
+
+Include videos in presentations:  
+
+```markdown
+![title](video-file-location){css-formatting}
+```
+
+# Videos example {#example-movies_1 .sub}
+
+```markdown
+Video with controls:
+![](movies/jmu-hci-intro.mp4){controls=1}
+
+Video with autoplay:
+![](movies/jmu-hci-intro.mp4){data-autoplay=true}
+```
+
+## {.split}
+
+Video with controls:
+![](movies/jmu-hci-intro.mp4){controls=1}
+
+##
+
+Video with autoplay:
+![](movies/jmu-hci-intro.mp4){data-autoplay=true}
+
+
+# External Videos {#ext-vid}
+
+Include YouTube and Vimeo videos or Twitch channels in presentations:  
+
+```markdown
+![](service://video-id){css-formatting}
+```
+*Note 1:* Replace `service` with `youtube`, `vimeo` or `twitch` and add video id or twitch channel name (replaces `video-id`).
+
+*Note 2:* The video ID is usually found in the URL.
+
+  **YouTube example URL:** https://www.youtube.com/watch?v=<u>qEcmwHRG2Mo</u>  
+  **YouTube video ID:** qEcmwHRG2Mo
+
+# External Videos example {#example-movies_2 .sub}
+
+```markdown
+![](youtube://qEcmwHRG2Mo){width="65%"}
+```
+
+![](youtube://qEcmwHRG2Mo){width="65%"}
+
+
+# Fullscreen Videos {#fullscreen}
+
+Fullscreen videos are identified in the slide header:
+
+```markdown
+# ![](movies/jmu-hci-intro.mp4){controls=1}
+```
+
+*Note:* Do not include a slide title.
+
+# ![](movies/jmu-hci-intro.mp4) {#example-movies_3 data-menu-title="Fullscreen Videos Example" controls=1 .sub}
+
+# Audio {#audio}
+
+Include audio clips in presentations:
+```markdown
+![title](audio-file-location){css-formatting}
+```
+
+# Audio example {#example-audio .sub}
+
+## {style="font-size:small;"}
+```markdown
+Audio with controls:
+![](audio/wildbach.mp3){controls=1}
+
+Audio with controls and autoplay:
+![](audio/wildbach.mp3){controls=1 data-autoplay=true}
+```
+
+##
+
+## {.split .example}
+
+Audio with controls:
+![Wildbach](audio/wildbach.mp3){controls=1}
+
+## {.example}
+
+Audio with controls and autoplay:
+![Wildbach](audio/wildbach.mp3){controls=1 data-autoplay=true}
+
+# Tables {#tables}
+
+Tables are created with pipes (|) and hyphens (-). Align text with colons (:) on the left, right, or on both sides of the hyphens in the header row.
+
+```markdown
+| Right Align | Left Align | Center Align | Default |
+|        ---: | :---       |    :---:     | ------- |
+|        data | data       |     data     | data    |
+|        data | data       |     data     | data    |
+```
+
+
+# Tables example {#example-tables .sub}
+
+## {style="font-size:small;"}
+
+```markdown
+Table: Assignment List
+
+|  Week | Topic | Reading | Book |
+|  ---: | :---  |  :---:  | ---- |
+|   1   | Course Introduction | Chapt. 1 | Physics |
+|   2   | Inertia, Equilibrium, Kinematics | Chapt. 2-3| Physics |
+|   3   | Vectors, Momentum, Energy | Chapt. 4-7 | Physics |
+```
+
+##
+
+## {.example}
+
+Table: Assignment List
+
+|  Week | Topic | Reading | Book |
+|  ---: | :---  |  :---:  | ---- |
+|   1   | Course Introduction | Chapt. 1 | Physics |
+|   2   | Inertia, Equilibrium, Kinematics | Chapt. 2, 3, 4| Physics |
+|   3   | Vectors, Momentum, Energy | Chapt. 5-8 | Physics |
+
+# Verbatim Code Blocks {#code}
+
+To treat text as verbatim, either:   
+
+-  surround text with three tildes ( ~ ) or backticks ( \` )  
+-  or indent each line by four spaces.
+
+
+# Verbatim Code Block example {#example-code .sub}
+
+## {style="font-size:small;"}
+
+```markdown
+~~~java
+if (a > 3) {
+  moveShip(5 * gravity, DOWN);
+}
+~~~
+```
+
+##
+
+~~~java
+if (a > 3) {
+  moveShip(5 * gravity, DOWN);
+}
+~~~
+
+
+# Block Quotes {#blockQuote}
+
+To quote a block of text, preceed each line with a (>) character:
+```markdown
+> This is a block quote.
+>
+> > A block quote within a block quote.
+```
+
+> This is a block quote.
+>
+> > A block quote within a block quote.
+
+# Mathematics {#math layout="columns"}
+
+## {.top}
+
+-   Single \$ encloses inline math
+-   Double \$\$ encloses a display math block
+
+
+## {.left}