Wilk-tweaks, my collection of TW tweaks, settings, styles, and palettes

Showcase
, ,
#1

I’d like to share my small collection of TiddlyWiki tweaks, settings, styles, palettes etc. that I use across my wikis. These are mostly small modifications that would not make much sense as plugins, but they took enough time to make/adjust/find that I want to keep them for future reference and share. There is a short explanation or simple usage example for each of them.

wilk-tweaks.tiddlyhost.com

2
21408×871 86.6 KB

A couple ones that I’d like to highlight, I think the most universally useful, are:

  • Extended search: includes missing tiddlers and tags.
  • Minimalistic star/favorites system.
  • Caption displayed next to title.
  • Graphite palettes, inspired by IBM palette.
  • Editor toolbar buttons: highlight, translinkify (wrap title in inline translink macro), comment HTML, comment CSS.
  • View toolbar button to toggle $:/tags/Stylesheet tag.

Of course all questions and feedback are welcome. I hope it is friendly enough to new users, who are looking for the solutions I once looked for. The current design is a compromise between conveniently storing the tweaks for my own use, and making this useful and understandable to others.

Below is the full list of the tweaks with short descriptions. I’ll update this list when I change or add something relevant. It’s here only to make it findable on the forum, it is best viewed on the wiki itself. All tweaks are also catalogued in links.tiddlywiki.org.

Functional:

