This is my personal homepage. I wrote a specific static site generator in Elixir to learn the language. It takes Markdown documents for all the projects and blog posts, automatically creates indexes for both, and renders them to static HTML files.
GitHub: dark.red · Tech used: Elixir
def header do tag(:header, [ tag(:div, [ class: "container" ], [ tag(:h1, [ tag(:a, [ href: "/" ], [ "darkness" ]) ]), tag(:nav, [ tag(:a, [ href: "/" ], [ "about me" ]), tag(:a, [ href: "/projects/index.html" ], [ "projects" ]), tag(:a, [ href: "/blog/index.html" ], [ "blog" ]), ]) ]) ]) end
HTML.tag takes arguments for its tag name, attributes and contents, and the resulting struct implements
to_string. I initially wanted to use
$handle_undefined_function so you could write tags like
HTML.div([ class: "content" ]) but that messed up linting in my editor.
The content of each page comes from a Markdown document. While it's mostly just standard CommonMark, each file does have a small header for extra information:
- title: dark.red - cover: /static/dark-red-cover.png - category: ongoing This is my personal homepage. I wrote a specific static site generator in Elixir to learn the language. It takes
I extract this header before parsing by simply splitting once on
"\n\n" and use it for
<title> and the
index pages. A nice side effect of this format is that it simply shows as a normal list if you open the file in a
The code highlighting isn't some fancy cmark plugin either. By default, Vim ships with a plugin that provides a
:TOhtml command. This converts a buffer (or selection) to an HTML page that looks just like how it's in Vim, including
syntax highlighting, folds and even diffs! So I just copy the lines containing the code and the CSS rules over.
All that HTML looks really bad in the Markdown document, but I think the result is worth it. Besides, I can just fold the code snippets away. In fact, writing this paragraph makes me realise I could probably hide just the HTML tags in code blocks with som Vim magic. Maybe I'll try that someday.