Index macro

43 views
Skip to first unread message

Luis Javier Gonzalez Caballero

unread,
May 11, 2026, 6:04:47 AM (4 days ago) May 11
to TiddlyWiki
This macro adds a small, browsable index with the tiddler's headings. Useful for long tiddlers:

```
(function(){

"use strict";

exports.name = "index";
exports.params = [{name: "head"}];

if (typeof window !== "undefined" && !window._tocScrollTo) {
    window._tocScrollTo = function(text) {
        var all = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
        for (var i = 0; i < all.length; i++) {
            if (all[i].textContent.trim() === text) {
                var rect = all[i].getBoundingClientRect();
                var scrollParent = document.scrollingElement || document.documentElement;
                scrollParent.scrollTop += rect.top - 80;
                return;
            }
        }
    };

    document.addEventListener('click', function(e) {
        var el = e.target;
        while (el && el !== document) {
            if (el.getAttribute && el.getAttribute('data-toc-target')) {
                e.preventDefault();
                window._tocScrollTo(el.getAttribute('data-toc-target'));
                return;
            }
            el = el.parentElement;
        }
    });
}

exports.run = function(head) {
    var currentTiddlerName = this.getVariable("currentTiddler");
    var currentTiddler = this.wiki.getTiddler(currentTiddlerName);
    var value = currentTiddler.getFieldString("text");

    var partial;
    var pattern = /^(!+)(.+?)$/gm;
    var headings = [];

    while ((partial = pattern.exec(value)) !== null) {
        headings.push({ level: partial[1].length, text: partial[2].trim() });
    }

    var result = (head ? head + "\n" : "") + "\n\n";
    result += "@@.tc-tiddler-frame\n@@width:300px;\n@@background-color:Beige;\n";

    headings.forEach(function(h) {
        var indent = Array(h.level + 1).join("*");
        var safeText = h.text.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
        result += indent + ' <html><a href="javascript:void(0)" '
                + 'data-toc-target="' + safeText + '" '
                + 'style="color:#0000EE;text-decoration:underline;cursor:pointer;">'
                + h.text + '</a></html>\n';
    });

    result += "@@\n";
    return result;
};

})();
```

Luis Javier Gonzalez Caballero

unread,
May 11, 2026, 7:30:06 AM (4 days ago) May 11
to TiddlyWiki
This is the macro tiddler. Drag it to your tiddlywiki ( Please create a backup before dragging it! !!) and save your tiddlywiki.
Then you can use this macro in any tiddler in this way:

<<index "!! Index title">>
$__Luis_index.js.tid
Reply all
Reply to author
Forward
0 new messages