df1-html-0.1: lib/Df1/Html/Render.hs
{-# LANGUAGE OverloadedLists #-}
{-# LANGUAGE OverloadedStrings #-}
module Df1.Html.Render
( log,
-- * Themes
--
-- $themes
)
where
import qualified Data.ByteString.Builder as BB
import qualified Data.ByteString.Lazy as BL
import Data.Foldable (toList)
import Data.List (intercalate)
import qualified Data.Sequence as Seq
import qualified Data.Text as T
import qualified Data.Text.Encoding as TE
import qualified Data.Text.Lazy as TL
import qualified Data.Time.Clock.System as Time
import qualified Df1 as D
import qualified Df1.Render as DR
import qualified Xmlbf as X
import Prelude hiding (log)
-- | Converts 'D.Log' into a list of 'X.Node's from "Xmlbf" to render it as HTML.
--
-- Example log:
-- @1999-12-20T07:11:39.230553031Z \/foo x=a y=b \/bar \/qux z=c z=d WARNING Something@
--
-- The generated HTML matches the following CSS selectors:
--
-- [@.df1-log.df1-debug@]:
--
-- [@.df1-log.df1-info@]:
--
-- [@.df1-log.df1-notice@]:
--
-- [@.df1-log.df1-warning@]:
--
-- [@.df1-log.df1-error@]:
--
-- [@.df1-log.df1-critical@]:
--
-- [@.df1-log.df1-alert@]:
--
-- [@.df1-log.df1-emergency@]: Top level container for a 'D.Log' entry of a particular 'D.Level'.
--
-- [@.df1-log .df1-time@]: Timestamp - Example: @1999-12-20T07:11:39.230553031Z@
--
-- [@.df1-log .df1-path@]: Full list of 'D.Path's - Example: @\/foo x=a y=b \/bar \/qux z=c z=d@
--
-- [@.df1-log .df1-path .df1-push@]: Single 'D.Push' - Examples: @\/foo@, @\/bar@, @\/qux@
--
-- [@.df1-log .df1-path .df1-push .df1-seg@]: Single 'D.Segment' - Example: @foo@
--
-- [@.df1-log .df1-path .df1-attr@]: Single 'D.Attr' - Example: @x=a@, @y=b@, @z=c@, @z=d@
--
-- [@.df1-log .df1-path .df1-attr .df1-key@]: Single 'D.Key' - Example: @x@, @y@, @z@, @z@
--
-- [@.df1-log .df1-path .df1-attr .df1-value@]: Single 'D.Value' - Example: @a@, @b@, @c@, @d@
--
-- [@.df1-log .df1-level@]: 'D.Level' - Example: @WARNING@
--
-- [@.df1-log .df1-msg@]: 'D.Message' - Example: @Something@
--
log :: D.Log -> [X.Node]
log x =
X.element "div" [("class", "df1-log " <> levelClass (D.log_level x))] $
mconcat
[ timeHtml (D.log_time x),
X.text " ",
pathsHtml (D.log_path x),
X.text " ",
levelHtml (D.log_level x),
X.text " ",
messageHtml (D.log_message x)
]
levelClass :: D.Level -> T.Text
levelClass l = "df1-" <> TL.toStrict (TL.toLower (levelToText l))
timeHtml :: Time.SystemTime -> [X.Node]
timeHtml t = spanClass "df1-time" (X.text (textLazyFromBuilder (DR.iso8601 t)))
textLazyFromBuilder :: BB.Builder -> TL.Text
textLazyFromBuilder b = TL.fromStrict (TE.decodeUtf8 (BL.toStrict (BB.toLazyByteString b)))
levelHtml :: D.Level -> [X.Node]
levelHtml l = spanClass "df1-level" (X.text (levelToText l))
levelToText :: D.Level -> TL.Text
levelToText l =
case l of
D.Debug -> "DEBUG"
D.Info -> "INFO"
D.Notice -> "NOTICE"
D.Warning -> "WARNING"
D.Error -> "ERROR"
D.Critical -> "CRITICAL"
D.Alert -> "ALERT"
D.Emergency -> "EMERGENCY"
messageHtml :: D.Message -> [X.Node]
messageHtml m = spanClass "df1-msg" (X.text (textLazyFromBuilder (DR.message m)))
pathsHtml :: Seq.Seq D.Path -> [X.Node]
pathsHtml ps = spanClass "df1-path" (intercalate (X.text " ") (fmap pathHtml (toList ps)))
pathHtml :: D.Path -> [X.Node]
pathHtml p = case p of
D.Push seg -> spanClass "df1-push" (X.text "/" <> segmentHtml seg)
D.Attr key val -> spanClass "df1-attr" (keyHtml key <> X.text "=" <> valueHtml val)
segmentHtml :: D.Segment -> [X.Node]
segmentHtml s = spanClass "df1-seg" (X.text (textLazyFromBuilder (DR.segment s)))
keyHtml :: D.Key -> [X.Node]
keyHtml k = spanClass "df1-key" (X.text (textLazyFromBuilder (DR.key k)))
valueHtml :: D.Value -> [X.Node]
valueHtml v = spanClass "df1-value" (X.text (textLazyFromBuilder (DR.value v)))
spanClass :: T.Text -> [X.Node] -> [X.Node]
spanClass t = X.element "span" [("class", t)]
-- $themes
--
-- If you need to style the rendered HTML, you can use some of the themes shipped with this library.
--
-- == [theme-solarized-dark.css](https://raw.githubusercontent.com/k0001/di/master/df1-html/theme-solarized-dark.css)
--
-- To use this theme, wrap the @.df1-log@ elements in a @.df1-theme-solarized-dark@ element.
--
-- 
--
-- == [theme-solarized-light.css](https://raw.githubusercontent.com/k0001/di/master/df1-html/theme-solarized-light.css)
--
-- To use this theme, wrap the @.df1-log@ elements in a @.df1-theme-solarized-light@ element.
--
-- 