Pretty up the h-entry as a Bootstrap card

package.yaml

@@ -48,6 +48,7 @@ dependencies:
 - wai
 
 - conduit-combinators >= 1.1 && < 1.2
+- friendly-time >=0.4 && < 0.5
 - libravatar >=0.4 && <0.5
 - slug >=0.1 && <0.2
 - split >=0.2 && <0.3

src/Widget/Entry.hs

@@ -5,10 +5,22 @@ module Widget.Entry ( entryR, hEntry ) where
 
 import Import
 
+import Data.Time.Format ( defaultTimeLocale, formatTime, iso8601DateFormat )
+import Data.Time.Format.Human ( humanReadableTime )
+
+data FormattedTime = FormattedTime { timeUnfriendly :: String, timeFriendly :: String }
+
+toFormattedTime :: MonadIO m => UTCTime -> m FormattedTime
+toFormattedTime time = FormattedTime (unfriendly time) <$> friendly time
+    where unfriendly = formatTime defaultTimeLocale . iso8601DateFormat . Just $ "%H:%M:%S%z"
+          friendly = liftIO . humanReadableTime
+
 entryR :: Entity Entry -> Route App
 entryR (Entity entryId entry) = EntryR (entryKind entry) entryId (entrySlug entry)
 
 hEntry :: Entity Entry -> Widget
 hEntry (Entity entryId entry) = do
+    published <- toFormattedTime . entryPublished $ entry
+    updated <- toFormattedTime . entryUpdated $ entry
     maybeAuthor <- handlerToWidget . runDB . get . entryAuthorId $ entry
     $(widgetFile "mf2/h-entry")

templates/mf2/h-entry.hamlet

@@ -1,13 +1,15 @@
-<article .h-entry>
-  <h1 .p-name>#{entryName entry}
-  <a .u-url href="@{entryR (Entity entryId entry)}">permalink
-  <p>
-    published
+<article .h-entry .card.bg-dark>
+  <div .card-body>
+    <h4 .p-name .card-title>#{entryName entry}
     $maybe author <- maybeAuthor
-      \ by
-      <a .p-author.h-card href=@{HomeR}>
-        #{userFullName author}
-    on
-    <time .dt-published datetime=#{show $ entryPublished entry}>
-  <div .e-content>
-    #{entryContent entry}
+      <p .card-subtitle>
+        published by
+        <a .p-author.h-card href=@{HomeR}>#{userFullName author}
+    <div .e-content>
+      #{entryContent entry}
+    <a .u-url .card-link href="@{entryR (Entity entryId entry)}">permalink
+  <div .card-footer>
+      <time .dt-published datetime=#{timeUnfriendly published}>
+        #{timeFriendly published}
+      <time .dt-updated datetime=#{timeUnfriendly updated}>
+        #{timeFriendly updated}