Commit 3619060c authored by Armin Bernstetter's avatar Armin Bernstetter

removed tutorial files and adapted the related code. decker tutorial command links to the wiki now

parent 18bed83d
......@@ -50,7 +50,6 @@ main = do
then run
else case head args of
"example" -> writeExampleProject startDir
"tutorial" -> writeTutorialProject startDir
"clean" -> runClean
_ -> run
......@@ -125,6 +124,14 @@ run = do
--
want ["decks"]
--
phony "tutorial" $ do
putNormal "# To find information on how to use decker please check the documentation in the wiki: https://go.uniwue.de/decker-wiki"
putNormal "# To create a new project please use the command \"decker example\""
--
phony "help" $
putNormal "# To find information on how to use decker please check the documentation in the wiki: https://go.uniwue.de/decker-wiki"
--
phony "version" $ do
putNormal $
"decker version " ++
......
......@@ -21,7 +21,7 @@ less:
resource-zip:
rm -f resource/decker-resources.zip
(cd resource; zip -qr decker-resources.zip example support template tutorial)
(cd resource; zip -qr decker-resources.zip example support template)
install: clean-build
mkdir -p $(local-bin-path)
......
......@@ -173,11 +173,6 @@ a HTML document, or a PDF document, depending on the file name.
source code for a slide deck that explains most of the available features
for creating slide decks.
- `decker tutorial`
Like `example` but copies extended example/tutorial slide decks to the
current directory.
- `decker clean`
Recursively removes all generated files from the current directory (i.e. the
......
---
title: Decker Tutorial Overview
---
# Overview
## [Command line deck](./02-command-line-deck.html)
How to use `decker` on the command line.
## [Header deck](./03-header-deck.html)
An overview of the possible configuration options that can be included in the
header of the `*-deck.md` markdown files.
## [Example deck](./04-example-deck.html)
An extensive overview of the possibilities of designing slide decks offered by
`decker`.
#
## [Quiz deck](./05-quiz-deck.html)
How to create simple quizzes with different question types for a self-learning
scenario.
## [Chart deck](./06-chart-deck.html)
How to include charts using the reveal.js chart plugin.
# General Information
# Folder Structure
- When running, decker creates a `public` folder in the current directory.
- This folder contains the template and support files needed during
presentation time as well as the generated `html` and `pdf` files.
# Technologies
Decker is built using:
- [Haskell](https://www.haskell.org/), [Pandoc](https://pandoc.org/),
[Shake](https://shakebuild.com/)
- [reveal.js](https://revealjs.com/#/)
- [LaTeX]()
- [Chrome/Chromium]() (for pdf generation)
---
title: Decker on the command line
---
# Introduction
This slide deck provides an overview over the possible command line arguments supported by decker.
# Workflow
The general recommended workflow of decker on the command line is:
- `decker example` to create a new project, `cd` into the generated project
- If you have an existing project, navigate to that directory on the command line
- `decker server` to create html versions and open a local server
- Navigate to `localhost:8888` in a browser
- Create and edit `*-deck.md` files and see changes in the browser window on file save
- If finished, shut down the server by pressing `^C/Ctrl C` on the command line
# `decker help`
Prints a help document to stdout in Markdown format.
# `decker info`
Prints information about the current project's directories, the targets (files which will be generated) and the meta data options which are found in the top level `decker.yaml` file.
# `decker example` and `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/Ctrl C`.
- `decker server`: Like `decker watch`. Additionally a local web server at the address `localhost:8888` is started that serves the generated HTML files. Changed files are reloaded in the browser.
# `decker html` and `decker decks`
- `decker html` creates all HTML files without opening a server
- `decker decks`creates only HTML slide decks
# `decker clean`
- Recursively removes all generated files from the current directory i.e. only the `public` folder.
- Also clears cached resource folders with version number older than the currently used decker version.
# `decker pdf` and `decker pdf-decks`
- `decker pdf` creates pdf versions of all files
- `decker pdf-decks` creates pdf versions only of the html slide decks
#
To use `decker pdf` or `decker pdf-decks`, Google Chrome has to be installed.
- **Windows:** Currently `decker pdf` does not work on Windows. Please add `print: true` or `menu: true` to your slide deck and use the print button on the title slide or in the menu.
- **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 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.
---
title: YAML-Header options
---
# Introduction
This deck shows the available options which can be included in the `YAML` meta configuration.
For further options which might not be included here see: [https://github.com/hakimel/reveal.js/#configuration](https://github.com/hakimel/reveal.js/#configuration)
# Meta files
- The meta configuration options shown here can also be included in the `decker.yaml` file located in the top level of the project directory. These options are then active per default for every slide deck but can be overwritten in a specific slide deck.
- For example: The `date` and `menu: true` are added to the `decker.yaml` file. If the header of a specific presentation deck includes `menu: false` the menu is not shown in this presentation.
# Example Header
This header is located directly at the top of the `*.md` file.
```yaml
---
title: Decker Slide Tool Reference Guide
menu: true
bibliography: example.bib
csl: chicago-author-date.csl
controls: true
chalkboard: example-deck.json
---
```
# Important
The meta option `provisioning` determines whether the `support` folder in the `public` directory is a symbolic link folder or a copy.
On Windows, only `Copy` should be used as symlinks on Windows work differently from MacOS/Linux.
The default setting (without having `provisioning` included in the meta) is `Copy`on Windows and `SymLink` on MacOS/Linux.
To be able to move the `public` folder to other devices (e.g. hold a presentation from a different computer) `provisioning: Copy` is necessary.
`provisioning` should be included in the `decker.yaml` file.
#
| Parameter | Options | Effect |
|---------------|----------------------------------|--------------------------------|
| `provisioning`| `Copy` or `SymLink` | `support` folder is copied or symlinked inside `public` folder|
# YAML-Header (Part 1)
| Parameter | Options | Effect |
|---------------|----------------------------------|--------------------------------|
| `author` | String | Displayed on first slide |
| `date` | String | Displayed on first slide (if "today" shows current date as YYYY-MM-DD) |
| `title` | String | Displayed on first slide |
| `subtitle` | String | Displayed on first slide |
# YAML-Header (Part 2)
| Parameter | Options | Effect |
|---------------|----------------------------------|--------------------------------|
| `width`, `height` | numeric | Define aspect ratio |
| `menu` | `true` or `false` | Include menu showing table of contents |
| `print` | `true` or `false` | Show a print button on the title slide |
# YAML-Header (Part 3)
| Parameter | Options | Effect |
|---------------|----------------------------------|--------------------------------|
| `progress` | `true` or `false` | Turn progress bar on/off |
| `slideNumber` | `true` or `false` | Turn slide numbers on/off |
| `history` | `true` or `false` | Show slides in browser history |
| `controls` | `true` or `false` | Turn arrow controls on/off |
# YAML-Header (Part 4)
| Parameter | Options | Effect |
|---------------|----------------------------------|--------------------------------|
| `csl` | Filepath to .csl file | Include a citation style (.csl)|
| `bibliography`| Filepath to .bib file | Include bibliography |
| `chalkboard` | `true` or `false` | Include reveal.js chalkboard plugin |
| `chart` | `true` or `false` | Include reveal.js chart plugin |
# YAML-Header (Part 5)
| Parameter | Options | Effect |
|---------------|----------------------------------|--------------------------------|
| `lang` | Any ISO Language Code (eg. `de`) | HTML content language |
| `css` | | Additional CSS resources |
| `dir` | `RTL` or `LTR` | Text content direction |
---
bibliography: example.bib
chalkboard: 'example-deck.json'
controls: true
csl: 'chicago-author-date.csl'
menu: true
title: Decker Slide Tool Reference Guide
---
# 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">`{=html}`</i>`{=html} 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> 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 {#example-multicolumn .sub layout="columns"}
## 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 {#example-topBottom .sub 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.
# 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>`{=html}underline`</u>`{=html}\
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}
(1) Salman Rushdie, *The Ground beneath Her Feet* (New York: Henry Holt,
1999), 25.
(2) 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:
(3) 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> for additional information.\
Read more about building [lists](#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%"}
```</