Hello Quarto!

I made a personal website. With blogs and stuff.

Author

Ehud Karavani

Published

July 15, 2023

Modified

October 26, 2023

I made a personal website.

Why

With Twitter’s descent, Substack taking over Medium (taking over Blogger/Blogspot, etc. etc.), and the pathetic death of Myspace still echoing in my memories, my confidence in Platforms is at an all-time low.

However, my primeval need for a digital presence on the Internet does not fade. I want a place to share my thoughts, at least my professional ones. And I want that place consistent.
They say the Internet does not forget, but honestly, this kind of Internet is more fragile than we want admit.

Why not

I’ve been contemplating in creating a personal website since forever. I don’t know much about website development, but it always felt cumbersome to me. I never liked the idea of maintaining HTMLs because they tangle content with form. And add the storage and servers, and ugh… I guess that’s why WordPress and Wix were (still are?) such a huge success.

Why maybe

So when GitHub Pages matured, my contemplation intensified. Them taking care of the CI/CD of the website through Git and GitHub is nothing less than genius. But “Jekyll” sounded too similar to “Jenkins” and I couldn’t get myself to create one. I had Twitter, I had Medium, I had a job, I had very little to say anyway.

Why how

But then I heard of Quarto.
I knew of RMarkdown for a while, and quite envied how R users got a markdown-based solution, while Pythonistas got stuck in a json-based Jupyter Notebook. (If you ever reviewed a pull request of Notebooks, you’ll understand.) So when I learned Quarto was multilingual (R! Python! Julia!), text-based (markdown!), reach in features (mathjax!), and flexible (documents, websites, arbitrary pre-post scripts…), It was too tempting not to give it a try.

Quarto seems flexible enough to hold anything anywhere from a business card landing page to a full-blown website.

And it’s quite simple, too.

Really, how

I thought of making this post a howto guide, but honestly, I’m not sure how. I just hacked my way through.
I still don’t completely understand how it works.
I started with the website template from VS Code, found other quarto websites, found their source-code on GitHub and “reverse engineered” it (if you call still it that, when you actually have access to the source code).

I gradually tweaked, and structured, and hacked and such.
Therefore, it is hard for me to make a complete howto guide, but I welcome everyone to peek at this website source code as a start.
To separate the needles for haystacks, I will share some of the things I learned at no particular order:

  1. Cosmo-like dark mode
    I love dark mode, and the official documentation suggests the darkly/flatly couple for dark and light mode. But I honestly didn’t like Flatly, the cosmo theme is much nicer, in my opinion. Problem is, the top navigation bars of cosmo and darkly don’t align, and the switching between the two really irritated my inner pedantic.
    So I learned from the docs you could use SCSS files to make minimal changes to existing CSS themes. I then spent an entire evening on Chrome’s Inspect mode to figure out what changes when I switch from light to dark mode (I don’t know CSS), until I was able to extract the minimal set of configuration to align darkly onto cosmos (fonts and navbar padding).
  2. Icons everywhere
    I also love inline icons. Quarto comes with Bootstrap icons built in, but that did not satisfy my hunger for fringe icons.
    So my first step was to add the Iconify extension to the project, which, to my understanding, looks like an aggregate of many different icon services into one.
    1. Medium icon in blogs’ title blocks
      Since I re-uploaded all my original blogs, first written in Medium, to here too, I wanted to signify that. I didn’t want to put the link at the start/end of every post - the original Medium post is a metadata to these posts, and it should be stated in the metadata yaml.
      Then I thought it would be aesthetically pleasing to have a Medium icon next to the original publication date. So found at the docs how to create custom title pages using template partials.
      But I didn’t want a custom title page, I want the existing one. So I found its definitions in Quarto’s GitHub repository, and by looking how other metadata is handled in this pandoc html template language (my first encounter with it though I did some Jinja in the past), made a small tweak to include the Medium icon next to the original publication date.
    2. About Me special icons
      Just a quick note, that if you’re using non Bootstrap icons in the navigation bar or About Me page, the icons go in the text attribute, not in the icon.
  3. Custom publication listing
    For the publication listing, I wanted to add some data like hyperlinks to the DOI and PDF (with icons, of course). Again, I didn’t really want a custom template, but unlike the title block template, Quarto’s default listing template does not seem to be online.
    Also, it appears to an EJS file (another template language to “learn” on top of SCSS and pandoc’s partial HTMLs we already hacked1).
    Since I didn’t had Quarto’s own template, I paid a visit to the Awesome Quarto repository, where I discovered Jeffery Girard’s publication page (and corresponding source code). It was simple and clean, and a great starting point to build on top of (I’m mostly proud how the DOI icon changes if the work is a pre-print or peer-reviewed [of course], or how to make the entire thing clickable). And again we see the flexibility of creating arbitrary attributes in the documents’ yaml and then reference them in the template.
  4. Multiple listings
    This is also a nice feature. I contemplated how to separate full-blown blog posts from more minimalistic ones. At first I thought of having two different pages in the navigation bar, but this is too separated in my opinion. I was happy I discovered you could place multiple listings in a single page, this makes the distinction between the two more fluid (as it really is in reality).

Footnotes

  1. Since I already mentioned Jinja above, it seems like its template language combines both pandoc’s and EJS capabilities together?↩︎