Navigable table of contents for single long tiddlers using the H1~H6 headings

[Sttot]

Generate a navigable table of contents for tiddlers using the H1~H6 headings of the tiddlers. That’s right, it’s a headline table of contents generated for a single tiddler. And the table of contents is navigable by clicking on it, meaning it will scroll to where the title is!

Although TiddlyWiki’s organizational logic does not recommend writing excessively long tiddlers, there will always be times when you read long tiddlers. I’m sure all users who have had similar experiences have wondered if it would be nice to have a table of contents for individual long tiddlers, after all, it’s a pain to get lost in long articles. I am also one of them.

This plugin provides a widget <$page-toc> that can generate a table of contents for a tiddler with the following parameters.

For instance:

<$page-toc tiddler=<<currentTiddler>> emptyMessage="Empty TOC"/>

• CurrentTiddlerTOC You can display the name of the currently focusing tiddler and generate a table of contents, but it requires the support of Hotzone Plugin.
• PageTOCButton Add a button to the toolbar for each tiddler and click it to display the table of contents.

> View and Install here <

Update

v0.0.2

• Add a scrollMode parameter to the widget to customize the target position for scrolling headings. (by @Mohammad and @DaveGifford )
• Add h1, h2, h3, h4, h5 and h6 parameters to the widget to customize which headings to include.(by @StS )
• fix incomplete display of headings when they include styles, widgets, and macros.(by @StS )

[DaveGifford]

I am having trouble finding the demo of this on the link you provided, despite your post saying VIEW and install, and showing a screenshot. Could you send a tiddler-specific link to a demo of this? I would love to see this in action before downloading.

[Mohammad]

This is lovely!
It was in the wish list of many users!

Small suggestion:

The heading if scrolls to top of the page is great!
For small sections, this is not the case and it only comes in view!

[Sttot]

@DaveGifford I have added an example at the bottom of the preview page. Since there is a delay in the GitHub Page, you may have to wait a while to see it.

https://gk0wk.github.io/TiddlySeq/#Example%20of%20Page%20TOC

[Sttot]

@Mohammad

The heading if scrolls to top of the page is great!
For small sections, this is not the case and it only comes in view!

Thank you! At first, I was having all headings scroll to the top, but they scroll to the very top of the window, which means that if a plugin like menubar is installed, then the headings are blocked by the elements above them.

[Mohammad]

@Sttot

e GitHub Page, you may ha

I may recommend to use Sttot plugin library!

https://tw-cpl.netlify.app/#Index:Index

[Mohammad]

Yep! I did some tests!
I think the current behavior is good!

I would highly recommend to put the link to your CPL!
This makes installing your plugins (which seems have many fans) simpler!

Thank you for sharing and thank you for all your efforts!

[Sttot]

@Mohammad

I may recommend to use Sttot plugin library!

This is not a plugin library that belongs to me alone, it is a public plugin library maintained by many people（me, olfg, linonetwo, etc.） and contains many useful third-party plugins. We will officially release this plugin library to the community when it is ready.

You’re welcome to add your own plugins to it too!

[Mohammad]

@Sttot

This is not a plugin library that belongs to me alone, it is a public plugin library maintained by many people（me, olfg, linonetwo, etc.）

This is great! Working with together and making useful stuff! This is rarely seen in TW community and while there are collaboration on core development you can find no or few other cases!

@Sttot

You’re welcome to add your own plugins to it too!

I would be happy to distribute kookma plugins through CPL!

[DaveGifford]

Cool! Thanks! I second Mohammad that a way to scroll back to the top would be great. Though you do have the toc in the viewtoolbar, so that reduces the need quite a bit.

One recommendation would be for the default for the toc be single-spaced. The viewtoolbar button will also get long in a hurry at double-spacing.

[Sttot]

Thanks! @Mohammad @DaveGifford In the next release, I’ll try to make the plugin another mode that scrolls the headers down a bit at the top.

@DaveGifford I may not quite understand what single-space and double-space are, would you mind describing them further?

[DaveGifford]

Single
space
between
lines

Double

space

between

lines

[StS]

@Sttot Very nice plugin - I like it…

Q: How can I configure to use only h1~h3?

Did a test:

TOC is not correct working:

Stefan

[Sttot]

Thanks! Both are fixed in v0.0.2

[Sttot]

There’s no double-spacing in the button. See https://github.com/Gk0Wk/TiddlySeq/blob/master/plugins/Gk0Wk/page-toc/PageTOCButton.tid:

\whitespace trim
<$set value={{{ [<currentTiddler>addprefix[$:/temp/Gk0Wk/page-toc/PageTOCButton/]] }}} name="stateTiddler">
<$button popup=<<stateTiddler>> tooltip={{$:/plugins/Gk0Wk/page-toc/PageTOCButton!!description}} aria-label={{$:/plugins/Gk0Wk/page-toc/PageTOCButton!!hint}} class=<<tv-config-toolbar-class>>>
<$list filter="[<tv-config-toolbar-icons>match[yes]]">{{$:/core/images/list-bullet}}</$list>
<$list filter="[<tv-config-toolbar-text>match[yes]]"><span class="tc-btn-text">{{$:/plugins/Gk0Wk/page-toc/PageTOCButton!!hint}}</span></$list>
</$button>
<$reveal type="popup" state=<<stateTiddler>> position="belowleft" tag="div" class="tc-popup-keep">
<$page-toc tiddler=<<currentTiddler>> emptyMessage="Empty TOC" class="gk0wk-tiddlertoc-viewbuttonpopup" headerClassPrefix="gk0wk-tiddlertoc-viewbuttonpopup-" />
</$reveal>
</$set>

[DaveGifford]

Sorry, Sttot, I can’t help you much. I think eliminating the spaces between the reveals and the content within them might do the trick.

If not, you may need to to apply this CSS to the list items in that dropdown:

padding-bottom:.0em;padding-top:.0em;

[etardiff]

I’m not sure whether you’re still supporting this plugin, @Sttot, but I noticed some odd behavior with the ViewToolbar button when I was testing it out (both in your example and in my own wiki).

• The first time I click on a heading in the button dropdown, it navigates to the appropriate place.
• If I click on the button again, the dropdown shows only a single option, no matter how many there were originally. This behavior persists until I edit the tiddler or reload the wiki.

As an unrelated question (more a plugin conflict than a real bug, I think): Has anyone gotten the Page TOC to work with Mohammad’s Section Editor?

• In my testing, the TOC dropdown shows up as expected in tiddlers with the se-type field (which forces a custom ViewTemplate), but clicking on a link does not scroll to the appropriate point.

[Mohammad]

@etardiff

In my testing, the TOC dropdown shows up as expected in tiddlers with the se-type field (which forces a custom ViewTemplate), but clicking on a link does not scroll to the appropriate point.

Yes, Section editor uses a custom view template through cascades. I can confirm this behaviour. Page TOC uses JavaScript and I cannot help here! Let’s see what @Sttot advice here.

@Sttot
Section editor uses a viewtemplate through cascades, but the content (tiddler text) is the same for tiddler with se-type field and without it!

[StS]

Hi @Sttot,

I like this plugin and you helped me long time ago to make it working with hover effect instead of clicking a button:

It would be very cool, to show the popup-window only, when TOC is NOT empty (no popup with “Empty TOC”)
How can that be done?

Thanks in advance
Stefan

[Sparrow]

Good day @Sttot.

Is this plugin still being maintained? I’m asking because someone posted about this bug and it happens to me too.

By the way, thanks for giving the time and effort of creating awesome tiddly wiki plugins .