search

tiddlyhost / tiddlyhost-com

Rails application for creating and hosting TiddlyWiki sites, plus resources for deploying it to https://tiddlyhost.com/
Other
184 stars 17 forks source link

[418 Invalid TiddlyWiki] Tiddlyhost report tiddlywiki as invalid when attempting to load script with $:/tags/RawMarkupWikified/TopHead #336

Closed DesignThinkerer closed 2 months ago

DesignThinkerer commented 2 months ago

I was trying to use the mermaidjs library to render mermaidjs diagram in my wiki. In order to load the mermaidjs code, I used the tag RawMarkupWikified, and this caused tiddlyhost to make the wiki unavailable (I thankfully did a backup before attempting to do this so I did not lose anything).

Steps to reproduce:

Create a tiddler with the tag $:/tags/RawMarkupWikified/TopHead

And the content

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true});
</script>

On the next page load, this error is displayed:

image

For now I'm using a macro as a workaround:

\define mermaid(code)
<iframe style="border:unset;width:100%" srcdoc="""
<style>
svg{position:fixed;inset:0;}
</style><script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true});
</script>
<pre class="mermaid">$code$</pre>
"""/>
\end
simonbaird commented 2 months ago

With the $:/tags/RawMarkupWikified/TopHead the content is wikified before being injected, so you end up with this in the TW file:

...
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--~~ Raw markup for the top of the head section ~~-->

    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true});

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="application-name" content="TiddlyWiki" />
...

If you use the $:/tags/RawMarkup then it works more like you want it to, but it will be inserted at the bottom of the <head> element not the top.

...
<!--~~ Raw markup ~~-->

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true});
</script>

</head>
...

So I suggest you use $:/tags/RawMarkup. I'm not sure how to insert unwikified content at the top of the <head> element, but perhaps there is a way.

There might also be a way to have the wikified content have the required Githubissues.

  • Githubissues is a development platform for aggregating issues.