Simple HTML render

html_render.hs

class Renderable component where
  render :: component -> String
  {-# MINIMAL render #-}

data Text = Text String

instance Renderable Text where
  render (Text s) = "<p>" <> s <> "</p>"

data RenderableX where
  RenderableX :: Renderable component => component -> RenderableX

instance Renderable RenderableX where
  render (RenderableX component) = render component

data HTML = HTML { properties :: [(String, String)], children :: [RenderableX] }

instance Renderable HTML where
  render (HTML props components) =
    unlines [ "<div " <> (unwords $ fmap render props) <> " >"
            , unlines (fmap (("  " ++) . render) components)
            , "</div>"
            ]

instance Renderable (String, String) where
  render (prop, value) = prop <> "=\"" <> value <> "\""

renderableExample :: IO ()
renderableExample = putStr $ render html where
    html = HTML [("width", "100%"), ("heigth", "80%")]
                [RenderableX (Text "Hello"), RenderableX embedded, RenderableX (Text "World")]
    embedded = HTML [("colour", "white")]
                [RenderableX (Text "Frozen II")]

-- >>> renderableExample
-- <div width="100%" heigth="80%" >
--   <p>Hello</p>
--   <div colour="white" >
--   <p>Frozen II</p>
--
-- </div>
--
--   <p>World</p>
--
-- </div>