feat(website): Add MMark extension to render table with styles

src/Neuron/Zettelkasten/Markdown.hs

@@ -1,13 +1,14 @@
+{-# LANGUAGE NoImplicitPrelude #-}
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE RecordWildCards #-}
-{-# LANGUAGE NoImplicitPrelude #-}
 
 module Neuron.Zettelkasten.Markdown
   ( neuronMMarkExts,
   )
 where
 
 import Neuron.Zettelkasten.Config (Config (..))
+import Neuron.Zettelkasten.Markdown.Extension (setTableClass)
 import Relude
 import qualified Text.MMark as MMark
 import qualified Text.MMark.Extension.Common as Ext
@@ -24,5 +25,6 @@ defaultExts =
     Ext.kbd,
     Ext.linkTarget,
     Ext.punctuationPrettifier,
-    Ext.skylighting
+    Ext.skylighting,
+    setTableClass "ui celled table"
   ]

src/Neuron/Zettelkasten/Markdown/Extension.hs

@@ -0,0 +1,48 @@
+{-# LANGUAGE NoImplicitPrelude #-}
+{-# LANGUAGE OverloadedStrings #-}
+
+module Neuron.Zettelkasten.Markdown.Extension
+  ( setTableClass,
+  )
+where
+
+import qualified Data.List.NonEmpty as NE
+import Lucid
+import Relude
+import Text.MMark.Extension (Block (Table), Extension)
+import qualified Text.MMark.Extension as Ext
+
+newline :: Html ()
+newline = "\n"
+
+setTableClass :: Text -> Extension
+setTableClass tableClass = Ext.blockRender $ \old block ->
+  case block of
+    -- https://github.com/mmark-md/mmark/blob/8f5534d8068c2b7a139b893639ee5920bcaedd84/Text/MMark/Render.hs#L111-L136
+    (Table calign (hs :| rows)) -> do
+      table_ [class_ tableClass] $ do
+        newline
+        thead_ $ do
+          newline
+          tr_
+            $ forM_ (NE.zip calign hs)
+            $ \(a, h) ->
+              th_ (alignStyle a) (snd h)
+          newline
+        newline
+        tbody_ $ do
+          newline
+          forM_ rows $ \row -> do
+            tr_
+              $ forM_ (NE.zip calign row)
+              $ \(a, h) ->
+                td_ (alignStyle a) (snd h)
+            newline
+        newline
+      newline
+    other -> old other
+  where
+    alignStyle Ext.CellAlignDefault = []
+    alignStyle Ext.CellAlignLeft = [style_ "text-align:left"]
+    alignStyle Ext.CellAlignRight = [style_ "text-align:right"]
+    alignStyle Ext.CellAlignCenter = [style_ "text-align:center"]