Shiraz Plugin Update 2.4.2

[Mohammad]

Shiraz plugin just got a new update. Its quick table (table-csv) has got new column formatting macros, and makes creating table of math and chemistry formula very easy and fast! It also extends the static todo list (from 2.4.0) to new interactive todo list from plain text!

Screenshot

What is Shiraz?

Shiraz is a small framework of stylesheets, templates and macros to create stylish contents in Tiddlywiki. Shiraz has customized elements like alerts, cards, panels, images, static tables, dynamic tables, quick tables, badges, texts, etc. Shiraz uses some modified CSS classes from Bootstrap 4.3.1.

Changelog

Revision 2.4.2

• Date: [10th Sep 2021]
• [NEW] quick table support for mathematical typesetting using official ~ plugin
• [NEW] quick table new formatting macros
• [FIXED] quick table documentation

Revision 2.4.1

• Date: [1st Sep 2021]
• [NEW] interactive task list for quick-table is added
• [NEW] quick-table can read date entries in form of yyyy 0dd 0mm with any delimiter e.g. 2021.09.5, 2021-09-05, 2021 09 05, 2021/09/05, or mixed of these formats.
• [FIXED] quick-table documentation has been improved
• [FIXED] summary cursor in details macro corrected
• [FIXED] image card documentation

Code and demo

Code and demo

• Demo: Shiraz 2.4.2 — create stylish contents in Tiddlywiki
• Code: https://github.com/kookma/TW-Shiraz (star if you like it)

It is highly recommended to backup your data before trying any new plugin! Do it before installing shiraz.

NOTE: Shiraz quick table needs Tiddlywiki 5.2.0+

[arunnbabu81]

Hi @Mohammad

Check this link

http://chronicles.wiki/TW5-RenderTablePlugin/#Examples%2FMacros%2FTable

How about adding such a filter button to the top of dynamic table to create a pop up where you can modify the filter for the dynamic table.

Just a suggestion.

[Mohammad]

This is a JS code!

@joshuafontany is behind this nice wiki!

[Mohammad]

Shiraz just got a new update.

• Update to Tiddlywiki 5.2.3
• New data block
• Some issues fixed

Code and demo

• Demo: Shiraz 2.5.0 — create stylish contents in Tiddlywiki
• Code: https://github.com/kookma/TW-Shiraz (star if you like it)

[TiddlyTweeter]

Shiraz is very Gilbert & Sullivan !

THREE LITTLE MAIDS FROM SCHOOL …

Three Little Maids From School Are We: The Mikado, Melbourne 2011 (Opera Australia)

TT

[Zheng_Bangyou]

I have the same problem with Kara plugin when I update Shiraz from 2.4.6 to 2.5.0.

Shiraz is conflict with Projectify now. All checkbox is disappearing in the Viewerbar and todo list for each project.

[Mohammad]

I will fix this!
As we discussed the reason is the bare .todo class

[Mohammad]

See Shiraz 2.5.1.
The issue fixed now!

[Zheng_Bangyou]

The macro table-dynamic displays the icon of tags, but not the colour of tags.

See example below from Shiraz 2.5.1 — create stylish contents in Tiddlywiki after tag info is changed to red and add an icon.

See here for reference: Link styles of all tags based on filter - #8 by EricShulman

[Mohammad]

It used to show the color, as it uses the core tag macro with no change!
perhaps something happened in recent update, I will investigate

[talha131]

@Mohammad the text background color macro can be leveraged to create text highlights.

But there are two issues,

1. you need to remember the color codes if you want to use multicolor highlights

2. Most good highlighting apps available online use gradients instead of a solid color, which creates better looking results

I think having direct macros like <<hly "hello world>>to highlight with yellow gradient, <<hlr "hello world>> to highlight with red gradient, would be more useful.

What do you think?

Are you open to this contribution to the Shiraz plugin? Or would you prefer me to add these macros in a standalone plugin?

[Mohammad]

Hi @talha131

@talha131

you need to remember the color codes if you want to use multicolor highlights

The macro accepts color names while it accepts color functions and color codes.
Note that names are thise you use in real life: red, blue, yellow, lightblue
links has been given for html standard names,

BUT note, it also accepts color functions like

