Link in post summary breaks layout in list

[snej]

In a post-list view (as on the front page), if any post's description/summary contains a hyperlink, the display of that post is mangled: the text falls out of the box and appears below it:

The reason is that the li.html template uses an <a> tag as the outermost element of the post. But the HTML A element doesn't nest! So when another <a> tag appears within as part of the description text, the parser enforces proper structure by forcing the outer element to end before starting the new one.

To fix this the template needs use a different element that does nest, such as <div> ... but then another mechanism (JS?) needs to be used to make the linking work. Unfortunately my web-dev skills are very rusty so I'm not sure what the best fix is.

[snej]

I figured out how to strip the HTML links from the description text by using the plainify filter. But that also turns non-ascii characters into HTML escapes, so I had to run it through htmlUnescape too. Here's a diff:

diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index 6c65511..f4b5e4a 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -14,10 +14,10 @@
   {{- end }}
   <article class="card-body">
     <h2 class="card-title">{{ .Title }}</h2>
-    <p class="card-text">{{ if (isset .Params "description") }}{{ index .Params "description" }}{{ else }}{{ .Summary }}{{ end }}</p>
+    <p class="card-text">{{ if (isset .Params "description") }}{{ index .Params "description" | plainify | htmlUnescape }}{{ else }}{{ .Summary | plainify | htmlUnescape }}{{ end }}</p>
     <div class="card-subtext muted-text">
       <p>Posted <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time></p>
       {{ if (isset .Params "categories") }}<p>{{ range .Params.categories }}#{{ . | urlize | title }} {{ end }}</p>{{ end }}
     </div>
   </article>
-</a>
\ No newline at end of file
+</a>

[josephhutch]

Thanks for opening the issue @snej! What version of Hugo are you running? I am unable to reproduce this issue on 0.63.2. Also, are you doing anything special to put a link in the description? I tried markdown, html a tag, and an html a tag with the raw shortcode. I'm happy to fix this, I just want to understand what is going on on my end.

[snej]

I've got Hugo v0.74.3. It could be the browser — I'm using Safari on Mac OS 10.15.

Nothing special for the description ... I've just got some posts with MarkDown links within the first few sentences of the body.

[josephhutch]

Fixed in c0c3158.

I found out that Hugo only preserves html tags in the summary when using the <!--more--> summary divider (I'm assuming that's what you were using @snej). The description parameter is not parsed by Hugo so no need for the plainify function there. Let me know if you have any other issues.

[snej]

Aha! I was indeed using <!--more-->. Thanks for the fix.