theme: unwanted paragraph break with AsciiDoc

[Yosh31207]

Using notice shortcode in AsciiDoc, a paragraph break is inserted between icon and notice title like this.

I found that this is fixed by changing layouts/partials/shortcodes/notice.html as like below.

from:

<div class="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}</div>

to:

<div class="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title }}</div>

But I don't know if this change (removing .RenderString) may cause other side effects.

[McShelby]

I don't have an environment to test with.

The construct with RenderString is widly used in a lot of the theme's shortcodes. I would expect other shortcodes to be broken, too.

[Yosh31207]

I tried some of other shortcodes with AsciiDoc and found that they are also broken.

Badge:

Button:

Tabs:

---

It seems that, RenderString adds <div class="paragraph"> for AsciiDoc. For example, the shortcode below

{{% notice style="primary" title="There may be pirates" icon="skull-crossbones" %}}
It is all about the boxes.
{{% /notice %}}

generates the HTML belows.

with Markdown:

<div class="box notices cstyle primary">
  <div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> There may be pirates</div>
  <div class="box-content">

with AsciiDoc:

<div class="box notices cstyle primary">
  <div class="box-label"><i class="fa-fw fas fa-skull-crossbones"></i> <div class="paragraph">
<p>There may be pirates</p>
</div></div>
  <div class="box-content">

After removing RenderString, it outputs the same result as Markdown for AsciiDoc.

Note that I don't know what RenderString and did not try this for shortcodes other than notice.

---

Getting environment with AsciiDoc is not so difficult. The steps are as the following.

1. Install Ruby
2. Install Asciidoctor with gem: gem install asciidoctor
3. Add the followings to hugo.toml

   [security]
     [security.exec]
       allow = ['^(dart-)?sass(-embedded)?$', '^go$', '^npx$', '^postcss$', '^asciidoctor$']

4. Add AsciiDoc file (extension is *.adoc) like below to contents directory. Not so different from Markdown.

   +++
   title = 'test'
   +++
   
   {{% notice style="primary" title="There may be pirates" icon="skull-crossbones" %}}
   It is all about the boxes.
   {{% /notice %}}
   

[McShelby]

I will not go the ruby way as I personally dislike ruby. Also it seems a bit like overkill to first install ruby just to use its paket manager.

RenderString allows for Markdown in all those parameter. For me it looks like that the text RenderString gets in those situations is wrapped with line breaks. Maybe, using string.Trim before RenderString is a better solution.

[Yosh31207]

I think the problem is in the behavior of RenderString, not in Relearn theme.

The explanation of RenderString says:

This method takes an optional map of options:

display

(string) Specify either inline or block. If inline, removes surrounding p tags from short snippets. Default is inline.

markup

(string) Specify a markup identifier for the provided markup. Default is the markup front matter value, falling back to the value derived from the page's file extension.

I found that changing markup to markdown also works fine. I guess, markup = 'adoc' generates text surrounded by <div class="paragraph"><p> ... </p></div>, and display = 'inline' removes only <p> tags.

This may be fixed if RenderString removes <div class="paragraph"> with display = 'inline' option. Or, if there is a way to prevent Asciidoctor from generating <div class="paragraph">, it would be a workaround.

[McShelby]

Awesome find. Thanks for helping out here. jmooring submitted a patch to the Hugo code base. Let's wait with closing this issue until his changeset got merged and tested.

[McShelby]

@Yosh31207 Hugo 0.125.0 was released today. So please check it out and give some feedback once you find time. Thanks!

[Yosh31207]

I tried with Hugo 0.125.0. Some shortcodes are still broken, but the others work fine with AsciiDoc.

Fixed

Notice:

Highlight:

Tabs:

Still Problematic

Button:

Badge:

The generated HTML is here.

<div class="paragraph">
<p><span class="btn cstyle interactive transparent"><a href="https://gohugo.io/" target="_blank"><span class="title"><div class="paragraph">
<p>Get Hugo</p>
</div>
</span></a></span>
<span class="btn cstyle interactive warning"><a href="https://gohugo.io/" target="_blank"><i class="fa-fw fas fa-dragon"></i> <span class="title"><div class="paragraph">
<p>Get Hugo</p>
</div>
</span></a></span></p>
</div>

<div class="paragraph">
<p><span class="badge cstyle default"><span class="badge-content"><div class="paragraph">
<p>Important</p>
</div>
</span></span>
<span class="badge cstyle primary badge-with-title"><span class="badge-title">Version</span><span class="badge-content"><div class="paragraph">
<p>6.6.6</p>
</div>
</span></span>
<span class="badge cstyle red badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i></span><span class="badge-content"><div class="paragraph">
<p>Captain</p>
</div>
</span></span>
<span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-info-circle"></i> Info</span><span class="badge-content"><div class="paragraph">
<p>New</p>
</div>
</span></span>
<span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fa-fw fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;"><div class="paragraph">
<p>Awesome</p>
</div>
</span></span></p>
</div>

---

My facing problem is resolved since I'm not using badge nor button. Thank you!