nicer dates in html

app/Html.hs

@@ -6,6 +6,7 @@ import Data.String (fromString)
 import Data.Text qualified as T
 import Fedi qualified as Fedi
 import Lucid qualified as H
+import Text.RawString.QQ (r)
 
 -- * HTML
 
@@ -52,10 +53,12 @@ userHtml details = do
 notesHtml :: [Fedi.Note] -> Html
 notesHtml notes = do
   H.div_ [H.class_ "notes"] $ mapM_ noteHtml notes
+  H.script_ $ T.pack localDateJs
 
 -- | A single post as HTML.
 noteHtml :: Fedi.Note -> Html
 noteHtml note = do
+  let noteid = T.pack (maybe "" (\i -> i.unwrap) note.id)
   H.div_ [H.class_ "note"] $ do
     H.div_ [H.class_ "note-header"] $ do
       case note.name of
@@ -68,12 +71,13 @@ noteHtml note = do
           H.p_ $ H.a_ [H.href_ (T.pack url)] $ fromString url
         Nothing -> pure ()
 
-      H.a_
+      Fedi.for_ note.published \published ->
-        [ H.href_ (T.pack (maybe "" (\i -> i.unwrap) note.id))
+        H.a_
-        , H.class_ "note-time"
+          [ H.href_ noteid
-        , H.title_ "See note page"
+          , H.class_ "note-time"
-        ]
+          , H.title_ "See note page"
-        (H.toHtml (T.pack (show note.published)))
+          ]
+          (H.span_ [H.class_ $ "note-date-published"] $ H.toHtml (show published))
 
     H.div_ [H.class_ $ "note-content " <> checkDirection (maybe "" id note.content)] $ do
       H.toHtmlRaw (maybe "" id note.content)
@@ -127,3 +131,13 @@ newNoteHtml details = do
             , H.value_ "Post"
             ]
     )
+
+localDateJs :: String
+localDateJs = [r|
+let collection = document.querySelectorAll(".note-date-published");
+
+for (let i = 0; i < collection.length; i++) {
+  let date = new Date(collection[i].innerHTML);
+  collection[i].innerHTML = date.toLocaleString();
+}
+|]