Diagrams In Hakyll!

Posted on June 23, 2018 by Noon van der Silk

I stumbled across this blogpost of Corentin Dupont where he put together a library that allows you to modify your hakyll blog so that you can have inline diagrams! As anyone knows, this was amazingly exciting to me, because I love diagrams.

So I quickly tried to set it up; but, much to my sadness it didn’t immediately work.

Luckily, however, I was able to make it worked by hacking around in the two relevant repos:

The main result is a function, pandocCompilerDiagrams, that I included into my hakyll site file like so:

match "posts/*" $do route$ setExtension "html"
compile $(pandocCompilerDiagrams "images/diagrams" <|> pandocMathCompiler) >>= loadAndApplyTemplate "templates/post.html" postCtx >>= saveSnapshot "content" >>= loadAndApplyTemplate "templates/default.html" postCtx >>= relativizeUrls And so now, I can have inline diagrams! Check it out: Imagine we had a circle: example = circle 1 But now, what if the circle was repeated 5 times example = hcat (take 5$ repeat (circle 1))

Cool!

To celebrate, let’s draw the Sierpinksi triangle:

The basic building block: sierp d = d === (d ||| d) # centerXY
example = sierp (triangle 1)

Let’s go! sierp d = d === (d ||| d) # centerXY
example = foldl (\d _ -> sierp d) (triangle 1) [1..3]

Colours! import Data.Colour.Palette.ColorSet

color n = rybColor (n*2)

sierp d n = d1 === (d2 ||| d2) # centerX
where
d1 = d # bg (color n)
d2 = d # bg (color (n+1))

example = foldl step d0 [0..5]
where
d0       = triangle 1 # lw 0
step d n = sierp d (n*2)

Happy days!
{"ft_lang_label":"__label__en","ft_lang_prob":0.78969896,"math_prob":0.5204925,"size":1530,"snap":"2019-26-2019-30","text_gpt3_token_len":456,"char_repetition_ratio":0.10026212,"word_repetition_ratio":0.06741573,"special_character_ratio":0.2888889,"punctuation_ratio":0.12280702,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9759067,"pos_list":[0,1,2,3,4,5,6,7,8,9,10],"im_url_duplicate_count":[null,1,null,1,null,1,null,1,null,1,null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2019-06-26T16:46:59Z\",\"WARC-Record-ID\":\"<urn:uuid:3f3cc258-87d2-4ecc-a109-485fd542bfa3>\",\"Content-Length\":\"7144\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:3fba5ee5-3ad1-46bf-8c9e-1a0d4514b005>\",\"WARC-Concurrent-To\":\"<urn:uuid:a0c51bbb-4b2c-4046-9fc4-3f3f05de988d>\",\"WARC-IP-Address\":\"185.199.110.153\",\"WARC-Target-URI\":\"https://silky.github.io/posts/2018-06-23-Diagrams-In-Hakyll.html\",\"WARC-Payload-Digest\":\"sha1:JBSHAZRD246QNHBMR3RZUKHCMWQOLR3Y\",\"WARC-Block-Digest\":\"sha1:3U3L6JPUGFK3BKMKVH6MX4XNQ3JOIODW\",\"WARC-Identified-Payload-Type\":\"application/xhtml+xml\",\"warc_filename\":\"/cc_download/warc_2019/CC-MAIN-2019-26/CC-MAIN-2019-26_segments_1560628000367.74_warc_CC-MAIN-20190626154459-20190626180459-00126.warc.gz\"}"}