I needed a simple outline for a wiki I’m building. I usually do these with complex filters, and recursive procedure/function calls. This time I wanted something simpler. I rememberd this thread, where I had written such a thing as a JS proof-of-concept. I decided it was time to turn that into something real.
Simple Outline Plugin → (GitHub)
What it does
The <$simple-outline> widget takes a plain-text outline description and renders it as a collapsible, nested hierarchy using native HTML <details>/<summary> elements. Each node can reference a tiddler; when the tiddler has body text, the node becomes expandable and shows that content inline. Open/closed state is preserved for the duration of the session.
Installation: drag $__plugins_crosseye_simple-outline.json (25.6 KB) into your wiki and save. Requires TW 5.3.0+.
The outline format
<$simple-outline text="""
!! Section heading
Group label
+ tiddler-name
+ Display Text :: another-tiddler
Another group
+ yet-another-tiddler
!! Another heading
""" class="outline"/>
| Syntax | Meaning |
|---|---|
!! text |
Section header (<h2>) |
+ tiddler-title |
Tiddler reference — expandable if the tiddler has body text |
display text :: tiddler-title |
Tiddler reference with an explicit display label |
| Plain text | Structural group — collapsible if it has children |
| Indentation | Each level of leading spaces is one level of nesting |
The label shown for a tiddler reference is taken from the first of these fields that exists: summary → caption → the name as written in the outline.
Demos
1 — History of Computing
A personal knowledge-management example showing 4–5 levels of nesting. Each + note-* entry references a real tiddler with a summary field (used as the label) and body text (shown when expanded). This is the most straightforward use of the plugin: write the outline, create the note tiddlers, and the structure takes care of itself.
This demo uses the default styling. The only attribute in play is class="outline", which is also the default — so you could omit it entirely.
2 — Acts 7 Outline (class and summary-template)
This is a working outline of an exegetical paper on Acts 7. It demonstrates two of the three extension points. This was the original inspiration for the idea here. I’d especially like to hear what @DaveGifford has to say about this.
class — the CSS class on the container <div>. Here it is set to "outline outline-acts". The outline-acts class is defined in a standalone stylesheet tiddler and replaces the default rotating arrow with a red +/– toggle placed directly after each label — no changes to the plugin required.
summary-template — a tiddler rendered inside each <summary> element in place of plain text. Two variables are available: <<currentTiddler>> (the item’s tiddler title) and <<so-label>> (the pre-computed display label). The template used here is just two spans:
<span class="so-label"><<so-label>></span><span class="so-toggle"></span>
The .so-toggle span is empty by default; the outline-acts stylesheet targets it with ::before to show the +/– indicator. Together, class and summary-template let you replace the entire visual language of the widget without touching any plugin code.
3 — Detail Template Test (detail-template)
detail-template — a tiddler rendered as the expanded body for each item, instead of transcluding the tiddler’s own body directly. The same <<currentTiddler>> and <<so-label>> variables are available.
The template used here adds a linked title above the body text, so the reader can navigate to the source tiddler directly:
<$link to=<<currentTiddler>> class="so-detail-title"><<currentTiddler>></$link>
<$transclude $tiddler=<<currentTiddler>> $mode="block"/>
A small CSS rule makes .so-detail-title stand out as a styled header link. Combined with summary-template, this gives you full control over both the collapsed and expanded views.
4 — WikiText Reference Outline
This demo references tiddlers from tiddlywiki.com — documentation pages that don’t exist in the demo wiki itself. The outline renders fine (all nodes just appear unexpanded), and if you drag the plugin and the outline tiddler across to a copy of tiddlywiki.com, save, and refresh, it comes alive with the real content.
This is a useful property in general: the widget degrades gracefully when tiddlers are missing, so you can sketch an outline before all the content exists.
Links
- Demo wiki: crosseye.github.io/TW5-SimpleOutlinePlugin
- GitHub: CrossEye/TW5-SimpleOutlinePlugin
A note on maintenance
I built this to scratch my own itch and I’m sharing it in case it’s useful to others. I’m not planning to maintain it actively over the long term, but I will look at feature requests and especially bug reports that come in soon after this post. If you find something broken or have a well-scoped idea, please open an issue on GitHub or reply here.
