frode.xyz

This is a test

If this post, being my first ever, seems like it is just a patchwork of disconnected pieces of text and visual elements, I can happily state that it has served its purpose. I had a handful of goals for what this website should be capable of presenting, and have used this document to test them all out. It is as good a first post as any I could have come up with deliberately.

The generating script, templates, and source files I’ve made are all available at GitHub.

Layout

First of all, the site is as bloat-free and lightweight as I could make it, inspired by MotherfuckingWebsite, Luke Smith, and a number of others that I’ve forgotten about by now. It is mostly just pure HTML and CSS, generated from Markdown code by pandoc (more on that below).

Keeping too strictly on the road to minimalism, however, can also make things more complicated rather than simpler. So I’ve decided to include at least one exception worth mentioning, namely a small bit of javascript used to render mathematical notation. That is, the site uses K^AT_EX to render L^AT_EX-code (this, too, will be touched on later).

There is also a justifiable bit of CSS to pretty things up. I have aimed for the look of a classic L^AT_EX template, and am quite pleased with the result.

Pandoc

I have tried to make the site as easy to maintain and update as possible, so that I’ll actually use it. One thing that makes everything very streamlined is that the entire site is generated from simple Markdown files using pandoc.

At first when I heard about pandoc, I just began using it to convert generic Markdown into html-document fragments. These bits of generated html I sandwiched in the middle of a header and footer file, and thought that such a process was good enough. But then when I finally actually started reading pandoc’s documentation, I found that the program in fact is capable of producing standalone documents, while still leaving plenty of room and options for customisation.

Almost all of what I want in the website can be generated by pandoc from a single command, simply by supplying appropriate options. From a folder hierarchy of markdown files located in the directory mark/, along with some template files in the directory tmpl/, this entire website is generated from the following lines of bash:

cp -r mark site
cp tmpl/{style.css,favicon.png} site/
for md_file in `find site -type f -name "*.md"`; do
    pandoc \
        -s \                      # standalone
        --katex \                 # needed for formatting math
        -T BŒRSETH \              # page title suffix
        -c /style.css \           # all css from this file
        -H tmpl/head.html \       # HTML-code of additional head content
        -B tmpl/banner.html \     # HTML-code of site banner
        -A tmpl/footer.html \     # HTML-code of site footer
        -i $md_file \             # the markdown-file to be converted
        -o ${md_file%.md}.html    # where to store output
done
find site -type f -name "*.md*" -delete

Some work needs to be done in the first few lines, copying the folder structure of mark/ into the folder site/ along with the files style.css and favicon.png, and at the end the MD-files that come along for the ride need to be removed, but most of the job is simply finding all the .md files in site/ to convert, and letting pandoc do its job.

Math

With the --katex option supplied to pandoc, writing beautiful mathematics with familiar L^AT_EX-like syntax is a walk in the park. For instance, the following code pasted into a Markdown file

$$
  \sum\limits_{n=1}^{\infty} \frac{1}{n^2}
  \; = \;
  1 + \frac{1}{2^2} + \frac{1}{3^2} + \cdots
  \; = \;
  \frac{\pi^2}{6}
$$
$$
  \int\limits_{-\infty}^{\infty} \text{e}^{-x^2} \text{d}x = \sqrt{\pi}
$$

will result in equations generated by K^AT_EX as follows:

$$\sum\limits_{n=1}^{\infty} \frac{1}{n^2} \; = \; 1 + \frac{1}{2^2} + \frac{1}{3^2} + \cdots \; = \; \frac{\pi^2}{6}$$ $$\int\limits_{-\infty}^{\infty} \text{e}^{-x^2} \text{d}x = \sqrt{\pi}$$

Nice.

Code

As should be clear already, pandoc supports the inclusion of code snippets written in a variety of languages, and will provide syntax-highlighting out of the box when generating standalone documents. Already I’ve included bash and L^AT_EX, but here is yet another example in Python:

def get_dragon_fractal_corner(n: int) -> int:
    if n:
        while not n % 2:
            n >>= 1
        n >>= 1
    return n % 2

Lorem ipsum

Quisque aliquet nisl sem. Suspendisse potenti. Maecenas eleifend, lorem quis maximus eleifend, libero enim bibendum nisl, sit amet tristique elit ante ac lectus. Aliquam semper varius sem mattis tincidunt. In hac habitasse platea dictumst. Sed quis mi bibendum, gravida augue auctor, aliquam mi. Praesent vitae libero sit amet libero maximus ullamcorper. Maecenas nec lectus ut arcu ornare maximus nec vel neque. Vestibulum dignissim massa quis magna sagittis elementum. Praesent hendrerit nulla quis eros posuere sodales.

Nunc finibus leo ac velit lacinia, eu condimentum est dapibus. Integer convallis ut turpis nec porta. Cras urna lectus, fermentum eu erat sed, tempor feugiat risus. Suspendisse a diam dolor. Duis sit amet imperdiet neque. Aenean vitae tristique leo, et auctor sem. Nam fermentum mi sed felis lobortis varius. Maecenas blandit nisi id massa consectetur mattis. Vestibulum sit amet consectetur sem. Maecenas sodales eros at arcu ullamcorper dapibus.

Cras luctus, tellus eu aliquet facilisis, nunc est consequat velit, vel porta nisi est id nunc. Maecenas massa mi, dignissim a mi at, auctor congue odio. Phasellus sodales nunc in tincidunt accumsan. Aenean est risus, pulvinar vel ante quis, vestibulum blandit nunc. Morbi erat erat, volutpat et blandit vel, consectetur ut quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vestibulum tristique nulla, id euismod odio ultrices in. Cras convallis, libero et aliquam luctus, lectus tortor ultricies nunc, ac efficitur nisl est ultrices mi. Fusce vel hendrerit nibh. Proin tempus erat massa, vel vulputate ipsum blandit vitae. Praesent odio neque, tempor eget iaculis vel, mattis non orci. Duis accumsan elementum gravida. Quisque condimentum sed mi vel semper. Cras rhoncus nisi id justo faucibus facilisis.