Initial commit

src/SUMMARY.md

@@ -0,0 +1,11 @@
+# Summary
+
+- [Grezi](./chapter_1.md)
+- [Viewboxes](./viewboxes.md)
+- [Objects](./objects.md)
+  - [Paragraphs](./paragraphs.md)
+  - [Headers](./headers.md)
+  - [Images](./images.md)
+- [Slides](./slides.md)
+  - [Functions](./functions.md)
+- [Actions](./actions.md)

src/actions.md

@@ -0,0 +1 @@
+# Actions

src/chapter_1.md

@@ -0,0 +1,29 @@
+# Grezi: Make high-effort presentations, easier
+
+Grezi is a platform to help you make engaging, and animated presentations, using just plain text, and your favorite text-editor.
+
+```
+ViewBox: Size[0] ^
+    1:2,
+    1:2,
+]
+
+Title: Header(
+    value: "*Hello World*",
+)
+
+Subtitle: Paragraph(
+    value: "By author",
+)
+
+{
+    Title: ViewBox[0]^^..,
+    Subtitle: ViewBox[1]__..,
+}[]
+```
+
+![What the code above resolves to](images/boilerplate.png)
+
+Let's get started!
+
+

src/functions.md

@@ -0,0 +1 @@
+# Functions

src/headers.md

@@ -0,0 +1,3 @@
+# Headers
+
+Headers are literally just paragraphs with a different font size. See [Paragraphs](/paragraphs.html)

src/images.md

@@ -0,0 +1,22 @@
+# Images
+
+Images in grezi can be on your local system, or web URLs. Grezi supports any image format supported by the [image](https://lib.rs/crates/image) crate, including animated images. Images inherit the size of the viewbox they're in, and smoothly transition sizes between viewboxes.
+
+Images look like this
+
+```
+TitleImage: Image(
+    value: "file:recursion.webp",
+    tint: "oklab(30% 0.0 0.0)",
+)
+```
+
+These are the key-value pairs that are valid for Images
+
+- `value`: The image you want the object to load. Can either be
+
+  - `file:{file path relative to grz file}`
+  - `http[s]://{web url}`
+
+- `scale`: The logical size to scale the image to. This ignores the size of the viewbox. Can either be a single number which resolves to `{number}x{number}`, or a size in the format of `{width}x{height}`. The image will be resized to fit inside the scale specified, and keep it's aspect ratio. 
+- `tint`: [A CSS color 4](https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide) color that will be multiplied by the image.

src/objects.md

@@ -0,0 +1,56 @@
+# Objects
+
+Objects in Grezi describe things that you want to put on screen. Objects fade in when entering slides, persist between slides, and then either disappear, or fade-out when leaving slides.
+
+Here's a few example 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",
+)
+```
+
+Objects are described like this
+
+```
+{name}: {type}(
+    {key}: {value},
+    {key}: {value},
+)
+```
+
+The object types are described on the following pages

src/paragraphs.md

@@ -0,0 +1,45 @@
+# Paragraphs
+
+Paragraphs describe text that you want to put on screen.
+
+They look like this:
+
+```
+StringType: Paragraph(
+    font_family: "Fira Code",
+    value: "new String()",
+    language: "java",
+)
+```
+
+(It's worth noting that strings can have newlines. Every character inside of the quotes except for the quotes themselves are acceptable inside a string. Quotes can be escaped with `\"`)
+
+These are the key-value pairs that are valid for Paragraphs
+
+- `value`: The text you want to put inside the object. Text is compatible with the [djot](https://djot.net/) markup syntax. The text will be wrapped to the size of the viewbox it's in, and adjust if it's moved to a different sized viewbox. The formatter will automatically change instances of `value` to `code` if a `language` is present in the object.
+- `align`: If the text is wrapped, or the text is multiple lines, this is how the new lines of text will be aligned. Can be one of
+
+  - `left`
+  - `center`
+  - `right`
+  - `justified`
+  - `end`
+
+  These are based on [cosmic-text's `Aligns`](https://docs.rs/cosmic-text/0.12.1/cosmic_text/enum.Align.html)
+
+- `vertical_spacing`: Can be one of
+
+  - `normal`
+  - `even`
+
+- `font_family`: The font that you want to use for the text. If you're using the LSP, you should get autocomplete for this parameter. This must be a font on your computer or one of the following
+
+  - `serif`
+  - `sans-serif`
+  - `cursive`
+  - `fantasy`
+  - `monospace`
+
+- `font_size`: The font size of you want to use for the text. The unit is logical pixels.
+- `line_height`: The separation between two different lines in the wrapped text. The separation between two different paragraphs is `line_height * 2`
+- `language`: The programming language to syntax highlight the text as. You must have the [Helix text editor](https://helix-editor.com/) somewhere on your system in order for this to work. It only depends on the runtime dir, which can be set as the `HELIX_RUNTIME` environment variable

src/slides.md

@@ -0,0 +1,3 @@
+# Slides
+
+

src/viewboxes.md

@@ -0,0 +1,62 @@
+# Viewboxes
+
+Viewboxes are the mechanism by which things are positioned on the screen.
+
+Viewboxes allow you to split the screen (`Size`) into many different sections. You can then anchor objects to specific anchor points within each box you create.
+
+For instance: Here's a few Viewboxes:
+
+```
+TopHeaderView: Size[0] ^
+    100~,
+    0-,
+]
+
+TopHeaderHalves: TopHeaderView[1] >
+    1:2,
+    1:2,
+]
+
+TopHeaderThirdsLeft: TopHeaderHalves[0] ^
+    1:3,
+    1:3,
+    1:3,
+]
+```
+
+The viewboxes above resolve to these
+
+- `TopHeaderView`
+![TopHeaderView viewbox image](images/TopHeaderView.png)
+- `TopHeaderHalves`
+![TopHeaderHalves viewbox image](images/TopHeaderHalves.png)
+- `TopHeaderThirdsLeft`
+![TopHeaderThirdsLeft viewbox image](images/TopHeaderThirdsLeft.png)
+
+The only Viewbox that's provided for you is `Size`, which is just one box, that is the full size of the screen.
+
+- `TopHeaderView` splits `Size` into 2 boxes
+  - One box is 100 logical pixels long
+  - And the second box has a minimum length of 0 logical pixels (you can use `0-` to just make the box take the rest of the splitting area).
+
+- `TopHeaderHalves` splits `TopHeaderView` into 2 more boxes
+  - One box takes one half of the splitting area
+  - And the other box takes the other half of the splitting area
+
+- Finally, `TopHeaderThirdsLeft` splits `TopHeaderView` into 3 more boxes
+  - One box takes one third of the splitting area
+  - Another box takes one third of the splitting area
+  - And the last box takes one third of the splitting area
+
+You'll also notice that each viewbox is split in different directions
+
+  - `^` and `_` mean that the viewbox is splititng horizontally, or that the boxes are travelling downwards as the box index increases
+  - `>` and `<` mean that the viewbox is splitting vertically, or that the boxes are travelling to the right as the box index increases
+
+Viewboxes support many constraints aside from just ratios
+
+- `{number}%`: Allocates a given percentage of the splitting area
+- `{number}-`: Allocates at least a given size of the splitting area 
+- `{number}+`: Allocates at most a given size of the splitting area
+- `{number}~`: Allocates the exact size given of the splitting area
+- `{number}:{number}`: Allocates the given ratio of the splitting area