How to visualize the content type of a tiddler?

#1

I have a wiki which is a mix of tiddlers with default content type, containing Wikitext, and Markdown tiddlers. I would like a way to instantly figure out if a tiddler is a Markdown one when looking at it, without switching to edit mode and looking at the content type field. How to achieve this? Perhaps it’s possible somehow to have an additional icon before the menu/edit/close buttons in the upper left corner of tiddlers, but only for Markdown ones?

#2

It’s surprisingly easy to add such an indicator:

First, download a markdown image to use as an indicator. Something like this:
https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg

Next, import the downloaded SVG image into your TiddlyWiki (as e.g., “markdown-mark.svg”)

Then, create a new tiddler (e.g., “ShowMarkdownIndicator”), tagged with $:/tags/ViewToolbar, containing:

<$list filter="[<currentTiddler>type[text/markdown]]">
   @@font-size:initial;{{markdown-mark.svg}}@@
</$list>

Lastly, while viewing the “ShowMarkdownIndicator” tiddler, click on the $:/tags/ViewToolbar “tag bubble” and, from the droplist that appears, use drag-and-drop to move the “ShowMarkdownIndicator” title from the bottom of the list to the top of the list.

That’s it. Now, when a tiddler has a content-type of “text/markdown”, the indicator will appear just before the other “tiddler toolbar” buttons in the upper left corner of the tiddler.

enjoy,
-e

4 Likes
#3

Lastly, while viewing the “ShowMarkdownIndicator” tiddler, click on the $:/tags/ViewToolbar “tag bubble” and, from the droplist that appears, use drag-and-drop to move the “ShowMarkdownIndicator” title from the bottom of the list to the top of the list.

This part became a whole mini-quest. I didn’t mention I’m using TiddlyWiki on a smartphone (but I didn’t know drag-and-drop would be involved either), and I have no idea if it’s even possible. I had to apply trial and error here. I just tapped on the tag bubble to open the $:/tags/ViewToolbar shadow tiddler, switched to edit mode.

The next surprise was that for some reason, the value of the list field appeared trimmed: $:/core/ui/Buttons/fold was the last item. So I copied the whole thing into an external text editor, manually added the missing $:/core/ui/Buttons/fold-bar at the end, and ShowMarkdownIndicator at the beginning, pasted back the whole modified value, then saved the tiddler. This seemed to have the same effect as the drag-and-drop, since I’ve got the icon in Markdown tiddlers. :+1:

#4

PS: Drag-and-drop didn’t work in Vivaldi on Android (the browser popup menu appeared when pressing and holding), but works in Tiddloid!

#5

