Add more example presentations

README.md

@@ -17,10 +17,12 @@ presenterm
 
 _presenterm_ lets you create presentations in markdown format and run them from your terminal, with support for image 
 and animated gif support, highly customizable themes, code highlighting, exporting presentations into PDF format, and 
-plenty of other features. This is how the [demo presentation](examples/demo.md) looks like:
+plenty of other features. This is how the [demo presentation](/examples/demo.md) looks like:
 
 ![](/docs/src/assets/demo.gif)
 
+Check the rest of the example presentations in the [examples directory](/examples).
+
 # Documentation
 
 Visit the [documentation][guide-introduction] to get started.

docs/src/introduction.md

@@ -10,7 +10,10 @@ This is how the [demo presentation][demo-source] looks like:
 
 ![demo]
 
+**A few other example presentations can be found [here][examples]**.
+
 <!-- Links -->
 [github]: https://github.com/mfontanini/presenterm/
 [demo]: ./assets/demo.gif
 [demo-source]: https://github.com/mfontanini/presenterm/blob/master/examples/demo.md
+[examples]: https://github.com/mfontanini/presenterm/tree/master/examples

examples/README.md

@@ -0,0 +1,42 @@
+Examples
+===
+
+This section contains a few example presentations that display different features and styles you can use in your own. In 
+order to run the presentations locally, first [install 
+presenterm](https://mfontanini.github.io/presenterm/guides/installation.html), clone this repo, and finally run:
+
+```shell
+presenterm examples/<name-of-the-presentation>.md
+```
+
+# Demo
+
+[Source](/examples/demo.md)
+
+This is the main demo presentation, which showcases most features and uses the default dark theme.
+
+This is how it looks like when rendered:
+
+![](/docs/src/assets/demo.gif)
+
+# Code
+
+[Source](/examples/code.md)
+
+This example contains some piece of code and showcases some different styling properties to make it look a bit different 
+than how it looks like by default by using:
+
+* Use left alignment for code blocks.
+* No background for code blocks.
+
+[![asciicast](https://asciinema.org/a/irNPKwEkPZzFbQP6jIKfVL30b.svg)](https://asciinema.org/a/irNPKwEkPZzFbQP6jIKfVL30b)
+
+# Footer
+
+[Source](/examples/footer.md)
+
+This example uses a template-style footer, which lets you place some text on the left, center, and right of every slide. 
+A few template variables, such as `current_slide` and `total_slides` can be used to reference properties of the 
+presentation.
+
+[![asciicast](https://asciinema.org/a/DLpBDpCbEp5pSrNZ2Vh4mmIY1.svg)](https://asciinema.org/a/DLpBDpCbEp5pSrNZ2Vh4mmIY1)

examples/code.md

@@ -0,0 +1,76 @@
+---
+theme:
+  override:
+    code:
+      alignment: left
+      background: false
+---
+
+Code styling
+===
+
+This presentation shows how to:
+
+* Left-align code blocks.
+* Have code blocks without background.
+
+```rust
+pub struct Greeter {
+    prefix: &'static str,
+}
+
+impl Greeter {
+    /// Greet someone.
+    pub fn greet(&self, name: &str) -> String {
+        let prefix = self.prefix;
+        format!("{prefix} {name}!")
+    }
+}
+
+fn main() {
+    let greeter = Greeter { prefix: "Oh, hi" };
+    let greeting = greeter.greet("Mark");
+    println!("{greeting}");
+}
+```
+
+<!-- end_slide -->
+
+Column layouts
+===
+
+The same code as the one before but split into two columns to split the API definition with its usage:
+
+<!-- column_layout: [1, 1] -->
+
+<!-- column: 0 -->
+
+# The `Greeter` type
+
+```rust
+pub struct Greeter {
+    prefix: &'static str,
+}
+
+impl Greeter {
+    /// Greet someone.
+    pub fn greet(&self, name: &str) -> String {
+        let prefix = self.prefix;
+        format!("{prefix} {name}!")
+    }
+}
+```
+
+<!-- column: 1 -->
+
+# Using the `Greeter`
+
+```rust
+fn main() {
+    let greeter = Greeter {
+      prefix: "Oh, hi"
+    };
+    let greeting = greeter.greet("Mark");
+    println!("{greeting}");
+}
+```

examples/footer.md

@@ -0,0 +1,21 @@
+---
+theme:
+  override:
+    footer:
+      style: template
+      left: "@myhandle"
+      center: "Introduction to footer styling"
+      right: "{current_slide} / {total_slides}"
+---
+
+First slide
+===
+
+The important bit in this presentation is the **footer at the bottom**.
+
+<!-- end_slide -->
+
+Second slide
+===
+
+_nothing to see here_