Functional:

  • Auto Complete triggers: Various triggers for Auto Complete plugin.
  • Details macro: .details macro is a simple wrapper for <details> html element. Works only with inline content, I use it mainly for images. A more advanced solution by Thomas Elmiger is available as Details Widget plugin.
  • Direct icon: Value of the icon field is directly used as an icon (when viewing the tiddler and in tag pill) if it is not a title of an existing tiddler. Useful for quick assigning of emojis as icons – simply type the emoji, or any other character(s), in the icon field. Idea by Anthony Muscio, updated to 5.2.7 core code.
  • Editor toolbar buttons: Editor toolbar buttons: 🅷 highlight, <! comment HTML, /* comment CSS, ▣ translinkify.
  • Extended search: Modifies the default search (in sidebar and in editor’s create link modal): Title matches also search caption, All matches searches all fields and includes tags and missing tiddlers.
  • List filter macros: .list-filter and .list-filter-details are wrapper macros for the core macro list-links. The filter itself, results count, and an optional comment are displayed before the list-links results; in -detals variant the results are collapsed by default inside a <details> element.
  • Pseudo zoom for TiddlyDesktop: Keyboard shortcuts ctrl/cmd shift +/-/0 to pseudo zoom in/out/reset zoom in TiddlyDesktop.
  • Review button: ViewToolbar button that sets field reviewed to current time, without changing modified time.
  • Simple star: Simple mechanism for starred (favorite) tiddlers: ViewToolbar button to toggle Star tag and Starred tab in SideBar. More advanced solution by Mohammad Rahmani is available as Favorites plugin.
  • Toggle stylesheet button: ViewToolbar button to toggle $:/tags/Stylesheet tag on a tiddler.

Visual:

18 Likes
Wilk-tweaks -- Issues: CodeMirror CSS and Tools Sidebar Tab is missing
#2

Hi Mateusz,
Thanks for sharing.

That’s a very nice showcase edition. I like it very much. — Everything!

I can see the effort and time that has gone into those tweaks and the documentation, that makes it usable for others.

I do like the fact, that every tweak is usable on it’s own. So as a user I can use the stuff that I need or like and can leave the rest alone.

I can see the IBM inspired design language of the 2 new palettes.

  • Graphite Light 00
  • Graphite Light 10

switch-palette

In the “Center story style” setting, I do like, that the width for the tiddler-editor is bigger than the width of the tiddler in view mode.

image
image1920×831 62.4 KB

It’s the first time, that I think custom fonts are an improvement over locally installed default settings.

I’ll start a new thread for the 2 issues that I have with some minor implementation details.

Well done!
-mario

1 Like
#3

Wow, vilc! This is wonderful. Thank you so much. I will be using several of these!

Question: is there a way to have the titles displayed before the symbols in the popup? That is, when I type ::, I would like to see (star) on the left and &#9733; on the right in the popup.

2 Likes
#4

I mean, not that you change your thingy, but a way for me to customize it…

#5

Of course, its a matter of modifying the display filter of the trigger. Right now it is

[[$:/wilk/data/Symbols]getindex<currentTiddler>]
[[ (]]
[<currentTiddler>]
[[)]]
+[join[]]

Which for a symbol dictionary entry star: &#9733; would display the hint as &#9733; (star).

If you just reorder the display filter to

[[(]]
[<currentTiddler>]
[[) ]]
[[$:/wilk/data/Symbols]getindex<currentTiddler>]
+[join[]]

The hint will display as (star) &#9733;. Similarly, you can change it to star: &#9733; or star - &#9733;.

Go to Control Panel > Evidently Cube > Auto Complete > edit :: trigger > change Display Filter to the snippet above. Or import this modified trigger: $ _EvidentlyCube_Trigger_Symbol.json (605 Bytes) (modified to display as (star) &#9733;).

#6

YES! That is way more readable for me. I added a couple longer items like <span class=""></span> and details, so it is easier for me to look down the left side and see the names than to choose from the symbols or hunt for the unaligned names to the right.

#7

Thank you vilc for sharing all these tweaks!

1 Like
#8

I have just added a new functional tweak: Pseudo zoom for TiddlyDesktop. It adds keyboard shortcuts ctrl/cmd shift +/-/0 to pseudo zoom in/out/reset zoom in TiddlyDesktop, similarly to how it works in the browsers (not the same unfortunately, hence “pseudo”).

1 Like
#9

I have added a couple new things:

before-fold
before-fold824×191 4.94 KB

before-unfold
before-unfold842×156 4.11 KB

after-fold
after-fold828×195 4.78 KB

after-unfold
after-unfold835×164 3.87 KB

All my tweaks are now catalogued in links.tiddlywiki.org.

If any experienced user would have couple minutes to spare, I would be very thankful for feedback on how I export the necessary data from wilk-tweaks.tiddlyhost.com to wilk-links.tiddlyhost.com (containing data for links.tiddlywiki.org). I have a tiddler that generates JSON-formatted text with the desired data, then copy the rendered text, save it as JSON file, and import in my links wiki.
It works, so I’m not really asking for help. I don’t need to update it too often, so I don’t need much more automation either. I’m just wondering if this approach is a clever hack or a dumb unnecessary workaround, and if there is some obvious easier path that I have overlooked.

2 Likes
#10

Hello Mateusz, I wonder if Center Story could be tweaked at all to accommodate for the preview function in the editor?
I’ve been a loyal user for a while but I had to stop using it, as I’m now frequently making more complex tiddlers and don’t want to edit-save-edit-save to see my output.

preview with centerstory
preview with centerstory1914×698 160 KB

#11

Thanks to @yan above for bumping the thread. Somehow it escaped me earlier when I skimmed through the forum content that was posted before I joined the forum.

Nice collection of tweaks and great, very pleasant to read documentation.

Now, a question: the tweaks are recommended to be installed via drag-and-drop. What to do when drag-and-drop is tricky - like on mobile?

I have tried to apply by analogy my older knowledge about installing plugins (export the plugin tiddler as JSON, then import it manually), but something doesn’t go well.

For example, I want wilk-tweaks — TW tweaks, settings, styles, palettes. in my wiki and I can’t use drag-and-drop. That tiddler suggests to drag-and-drop the green $:/wilk/tweaks/CopyCodeButton button. If I click on it, a list opens up:

$:/wilk/tweaks/CopyCodeButton

$:/wilk/buttons/copy-code
$:/wilk/css/CopyCodeButton

I have tried to export just the $:/wilk/tweaks/CopyCodeButton tiddler, but the resulting .json file contains only data from that tiddler, not the other two as well. How to do it the right way? Manually saving each tiddler is not scalable if a tweak would contain more tiddlers.

#12

@yan something must have changed in the recent TW versions, the uneven division of the editor/preview doesn’t work for me too. Thanks for pointing out. I have updated the tweak just now by commenting out the problematic rules.
I will try to make it work with current TW. If anyone has an idea why

.tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor {
	width: 60%;
}
div.tc-tiddler-preview-preview {
	width: 38%;
}

produces the strange result as on the screenshot above, help would be welcome.

#13

Thanks for the kind words.

You would have to do advanced search with filter [[$:/wilk/tweaks/CopyCodeButton]tagging[]] and export the results. This is what dragging a tag pill does in TW – move all the tiddlers tagged with the tag, but not the tag itself.

Because of this and many other inconveniences of tags compared to plugins, and because self-hosting a plugin library is now easy, I have created wilk-plugin-library.tiddlyhost.com, discussed this thread.
I’m planing to eventually review all the tweaks and remake them as plugins, to make them easier to use by me and others. Some have already made their way there, including the Copy Code Button that you mentioned.

1 Like