<<bc src:"Hi TiddlyWiki" color:"rgba(255,230,200,0.5)">>

or

<<bc "Salam Mohammad" color:"hsla(300, 76%, 72%,0.1)">>

So if user knows rgba and hsla then she/he has a infinite flexibility

@talha131

I think having direct macros like <<hly "hello world>>to highlight with yellow gradient, <<hlr "hello world>> to highlight with red gradient, would be more useful.

This needs a lot of new macros! Isn’t it?

@talha131

Are you open to this contribution to the Shiraz plugin? Or would you prefer me to add these macros in a standalone plugin?

Sure, but Shiraz is already 100kB with many features. I am thinking to add new features as sub plugin.

[talha131]

@Mohammad

This needs a lot of new macros! Isn’t it?

Most higlighter app provide only 3-4 colors. So for our usecase, 3 macros should be enough.

@Mohammad

The macro accepts color names while it accepts color functions and color codes.
Note that names are thise you use in real life: red, blue, yellow, lightblue
links has been given for html standard names,

True. But the famous colors like red, yellow do not make for attractive highlights. As I mentioned, highlighter apps use linear gradients instead of solid colors.

For example, the colors you need in the following screenshot from a highlighter app are not solid html colors.

@Mohammad

BUT note, it also accepts color functions like

<<bc src:"Hi TiddlyWiki" color:"rgba(255,230,200,0.5)">>

True and this is a great feature. But that’s my point. In the current form user will have to remember to use rgba(255, 153, 153, 0.7) to get similar highlight.

For example, in the following screenshot from my TW, I used bc macro with rgba(255, 153, 153, 0.7). Next time, if I want to use the same highlight color, I will have to remember to use this clumsy piece of code, rgba(255, 153, 153, 0.7).

[EricShulman]

@talha131

if I want to use the same highlight color, I will have to remember to use this clumsy piece of code, rgba(255, 153, 153, 0.7).

Note: CSS also accepts 8-digit hex for RGBA values. While you still would have to remember the “magic code” for the desired highlight color, you could write #FF9999B2 instead of rgba(255, 153, 153, 0.7), which is, perhaps, easier to remember, and certainly easier to type.

[arunnbabu81]

For frequently used colours, may be you can add snippets to the editor toolbar snippet option.

Or use something like what @DaveGifford has done here - Goodies for Stroll —

[talha131]

@arunnbabu81

may be you can add snippets to the editor toolbar snippet option.

Thank you so much. I didn’t even know TW has this feature.

[Mohammad]

I just wanted to show you how flexible is the bc macro.
By the way it is simple to do what you want:

Consider you like to have custom macros for below cases

<<bc src:"This is a text.">>
<<bc src:"This is a text." color:"lightcyan">>
<<bc src:"This is a text." color:"lavender">>
<<bc src:"This is a text." color:"#C9FFB3">>
<<bc src:"This is a text." color:"rgba(255, 99, 71, 0.25)">>

which produces five most used colors for highlighting

1. Create a new tiddler tagged with $:/tags/Macro
2. Create below five new macros

\define hly(src)  <<bc src:"""$src$""">>
\define hlc(src)  <<bc src:"""$src$""" color:"lightcyan">>
.
.
\define hlr(src)  <<bc src:"""$src$""" color:"rgba(255, 99, 71, 0.25)">>

So you have added few top level macros, where they call the ugly bc macro with clumsy color codes…

In your example above then you can have

<<hly "hello world>>

to highlight with yellow gradient.

So you overload the plugin macros and you can customize the plugin as you like without touching it.

[talha131]

Thank you @Mohammad. Love it!

With your overloaded macro and snippets feature (that @arunnbabu81 pointed out), my issue is completely resolved.

[Mohammad]

@talha131
Just a side note, if you use codemirror in TW (I always use it), then you may like to have a look at
CodeMirror Enhanced — An enhanced for CodeMirror framework in TiddlyWiki (gk0wk.github.io)

It has a great autocomplete feature, and allows to add your snippets.

The author behind this awesome plugin is @sttot.

[fastfreddy]

The customizable Mark Selected Text plugin is also interesting: My 'playground' — a demo TiddlyWiki (TW v5.1.22)

The CPL has a version with CSS and a single stylesheet