danieleades / mdbook-d2

D2 diagram generator plugin for MdBook
MIT License
26 stars 8 forks source link

Using HTML tag for links before D2 code block breaks #33

Closed gnramos closed 2 months ago

gnramos commented 1 year ago

I am trying to link to specific parts of the text using HTML links (something like this). However, when I insert a div immediately before a D2 block, I get a strange behavior. If inline = true (in book.toml), it seems to generate the image (SVG inside the HTML) but it is not shown on the page. Otherwise it seems to work with mdbook build as expected but it starts looping and reprocessing the files if I'm using mdbook server.

Attached is a book with examples of this. mybook.zip

danieleades commented 1 year ago

Thanks for the report!

danieleades commented 1 year ago

beats the hell out of me @gnramos!

i've tried diffing the html from chapters 1 and 2

diff book/chapter_1.html book/chapter_2.html                                                                                                                                                                                                                                   ✔  5s 
6c6
<         <title>Chapter 1 - div-d2</title>
---
>         <title>Chapter 2 - div-d2</title>
86c86
<                 <ol class="chapter"><li class="chapter-item expanded "><a href="chapter_1.html" class="active"><strong aria-hidden="true">1.</strong> Chapter 1</a></li><li class="chapter-item expanded "><a href="chapter_2.html"><strong aria-hidden="true">2.</strong> Chapter 2</a></li><li class="chapter-item expanded "><a href="chapter_3.html"><strong aria-hidden="true">3.</strong> Chapter 3</a></li></ol>
---
>                 <ol class="chapter"><li class="chapter-item expanded "><a href="chapter_1.html"><strong aria-hidden="true">1.</strong> Chapter 1</a></li><li class="chapter-item expanded "><a href="chapter_2.html" class="active"><strong aria-hidden="true">2.</strong> Chapter 2</a></li><li class="chapter-item expanded "><a href="chapter_3.html"><strong aria-hidden="true">3.</strong> Chapter 3</a></li></ol>
147c147
<                         <h1 id="chapter-1"><a class="header" href="#chapter-1">Chapter 1</a></h1>
---
>                         <h1 id="chapter-2"><a class="header" href="#chapter-2">Chapter 2</a></h1>
149a150
> <p>But text here seems to hide the problem and it works as expected (if I wanted text here, which I doo not).</p>
168c169,170
< <p>]]&gt;
---
> 
> ]]>
170,171c172,174
< <rect x="0" y="0" width="314" height="552" fill="white"></rect></p>
< <p></mask><style type="text/css"><![CDATA[
---
> <rect x="0" y="0" width="314" height="552" fill="white"></rect>
> 
> </mask><style type="text/css"><![CDATA[
180c183
< Reference to <a href="#before_first_d2">first D2</a>.</p>
---
> <p>Reference to <a href="#before_first_d2">first D2</a>.</p>
185a189,191
>                             <a rel="prev" href="chapter_1.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
>                                 <i class="fa fa-angle-left"></i>
>                             </a>
187c193
<                             <a rel="next" href="chapter_2.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
---
>                             <a rel="next" href="chapter_3.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
196a203,205
>                     <a rel="prev" href="chapter_1.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
>                         <i class="fa fa-angle-left"></i>
>                     </a>
198c207
<                     <a rel="next" href="chapter_2.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
---
>                     <a rel="next" href="chapter_3.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">

there seems to be a few extra <p> tags thrown in there depending on whether or not you have that little snippet of text. No idea why.