Shiraz 3.0: Plan for the Next Major Release

[ludwa6]

ps: With your good guidance @Mohammad , I did get NodeExplorer working in the TW 5.3.5 instance i set up for this purpose- which i manage using TiddlyDesktop on Mac, in case that matters -but i did encounter a surprise that i’d like to understand better. Here’s what i did:

1. Went to your github site, the shiraz-3.0.0 branch, the index.html file in the docs folder, which i then downloaded to my desktop.

2. That instance being full of content, to try the plugin out on a clean TW 5.3.5 instance, i dragged from the downloaded 3.0.0 instance the Shiraz 3.0.0 plugin, along with the other plugins that accompanied it (Code Mirror, Highlight, Katex, Utility), into my clean instance.

3. Ran the advanced search you prescribed here to find that set of node-explorer viewtemplates you listed… But they did not appear in the result list.

4. So i dragged those 3 view templates over from the downloaded instance, and got Node Explorer working.

Of course this is not your recommended procedure, so feel free to ignore my “just out of curiosity” question; i just wonder: Is the Shiraz 3.0.0 plugin, when released, going to come bundled with all the view templates (plus anything else) that is needed to enjoy the full new&improved Shiraz experience?

[Mohammad]

@ludwa6

So i dragged those 3 view templates over from the downloaded instance, and got Node Explorer working.

You did correctly import the node-explorers.

Shiraz itself does not include the node-explorers in the plugin pack. Node-explorer is an advanced example of using Shiraz. Node-Explorer actually demonstrates how to use Dynamic-Tables, Display on Demand and Badges can be used to create a bidirectional edition of tiddlywiki!

NOTE: There is a less active edition called Mehregan ( Mehregan is a Tiddlywiki based app for personal knowledge management with Zettelkasten concept) which include all of these. I am sure you have it. I hope I can find some free time and update it once Shiraz 3.0.0 stable version released.

In summary to setup a clean TiddlyWiki with Node-Explorer you need

1. download the empty.html (latest version 5.3.5) from https://tiddlywiki.ocm
2. install Shiraz 3.0.0 using drag and drop
3. import all, or selected node-explorer viewtemplate from Shiraz 3.0.0

[nevarmaor]

Mohamnad, I noticed that Shiraz 3.0 no longer has the multi-column checkbox.

In my tiddlywiki I had set up a check box myself which also stopped working in new setups.

When I did some digging I saw that the multicol tiddlers all still seem to be in the plugin except for $:/plugins/kookma/shiraz/styles/multicols/storyriver (which is what I modify in my own checkbox). Adding that tiddler from an old setup that still works got it working in the new setup too.

Is this an oversight or are you phasing out multicolumn?

[Mohammad]

Sorry for inconveniences. I will prepare a list of changes in Shiraz 3.0
I moved the multicolumn story river with few other tweaks to a smaller plugin called TW-Tweaks.

You have correctly restored the multicolumn story river for your own use.

[nevarmaor]

Ah ok, thanks. I’ll take a look at TW-Tweaks.

As a side question, is it possible to have the multicolumn revert to single when there is only one tiddler open?

[Mohammad]

Yes! It uses a stylesheet. You can use new conditionals and create dynamic stylesheets.
So, multicolumn can only be in use when more than one tiddler is open!

[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.