Mukul Agarwal This website

This is my personal website!! It’s a static website generated by the SSG Astro and hosted on Vercel’s generous free tier. I use it to publish projects, photographs, mathematical notes, and anything else I want to share with people.

This page mainly serves to document some of the cool things that are part of this website (especially those that might not be immediately obvious to the viewer). But first, some historical info…

History

Here’s a list of when I redesigned my website substantially!

26/10v5	Mostly just a visual redesign.
26/06v4	I went back to Astro, with a slightly less colorful design (though, it was very green…). This is the version where I added a lot of the features that are mentioned on this page. This version lasted 106 days.
25/11v3	I got kind of tired of the last website and how many colors it had, so I switched to the Hugo static site generator with the Hugo Bear Blog theme. I hosted this iteration of the website on Github Pages. This version lasted 241 days.
24/06v2	I finally made a proper website (in Astro)! To compensate for the last one, it was very colorful. This version lasted 518 days.
23/09v1	A very plain HTML website! I wrote it up right after purchasing my domain at ~7 AM (after an all nighter). In retrospect, I’m pretty surprised I didn’t redesign it for so long. This version lasted 252 days.

Features

Now, it’s time to discuss some features (in alphabetical order)!

Accessibility

My website aims to be WCAG AAA-compliant. To check for accessibility, I use a complex combination of axe-core, Pa11y, HTML Codesniffer, and custom integration tests using Puppeteer.

One surprising factor that affects accessibility are the colors used for Syntax Highlighting! I use the Modus Operandi and Modus Vivandi themes, which are extremely high contrast¹.

Open Graph images

The Opengraph standard allows for the creation of a “social preview” for each page in a website. This is pretty annoying to do by hand, so I used Satori to automate the creating of these images from the title and description of a page. Thanks to Kian for the inspiration! As an example, the Open Graph image for this page is:

Typst documents

I write my résumé and course notes in Typst. I don’t want these documents to drift significantly from the one on my website, so I just use my website repo as my source for typst files and have the website auto-build them during the Astro website’s build step. To do this, I created a Remark plugin that looks for links to files of the form

:file[...](./abc.typ)

and then using typst.ts and some simple regex substitution of packages to ensure that all .typ files in my repository are ready to be viewed by anyone!

Remote files & Caching

I implement a system which can locally copy remote files to be part of the final website; during the build, the site downloads files and saves them to a local /files/ URL. I also implemented caching and some name disambiguation to make this faster.

Diagrams and math

I wrote a small rehype plugin for Mermaid diagrams which generates svg diagrams from Mermaid descriptions and embeds them into my website, and use KaTeX in a configuration which pre-builds LaTeX formulae and emits MathML during website generation; this allows me to serve equations to the website viewer without Javascript!