Episode 1: A New Blog
Hooray! A new published version of my blog (which also happens to include everything on this domain and thus is not just a blog).
I did what everyone tells you not to and wrote a whole new engine to build the new version of this blog. I dubbed it Leo and you can check it out on GitHub if you are so inclined. It, for example, supports conditionally including drafts in the output with env vars:
BLOGPOST_RENDER_DRAFTS=true npm start
I’ll do a more in-depth discussion of the static-site engine beneath this site in a different post. The technical architecture is fairly interesting itself since it uses Relay, GraphQL and React.
The markdown implementation is markdown-it, which supports commonmark in it’s default configuration and has a plugin system. Hopefully I won’t abuse the plugin system too much… or I may just end up with a custom markdown syntax
:poop: :) :fire: :joy: :sunglasses: :dizzy_face: :athletic_shoe::tongue:
:poop: :) :fire: :joy: :sunglasses: :dizzy_face: :athletic_shoe: :tongue:
Unfortunately, for some reason they only work in
<p/> tags. Experimentally
they use the correct utf-8 code in headers, but render with an effect similar to
YouTube support is enabled via “shortcodes” from markdown-it-video
name attributes automatically associated with them, but they
aren’t “auto-linked”. This means that you have to either guess at the
#slugified representation or inspect element. I’d like to change this to have
a clickable link in the future.
Pandoc-style footnotes are enabled.1
- More on PostCSS
I have a component library system2 in development that’s also being used in places on this site. It uses PostCSS for the CSS generation. postcss-responsive-type is responsible for the font-size changing depending on viewport size (try it, it’s cool!). This yields a nice effect where the entire site scales a bit, based on typography size, between phones and 4k screens.
Ok, so I spent 0 time designing this thing. It’s mainly an exploration of the functionality of Leo (which was used to build the site). That means there are significant areas to improve in terms of design. You may notice, for example, that there are some blueprint-ish placeholders for featured post images, etc.
Roboto is ok, but a stack based on Proxima Nova is probably where I’ll end up long term.