From 631ee7539ddb4b0f959cde0f934417d4147f4cb6 Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Fri, 18 Oct 2024 12:09:07 -0600 Subject: [PATCH 01/11] Initial commit of grezi journey --- assets/bad_slide.png | 3 ++ assets/manim_in_action.png | 3 ++ src/grezi_journey.dj | 60 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 assets/bad_slide.png create mode 100644 assets/manim_in_action.png create mode 100644 src/grezi_journey.dj diff --git a/assets/bad_slide.png b/assets/bad_slide.png new file mode 100644 index 0000000..2ac347e --- /dev/null +++ b/assets/bad_slide.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b5d9cb5fbcbfda70c380d25bf3b45d17d613bccc06799ad6794b63df5d578d88 +size 373656 diff --git a/assets/manim_in_action.png b/assets/manim_in_action.png new file mode 100644 index 0000000..0e895d8 --- /dev/null +++ b/assets/manim_in_action.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:179bb5f938855c00457b4e9cbc6929daa219db5874d5f4f99d1db35b8defd85c +size 1285176 diff --git a/src/grezi_journey.dj b/src/grezi_journey.dj new file mode 100644 index 0000000..a149d23 --- /dev/null +++ b/src/grezi_journey.dj @@ -0,0 +1,60 @@ +`attributes`{published="2024-10-18 10:25"} + +# Presentation as plain-text, the journey of my favorite pet project + +I am tired, alright, sick and tired of people making boring presentations. And I'm also tired of slideshow programs making it difficult to _make_ good presentations. + +## The Problem + +Software already exists to make really nice presentations, for instance [3BlueOneBrown's](https://www.youtube.com/@3blue1brown) [Manim](https://github.com/3b1b/manim), which he uses to make super engaging math videos. But Manim requires you to write Python code, which makes the software relatively difficult to use. + +[![Manim in action](assets/manim_in_action.png)](https://www.youtube.com/watch?v=rbu7Zu5X1zI) + +At the other end of the spectrum, you could be using Google Slides or PowerPoint. Those programs make it really easy to make boring, run-of-the-mill presentations. Really the only way to make a presentation look _good_ is by using one of their themes, but as you see more and more presentations from those software's, the themes become stale and overplayed. + +![A bad Google Slides slide I helped make in high school](assets/bad_slide.png) + +My big gripes with these pieces of software derive from the 2 things they encourage: + +1. Imperfection: If you want to, say, put an image in your slide. These softwares might help you a little bit by snapping those images into specific places, but you still have to put in a lot of effort to make slides where everything is aligned with eachother, and everything is pixel perfect. +2. Text walls: The template slides in most themes encourage people to put word salads on each slide, something I particularly don't like. It's so much better to have many slides with little amounts of information per-slide, than to have less slides with large amounts of information per-slide, but because making good slides in these softwares is such a hassle, making more slides isn't desirable. + +To my suprise, I couldn't find any pieces of software that met the happy medium I was looking for. Something that could create engaging presentations, with lots of slides containing little information, where every slide is pixel perfect, with a little amount of effort. + +## My Solution + +Over the last year, I've been working on my masterpiece. A presentation software that was everything I was looking for. My "presentation as plain-text" platform, Grezi. + +``` =html +
+ +
+``` + +The idea was simple. Everything you put on a slide is an object, every object moves between slides, and every object is placed on a slide using a simple system of screen splitting that makes it easy to position everything perfectly aligned with everything else on a slide. The language used to make slideshows looks like this: + +```grz +ViewBox: Size[0] ^ + 1:2, + 1:2, +] + +Title: Header( + value: "*Hello World*", +) + +Subtitle: Paragraph( + value: "By author", +) + +{ + Title: ViewBox[0]^^.., + Subtitle: ViewBox[1]__.., +}[] +``` + +Of course, I'm not here to teach you the software, you can find the docs for it [here](https://git.nations.lol/grezi-docs). I'm here to walk you through the software's journey from concept, to the `iframe` you see above (PDF readers, see the webpage version of this article for that). Everything it took to get from the first lines of code, to impressing my college professor enough to make an exception for my group when we ran out of class time to present. Let's start from the beginning. + +## The Beginning + +This project started all the way back in January of 2022. At that point, it produced exactly one D level presentation (thanks Mrs. H), and one pretty okay presentation for my Psychology class. I decided to completely rewrite grezi in September of 2023. Between that iteration of the software and now, the presentation language and idea has changed very little. The changes that have taken a full year to implement have been quality-of-life improvements. Today, the part of the software that renders the presentation is the smallest component of it, everything else is to make grezi easy to work with. From 2361548c0cad98af68b4cef9d2e80ad066981cdd Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Wed, 23 Oct 2024 14:51:18 -0600 Subject: [PATCH 02/11] Switch header font to Norwester Pro --- templates/article.html | 6 +- templates/css/norwester-pro.css | 153 ++++++++++++++++++++++++++++++++ 2 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 templates/css/norwester-pro.css diff --git a/templates/article.html b/templates/article.html index acfdd9d..011fe3b 100644 --- a/templates/article.html +++ b/templates/article.html @@ -41,7 +41,7 @@ + type="text/javascript">!function (o, c) {var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")}(window, document); @@ -69,7 +69,7 @@
-

{{title}}

+

{{title}}

{% for author in authors %} {{author.full_name}}'s Avatar - \ No newline at end of file + diff --git a/templates/css/norwester-pro.css b/templates/css/norwester-pro.css new file mode 100644 index 0000000..d1ef14b --- /dev/null +++ b/templates/css/norwester-pro.css @@ -0,0 +1,153 @@ +@font-face { + font-family: 'Norwester Pro'; + font-weight: bold; + font-style: normal; + font-display: block; + src: local('Norwester Pro'), + local('NorwesterPro-Regular'), + url(/fonts/NorwesterPro-Regular.woff2) format('woff2'); +} + +@font-face { + font-family: 'Norwester Pro Oblique'; + font-weight: bold; + font-style: normal; + font-display: block; + src: local('Norwester Pro Oblique'), + local('NorwesterPro-RegularOblique'), + url(/fonts/NorwesterPro-RegularOblique.woff2) format('woff2'); +} + +@font-face { + font-family: 'Norwester Pro Regular'; + font-weight: bold; + font-style: normal; + font-display: block; + src: local('Norwester Pro Regular'), + local('NorwesterPro-Regular'), + url(/fonts/NorwesterPro-Regular.woff2) format('woff2'); +} + +@font-face { + font-family: 'Norwester Pro Regular Oblique'; + font-weight: bold; + font-style: normal; + font-display: block; + src: local('Norwester Pro Regular Oblique'), + local('NorwesterPro-RegularOblique'), + url(/fonts/NorwesterPro-RegularOblique.woff2) format('woff2'); +} + +@font-face { + font-family: 'Norwester Pro Rounded'; + font-weight: bold; + font-style: normal; + font-display: block; + src: local('Norwester Pro Rounded'), + local('NorwesterPro-Rounded'), + url(/fonts/NorwesterPro-Rounded.woff2) format('woff2'); +} + +@font-face { + font-family: 'Norwester Pro Rounded Oblique'; + font-weight: bold; + font-style: normal; + font-display: block; + src: local('Norwester Pro Rounded Oblique'), + local('NorwesterPro-RoundedOblique'), + url(/fonts/NorwesterPro-RoundedOblique.woff2) format('woff2'); +} + +@font-face { + font-family: 'Norwester Pro Square'; + font-weight: bold; + font-style: normal; + font-display: block; + src: local('Norwester Pro Square'), + local('NorwesterPro-Square'), + url(/fonts/NorwesterPro-Square.woff2) format('woff2'); +} + +@font-face { + font-family: 'Norwester Pro Square Oblique'; + font-weight: bold; + font-style: normal; + font-display: block; + src: local('Norwester Pro Square Oblique'), + local('NorwesterPro-SquareOblique'), + url(/fonts/NorwesterPro-SquareOblique.woff2) format('woff2'); +} + + +.nw-regular { + font-family: 'Norwester Pro Regular'; +} + +.nw-regular-obl, +.nw-regular em { + font-family: 'Norwester Pro Regular Oblique'; + font-style: normal; +} + +.nw-rounded { + font-family: 'Norwester Pro Rounded'; +} + +.nw-rounded-obl, +.nw-rounded em { + font-family: 'Norwester Pro Rounded Oblique'; +} + +.nw-square { + font-family: 'Norwester Pro Square'; +} + +.nw-square-obl, +.nw-square em { + font-family: 'Norwester Pro Square Oblique'; +} + +.nw-ss01, +.nw-salt { + /* C ð J Ľ S Ü Z @ & */ + font-feature-settings: 'ss01'; +} + +.nw-uppercase { + text-transform: uppercase; + /* Default to no ligatures */ + font-variant-ligatures: none; +} + +.nw-all-small-caps { + font-variant-caps: all-small-caps; +} + +.nw-liga { + text-transform: uppercase; + /* CA CO. EA LA LI LL TH */ + font-variant-ligatures: common-ligatures; +} + +.nw-liga-off { + /* Turn common-ligatures off but keep discretionary */ + font-feature-settings: 'liga' off; +} + +.nw-dliga { + text-transform: uppercase; + /* FOR, OF THE, AND, etc */ + font-variant-ligatures: discretionary-ligatures; +} + +.nw-lining-nums { + font-variant-numeric: lining-nums; +} + +.nw-tabular-nums { + font-variant-numeric: tabular-nums; +} + +.nw-oldstyle-nums { + font-variant-numeric: oldstyle-nums; +} From be2da46823db198a3fdd2e3f9d015c3cd2c03215 Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Wed, 23 Oct 2024 14:52:39 -0600 Subject: [PATCH 03/11] Switch header font to Norwester Pro --- templates/article.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/templates/article.html b/templates/article.html index 011fe3b..ac32c18 100644 --- a/templates/article.html +++ b/templates/article.html @@ -37,6 +37,7 @@ + @@ -114,4 +115,4 @@ {% endif %} - + \ No newline at end of file From 2a590573c58d51b239f154d324365d7587b1bfa2 Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Wed, 23 Oct 2024 14:54:16 -0600 Subject: [PATCH 04/11] Switch header font to Norwester Pro --- templates/article.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/article.html b/templates/article.html index ac32c18..a1ead6a 100644 --- a/templates/article.html +++ b/templates/article.html @@ -115,4 +115,4 @@ {% endif %} - \ No newline at end of file + From 704b11febbef89ac6fcdc26d7a547b029a069d58 Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Thu, 24 Oct 2024 22:03:31 -0600 Subject: [PATCH 05/11] Switch header font to Norwester Pro --- templates/opengraph.toml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/opengraph.toml b/templates/opengraph.toml index 385f383..60fb4eb 100644 --- a/templates/opengraph.toml +++ b/templates/opengraph.toml @@ -1,4 +1,4 @@ -faces = ["/usr/share/fonts/noto/NotoSans-Bold.ttf"] +faces = ["/usr/share/fonts/NorwesterProComplete/NorwesterPro-Regular.ttf"] [[text]] x = 425.15115 @@ -6,5 +6,5 @@ y = 8.0 width = 736.84885 height = 594.60768 value = "{{title}}" -font = "Noto Sans" -bold = true +font = "Norwester Pro" +stretch = "Condensed" From 172fc3d7bb7d6fedaab7815497c112ac6e41bc70 Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Thu, 24 Oct 2024 22:26:11 -0600 Subject: [PATCH 06/11] Try it with a fallback --- templates/opengraph.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/opengraph.toml b/templates/opengraph.toml index 60fb4eb..0929855 100644 --- a/templates/opengraph.toml +++ b/templates/opengraph.toml @@ -7,4 +7,4 @@ width = 736.84885 height = 594.60768 value = "{{title}}" font = "Norwester Pro" -stretch = "Condensed" +# stretch = "Condensed" From bef7572a3384b3c4adeb811ad6d08a7f9c0521c4 Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Thu, 24 Oct 2024 22:32:26 -0600 Subject: [PATCH 07/11] Try it with an OTF font --- templates/opengraph.toml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/opengraph.toml b/templates/opengraph.toml index 0929855..8d5244f 100644 --- a/templates/opengraph.toml +++ b/templates/opengraph.toml @@ -1,4 +1,4 @@ -faces = ["/usr/share/fonts/NorwesterProComplete/NorwesterPro-Regular.ttf"] +faces = ["/usr/share/fonts/norwester/NorwesterPro-Regular.otf"] [[text]] x = 425.15115 @@ -7,4 +7,4 @@ width = 736.84885 height = 594.60768 value = "{{title}}" font = "Norwester Pro" -# stretch = "Condensed" +stretch = "Condensed" From 4e3f4701a802d298e4ab7d7b03fbc5bc33e35d5c Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Thu, 24 Oct 2024 22:35:52 -0600 Subject: [PATCH 08/11] Try it with non-pro font --- templates/opengraph.toml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/opengraph.toml b/templates/opengraph.toml index 8d5244f..0e949f3 100644 --- a/templates/opengraph.toml +++ b/templates/opengraph.toml @@ -1,4 +1,4 @@ -faces = ["/usr/share/fonts/norwester/NorwesterPro-Regular.otf"] +faces = ["/usr/share/fonts/norwester.ttf"] [[text]] x = 425.15115 @@ -6,5 +6,5 @@ y = 8.0 width = 736.84885 height = 594.60768 value = "{{title}}" -font = "Norwester Pro" +font = "Norwester" stretch = "Condensed" From 02834226e873b7e89095645409e1857088773ee1 Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Thu, 24 Oct 2024 22:37:26 -0600 Subject: [PATCH 09/11] Revert to old font --- templates/opengraph.toml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/templates/opengraph.toml b/templates/opengraph.toml index 0e949f3..45cadb5 100644 --- a/templates/opengraph.toml +++ b/templates/opengraph.toml @@ -1,4 +1,4 @@ -faces = ["/usr/share/fonts/norwester.ttf"] +faces = ["/usr/share/fonts/noto/NotoSans-Regular.ttf"] [[text]] x = 425.15115 @@ -6,5 +6,4 @@ y = 8.0 width = 736.84885 height = 594.60768 value = "{{title}}" -font = "Norwester" -stretch = "Condensed" +font = "Noto Sans" From 1f1042347327d959e5f595e4e9eccb8d10f1796f Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Thu, 24 Oct 2024 22:42:33 -0600 Subject: [PATCH 10/11] Fix journal generator and switch back to norwester --- templates/opengraph.toml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/templates/opengraph.toml b/templates/opengraph.toml index 45cadb5..0e949f3 100644 --- a/templates/opengraph.toml +++ b/templates/opengraph.toml @@ -1,4 +1,4 @@ -faces = ["/usr/share/fonts/noto/NotoSans-Regular.ttf"] +faces = ["/usr/share/fonts/norwester.ttf"] [[text]] x = 425.15115 @@ -6,4 +6,5 @@ y = 8.0 width = 736.84885 height = 594.60768 value = "{{title}}" -font = "Noto Sans" +font = "Norwester" +stretch = "Condensed" From 521e963911de712e73f63edbabffa4cf1047a152 Mon Sep 17 00:00:00 2001 From: Isaac Mills Date: Thu, 24 Oct 2024 22:45:07 -0600 Subject: [PATCH 11/11] Move text a little --- templates/opengraph.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/opengraph.toml b/templates/opengraph.toml index 0e949f3..2fc4535 100644 --- a/templates/opengraph.toml +++ b/templates/opengraph.toml @@ -1,7 +1,7 @@ faces = ["/usr/share/fonts/norwester.ttf"] [[text]] -x = 425.15115 +x = 430.0 y = 8.0 width = 736.84885 height = 594.60768