Shiraz 3.0: Plan for the Next Major Release

[nevarmaor]

I finally took a look at TW-Tweaks and discovered an issue. Haven’t had time to track down the cause yet. There is an incompatibility between TW-Tweaks and FontAwesome by TheDiveO.

With FontAwesome you get embedded icons to use in your tiddlers. There is also an option to add decorations to different links, one of which is system tiddlers. You get this:

Note the gear added to system tiddler links. This is with only core and FontAwesome plugins in an empty wiki.

When you install the TW-Tweaks plugin:

The decorations become a solid bar.

I will let you know if I find a cause, but I thought I would let you know in case you want to investigate yourself. You could probably do so much faster than me.

Note that unchecking the “decorate system links” option in the Font Awesome Control Panel options removes that solid bar. Tweaks must be overwriting something somewhere.

I do like the right topbar menu

[Mohammad]

TW-Tweaks uses external links iconified from @telumire. You may disable $:/plugins/kookma/tweaks/styles/iconify-external-links

by removing the tag: $:/tags/Stylesheet

[nevarmaor]

Actually, further testing shows that TW-Tweaks overwrites the FontAwesome decorations for external links.

FontAwesome only:

FontAwesome + TW-Tweaks:

It is the decorations for internal system links that gets messed up. Although … the others seem to have added spacing.

When only TW-Tweaks decorations are enabled everything goes back to normal:

Your decorations are more subtle. Just weird that it would affect the internal system links. Maybe it’s the “other rules” part of the stylesheet.

Best to just have one of them enabled anyway.

I need to be more conversant in CSS.

[Mohammad]

I just checked the Foneawesome and Tweaks on the same clean/empty html file.
I removed the $:/tags/Stylesheet from $:/plugins/kookma/tweaks/styles/external-links-icon

Now everything works fine.
You can give a try like the one described in this post, if it works then something is not working in your wiki.

[nevarmaor]

Yes, you can use one or the other, they just don’t play nice together. What you described is what I did in my previous post (empty tiddly, disable one then the other).

I decided to just download the icons I am using from FontAwesome directly and remove that plugin. The majority were unused and just taking up space anyway. I was using nine icons out of 1464.

[etardiff]

@Mohammad, I’m not sure whether you’ve seen this yet, but all major browsers now support a name property of the <details> element, which lets you build accordion-like sets of details elements by giving them all the same name value. I know you shared a very slick-looking <<accordion>> macro a while back, but I think this is an even easier approach. Perhaps it’s worth adding to your <<details>> macro in your next Shiraz update?

(This post brought to you by just having edited my own copy of the plugin to make this change. <<details>> is great — still one of my most-used macros!)

[Mohammad]

Thank you @etardiff
Added to Shiraz todo list.

[Mohammad]

For those are interested, the proposed feature by Emily works like below:

<details name="accordion" > <summary>Section 1</summary> <p>Content for section 1.</p> </details>
<details name="accordion" > <summary>Section 2</summary> <p>Content for section 2.</p> </details>
<details name="accordion" > <summary>Section 3</summary> <p>Content for section 3.</p> </details>

[TW_Tones]

Good catch, I tested it on TiddlyWiki.com, Now with backtick attributes in tiddlywiki it may also be possible to set the name attribute programaticaly which will alter the behaviour in numerouse ways.

• However the state of this is reset on re/loading the tiddler, this is often the desired behaviour.

It would be nice if we had a mechanisium to touch the “name” in the dom as a generic support mechanisium, that would provide access to the DOM state rather than maintain a seperate one in a tiddler, and lost only on tab reload.

Note: title="popup message also works"

[RaHaNGS]

Hello there!
This is probably not an issue anyone else has (if my brief search is any indication), and I apologize in advance if it pollutes this thread (I’m new to the community and as a tiddlywiki user).

I’m using TiddlyWiki 5.3.6, and I’m puzzled by a CSS issue with regards to the Images macros in Shiraz. Normally, any image macro of the Shiraz plugin can be floated left or right of a Tiddler, and the plugin relies for that on the style sheet defined in $:/plugins/kookma/shiraz/styles/image-alignment as so:

/*Image aligning classes*/
.image-align-end{
    float:right;
    margin:0.5em 0 1.3em 1.4em;
}
.image-align-start{
    float:left;
    margin: 0.5em 1.4em 1.3em 0;
}
.image-align-center{
  display:block;
  margin: 0.5em auto 1.3em; 
}

.image-float-none {
  float: none !important;
}

Very simple, right? However, for the life of me, I can’t understand why in my TiddlyWiki, the float: doesn’t apply:

Inspecting the element in the browser yields that the class image-align-right is correctly passed to the element (<figure>):

However, in the properties of the class shown by the inspector, there is no float: right;

Evidently, adding it by hand solves the issue:

I’m puzzled as to what’s really happening here… (note the image is simple tiddler with the svg image, but the same issue shows with bitmap image types as well).

