How to make a Grezi presentation

Making a presentation

Grezi is a plain-text presenter that you can use to make fun, and engaging presentations. Grezi is based on 3 concepts

• Viewboxes
• Objects
• And slides

Viewboxes

Viewboxes are areas of the screen that have been split into multiple defined sections. Here are some Viewboxes for example

TopHeaderView: Size[0] ^
    100~,
    0-,
]

TopHeaderHalves: TopHeaderView[1] >
    1:2,
    1:2,
]

TopHeaderThirdsLeft: TopHeaderHalves[0] ^
    1:3,
    1:3,
    1:3,
]

Each of these viewboxes split the screen into more and more sections. A viewbox is defined like this

{Name of the viewbox}: {Viewbox that is being split}[{index into the viewbox being split for which section to split on}] {The direction that the box will split, one of </> (horizontally) or _/^ (vertically)}
    {A constraint},
    {A constraint},
]

From the example above, the TopHeaderView viewbox splits on Size[0] (Size being a built-in viewbox which represents the entire screen), The TopHeaderHalves viewbox splits on TopHeaderView[1], and finally TopHeaderThirdsLeft splits on TopHeaderHalves[0] This is what that looks like from top to bottom

• TopHeaderView

• TopHeaderHalves

• TopHeaderThirdsLeft

Grezi supports multiple constraints to help you split viewboxes, these are the constraints

• {number}%: Allocates a given percentage of the split area
• {number}-: Allocates at least a given size of the split area
• {number}+: Allocates at most a given size of the split area
• {number}~: Allocates the exact size given of the split area
• {number}:{number}: Allocates the given ratio of the split area

Objects

Objects are the things that you put on the slides. At the moment, there are two types of objects

• Paragraph / Header which represents text
• Image which represents an image

An object is simply represented by a name, a type, and some key/value pairs. Like so

{name}: {type}(
    {key}: {value},
    {key}: {value},
)

Text

Here are some example text objects

Title: Header(
    value: "## Let's talk about Strings

Strings are cool!",
    align: "center"
)

Subtitle: Paragraph(
    value: "A presentation by StratusFearMe21",
)

StringType: Paragraph(
    font_family: "Fira Code",
    value: "new String()",
    language: "java",
)

StringClass: Paragraph(
    value: "public class String {
    char charAt(int index) {}
    int compareTo(String anotherString) {}
    String concat(String str) {}
    boolean equals(Object anObject) {}
    int indexOf(int ch) {}
    int indexOf(String str) {}
    int length() {}
    String toUpperCase() {}
    String toLowerCase() {}
    String trim() {}
    String substring(int beginIndex) {}
    String substring(int beginIndex, int endIndex) {}
    char[] toCharArray() {}
}",
    font_size: "32",
    font_family: "Fira Code",
    language: "java",
)

These are the possible key/value pairs for a text object

• value: "string": The value of the text in to put on the slide. Can be as long or as short as you want, and will be wrapped to the viewbox it's contained in. Can also contain newlines, unlike traditional strings. The value of this key can be multi-paragraph and marked up using djot.
• code: "string": Literally exactly the same as value, except the syntax highlighting query will look for a language value in the object to highlight the code value against. (The formatter will automatically change value to code if there's a language value in the object)
• align: (one of center, left, or right): dictates how the text should be aligned if it needs to be wrapped, or is multiline
• font_family: "Fira Code": Currently, the only valid value you can put here is Fira Code, I'm still working on loading fonts from the system.
• font_size: {number}: The size of the font to be displayed, by default, it's 48 for Paragraphs, and 64 for Headers
• source: A citation for the source of the text, this will cause a footnote to appear with the contents of source on any slide that has the text on it.
• language: "A programming language": The programming language of some text, which will have syntax highlighting applied to it. (Note that you must have the Helix editor installed for this to work)

Images

Here is an example image object

TitleImage: Image(
    value: "file://recursion.webp",
    tint: "oklab(30% 0.0 0.0)",
    source: "AT&T Berkly"
)

And here are the supported key/value pairs

• value: "{uri}": The URI to an image. Can either be a file:// URI to an image relative to the presentation file, or it can be an http:// or https:// link to an image on the internet.
• tint: "{css color string}": A color that will be multiplied with the image to give it a tint. The color is described by a CSS color string. You can find more information about that here
• source: A citation for the source of the image, this will cause a footnote to appear with the contents of source on any slide that has the image on it.

Slides

Slides are lists of objects, and where they should go on the screen. These are some examples of slides

{
    TitleImage: ViewBox[0]....,
    Title: ViewBox[0]__..,
    Subtitle: ViewBox[1]__..,
}[]

{
    TitleImage: Size[0],
    WhatIs: Size[0]^^..,
}[]

{
    TitleImage: Size[0],
    WhatIs: ViewBox[0],
    RecursionDef: ViewBox[1]__..,
}[]

{
    TitleImage: Size[0],
    WhatIs| Size[0] _
        200~,
        0-,
    ][1]^^,
    RecursionDef: ()[0],
}[]

Works Cited Page

For a file called example.grz, if a example.grz_citations.html file is sitting next to it, Grezi will automatically generate a Works Cited page. Because I am in high school at the time of writing, the format for this file is a NoodeTools HTML export. If you don't have NoodleTools simply use the following format

<pre>
    <p style='text-align:center;'>Works Cited</p>
</pre>
<pre>Aisch, Gregor, et al. "Dissecting the #PizzaGate Conspiracy Theories." <i>The New York Times</i>, 10 Dec. </pre>
<pre>     2016, www.nytimes.com/interactive/2016/12/10/business/media/pizzagate.html. Accessed 28 Jan. </pre>
<pre>     2024. </pre>

The top of the file should have a <pre> tag with a <p style='text-align:center;'> tag containing the title you want the Works Cited page to have. From there, lines in the citations are delimeted by <pre></pre> blocks, which can contain text, optionally italicized with <i></i> blocks.