Static publishing of TiddlyWiki

boris · February 23, 2021, 10:11pm

Speaking with @kilomeow, we’re wondering if it would be possible to do static publishing of a TiddlyWiki on Fission, to a Fission site or folder, within the browser.

This is the starting point we found on the main TW site:
https://tiddlywiki.com/#Generating%20Static%20Sites%20with%20TiddlyWiki

This uses NodeJS. Which non-browser APIs are needed, and would it be possible to make work fully in browser?

boris · February 24, 2021, 4:16pm

@Jermolene please let us know if you’re going to tinker with this. @kilomeow would like to flesh this out into something more proper, so any start would be great.

kilomeow · February 24, 2021, 6:47pm

After little research, I found core/modules/commands/render.js which is repsonsible for producing static html files. The little problem here is that it’s only single tiddler method, but for a start we could just concatenate it.

So given tag blog and specific template we want to do something like:

var tiddlers = $tw.wiki.getTiddlersWithTag("blog");
    result_html = "";

$tw.utils.each(tiddlers,function(title) {
    var parser = wiki.parseTiddler(template),
        variables = {currentTiddler: title};

    var widgetNode = wiki.makeWidget(parser,{variables: variables}),
        container = $tw.fakeDocument.createElement("div");

    widgetNode.render(container,null);

    result_html += container.innerHTML;
}

I don’t know yet if there will be any difficulties if I implement this as a plugin, I’ll give a try

Jermolene · February 24, 2021, 10:03pm

Hi @kilomeow that’s along the right lines. The core JSZip plugin does something similar for rendering static sites into a ZIP file:

github.com

Jermolene/TiddlyWiki5/blob/e84c87ef37e63473e111a37292ceb977eeb87bd2/plugins/tiddlywiki/jszip/startup.js#L39-L55


	$tw.rootWidget.addEventListener("tm-zip-render-file",function(event) {
		var paramObject = event.paramObject || {};
		if(event.param && paramObject.filename && paramObject.template) {
			var zip = loadZipTiddler(event.param),
				outputType = paramObject.output || "text/plain",
				templateTitle = paramObject.template,
				text = $tw.wiki.renderTiddler(outputType,templateTitle,{
					parseAsInline: paramObject.mode === "inline",
					parentWidget: event.widget,
					variables: {
						currentTiddler: paramObject.tiddler
					}
				});
			zip.file(paramObject.filename,text);
			saveZipTiddler(event.param,zip);
		}
	});

Getting a proof of concept up and running shouldn’t be too difficult. I’ll make the TiddlyWiki on Fission repository public in the next couple of days which should make a reasonable test bed for your experiments.

I’d like to get to the point where TW has a “publish” button next to “save changes”, that invokes a generic framework to generate a static site from a sitemap and pushes it to Fission, a ZIP file, or the file system on Node.js.

Jermolene · March 5, 2021, 6:06pm

Hi @kilomeow apologies, it took a little longer than expected, but the repo is now public:

To get the static files stuff working we’d need to add some more event handlers for things like “tm-fission-render” and “tm-fission-publish” here:

github.com

Jermolene/tiddlywiki-on-fission/blob/b3f5f994b28ffb3b4b242c55eefff7d70d9681bf/app-wiki/plugins/tiddlywiki-on-fission/startup.js#L44-L87


      
          	$tw.rootWidget.addEventListener("tm-fission-authorise",function(event) {
          		if(self.permissions) {
          		  self.webnative.redirectToLobby(self.permissions);
          		}
          		return false;
          	});
          	$tw.rootWidget.addEventListener("tm-fission-list-directory",function(event) {
          		if(self.fs && self.permissions) {
          			const userFilepath = event.param, // The filepath seen by users (private is relative to app folder)
          				realFilepath = self.convertUserFilepath(event.param); // The read underlying absolute filepath
          			self.fs.ls(realFilepath).then(function(data) {
          				$tw.utils.each(Object.keys(data),function(name) {
          					var info = data[name];
          					$tw.wiki.addTiddler({
          						title: "$:/temp/fission/filesystem/" + userFilepath + "/" + name,
          						tags: "$:/tags/FissionFileListing",
          						parent: userFilepath,
          						name: name,
          						path: userFilepath + "/" + name,
          						created: info.mtime ? $tw.utils.stringifyDate(new Date(info.mtime)) : undefined,

This file has been truncated. show original

kilomeow · March 10, 2021, 10:50pm

The very early version of the FissionPublisher plugin is available! Check out the demo.
At the moment it allows you to simply export tidlers with the desired tag as a static html:
Screenshot_2021-03-10 Fission powered blog(1)

There is still a lot of work to do - add the export of tiddlers as separate pages, add links between, a disqus/commento/whatever comments under the posts. I want to look a bit more how is done Anne-Laure’s digital garden (and disassemble JSZip core plugin).

However my next will be towards webnative – let’s try to create new fission application from tiddlywiki based on @Jermolene developments.

boris · March 10, 2021, 10:51pm

Ammmmaaaazzzziiinnnnnnng!

Great job @kilomeow – so stoked to see this! I’m going to try it out right away.

boris · March 10, 2021, 11:15pm

OK, I wrote up how to install, using my public TiddlyWiki, of course!

@kilomeow has a version up at https://charming-senior-teal-griffin.fission.app/

kilomeow · April 9, 2021, 3:03pm

Hello @Jermolene ! There have been several updates in the TW on Fission since our last talk. It is noticeable that you added a static publishing edition and also some new functions for publishing. I want to finish my publishing plugin to get it work with Fission in a way that it will create individual fission app and publish blog content there. What is preferred next step? Add tm-fission-create-app and tm-fission-publish to startup.js or work on fission-publisher.js ?

kilomeow · April 9, 2021, 3:21pm

Also after James talk on Stork I think it’s must have to enable Stork as a search option for a static published websites on Fission. Specifically Stork’s index building could be included to publishing process and client-side js/wasm just bundled to the blog template.