I would like to add Lucid into Yesod's defaultLayout

Question

I am trying to have a dynamic HTML id for modals usage.

Basically my problems would be solved if Hamlet accepted something like [hamlet| <div .modal .fade ##{modalIdFunction i}> |]

Since I haven't been able to do that in Hamlet, I am trying to do it with Lucid, but it is incompatible with Yesod's defaultLayout.

here is my intent:

getSupportR :: CustomerId -> Handler LucidHtml
getSupportR customerId = do
 defaultLayout $ do
    setTitle "Your Licenses"
    toWidget . lucid $ \url ->
      p_ $ a_ [href_ "\\"] "Link to root"

this is the error msg:

• Couldn't match type ‘blaze-markup-0.8.2.1:Text.Blaze.Internal.MarkupM
                             ()’
                     with ‘HtmlT Identity ()’
      Expected type: HandlerFor App LucidHtml
        Actual type: HandlerFor App Html

Is there a way to convert Lucid's LucidHtml to Blaze's Html?

my whole code is at: https://github.com/hhefesto/laurus-nobilis and the pertinent files are /src/Yesod/Lucid.hs and /src/Handler/Support.hs

Answer 1

Since lucid Html and blaze Html are completely different types, your only way is to render one as text and insert it as pre-escaped HTML to another one. Something like Blaze.preEscapedToHtml . Lucid.renderText.

Answer 2

Just for completeness, this is arrowd's answer integrated to the code:

{-# LANGUAGE ScopedTypeVariables #-}
{-# LANGUAGE NoImplicitPrelude #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TemplateHaskell #-}
{-# LANGUAGE MultiParamTypeClasses #-}
{-# LANGUAGE TypeFamilies #-}

module Handler.Support where

import           Import hiding
import           Yesod.Lucid
import           Lucid hiding (Html)
import qualified Lucid as L
import           Text.Blaze.Html

getSupportR :: CustomerId -> Handler Html
getSupportR customerId = do
  lucidHtml <- lucid $ \url ->
    p_ $ a_ [href_ "\\"] "link to root"
  defaultLayout $ do
    setTitle "Your Licenses"
    toWidget . preEscapedToHtml . renderText $ lucidHtml