commit e4b9b6405661e836f353f2f18780bc92597435f9 Author: Isaac Mills Date: Thu Oct 17 17:23:12 2024 -0600 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7585238 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +book diff --git a/.woodpecker.yml b/.woodpecker.yml new file mode 100644 index 0000000..db838b0 --- /dev/null +++ b/.woodpecker.yml @@ -0,0 +1,7 @@ +steps: + - name: deploy + image: allfunc/mdbook + commands: + - mdbook build -d /var/woodpecker/grezi-book + volumes: + - /var/woodpecker:/var/woodpecker diff --git a/book.toml b/book.toml new file mode 100644 index 0000000..7337c08 --- /dev/null +++ b/book.toml @@ -0,0 +1,6 @@ +[book] +authors = ["Isaac Mills"] +language = "en" +multilingual = false +src = "src" +title = "Grezi" diff --git a/src/SUMMARY.md b/src/SUMMARY.md new file mode 100644 index 0000000..6ce4760 --- /dev/null +++ b/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) diff --git a/src/actions.md b/src/actions.md new file mode 100644 index 0000000..1060a65 --- /dev/null +++ b/src/actions.md @@ -0,0 +1 @@ +# Actions diff --git a/src/chapter_1.md b/src/chapter_1.md new file mode 100644 index 0000000..8dacc8f --- /dev/null +++ b/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! + + diff --git a/src/functions.md b/src/functions.md new file mode 100644 index 0000000..0c5faf5 --- /dev/null +++ b/src/functions.md @@ -0,0 +1 @@ +# Functions diff --git a/src/headers.md b/src/headers.md new file mode 100644 index 0000000..4346360 --- /dev/null +++ b/src/headers.md @@ -0,0 +1,3 @@ +# Headers + +Headers are literally just paragraphs with a different font size. See [Paragraphs](/paragraphs.html) diff --git a/src/images.md b/src/images.md new file mode 100644 index 0000000..1c73c1f --- /dev/null +++ b/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. diff --git a/src/images/TopHeaderHalves.png b/src/images/TopHeaderHalves.png new file mode 100644 index 0000000..cf12a20 Binary files /dev/null and b/src/images/TopHeaderHalves.png differ diff --git a/src/images/TopHeaderThirdsLeft.png b/src/images/TopHeaderThirdsLeft.png new file mode 100644 index 0000000..a58695e Binary files /dev/null and b/src/images/TopHeaderThirdsLeft.png differ diff --git a/src/images/TopHeaderView.png b/src/images/TopHeaderView.png new file mode 100644 index 0000000..e268f95 Binary files /dev/null and b/src/images/TopHeaderView.png differ diff --git a/src/images/boilerplate.png b/src/images/boilerplate.png new file mode 100644 index 0000000..fc99271 Binary files /dev/null and b/src/images/boilerplate.png differ diff --git a/src/objects.md b/src/objects.md new file mode 100644 index 0000000..edd4cf2 --- /dev/null +++ b/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 diff --git a/src/paragraphs.md b/src/paragraphs.md new file mode 100644 index 0000000..b9025f6 --- /dev/null +++ b/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 diff --git a/src/slides.md b/src/slides.md new file mode 100644 index 0000000..b13f458 --- /dev/null +++ b/src/slides.md @@ -0,0 +1,3 @@ +# Slides + + diff --git a/src/viewboxes.md b/src/viewboxes.md new file mode 100644 index 0000000..31d6d29 --- /dev/null +++ b/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