New callouts plugin

Plugins
#1

Hello everyone.

After spending a long time looking at the incredible work of others, searching this forum to learn a little more each day about TiddlyWiki and how it works, I have finally been able to understand (thanks to the help of many forum members and the many AIs I consulted) and create a small plugin.

Don’t expect too much, but I hope that what little it offers will be useful to someone or serve as a starting point for something much better.

The plugin is based on Shiraz‑Callouts by @Mohammad, who deserves all the credit here; I have built a series of new presentations for the callouts and also translated the macro syntax and its parameters into Spanish so that working with them feels more comfortable. This process has allowed me to understand more deeply how TiddlyWiki works.

I want to thank, in general, the entire TiddlyWiki community that always helps those of us with less knowledge or who are newer to it.

In particular, I am grateful for the help and advice of forum members such as: TW_Tones, pmario, tw‑FRed, Eric Shulman, Scott_Sauyet, Mohammad, etardiff, Springer, Mark_S, Justin_H, Charlie_Veniot, pmario, Yaisog, twMat, Sunny, Ste_W, TiddlyTitch, fastfreddy, and hoopyfrood, who in the many threads I have started have helped me understand a bit more about TiddlyWiki and solved many problems that I would not have known how to tackle without their assistance. I’m sure I’m forgetting someone else, and if so, my apologies…

Regarding this plugin, the last obstacle I faced was solved thanks to the invaluable help of etardiff, which allowed me to translate the entire plugin syntax into my language.

Of course, thanks also go to Jeremy Ruston, the creator of this wonderful program with which I have spent countless hours and which remains the only way I can have my notes exactly as I want.

Initially this was meant to be a personal project that stayed on my computer, but this community has always been very generous, and I want to give back a small part of what I have learned. I have a few more ideas in mind, but time will tell whether they become something concrete or remain just concepts.

I originally wrote the project in Spanish, but after seeing that everything worked reasonably well, I translated it into English so that those of you who aren’t fluent in Spanish can also use it. I’m providing both versions so you can try them; the name will tell you which one to use.

Timit_admonitions_v1.0.4e.json (59.9 KB)
Timit_advertencias_v1.0.5.json (64.5 KB)

I haven’t encountered any problems on my machine, but still test it carefully. It’s possible I missed translating a few things, but overall I think everything is understandable. I would appreciate it if you could let me know about any anomalies you encounter—I can’t promise I’ll be able to fix every issue, but I will review them and do what I can.

Best regards and thank you for everything.

7 Likes
#2

Thank you very much for sharing. These look very useful and simple to use!

1 Like
#3

Very nicely done.

Here is a quick attempt at converting the macro to a custom widget version that might be a bit more convenient when writing longer content:

\widget $call.out(type:"note", src, title, width:"100%", class)
<$let theme-class={{{ [[$:/palette]get[text]get[color-scheme]else[light]addprefix[theme-]] }}} 
      callout-title ={{{ [<title>!is[blank]] :else[<type>titlecase[]]  }}}
      icon-tiddler={{{ [all[tiddlers+shadows]tag[$:/tags/TimitAdmonitions/Image]contains:callout-type<type>]
                          :else[[$:/plugins/timit/admonitions/images/note]] }}}
>
	<div class=<<theme-class>> style.width=<<width>> >
		<div data-callout=<<type>> class=`callout $(class)$`>
			<div class="callout-title">
				<div class="callout-icon"><$transclude tiddler=<<icon-tiddler>> field=text/></div>
				<div class="callout-title-inner"><<callout-title>></div>
			</div>
			<div class="callout-content">

				<$slot $name="ts-raw">
					<$transclude $tiddler=<<src>> mode="block"/>
				</$slot>

			</div>
		</div>
	</div>
</$let>
\end

<$call.out class="text-primary" title="My Title">

This model is inspired by the old "admonitions" format from Mkdocks, which features a thick left border and a gray background for the text, but it has been updated with thin borders around the rest of the box to give it a more modern look.

Its syntax is as follows: `<<callout-lateralb type:"note" source:"" title:"" width:"100%", class:"">>`.

By default, the callout style is "Note", and the width is set to 100%. You can also assign Bootstrap classes to customize it as you like.
</$call.out>
5 Likes
#4

While I like this very much, I’m wondering if the different callout macros (callout, callout-lateral, callout-lateralb, callout-details, etc.) might be better expressed as one more parameter to a single macro. I’m imagining a call like this:

<<callout danger style:"lateral-details" src:"Real content here" title: "Watch out!">>

or even

<<callout danger style:"lateral" foldable:"yes" src:"Real content here" title: "Watch out!">>

I feel as though a single macro with an extra configuration parameter is simpler than a few different macros. Although I haven’t looked closely, I’m guessing that it wouldn’t be too hard to change to allow this.

2 Likes
#5

Hi Scott.

First of all, I’m glad you like it. Regarding the use of the add-in, I really like the idea you gave me, it seems feasible.

I’ll have to see if I can implement it correctly, and I could also change the macro to a procedure, but for that, I’ll have to check the Tiddlywiki documentation to see how much the syntax changes and if it will change the code significantly.

I’ll get started and will let you know how much progress I make.

Best regards.

#6

Hi saqimtiaz.

Thanks for the idea, I’ll take a look and see if I can do something with it.

Best regards.

#7

I don’t think it would take much. Replace define with procedure, use <<varName>>/ [<varName>] in place of <<__varName__>>/[<__varName__>], and replace "string$substitution$" with Substituted Attribute Values, `string$(substitution)$` (note the backquotes.) My guess is that would be all it would take.

1 Like
Problem with variable substitution to create a class