components that output HTML

[Roguelazer]

So, components are now processed before the markdown-to-html conversion, which means that we need to be careful that the ouput is valid markdown. I guess this is nice because it lets you have components that take markdown as an argument, but it also makes it kind of hard to write component that generate complicated html (you can mostly embed HTML inside markdown as long as you don't indent it at all, which is already kind of annoying, but there are also escaping issues). Is there any plan to have a way to invoke a component such that its output is literal HTML that's transcluded in to the final output?

[Keats]

(you can mostly embed HTML inside markdown as long as you don't indent it at all, which is already kind of annoying, but there are also escaping issues).

I really need to fork pulldown-cmark to remove the indented code block CommonMark "feature".

Is there any plan to have a way to invoke a component such that its output is literal HTML that's transcluded in to the final output?

We don't have any hooks in there to know what is HTML etc. An easy way to handle it is to create a div or p component and call your component in it so pulldown-cmark will let it be plain HTML.

[inklesspen]

Keats/tera#1008 is a similar bug report over on the Tera side.

I'm somehow seeing similar problems (HTML from a component being escaped) without indentation.

Is there a way to have zola output the "markdown" generated from templates so we can see what's being fed to CommonMark?

[Keats]

I'm somehow seeing similar problems (HTML from a component being escaped) without indentation.

Do you have an example?

Is there a way to have zola output the "markdown" generated from templates so we can see what's being fed to CommonMark?

Not currently

[inklesspen]

I created an example in https://github.com/inklesspen/zola-0.23-escaping-bug.

templates/components/cover.html contains a component (this was a shortcode in the zola 0.22 version of the site) which generates a thumbnail of an image and produces an <img> tag using it. (For clarity, the shortcode in the real site did a lot more; I've reduced it to the minimum needed to demonstrate the bug.)

{%- component cover(path:string, alt:string="") -%}
{#- If the following line gets the whitespace-control hyphens added, this will somehow prevent the img tag from getting escaped. -#}
{% set thumb = resize_image(path=path, width=400, op="fit_width") %}
<img src="{{ thumb.url }}" {%- if alt -%}alt="{{ alt }}" {%- endif -%} />
{%- endcomponent cover -%}

It's used in the example content (content/_index.md) as follows:

{{ <cover path="dracula.jpg" alt="Dracula" /> }}

When I run zola build (version 0.23.3), this produces this HTML in the output:

<p>&lt;img src="https://example.com/processed_images/dracula.15d96d5e46aea5e9.jpg"alt="Dracula"/&gt;</p>

Adding the whitespace-control lines to that one line in the component will both prevent the unwanted <p> tags from being generated and prevent the <img> tag from getting escaped:

<img src="https://example.com/processed_images/dracula.15d96d5e46aea5e9.jpg"alt="Dracula"/>

[Keats]

The issue there is that you need to suppress whitespace in {% set thumb = resize_image(path=path, width=400, op="fit_width") %} like so {% set thumb = resize_image(path=path, width=400, op="fit_width") -%}. That's not related to components themselves though, but I'm thinking on how to improve things for blocks that don't produce output like set/blockset

[inklesspen]

Well, yes, I know how to fix it. But I don't know why that causes the line following it to be escaped. It's an utter mystery, especially since I can't see the text after template rendering but before being passed into CommonMark.

[Keats]

Ah sorry I'm doing too many things and I'm not focused.
My guess is that <img src="{{ thumb.url }}" {%- if alt -%}alt="{{ alt }}" {%- endif -%} /> means the output is going to be something like <img src="..."alt="..." with alt sticked to the double quotes and is not valid HTML so it's output as text by pulldown-cmark and not HTML and is escaped later, with the set creating an empty line that makes the pulldown-cmark parser go out of an HTML block.

[inklesspen]

Ah, yeah, that could be it. It worked fine in the previous version and i was mostly slapping whitespace-suppression on rather than taking it off. Anyway please consider this a request to add a way to view the template output before it gets sent into cmark.