Sidebar resizer for TiddlyWiki Node.js?

[wikster]

I’m looking for a way to resize the Sidebar dynamically in my TW Node.js, but i haven’t been able to find a solution. Is there a possibility to do it?

I installed BurningTreeC’s Resizer, but honestly I feel that I need a pilot’s license to learn how to use it!

[TiddlyTitch]

@wikster

I feel that I need a pilot’s license to learn how to use it!

Right.

But there is a readymade sidebar resizer if you need it and the editor preview resizer is automatic.

Sidebar resizer … Resizer Widget — v0.5.0 - resize your sidebar and more

[wikster]

It works in the link that you gave me, but unfortunately not in my TiddlyWiki installation on Node.js.

[Mark_S]

I didn’t realise that there were competing resizers.

I appear to be using this one:

https://gk0wk.github.io/TiddlySeq/#Resizable%20Sidebar

It works for me on node, and only required a drag/drop to load and just one configuration click.

Now that I see that BTC’s resizer includes a preview resizer, I might have another look.

[wikster]

Is there a way to install it in a separate plugins directory instead of inside my ordinary tiddlers?

[Mark_S]

I imagine you could break it out. Maybe you could use Gatha to turn it into the constituents to create the plugin.

But why does it matter?

[wikster]

Thanks. I have more than one wiki and I like to have the plugins centralised.

[oeyoews]

tiddlywiki-starter-kit/plugins/oeyoews/notebook-theme-sidebar-resizer at main ·...

New TiddlyWiki Sidebar Resizer

Since the notebook theme customizes the sidebar, the plugin Resizable Sidebar - Resize your sidebar with mouse dragging! is not compatible, so I rewrote a notebook sidebar resizer source code: https://github.com/oeyoews/tiddlywiki-starter-kit/tree/main/plugins/oeyoews/notebook-theme-sidebar-resizer support themes vanilla theme notebook theme captivate theme whitespace theme mini example: My TiddlyWiki — a non-linear personal web notebook [GIF 2023-12-19 16-25-49] [close]

[wikster]

Thank you. I tried to get it to work, but with no success. I was using Copilot all the way, but maybe AI has its limitations!

[TiddlyTitch]

@Mark_S

I didn’t realise that there were competing resizers.

Yes. But. I was waiting for yours broheim.

[linonetwo]

Drag & drop to install it in your nodejs wiki.

[IDEA] Affordance for installing plugins on node.js · Issue #9210 · TiddlyWiki/TiddlyWiki5

[wikster]

Thank you for the suggestion. It’s just that I wanted to have all my plugins in a centralized directory for access by any wiki rather than installing each plugin directly inside every wiki.

[pmario]

If you want to manage 3rd party plugin libraries on your own you can use the following description.

It assumes that you have the following

Prerequisites:

• Preferable installed a Node.js LTS version. At the time of writing it is: LTS 22.19.0
• GIT, used to clone the latest plugin versions from GitHub

Set OS Environment Variables

TW can use environment variables eg: TIDDLYWIKI_PLUGIN_PATH and others to search for plugins, themes and editions.

So you can use that environment variable to point to your central directory, where you keep your external plugins.

For example if the TIDDLYWIKI_PLUGIN_PATH contains c:\my\plugin-hub\. At wiki startup the core will search for plugins there, depending on the tiddlywiki.info plugin settings. Eg:

tiddlywiki.info may contain the resizer-plugin like this:

{
	"plugins": [
		"tiddlywiki/codemirror",
		"BTC/resizer"
	],
	"themes": [
		"tiddlywiki/vanilla",
		"tiddlywiki/snowwhite"
	],
    "languages": [
    ]
}

We ususally use a <author-name>/<plugin-name> pattern, since this allows us to avoid plugin name clashes. Those author-name/plugin-name settings also represent a directory structure.

So if your

• TIDDLYWIKI_PLUGIN_PATH is: c:\my\pluginhub and
• tiddlywiki.info BTC/resizer

The full directory path where TW searches at startup is c:\my\plugin-hub\BTC\resizer if you are on windows.

As you can see, this directory structure makes it possible to have 3rd party plugins from several authors in the same directory, where the environment variable points to.

Important:

• In tiddlywiki.info we always use forward slashes as directory separators. The core takes care of this depending on the OS where it runs on.
• The environment variables have to use the OS convention. So backslashes for Windows and forward slashes for Unix systems.
• TiddlyWiki uses forward slashes and adjusts according to the OS.

---

So how do you get the resizer plugin into c\my\plugin-hub\BTC\resizer?

The github repository is at: GitHub - BurningTreeC/resizer: Resize your TiddlyWiki5. From there you can clone it using git.

We need to create the following directory structure - Step by step

cd c:\my\pluign-hub
mkdir BTC
cd BTC
git clone https://github.com/BurningTreeC/resizer.git
cd resizer
git checkout v0.5.0

This method will allow you to work with the current resizer version. Even if BTC publishes a new version you can maintain it as you like.

I hope that helps.
-Mario

[wikster]

Thank you Mario. I actually did get the BTC plugin to be installed in my Linux OS system, but I didn’t understand how to configure it in order to use the sidebar resizer.