Introducing Devy!
Originally published at https://www.alperenkeles.com/blog/devy
This blog post introduces Devy, the interactive blog engine I’ve been working on. Devy is a static site generator that allows you to write interactive blog posts using a combination of markdown and a custom DSL. This post is written using Devy, so you can see how it works in action!
I like to write a lot of small code snippets in my code, and I want my readers to be able to try them out. Using DCL(Declarative Component Language), I can define components and their interactions in a simple way. For example, the following code block defines a function for turning a given string into uppercase:
If you would like to see what this post looks like without any CSS, check out the raw HTML.
A simple feature, which probably should be the default behavior in the future, is the ability to copy the code block to the clipboard. The next code block is a simple example of a function that adds two numbers together:
Line numbers are also an important feature(you need a little bit of css to make them look good). Of course, we are not always limited to Javascript, so here’s a Rust version of the add function.
That’s all pretty cool, but nothing impressive. The fun starts when you can run code snippets and use their results. That’s where DCL comes into play. Below is a short DCL snippet that uses the add function to add two numbers together. The first two lines define the inputs and their initial values, and the third line defines the output as a function of the result of adding the two inputs together.
```dcl {#add-example}
input1 : text-input := 5
input2 : text-input := 10
output : text-area := input1, input2 => add(input1, input2)
```Devy compiles this DCL snippet into HTML and Javascript code that updates the output whenever the inputs change.
Text inputs are not the only components available. Here’s an example of a radio button that asks a question and provides feedback based on the answer:
Do you think Devy is a cool project?
option : radio := yes, no, of course
feedback : paragraph := option => option === "of course" ? "Great job!" : "Incorrect! Try Again!"Aside from interactivity, I also want to focus on easily creating diagrams and other visualizations. For now, I started with the Mermaid diagrams, which are simple to write and look great.
One cool thing I added(which doesn’t exist natively in Mermaid) is animating the diagrams. Users can easily add a rate attribute to the mermaid code block to control the animation speed.
The current animation system is pretty simple, but I plan to add (1) phase-based animations where user can define the frame each element should appear, (2) control mechanisms for animations such as dynamic speed control, and (3) layout preserving animation where all elements do not destructively move around.
That concludes the current state of Devy. It’s a brand new project, and there are lots of features I want to add. If you have any ideas, please let me know by opening an issue on the GitHub repository. I’m excited to see where this project goes, and I hope you are too! Also, please leave a star on the repository if you like the project!
Originally published at https://www.alperenkeles.com/blog/devy
