An Autology

In my pursuit of generating websites explicitly in the manner I prefer, I end up using rather unorthodox methods of generating a website.

If you’ve taken a look at the source for this website, you might ask yourself.

Why use Typst to generate a website?

With the power of Typst, I can communicate in the most beautiful language

or simply just illustrate

For those not in the know Typst is a modern alternative to LaTeX. These two are software primarily designed to prepare academic and professional documents. The modern nature of typst lends itself better to generating a website.

Before the birth of this variaton of the website, I mostly wrote prose with emacs org-mode. The files would be parsed using a rust program into HTML and then rendered on my website (refer to webx below).

But recently, I’ve been wanting to publish more formal work as well, for example the Extended Essay I wrote for my International Baccaleurate Diploma on using ordinary differential equations to model electrical filters.

Ever since 2023, I’ve been learning and using Typst frequently to prepare my documents. I’ve watched Typst and its ecosystem grow from practically nothing. Not only is Typst strong right now, but its future is especially bright as adoption increases.

With the release of Typst 0.14, the typst HTML export API became more mature. So I decided to take the leap, although many things are still not complete like compiling a directory of Typst files to html. I hope through my early buy-in, I can help pioneer the development of Typst as a static site generator.

NEWSFLASH! We recieved Typst 0.15 with the much awaited bundle export, allowing us to compile many Typst files to many HTML files! Alongside MathML features. I had also help contribute a wee-bit in this release and hope to continue.

How exactly does this work?

With Typst Bundle exports this process becomes rather simple in my opinion.

The main part is this wrapper function, which utilizes the typst document API to generate a new document.

The main point of this is to prepend a breadcrumbs style navigation to my website, this relies on the name of the documents label having the same name as it’s path.

We can use it to render typst figures as SVGs with a show rule. This could be done on math as well, but with MathML its not really necessary.

The wrapper also links to the favicon and styles.css, soon I will also add more details so that the wrapper can support a author, description and date tags to better populate both the meta fields and an RSS file for my website.

I’ll update this more indepth once I add these features to my website.

Naming Patterns

My first personal website (that I’m proud enough to claim my own), was named webx for its (ab)use of htmx. Later, I’ll discuss in depth my (ab)use of vercel serverless rust functions to generate an entire static site.

Likewise, since I now use to Typst to generate my website, weby not only sequentially follows webx, but also uses the y from Typst, alike to using x from htmx.

What was webx?

I really didn’t want to use javascript to make a cool website. As you might know I’m a massive rust fan, so I tried to write as much of my website in rust as possible, while also minimizing functionality loss that I would have in a regular JS framework.

I stumbled across rust serverless functions. I’m still not sure what a Vercel Function is, but when I saw that it could take a rust program and serve it at an endpoint my first thought was “could I serve an entire website on that?” (yes, yes you can).

So at each endpoint, we have a minimal templating engine running to output the content of the website. Each page is represented by a binary compiled to that endpoint. This approach was actually quite refreshing compared to the typical router approach taken for building an API in Rust.

Honestly, I would have lost alot of functionality without htmx and htmz. With these, I could update the DOM on the fly without having to rely at all javascript which was a game changer.

Designwise, webx took a prety terminal like approach with JetBrains Mono Nerd font and a colorscheme from ayu-light (my favorite theme).

I added a few gimmicks on top that I liked, for example a song player for When I 226, which is a great song. A dark and light theme transitioner, which I also plan to implement for this website. As well as a cool transition, for which I have no idea how to describe, between navigating different pages.

However, there were quite a few downsides to webx:

1. The serverless functions would be compiled on the first call after a long time. Thus, if my website hadn’t been visited in a while, it would take a few seconds to load all the pages again and be quite annoying.
2. My website acted more or less like an SPA without history. This would cause issues for users when they tried to share links or navigate back pages.