diff options
| Commit | e076e596b59dbe0d2d38d6617a33432fb266d964 (patch) | |
|---|---|---|
| Author | 2022-09-29 15:08:57 +0300 | |
| Committer | 2022-09-29 17:40:10 +0300 | |
| Files | 9b7acbd136c6f0d6523ade897f054e6764cc14e6 | |
| syndamia.com-e076e596b59dbe0d2d38d6617a33432fb266d964.tar syndamia.com-e076e596b59dbe0d2d38d6617a33432fb266d964.tar.gz syndamia.com-e076e596b59dbe0d2d38d6617a33432fb266d964.zip | ||
| Parent | 94ea2c12ef88aa77bd64e13c9e211f92a2e25cb3 (diff) | |
[talks/demo] Rewored demo presentation workding and parts of formatting
1 files changed, 43 insertions, 51 deletions
| -rw-r--r-- | src/talks/demo.md | 94 |
diff --git a/src/talks/demo.md b/src/talks/demo.md index 4a7f7ed..3863c23 100644 --- a/src/talks/demo.md +++ b/src/talks/demo.md @@ -8,15 +8,10 @@ This is a small presentation, explaining how my custom system for making present &&presentation -&&slide - -&&flexer - -&¢ered +&&slide &&flexer +&¢ered &&font35 -&&font35 - -# Slides system demo +# My presentation system &&/font @@ -26,21 +21,15 @@ This is a small presentation, explaining how my custom system for making present Before we go any further, click the **icon, next to the printer** right above this rectangle. -Now the presentation should be fullscreen, on the bottom right are your controls. +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 +&&font18 kamen AT [syndamia.com](https://syndamia.com) || 2022 &&/font &&/slide @@ -48,19 +37,21 @@ kamen AT [syndamia.com](https://syndamia.com) || 2022 &&slide -&&font27 - # Introduction -This is my system for making and showing presentations. All articles on this website are written in Markdown and are converted into HTML, and these slides are no different. The contents are plain old Markdown, and the formatting is some "inserted" HTML. +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 -The way I make these presentations is by wrapping valid Markdown with, what I call, [ftags](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/generate-hooks/README.md#ftags): short pieces of text that are replaced by some [scripts](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/generate-hooks) with specific HTML code. This allowes me to abstract and simplify certain stuff, like the [image tags for nationality flags](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/generate-hooks/make-flags.sh) or the way presentations are made. +## ftags -## Why? +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). -Well, I have always thought about making something with which I could make presentations. Also, from time to time I do need to make a presentation, but tools like Microsoft PowerPoint or LibreOffice Impress have cause me many-a-headaches. +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). -&&/font +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. + +## 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. &&/slide @@ -68,37 +59,44 @@ Well, I have always thought about making something with which I could make prese &&slide -# Features +# Formatting -The main things that my system provides, outside of what Markdown can do, are flexboxed rows and columns. There are two ftags via which I can specify a row or column, where everything inside is evenly spaced out and fills all possible space. +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 -This allowes me to have content in multiple columns very easily: +- font size +- text alignment +- row and column arrangement of paragraphs -&&fow +And they can work together in every possible combination. Here is an example which uses most of those in one place: + +&&flexer -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lectus porttitor nibh pellentesque ultrices ut in lorem. Pellentesque commodo dignissim placerat. +&&fow -&&fol +&&font18 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lectus porttitor nibh pellentesque ultrices ut in lorem. Pellentesque commodo dignissim placerat. &&/font -And these are +&&fol &&font27 -items +These -in a +words - &&fol column. +&¢ered are in an &&/centered -&&/fol +ftag column. +&&/font &&/fol &&flexer +&&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. +&&/fright  &&/fow -About that empty middle column, it's actually also an ftag, just an empty element with `flex: 1`. +&&flexer &&/slide @@ -106,32 +104,26 @@ About that empty middle column, it's actually also an ftag, just an empty elemen &&slide -Another good feature is the printing compatibility. Each slide is the size of an A4 sheet of paper (in landscape orientation, of course), and there is special styling to make sure it all formats correctly when printing. Given that my website also supports a light mode, printing it out is a non-issue. +# 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. -Although, a more sane thing to do is to print to a PDF file ... +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! -And well, that's it. If you're interested, read more about it [here](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/generate-hooks/make-presentation.sh), but overall, that's everything it currently provides (and the navigation bar, obviously). +## Closing remarks -I will for sure add more ftags and capabilitites in the future, but for now, this is all folkes! +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). &&flexer &¢ered - -# Have a great day! - +# Thats All. Thank you for your time! &&/centered &&flexer -&&fright - -&&font18 - -*P.S. You can exit out of the presentation by pressing the same icon in the navbar, or by reloading the page ;)* - -&&font18 - -&&/fright +&&fright &&font18 +*P.S. Press the same button (next to the print button) with which you started presenting, to stop presenting ;)* +&&font18 &&/fright &&/slide |