Automatically Serve directory structure under Nodejs

Hello,

I do want to paste a directory that contains a bunch of stuff (images, pdfs, sub directories etc…) into tiddlywiki files directory and I wish I could inmediatelly navigate through the content.

AFAIK In order to navigate the directory I tiddlers with cannonical_uri mapping the desktop file structure are needed, however, Is it possible that this tiddlers are automatically generated on boot?.

What I do aim is that whenever I paste directories with data into tiddlywiki “files” I could inmediately navigate them on the browser and render the content if possible.

Here is a sample usecase, in which I had to manually create the required navigation tiddlers:
DisplayDirectory

As it stands, the closest thing to what you describe is the WebDAV setup that I use which I believe you have come across.

In order to do this with node.js and the files folder I would recommend writing a server route that can be used to retrieve the directory listing as JSON. You can then display this as desired or creates tiddlers for each file. This would also mean that each time you retrieved the listing it would reflect any changes on the disk.

1 Like

In your use case, would you want for there to be a tiddler for each file at all times, or would it be sufficient to only know what the contents of files > animals is when you click on animals?

I guess having a tiddler for each file at all times is prefeared since it would allow to render dinamic dashboards based on filters, for example:

A dashboard that renders all animals

<$list filter="[all[tiddlers]search:title[/files/animals]] -[[/files/animals]]">

{{[<currentTiddler>]}}

</$list>

A dashboard that renders dog’s images and dog’s pdf reports

<$list filter="[all[tiddlers]search:title[dog]]">

{{[<currentTiddler>]}}

</$list>

In any case, having a navigable file directory is already a huge functionality improvement over a blind TW, specially if TW is hosted on the cloud or wherever host without a GUI.

One of the things to be wary of is that getting the recursive directory contents of the files directory can be a resource consuming operation with large nested directory structures, and deploying this on a public facing wiki opens for the possibility of abuse. This is also why most WebDAV deployments only allow retrieving the contents of one directory at a time.

Of course when you use the node server you access your wikis via http/s and as a result the browser security is between you and your files. A lot can still be done as you have demonstrated already.

However for true interaction with you local desktop using TiddlyDesktop or the aging HTA and twexe methods, your wiki has more access to the local device.

  • There may be an opportunity to have rich local access through a Progressive Web App PWA version of tiddlywiki as well.

In case someone is walking the same path, I got to semi-automatic solution that creates tiddlers mapping files (*).

Following my previous example just by having a dog.png under directory /files/animals/ you can type {{/files/animals/dog.png}} wich renders the dog image out of the box.

This automatically generated tiddler will have a parent field that is the directory in wich is located.
Following the dog.png example, parent = “files/animals”. So far so god you create the missing tiddler “files/animals” and are all set to navigate.

Problems occurs when you have subdirectories, like “files/animals/mammals/dog.png”, the parent field becomes “files,animals,mammals” instead of “files/animals/mammals” wich is a major inconvinance.

Is there a way to make the tiddlywiki.files subdirectories property not use “,” but “/” when building the path ?

https://tiddlywiki.com/#tiddlywiki.files%20Files

(*) paste this config inside YourWiki/tiddlers/RulesForAutomaticTiddlerGeneration/tiddlywiki.files:

{
	"directories": [
		{
            "path": "../../files/",
            "filesRegExp": "^.*\\.(?:jpg|jpeg|gif|png)$",
            "isTiddlerFile": false,
            "searchSubdirectories": true,
            "fields": {
                "title": { "source": "filepath", "prefix": "files/" },
                "created": {"source": "created"},
                "modified": {"source": "modified"},
                "type": "image/jpeg",
                "parent": { "source": "subdirectories", "prefix": "files/" },
                "text": "",
                "_canonical_uri": { "source": "filepath", "prefix": "files/" }
            }
        },
		{
            "path": "../../files/",
            "filesRegExp": "^.*\\.pdf$",
            "isTiddlerFile": false,
            "searchSubdirectories": true,
            "fields": {
                "title": { "source": "filepath", "prefix": "files/" },
                "created": {"source": "created"},
                "modified": {"source": "modified"},
                "type": "application/pdf",
                "parent": { "source": "subdirectories", "prefix": "files/", "suffix": ".tid" },
                "caption": {"source": "basename-uri-decoded"},
                "text": "",
                "_canonical_uri": { "source": "filepath", "prefix": "files/" }
            }
        }
	]
}

1 Like