This blog is generated using Hakyll. Hakyll provides a way to annotate posts with tags and generate a list of pages with the same tag. I followed the excellent guide from https://javran.github.io/posts/2014-03-01-add-tags-to-your-hakyll-blog.html and added the tags feature to the blog. The html produced for the tags is quite bare
and I wanted to style it using bulma “is-link” and “tag” attributes.
While this can be done with jquery after the page is loaded, I wanted to do the styling during site generation. I took this as an opportunity to play with Hakyll.
The html for the tags is added to the Hakyll post context by the
Hakyll also offers a
tagsFieldWith function where the HTML generation can be customized. Below is the code I ended up with.
postCtxWithTags :: Tags -> Context String postCtxWithTags tags = tagsFieldBulma "tags" tags `mappend` postCtx tagsFieldBulma :: String -> Tags -> Context a tagsFieldBulma = tagsFieldWith getTags simpleRenderLinkBulma (mconcat . intersperse " ") simpleRenderLinkBulma :: String -> (Maybe FilePath) -> Maybe H.Html simpleRenderLinkBulma _ Nothing = Nothing simpleRenderLinkBulma tag (Just filePath) = Just $ H.a ! A.href (toValue $ toUrl filePath) ! A.class_ "tag is-link" $ toHtml tag
This snippet custmoizes the
simpleRenderLink function to add
tag is-link attributes to the tags. This function is plugged into
tagsFieldBulma which gets plugged into
postCtxWithTags. The link to full source is here Tags.hs.