Initial commit of grezi journey

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
+<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
+    <iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://git.nations.lol/grezi/#Linked%20Lists.slideshow", width="1920" height="1080"></iframe>
+</div>
+```
+
+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.

templates/article.html

@@ -37,12 +37,11 @@
   <meta content="width=device-width, initial-scale=1" name="viewport">
   <meta content="Webflow" name="generator">
   <link href="{{base_url}}/css/normalize.css" rel="stylesheet" type="text/css">
-  <link href="{{base_url}}/css/norwester-pro.css" rel="stylesheet" type="text/css">
   <link href="{{base_url}}/css/webflow.css" rel="stylesheet" type="text/css">
   <link href="{{base_url}}/css/compute-c23f91.webflow.css" rel="stylesheet" type="text/css">
   <link href="{{base_url}}/css/code-theme.css" rel="stylesheet" type="text/css">
   <script
-    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);</script>
+    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);</script>
   <link href="{{base_url}}/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
   <link href="{{base_url}}/images/webclip.png" rel="apple-touch-icon">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -70,7 +69,7 @@
   </div>
   <div class="w-layout-vflex flex-block-2 purple" style="background-color:#552a85">
     <div id="header-elements">
-      <h1 id="title" class="heading-8 nw-regular">{{title}}</h1>
+      <h1 id="title" class="heading-8">{{title}}</h1>
       <div class="w-layout-hflex flex-block-3">
         {% for author in authors %}
         <img src="{{author.avatar_url}}" loading="lazy" width="32" height="32" alt="{{author.full_name}}'s Avatar"
@@ -115,4 +114,4 @@
   {% endif %}
 </body>
 
-</html>
+</html>

templates/css/norwester-pro.css

@@ -1,153 +0,0 @@
-@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;
-}

templates/opengraph.toml

@@ -1,10 +1,10 @@
-faces = ["/usr/share/fonts/norwester.ttf"]
+faces = ["/usr/share/fonts/noto/NotoSans-Bold.ttf"]
 
 [[text]]
-x = 430.0
+x = 425.15115
 y = 8.0
 width = 736.84885
 height = 594.60768
 value = "{{title}}"
-font = "Norwester"
+font = "Noto Sans"
-stretch = "Condensed"
+bold = true