Pretty up the h-entry as a Bootstrap card

This commit is contained in:
Danielle McLean 2017-10-09 09:55:34 +11:00
parent 7cebf92356
commit 934457f671
Signed by: 00dani
GPG key ID: 5A5D2D1AFF12EEC5
3 changed files with 27 additions and 12 deletions

View file

@ -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

View file

@ -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")

View file

@ -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}