Create slides in TypeScript and present them in the terminal using ASCII only!
Do you have a conference soon? Are you tired of presenting slides in Keynote, PowerPoint or any HTML based tool? Why not to create and present slides in the terminal using ASCII only!
NOTE: I’m not arguing that kittik is better than X tool designed for presentations. I’m saying that we can use it for fun in small topics or conferences.
I was always in love with the terminal and what we can do with it, and still is, actually. Someday, I thought, why not to be a little creative and present speech on the conference in the terminal by using ASCII characters only? I tried and turned out that it is a hard task. That is why, I decided, we need a tooling for it!
That is how a name was born, Keynote In the Terminal (KIT) and a palindrome for KIT - KITTIK.
How to convert an RGB to HEX |
---|
All you need is a single dependency - kittik
.
npm install kittik
The package provides everything you need to create your own slides - builders. There are builders for shapes, animations, slides and deck. Start with a builder for Deck.
import { DeckBuilder } from "kittik";
DeckBuilder
.start()
.end()
.render();
Every builder has a start()
and end()
methods.
So it is easier to write them down at first place before configuring, that way you will not forget about end()
.
Although, type check does not allow this situation.
Every deck comprises your slides.
To add more slides, just call withSlide()
method.
It accepts a function where the slide builder will be passed by the deck.
NOTE: the builder is already started in withSlide()
, so you need to end it only.
import { DeckBuilder } from "kittik";
DeckBuilder
.start()
.withSlide((slide) => slide.end())
.end()
.render();
Now, slide builder provides two essential methods withAnimation()
and withShape()
.
withAnimation()
accepts a name for your animation (for further references) and the animation that must be built through animation builder.
The same applies to withShape()
.
It accepts a name, and a shape built with shape builder.
That way you can specify animations and shapes for your slide.
But kittik does not know in what order to render those shapes and what animations animate what shape.
To handle this situation there is withOrder()
method.
It accepts a name of the shape you defined before and an array of animation names you want to use.
import { DeckBuilder, ShapeBuilder } from "kittik";
DeckBuilder
.start()
.withSlide((slide) =>
slide
.withShape(
"Hello, World!",
ShapeBuilder.start("Text").withText("Hello, World!").end()
)
.withOrder("Hello, World!")
.end()
)
.end()
.render();
Congratulations, you just created a simple Deck with one slide and “Hello, World” in it. Add more slides, animate them and bring them to live.
You can find more examples in examples
folder.
True, if you want to create a lot of slides, it will be not an exceptional experience in declaring them through builders. That is why there is work in progress (only in my mind) for the concept of themes and parsers for different input, e.g. Markdown.
Ask them in issues, I’ll be glad to answer them.