Any help figuring this out would be appreciated, and apologies again if this is an issue no one else has encountered, or if it has already been discussed elsewhere and I missed it

[Springer]

Hello @RaHaNGS,

It’s a bit awkward to troubleshoot because you’re only giving us screenshots of your own work. If you can paste in your text — with triple-backticks on the lines above and below the pasted text so that we see the actual code (not rendered as html here), then someone else can actually copy and paste your code and play with it. (That might help people notice some otherwise-invisible glitch.)

Meanwhile, I also recommend dragging your image and your image-polaroid tiddler over to the shiraz demo site, and seeing whether or not things are working fine. If it works ok there, something else on your own wiki is interfering. If it doesn’t work well there, then we should see whether there’s an error in your code or (unlikely but conceivable) some problem with the macro’s handling of css.

-Springer

[Mohammad]

Which version of Shiraz do you use? If it is 3.0.0+ then use align:
start
center
end
none

[RaHaNGS]

Certainly, @Springer, here’s the content in the tiddler (which as you’ll see really is basic, with the image-polaroid macro and some text):

<<image-polaroid img:"GURPS_image-thanatori-sigil" align:"right" width:"20%" caption:"''The Thanatori sigil.''<br/><br/>//When appearing in an official capacity, members of the Thanatori will often wear the sigil of the order.//" text:"">>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@Mohammad got the answer. I’m using Shiraz 3.0.5, thus replacing “right” by “end” works. I was reading the documentation of 2.9.7 though, because it is what the links of the plugin link to. Thank you @Mohammad ! (I should have seen this from the start reading the alignment CSS with more attention, actually, I feel stupid ;P)

[Mohammad]

I will update the documentation when I have some time.

[RaHaNGS]

Hey @Mohammad! I’m deep into architecting my TW and I use your table-dynamic macro a lot. However, I’m trying something it may not have been intended for.

Here’s the context:

• Character tiddlers, with a field called spellbook
• Spellbook data tiddlers listing key:value pairs in the form Spell:level, where Spell refers to the title of a Spell tiddler (in plain text), and the level is a number.

In my Character view template, I’m trying to use the table-dynamic macro to display the list of spells and their levels associated with a character through his spellbook field. I’m getting to the spellbook data tiddler refered in the associated field of the Character tiddler fine, but I couldn’t find how to refer to the indexes and values for the spells listed in it. This is what I have so far:

<$let spellbook={{!!spellbook}}>

<$macrocall $name="table-dynamic" filter="[<spellbook>indexes[]]" class="w-100" indexes="[[currentRecord]]" caption="" stateTiddler="20200213/0928"/>

</$let>

Evidently, this brings up nothing. Replacing the relevant part of the macro with indexes=title brings up the Spell titles correctly, but gives the warning that they are not data tiddlers (beccause they are not).

I just wonder how I should write the macro so it takes the list in the spellbook data tiddler, and outputs the key/value pairs for each entry, with the headings “Spell” and “Level”. Is there anyway to do that? Do I need to create templates for the columns?

[Mohammad]

@RaHaNGS

indexes="[[currentRecord]]"

This needs literals like indexes=“isbn publisher date”

If these names are dynamically created, then you may use filter transclusion with $let variable or $wikify widget.

[RaHaNGS]

Unfortunately, this data tiddler is a dictionary. The key/value pairs are just that; key:value, one pair per line, no “headers” or anything. Keys are the name of spells (strings), values are numbers - so it’s not like with a json.

So I’d need a getindex[] in there, unless there is already built-in a mechanism to make a key column and a value column :-/ (which I haven’t been able to find).

[Mohammad]

I did not quite understand the OP, but please note that:

1. filter=“some filter” should returns a list of tiddlers
2. indexes=“some indexes” should return a list of literals which are keys in those tiddlers in step 1

So, does your case meet the above conditions?

[RaHaNGS]

Not exactly

The dictionary datatiddler that I feed the filter through [<spellbook>indexes[]] is one tiddler, but the tiddler references a list of tiddler names (that’s why it does render the list when indexes= contains “title”) as the keys of the dictionary; however, I don’t know how to display the values for each of the key because they have no literals. I was hoping I could trick the macro through a syntax trick like getindex[], which is used normally to retrieve the values of a key in a list of keys.

Does that make more sense?

[Mohammad]

I have a better understaning now.
table-dynamic, looks for a tiddler returns from filter=“some filter”, then it looks for a key in the tiddler, and return the value of key:value from that tiddler.
So, the rows of dynamic table are tiddlers and the columns are value of such keys for each tiddler.

The is the default behavior of table-dynmaic. If you like to change this, you need to write new column templates and change the behavior. All in all, your case seems to have a simple solution with TW tables itslef. I would recommend to start a new thread and simply explain what functionality/output you need. A small minimum wiki always helpful.