For a "Quick Start Guide" to `decker` see [this page](Quick-Start).
In this Wiki you will find documentation and instructional material for Decker.
For an FAQ see [this page](FAQ).
# Welcome to Decker
Decker is an e-authoring tool for the creation of web-based educational content.
# Documentation
[[_TOC_]]
## Keyboard Shortcuts
-<kbd>N</kbd>, <kbd>SPACE</kbd>: Next slide
-<kbd>P</kbd>: Previous slide
# Setup
-<kbd>←</kbd>, <kbd>H</kbd>: Navigate left
-<kbd>→</kbd>, <kbd>L</kbd>: Navigate right
Decker software is under active development. Use our [feedback and bug tracker](https://gitlab2.informatik.uni-wuerzburg.de/decker/feedback) if you run into problems or want to share your ideas with us. Just open a new issue!
-<kbd>ESC</kbd>, <kbd>O</kbd>: Slide overview / Escape from full-screen
- Click the link and download the Microsoft Installer file, `Decker-nightly.msi`.
-<kbd>S</kbd>: Speaker notes view
- Find the file in your `Downloads` folder and install Decker by double clicking it and following the installer instructions.
-<kbd>?</kbd>: Show keyboard shortcuts
- If you have installed Decker previously you might need to manually uninstall the previous version. The Windows installer does not yet support automatic reinstallation.
-<kbd>alt</kbd> + click: Zoom in. Repeat to zoom back out.
Inherited from [reveal.js](https://github.com/hakimel/reveal.js/wiki/Keyboard-Shortcuts).
- Enter `chmod +x decker` on the command line to make the file executable.
| `lang` | Any ISO Language Code (eg. `de`) | HTML content language |
- Move the executable to a directory that is on `$PATH` to be able to use `decker` anywhere.
| `dir` | `RTL` or `LTR` | Text content direction |
| `author-meta` | | HTML document header meta data |
# First Steps
| `date-meta` | | HTML document header meta data |
After downloading the correct Decker version for your operating system from the [Setup](home#setup), follow this guide to learn the basics of Decker.
| `keywords` | | HTML document header meta data |
| `theme` | | |
## Windows
| `css` | | Additional CSS resources |
| `history` | `true` or `false` | Show slides in browser history |
- Use the Windows file explorer to navigate to a folder suitable for saving presentations. We suggest creating a new folder e.g. `C:\Users\<username>\Documents\presentations`.
- Open a *Console* by typing `powershell` in the address bar of the file explorer.
A complete list of all meta data options can be found in the Pandoc HTML template(`resource/template/deck.html`).
- Continue with subsection [*Opening a presentation*](Home#opening-a-presentation).
## Columns
## MacOS
A column slide can be defined by `{layout="columns"}` in the slide header and by defining the orientation and scope each column in subheaders with `{.left}`, `{.center}` (optional), or `{.right}` tags.
- Use Finder to navigate to a folder suitable for saving presentations. We suggest creating a new folder e.g. `/Users/<username>/Documents/presentations`.
- Open a *Console* by right clicking the folder symbol and choosing `Services > New Terminal at Folder`.
| Tag | Target | Effect | Example |
- Continue with subsection [*Opening a presentation*](Home#opening-a-presentation).
| `{layout="columns"}` | Slide headers (`#`) | Use columns of this slide | `# Slide header {layout="columns"}` |
## Opening a presentation
| `{.left}` | Secondary headers (`##`) | Define start of left column | `## {.left}` or `## Text {.left}` |
| `{.center}` | Secondary headers (`##`) | Define start of central column (optional) | |
- Type `decker example` in the *Console*. This will generate a new folder named `example`.
| `{.right}` | Secondary headers (`##`) | Define start of right column | |
- Navigate to this new folder by typing `cd example` in the *Console*. If you close the *Console* the presentation might not be loaded correctly, therefore we recommend to only close the *Console* after concluding the presentation.
| `{.top}` | Secondary headers (`##`) | Define start of top row | |
- Type `decker server` in the *Console*. This command will open a local web server.
- Open a web browser (we recommend Google Chrome). If you don't have another instance of this server running open, type [http://localhost:8888/](http://localhost:8888/) in the address bar.
| `{.mid}` | Slide headers (`#`) or secondary headers (`##`) | Vertically centers columns. Can be assigned to the slider header for all columns or to individual columns. | `# Text {layout="columns" .mid}` or `## {.right .mid}` |
- You should now see a Decker presentation designed to provide an overview of some of the features that Decker offers.
- To close the server created by Decker, either close the *Console* or terminate the process by using the keyboard shortcut.
### Example:
Many of our users simply use `decker example` and rename/modify the `example-deck` to create their own presentation.
# Creating your first presentation
Now we will get into creating your own presentations with Decker:
- Keep `decker server` and your browser window on `localhost:8888` running in the background.
- Create and open a file called e.g. `minimal-deck.md` in the `example` folder.
- Your presentation files **must** have the ending `-deck.md`.
- Copy the following text or write your own. We recommend text editors such as [**Notepad++**](https://notepad-plus-plus.org/) or [**Visual Studio Code**](https://code.visualstudio.com/).
```
```
# Slide header {layout="columns"}
# This is a new slide!
Lorem ipsum
## This is a sub-heading
## Optional column title with vertically centered content {.left .mid}
dolor sit
## Subheader in the left column
# This is slide number two!
amet
```
- Save the file and take a look at your browser window. On the `Generated Index` page under `Slide decks` there should be a new presentation called `minimal-deck.html`
- The presentation running in your browser window will update itself with any changes made to the `-deck.md` file after saving it.
## Optional center column {.center}
# Contents of a Decker project folder
## {.right}
In the simplest case, a new Decker presentation consists of the following files:
# Slide with central columns {layout="columns" .mid}
-`decker.yaml`: A file containing configuration option. If you have never used Decker before you should copy the one that is located in the `example` folder generated by Decker.
- At least one file called `*-deck.md`. This is a text file in the popular `Markdown` format.
After running e.g. `decker server`, Decker will have generated additional files and folders:
-`public`: This folder contains your generated `html` presentation and files that are needed by the `html` files to look nice and function during a presentation. Everything in `public` is generated or copied automatically and will be so again if the folder is deleted.
-`.decker`: A hidden folder (depending on your system settings you might not even see it) where some auto-generated files are located. This folder is unimportant for you as a user.
## File paths
Paths to local file resources that are referenced by slide sets need to be provided in several contexts. For example:
- as a URL in an image tag to locate local media files like images or videos (learn more about including media files on the page [Media](Media))
``` {.markdown}
## A very important image
```
```
- as the value of meta data variables, for example to provide the location of the bibliography database and the citation style definition
## Dense Slide Layouts
``` {.yaml}
bibliography: /bib/bibliography.tex
csl: /bib/chicago-author-data.csl
```
In any case, path values for local file resources are interpreted either as relative to the defining file, if specified as a *relative path*, or as relative to the project root directory, if specified as an *absolute path*.
Slides can be vertically compressed to decrease the height of the content by assigning `{.dense}`, `{.x-dense}`, or `{.xx-dense}` to slide headers.
Consider the following project layout and file contents:
