diff options
| Commit | ad4e84fa7e269a9a5ec74572b5a495c47527f6aa (patch) | |
|---|---|---|
| Author | 2023-09-28 12:51:33 +0300 | |
| Committer | 2023-09-28 12:51:46 +0300 | |
| Files | 48fa7e683cd69d002021ff6daa319da22bdf811b /src/talks/demo | |
| syndamia.com-ad4e84fa7e269a9a5ec74572b5a495c47527f6aa.tar syndamia.com-ad4e84fa7e269a9a5ec74572b5a495c47527f6aa.tar.gz syndamia.com-ad4e84fa7e269a9a5ec74572b5a495c47527f6aa.zip | ||
| Parent | 25ee133d16996a254c11e169faeb0859b8e871e7 (diff) | |
[slides] Renamed talks to slides
1 files changed, 0 insertions, 265 deletions
| -rw-r--r-- | src/talks/demo/index.md | 265 |
diff --git a/src/talks/demo/index.md b/src/talks/demo/index.md deleted file mode 100644 index ebe95bb..0000000 --- a/src/talks/demo/index.md +++ /dev/null @@ -1,265 +0,0 @@ -# Demo presentation - -This is a small presentation, explaining how my custom system for making presentations works. - -&&presentation - -&&clide &&font35 &¢ered - -# My presentation system -&&font18 *Syndamia AT [syndamia.com](https://syndamia.com)* &&/font - -Before we go any further, click the **icon in the middle** right 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* in the controls to go to the next slide. - -&&/centered &&/font &&/clide - - - -&&slide &&font27 - -# Key bindings - -&&lineb3 - -|Action |Keyboard keys | -|--------------------|-------------------------------------------------| -|Go to previous slide| Backspace, Page up, Left arrow, Up arrow | -|Go to next slide | Space, Enter, Page down, Right arrow, Down arrow| -|Toggle presenting | P, T | -|Stop presenting | Esc | -|Go to first slide | Home | -|Go to last slide | End | - -&&/font &&/slide - - - -&&slide - -# Introduction - -&&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 (["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 - - - -&&slide - -## Why? - -- 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 - - - -&&slide - -# Formatting - -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. - -And they can work together in most different combination. - -&&lineb1 - -Though, remember that everything gets translated to HTML, so don't do (even if it works) - -``` -&&slide &&font20 &&/slide &&/font -``` - -Enough talking, here are examples! - -&&/slide - - - -&&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 - -&¢ered 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 - - - -&&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 - -&¢ered 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 - -&¢ered  &&/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 - -&¢ered  &&/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. - -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. - -## Setup - -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. - -`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 - -&¢ered -# Thats All. Thank you for your time! -&&/centered - -&&fright &&font18 -*P.S. Press the same button (next to the print button) with which you started presenting, to stop presenting ;)* -&&/font &&/fright - -&&/clide |