Automatically render wiki TOC

[zeripath]

Automatically add sidebar in the wiki view containing a TOC for the wiki page.

Fix #822

Signed-off-by: Andrew Thornton art27@cantab.net

[lunny]

I think the problem is the toc need a hide button but that could be another PR.

[zeripath]

Happy for this to be moved into 1.17 btw.

[zeripath]

I think the problem is the toc need a hide button but that could be another PR.

done

[lunny]

I think the problem is the toc need a hide button but that could be another PR.

done

I would like it becomes a per-user setting to show or hide the directory defaultly and also we need a more width screen for the main area.

[Gusted]

Otherwise lgtm, just the helper function can cause some issues when used by future code.

[Gusted]

LGTM

[buhtz]

Sorry for asking but I am not able to find the information in the code diff.

How should a markdown file look like that Gitea render an automatic TOC for it? Something like this?

[[TOC]]

# Header A
foobar

## Header A.a
Foobar

# Header B
Foobar

And how would the result look like? Do you have a screenshot?

[wxiaoguang]

You can try it on try.gitea.io: https://try.gitea.io/wxiaoguang/test/wiki/test-toc

# H1
## h2
### h3

[buhtz]

You can try it on try.gitea.io: https://try.gitea.io/wxiaoguang/test/wiki/test-toc

I assume I miss understand something. This link goes to a wiki page. Does this work for markdown-files (e.g. README.md) also?

I also would say it is not a good idea to render the TOC as a separate element. It is lost where it is now. A toc should be there where the TOC-Placeholder (e.g. something like [[toc]]) is placed.

Let me give you an example:
https://codeberg.org/buhtz/hyperorg/src/branch/main/README.md

Here you see

1. The toc is part of the rendered README file.
2. The toc is not on top but the third section (or second firts-level section) because I (the user) want it there.
3. But the toc is hand written not autogenerated.

[wxiaoguang]

Does this work for markdown-files (e.g. README.md) also?

Nope, this PR is only for Wiki TOC.

I also would say it is not a good idea to render the TOC as a separate element. It is lost where it is now. A toc should be there where the TOC-Placeholder (e.g. something like [[toc]]) is placed.
And for README ....

Since this PR has got approvals and got merged, there could be new issues for the features & enhancements.

[zeripath]

Add this to the top of your markdown file.

---
gitea: none
include_toc: true
---

[buhtz]

---
gitea: none
include_toc: true
---

Where can I find the documentation about it? The term include_toc give me any results on https://docs.gitea.io/en-us/search/?s=toc_include.

Are there some more modifiers for the toc? e.g. I don't like the fold-mechanism and the headline is not in h1-style.

[garfeng]

Thank you very much for your excellent work.

Could you add this feature to TOC ?

When user scroll the page down, make the TOC fixed to top，.

function convertRemToPixels(rem) {    
    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
}

function UpdateTOCPosition() {
    if (!jQuery) {
        return;
    }
    const toc = jQuery(".wiki-content-toc");
    if (toc.length <= 0) {
        return;
    }
    const parent = toc[0].parentElement;
    const parentRect = parent.getBoundingClientRect();
    if (parentRect.top < 0) {
        const padding = convertRemToPixels(2)
        toc.css({ position: "fixed", width: parent.clientWidth-padding, "top": 0 })
    } else {
        toc.css({ position: "inherit", width: "auto" })
    }
}

window.addEventListener("scroll", UpdateTOCPosition);
window.addEventListener("resize", UpdateTOCPosition);