A Macro to Create TOC Like Table with Dot Leader

Sometimes in your Tiddlywiki you like list tiddlers with specified field value and show the result in TOC like table (with dot leader) The below macro helps you to create such output

A table with dot leader to show linkable title with modified date

  1. Open https://tiddlywiki.com/
  2. Create a new tiddler
  3. Tag it with $:/tags/Macro
  4. Put the below script in your tiddler body and save
\define dleader(filter)
<$list filter="$filter$">
<div class="dot-leader">
    <!-- Left side -->
    <div><$link/></div>

    <!-- Dots -->
    <div class="dot-leader__dots"></div>

    <!-- Right side -->
    <div><$view field="modified" format=date template="YYYY.0MM.0DD"/></div>
</div>
</$list>		
\end
  1. create a second tiddler
  2. tag it with $:/tags/Stylesheet
  3. put the below styles inside it and save
.dot-leader {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
}

.dot-leader__dots {
    /* Bottom border */
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);

    /* Take remaining width */
    flex: 1;

    /* Spacing */
    margin: 0px 4px;
}

Now lets test it

<<dleader "[tag[About]]">>

produces

Credits: All kudos goes to 1 milligram · GitHub

4 Likes
  • Try to modify the left and right values
  • Add macro parameters, to pass left/right values

The dleader macro is simple and hackable to shape it to your needs! Do and share here with TW community!

Nice!

Don’t forget to change the second tiddler type to “text/css” :wink: