Minor templating issues

[rhartmann]

Hey, I was wondering why my preformatted blocks look weird, so I looked at the HTML source code and found three issues. I'll squash them into one issue.

Issue 1: Preformatted blocks have a trailing newline

# Example page

    This is preformatted.

This is regular.

Expected result:

...
<pre class="copy-to-clipboard code">This is preformatted.</pre>
...

Or maybe with a single newline:

...
<pre class="copy-to-clipboard code">This is preformatted.
</pre>
...

Actual result:

...
<pre class="copy-to-clipboard code">This is preformatted.

</pre>
...

This leads to ugly trailing empty lines:

Note though, simply trimming whitespace hurts Otters! 😉 It should render the exact spaces and newlines of the preformatted text block.

This does not happen to triple-backticked code blocks.

Btw, this time around, Mistune also has a noticable difference. I tried this in the Python CLI:

>>> text = """
... # ExamplePage
...
...     This is preformatted.
...
    ^^^^ No spaces here!
... This is regular.
... """
>>> mistune.html(text)
'<h1>ExamplePage</h1>\n<pre><code>This is preformatted.\n\n</code></pre>\n<p>This is regular.</p>\n'
                                                       ^^^^ Two newlines here.
>>> text = """
... # ExamplePage
...
... ```
... This is code.
... ```
... 
... This is regular.
... """
>>> mistune.html(text)
'<h1>ExamplePage</h1>\n<pre><code>This is code.\n</code></pre>\n<p>This is regular.</p>\n'
                                               ^^ Only one newline here.
>>>

I don't know if that is an issue though, as it is an additional code element within the pre.

For reference, rendered by GitHub

This is preformatted.

No trailing newline here.

Issue 2: Template consumes too many spaces

otterwiki/otterwiki/templates/layout.html

Line 70 in ba61b78

<div id="page-wrapper" class="page-wrapper {% block page_wrapper_config -%}with-navbar with-sidebar{%-endblock%}" {%if request.cookies.get('halfmoon_sidebar') == "hidden" %}data-sidebar-hidden="hidden"{%-elif request.cookies.get('halfmoon_sidebar') == "visible" %} data-show-sidebar-onload-sm-and-down="visible"{%-endif-%} data-sidebar-type="overlayed-sm-and-down">

The {%-elif consumes the leading space. The {%-endif-%} consumes the leading and trailing space.

Hence, the result (when sidebar is visible) misses the space between the attributes:

... data-show-sidebar-onload-sm-and-down="visible"data-sidebar-type="overlayed-sm-and-down" ...
                                                 ^^

Issue 3: i-element with weird empty attribute

otterwiki/otterwiki/templates/snippets/syntax.html

Line 240 in ba61b78

<div class="highlight"><table class="highlighttable"><tbody><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span></pre></div></td><td class="code"><div><div class="copy-to-clipboard-outer"><div class="copy-to-clipboard-inner"><button class="btn alt-dm btn-xsm copy-to-clipboard" onclick="otterwiki.copy_to_clipboard(this);" type="button"><i "="" alt="Copy to clipboard" aria-hidden="true" class="fa fa-copy"></i></button></div><pre class="copy-to-clipboard code"><span class=".highlight nb">print</span><span class=".highlight p">(</span><span class=".highlight s2">"Hello Line Numbers!"</span><span class=".highlight p">)</span>

The <i "="" alt="Copy to clipboard" ... seems wrong.

[redimp]

Hey @rhartmann thanks for reporting these issues!

subissue 2 and subissue 3 have been fixed. Will look into the preformatted blocks next.