TOC points to the wrong location

[42jerrykim]

What happened?

I referred to [Hugo's documentation on diagrams](https://gohugo.io/content-management/diagrams/) to create a Mermaid diagram, but an issue has occurred where the TOC points to the wrong location.

It seems the problem arises because the TOC is processed first, and then the Mermaid diagram is rendered, causing the length of the content to change.

If you visit [this link](https://42jerrykim.github.io/hugo-stack-mermaid-test/p/linux-rcu%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80/#rcu_read_lock), you'll see that after the Mermaid diagram is rendered, the TOC incorrectly points to synchronize_rcu().

Hugo version

0.123.8

Theme version

v3.29.0

What browsers are you seeing the problem on?

No response

More information about the browser

No response

Relevant log output

No response

Link to Minimal Reproducible Example

https://github.com/42jerrykim/hugo-stack-mermaid-test

[CaiJimmy]

It seems the problem arises because the TOC is processed first, and then the Mermaid diagram is rendered, causing the length of the content to change.

Yea, I think you are right. I have checked Mermaid's documentation and there does not seems to be an API which allows us to execute code after diagram has been rendered. I would say that we can use ResizeObserver to trigger recomputation:

Adding the following lines at the end of setupScrollSpy should help

https://github.com/CaiJimmy/hugo-theme-stack/blob/0991f61d49bcbe25559721c44b566915e2dcd4fa/assets/ts/scrollspy.ts#L128C39-L128C63

const resizeObserver = new ResizeObserver(entries => resizeHandler);
resizeObserver.observe(document.querySelector(".article-content"));

[42jerrykim]

I tried 42jerrykim/hugo-stack-mermaid-test@b83e1db and the problem still exists.

[42jerrykim]

I succeeded in fixing the issue and created a PR, please confirm so I can merge it.

#1105