Render yesod widget

Question

I follow the instructions here

I create a yesod project, and render a widget with defaultLayout:

You've just posted
<p>#{postedText}#{T.reverse postedText}
<hr>
<p><a href=@{MirrorR}>Get back

And here is the default-layout.hamlet:

$maybe msg <- mmsg
    <div #message>#{msg}
^{widget}
<footer>
    #{extraCopyright $ appExtra $ settings master}

The problem is I expect only one link to MirrorR but I got two, one is Get back,the other is the copyright in <footer>.

Answer 1

When you write:

<p><a ...>...

Then, Hamlet sees a free <p> tag and creates a matching </p> tag around the following content. The content that follows is assumed to be valid HTML. What is rendered is thus:

<p><a ...>...</p>

What you instead want to write is either (note that the indentation creates a new free tag):

<p>
  <a ...>...

...or:

<p><a ...>...</a>

Your browser renders this as two links, because the <a> element isn't closed (and browsers go into quirks mode and enable HTML1 compatibility stuff in that case):

<p><a href="foo">link1</p>
<p>link2</p>
<!-- implicit </a> at the end of the closest block level element -->

Disclaimer: I don't have access to Yesod and can't verify this behavior; I only assume that it is like this based on the observations in the question.