Hakyll get list of tags from list of posts

Question

I'm using Hakyll to make a blog index page where all my posts are listed. Each post has fields of date, title, preview and list of tags.

<!-- /blog.html -->

<div class="list">
$for(posts)$
    <div class="entry-date">$date$</div>
    <div class="entry-taglist">
        $for(tags)$
        <div class="tag">$body$</div>
        $endfor$
    </div>
    <div class="entry-title">$title$</div>
    <div class="entry-preview">$preview$</div>
$endfor$
</div>

The posts have the context as such:

---
title: S.P.Q.R.
tags: foo, bar1, bar2
---

How do I populate the context to satisfy the above template? Here is my attempt following this post:

main = do
    ...
    match "blog.md" $ do
      route   $ setExtension "html"
      compile $ do
        posts <- recentFirst =<< loadAll "posts/*"
        let indexCtx =
                listField "posts" tagContext (return posts) `mappend`
                defaultContext in
          pandocCompiler
          >>= loadAndApplyTemplate "templates/blogindex.html" indexCtx
          >>= relativizeUrls

postCtx :: Context String
postCtx =
  dateField "date" "%d/%m/%Y" `mappend`
  defaultContext

listContextWith :: Context String -> String -> Context a
listContextWith ctx s = listField s ctx $ do
    identifier <- getUnderlying
    metadata <- getMetadata identifier
    let metas = maybe [] (map trim . splitAll ",") $ lookupString s metadata
    return $ map (\x -> Item (fromFilePath x) x) metas

listContext :: String -> Context a
listContext = listContextWith postCtx

tagContext = listContext "tags" <> defaultContext

The page returns an empty div for .entry-taglist.

Answer 1

This is a bad workaround, but I just take in the tags as a string of comma separated values and modify the page's tags html elements in js

document.querySelectorAll('.entry-tags').forEach((x,i,o) => 
    x.innerHTML = (x.innerHTML.split(",").map(x => '<div class="tag">' + x.trim() + '</div>').join("\n"))
);