The order of tagged tiddlers is calculated using a combination of the list field contents plus list-before/list-after fields on individual tiddlers followed by any other unlisted tagged tiddlers, in non case-sensitive alphabetic order.
(see https://tiddlywiki.com/#Order%20of%20Tagged%20Tiddlers)

Thus, the fold-bar tiddler occurs at the end because it is tagged with $:/tags/ViewToolbar, even though it is not in the list field. Note also that you could have achieved the desired placement of the “ShowMarkdownIndicator” tiddler without using drag-and-drop or editing the $:/tags/ViewToolbar list field: instead, you could have just added a list-before field with an empty field value to the “ShowMarkdownIndicator” tiddler.

-e

2 Likes
#6

I’m bumping this, because I’m having troubles customizing the color of the icon to match the one set by the current palette for tiddler controls next to it. Since I’m CSS illiterate, my only approach has been pretty much “monkey see - monkey do”.

Long story short, I changed the default palette and noticed that my custom icon that’s displayed for markdown content type tiddlers went out of sync - it remained black. After some searching I digged down to tiddler-controls-foreground in $:/palettes/Nord. I assumed that’s what I need, since changing that indeed changed the color of tiddler controls.

After reading https://tiddlywiki.com/static/Styles%20and%20Classes%20in%20WikiText.html I tried to imitate the recipe and ended with:

<$list filter="[<currentTiddler>type[text/markdown]]">
   @@color:<<colour tiddler-controls-foreground>>;font-size:initial; {{markdown-mark.svg}}@@
</$list>

which didn’t work. I tried to exclude one level of complexity and hardcoded the color:

<$list filter="[<currentTiddler>type[text/markdown]]">
   @@color:red;font-size:initial; {{markdown-mark.svg}}@@
</$list>

but this didn’t work either.

Further forum search gave me related topics like Here I go again, I just want to colourise a button in the Toolbars , from which I could only conclude that people who are more familiar with CSS (pretty much everyone, see above) than me find it non-trivial, so I have no chance to do this on my own.

#7

The problem is that the SVG image I pointed you to is not fully-compatible with TiddlyWiki’s handling for SVG images.

Here’s the original downloaded SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="208" height="128" viewBox="0 0 208 128">
<rect width="198" height="118" x="5" y="5" ry="10" stroke="#000" stroke-width="10" fill="none"/>
<path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/>
</svg>

and here’s some SVG that is compatible with TiddlyWiki:

\parameters (size:"2em")
<$wikify name=color text="<<colour tiddler-controls-foreground>>">
<svg width=<<size>> height=<<size>> viewBox="0 0 208 128">
<rect width="198" height="118" x="5" y="5" ry="10" stroke=<<color>> stroke-width="10" fill="none"/>
<path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/>
</svg>

Notes:

  • The \parameters pragma defines a default value for the <<size>> variable used later on.
  • The $wikify widget is used to get the current palette color for tiddler-controls-foreground. We need to use $wikify because the <<colour>> macro is actually a nested set of $transclude widgets that when rendered result in the desired hex RGB color value. But… we need to use that value as a parameter in the SVG code, and $wikify captures the rendered output in a variable so we can reference it later on.
  • The <svg> width and height are set to <<size>> so the markdown image is similar in size to the other tiddler toolbar icons. You can, of course, adjust the \parameters definition to use a different default size to suit your taste.
  • The <rect> SVG sets the stroke color to use the <<color>> value that we previously retrieved using $wikify. This replaces the hard-coded stroke="#000" (where #000 means “black”).
  • The <path> SVG is unchanged and draws the “M” and the down-arrow inside the rectangle.
  • IMPORTANT: you also need to remove the image/svg+xml value from the type field. This is essential for enabling the SVG to use the $wikify widget to get the color value and then reference it using <<color>>

enjoy,
-e

#8

Thank you.

This requires a bit of additional rasping, because while the rectangular border around the icon now honors the palette color, but what’s inside it (the M letter and the down arrow) still doesn’t.

I’ve just learned that the path element can be styled as well [1], so I first tried a hardcoded attempt again

\parameters (size:"2em")
<$wikify name=color text="<<colour tiddler-controls-foreground>>">
<svg width=<<size>> height=<<size>> viewBox="0 0 208 128">
<rect width="198" height="118" x="5" y="5" ry="10" stroke=<<color>> stroke-width="10" fill="none"/>
<path style="fill:red" d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/>
</svg>

and this produced the expected result. But when I tried to extrapolate your example like this:

\parameters (size:"2em")
<$wikify name=color text="<<colour tiddler-controls-foreground>>">
<svg width=<<size>> height=<<size>> viewBox="0 0 208 128">
<rect width="198" height="118" x="5" y="5" ry="10" stroke=<<color>> stroke-width="10" fill="none"/>
<path style="fill:<<color>>" d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/>
</svg>

I broke it again. I’ve noticed that this time the situation is slightly different, since invocation of <<color>> happens inside quotes. No idea if this is the problem, but in another blind try I repeated the wikification trick and ultimately ended with

\parameters (size:"2em")
<$wikify name=color text="<<colour tiddler-controls-foreground>>">
<$wikify name=pathstyle text="fill:<<color>>">
<svg width=<<size>> height=<<size>> viewBox="0 0 208 128">
<rect width="198" height="118" x="5" y="5" ry="10" stroke=<<color>> stroke-width="10" fill="none"/>
<path style=<<pathstyle>> d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/>
</svg>

which finally made me happy :+1: (yet I still have no idea if this was the correct way of doing it)

  1. SVG Path
#9

You can avoid the second $wikify by using a “filtered transclusion” to construct the desired style value, like this:

<path style={{{ [[fill:]] [<color>] [[;]] +[join[]] }}} ...

An even easier method is to use the TiddlyWiki enhanced style.attribute=value syntax, like this:

<path style.fill=<<color>> ...

This usage was added in TW5.2.2 (25th March 2022) and is documented in HTML in WikiText under the “Style Attributes” heading at the bottom of the tiddler.

-e

1 Like