[talks/demo] Updated demo with relevant information, fixed styling and added better examples

1 files changed, 172 insertions, 55 deletions

diff --git a/src/talks/demo/index.md b/src/talks/demo/index.md
index 7640979..6ba61f5 100644
--- a/src/talks/demo/index.md
+++ b/src/talks/demo/index.md
@@ -1,37 +1,21 @@
 # Demo presentation
 
-[Slides Source](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/talks/demo.md) || [PDF version](/files/slides/Demo%20presentation%20-%20Syndamia.pdf)
-
-**Created: 27 September 2022** || **Edited: 28 September 2022**
-
 This is a small presentation, explaining how my custom system for making presentations works.
 
 &&presentation
 
-&&slide &&flexer
-&&centered &&font35
+&&clide &&font35 &&centered
 
 # My presentation system
+&&font18 *Syndamia AT [syndamia.com](https://syndamia.com)* &&/font
 
-&&/font
-
-<br>
-
-&&font20
-
-Before we go any further, click the **icon, next to the printer** right above this rectangle.
+Before we go any further, click the **icon, next to the printer** above this rectangle, to the left.
 
 Now the presentation should fill out the entire page. On the bottom right are your controls.
 
-Press the *right arrow* to go to the next slide.
-
-&&/font
-&&/centered
-&&flexer
-
-&&font18 kamen AT [syndamia.com](https://syndamia.com) || 2022 &&/font
+Press the *right arrow* in the controls to go to the next slide.
 
-&&/slide
+&&/centered &&/font &&/clide
 
 
 
@@ -39,19 +23,37 @@ Press the *right arrow* to go to the next slide.
 
 # Introduction
 
-I created a simple system for making presentations with slides in them. The gist of it is: different [Markdown](https://en.wikipedia.org/wiki/Markdown) paragraphs are put into a rectangle, each rectangle representing a slide, with some added options for layout and format. In a bit more detail, we'll have to get familiar with
+&&lineb1
+
+I created a simple system for making presentations with slides in them.
+The gist of it is: different [Markdown](https://en.wikipedia.org/wiki/Markdown) paragraphs are put into a rectangle, each rectangle representing a slide, with some added options for layout and format.
 
 ## ftags
 
-An ftag is a short string of characters, that starts with two ampersands (&&) and contains only letters, numbers, hyphen, underscore and forwardslash. The concept has probably been created before, but I came up with it on my own. The name comes from ["format tags"](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/generate-hooks#ftags).
+An ftag (["format tag"](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/awk-edits#ftags)) is what I call a short string of characters, that starts with two ampersands (&&).
+Each ftag is a "marker" that gets replaced by some other text (usually [HTML tags](https://en.wikipedia.org/wiki/HTML)).
+
+An easy example is the image of the Great Britain flag (part of [Flags.awk](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/awk-edits/Flags.awk), not the presentation system!): typing out &&GB (in lowecase), gets replaced by the actual image - &&gb.
+
+&&/slide
+
 
-The idea is that, whenever I want some sort of script to parse/format text, I use ftags as markers. Depending on the script, every ftag is replaced in the resultant webpage with other text or [HTML code](https://en.wikipedia.org/wiki/HTML).
 
-An easy example is the image of the Great Britain flag: at the end of this sentence, I have simply tiped out &&GB (in lowecase), and it gets replaced with the corresponding image - &&gb.
+&&slide
 
 ## Why?
 
-Programs like Microsoft PowerPoint and LibreOffice Impress have very bad compatibility issues, between programs, versions, languages and even operating systems. As to why I don't just use a ready web presentation tool like [reveal.js](https://revealjs.com/), I find most of those too heavy and feature-bloated for my needs.
+- Programs like Microsoft PowerPoint and LibreOffice Impress have very poor compatibility, between programs, versions, languages and even operating systems.
+  A web-based solution is significantly more consistent and flexible.
+
+- Ideally, the system would be made well enough that creating a presentation would be significantly faster than with one of those.
+
+- Making my own system means I can tailor it to my needs and preferences.
+  Looking around other [HTML-based presentation tools](https://gist.github.com/vasilisvg/1611562):
+  + [reveal.js](https://revealjs.com/) is way too heavy and fancy for my needs (animations are nice, but I'm fine going without them)
+  + [DZSlides](https://paulrouget.com/dzslides/) and [S5](https://meyerweb.com/eric/tools/s5/) are really nice, however both are HTML-centric, and I want my slides to be written in Markdown.
+    Creating ftags that are transformed to DZSlide HTML is possible, but at that point I should just make my own system.
+  + and pretty much everything else falls into either category
 
 &&/slide
 
@@ -61,69 +63,184 @@ Programs like Microsoft PowerPoint and LibreOffice Impress have very bad compati
 
 # Formatting
 
-Every (presentation-specific) formatting option is listed and explained in the [`create-presentation.awk`](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/generate-hooks/create-presentation.awk) script, but to summarize: you can modify
+Every (presentation-specific) ftag is listed and explained in [Presentation.awk](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/awk-edits/Presentation.awk).
+To summarize, each slide is wrapped in `&&slide` and `&&/slide` (or `&&clide` and `&&/clide`), you can change font size for specific portions, you can add basic (without formatting) tables for fancy layout, you can align text and elements and you can add line breaks.
 
-- font size
-- text alignment
-- row and column arrangement of paragraphs
+And they can work together in most different combination.
 
-And they can work together in every possible combination. Here is an example which uses most of those in one place:
+&&lineb1
 
-&&flexer
+Though, remember that everything gets translated to HTML, so don't do (even if it works)
 
-&&frow
+```
+&&slide &&font20 &&/slide &&/font
+```
 
-&&font18 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lectus porttitor nibh pellentesque ultrices ut in lorem. Pellentesque commodo dignissim placerat. &&/font
+Enough talking, here are examples!
 
-&&fcol &&font27
+&&/slide
 
-These
 
-words
 
-&&centered are in an &&/centered
+&&slide
 
-ftag column.
+&&font18 Font-size 18px &&/font
+&&font20 Font-size 20px &&/font &&font22 Font-size 22px &&/font &&font25 Font-size 25px &&/font
+Font-size 30px (default)
+&&font35 Font-size 35px &&/font
 
-&&/font &&/fcol
-&&flexer
+&&lineb5
 
 &&fright
-Vestibulum sodales pharetra justo, placerat egestas arcu hendrerit vitae. Integer eros est, lobortis sit amet mollis nec, mollis in ex. In hac habitasse platea dictumst.
+This text is floated to the right
 &&/fright
 
-![](/tutorials/fix-no-frame-buffer-plan9/img/rio-default-login.png)
+&&lineb2
+
+&&centered While this one is centered &&/centered
+
+&&lineb2
 
-&&/frow
+&&fright Floated right<br>Floated right<br>Floated right &&/fright
 
-&&flexer
+But you may realize that text floated to the right will make other text wrap around it!
+Maybe this should be changed?
 
 &&/slide
 
 
 
-&&slide
+&&slide &&font18
+
+The source Markdown for the predvious slide (without the pipes to the left) is:
+
+```
+|      &&slide
+|      
+|      &&font18 Font-size 18px &&/font
+|      &&font20 Font-size 20px &&/font &&font22 Font-size 22px &&/font &&font25 Font-size 25px &&/font
+|      Font-size 30px (default)
+|      &&font35 Font-size 35px &&/font
+|      
+|      &&lineb5
+|      
+|      &&fright
+|      This text is floated to the right
+|      &&/fright
+|      
+|      &&lineb2
+|      
+|      &&centered While this one is centered &&/centered
+|      
+|      &&lineb2
+|      
+|      &&fright Floated right<br>Floated right<br>Floated right &&/fright
+|      
+|      But you may realize that text floated to the right will make other text wrap around it!
+|      Maybe this should be changed?
+|      
+|      &&/slide
+```
+
+&&/font &&/slide
+
+
+
+&&clide &&table
+
+You can also easily tabularize
+
+&&cont &&fright
+
+- List Element 1
+- List Element 2
+
+&&/fright &&/cont
+
+&&tarow
+
+**any** sort of content
+
+&&/table
+
+&&lineb1
+
+&&ftable
+
+So you can very easily put images next to your text
+
+&&centered ![](/tutorials/fix-no-frame-buffer-plan9/img/rio-default-login.png =120x) &&/centered
+
+&&/table &&/clide
+
+
+
+&&slide &&font18
+
+The source Markdown for the predvious slide (without the pipes to the left) is:
+
+```
+|      &&clide &&table
+|      
+|      You can also easily tabularize
+|      
+|      &&cont &&fright
+|      
+|      - List Element 1
+|      - List Element 2
+|      
+|      &&/fright &&/cont
+|      
+|      &&tarow
+|      
+|      **any** sort of content
+|      
+|      &&/table
+|      
+|      &&lineb1
+|      
+|      &&ftable
+|      
+|      So you can very easily put images next to your text
+|      
+|      &&centered ![](/tutorials/fix-no-frame-buffer-plan9/img/rio-default-login.png =120x) &&/centered
+|      
+|      &&/table &&/clide
+```
+
+&&/font &&/slide
+
+
+
+&&slide &&font27
 
 # Other features
 
-As you've obviously noticed, the presentation "system" also adds a navigation bar, with which to present and navigate slides. You can also print very easily the whole presentation on A4 sheets of paper, since that's the exact size of each slide.
+As you've obviously noticed, the presentation "system" also adds a navigation bar, with which to present and navigate slides.
+You can also print very easily the whole presentation on A4 sheets of paper, since that's the exact size of each slide.
 
-Given that the Markdown itself isn't touched, changing themes is no problem. Finally, because again, if you don't have JavaScript enabled, the presentation will be shown as any other ordinary article!
+Pretty much all other website functionalities, like themes and click-to-zoom images, aren't inhibited.
+The slides are easily scrollable/browseable and if you don't have JavaScript enabled, everything will be shown as a normal(-ish) article, without any *major* styling issues.
 
-## Closing remarks
+## Setup
 
-Although it doesn't have every feature known to man, this system is still very capable, and it's contained in just three files: [`create-presentation.awk`](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/generate-hooks/create-presentation.awk), [`presentation.js`](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/scripts/presentation.js) and [`presentation.css`](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/presentation.css).
+Everything is contained in 3 files: [Presentation.awk](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/awk-edits/Presentation.awk), [presentation.js](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/scripts/presentation.js) and [presentation.css](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/presentation.css), which pretty much work on your "compiled" HTML.
 
-&&flexer
+`Presentation.awk` handles replacement of ftags (only in `/talks` pages!).
+`presentation.js` is inserted into the HTML by `&&presentation`, and handles the navigation bar as well as insertion of `presentation.css` (the overall presentation-specific styling).
+
+&&/font &&/slide
+
+
+
+&&clide
 
 &&centered
 # Thats All. Thank you for your time!
 &&/centered
 
-&&flexer
-
 &&fright &&font18
 *P.S. Press the same button (next to the print button) with which you started presenting, to stop presenting ;)*
-&&font18 &&/fright
+&&/font &&/fright
 
-&&/slide
+&&/clide