Tips for using TiddlyWiki to publish static htmls

[David Gifford]

Hi all

On Friday morning I woke up with energy for the first time in a couple weeks, at least, and had several epiphanies, most of which had to do with TiddlyWiki. I then went to work yesterday (Fri) and today (Sat) and came up with an easier way to use TiddlyWiki to publish a large wiki-like web of static htmls. Here are a couple things I learned along the way:

1. Flipping title field and showname field

The thought occurred to me that I could add another field to my tiddlers, which I called showname. I tagged it $:/tags/ViewTemplate, and pasted it high up in the list field of $:/tags/ViewTemplate. Then I removed the $:/tags/ViewTemplate tag from $:/core/ui/ViewTemplate/title.

What does this do? In edit mode, I use the title field to paste the file name for the static html to be produced from this tiddler. That way when I export to static html, the filename is what shows up in the prompt that appears to ask me where to save the file, so I don't need to go back and rename the saved file. I use the showname field for the title I want the user to see when viewing the static (and for me when viewing the tiddler in the standalone TW). The added advantage to this is that if I change the tiddler 'title', I don't need to change all the links in other tiddlers that link to this file. They still link to the filename in the title field.

2. Toggling edit stylesheet and publish stylesheet

One thing that has happened to me in the past is that when creating a tiddlywiki for publishing that is more like a true wiki, with lots of hyperlinks, is that I find it hard to mark my progress - In tiddler A want to add links to tiddler B that doesn't exist yet, but I am not ready to actually create tiddler B and add content. I just want to focus on tiddler A.

So I created two almost identical stylesheets. The editing stylesheet shows yellow highlights I put around unfinished items, shows dark orange text I use to leave myself notes about what to do next, what sources to investigate, etc, and shows missing links in gray. The publishing stylesheet has a 'display none' CSS for the highlights and my orange notes, and displays missing links as the same color as the body text.

3. Buttons for links

Since the links are to filenames, I need pretty links for everything. So I created buttons, one to wrap filenames with a pretty external link to a file in the same folder (I use one folder per topic / TW file), and another button for pretty external links to files in a different folder.

4. Display macro

I thought the display macro would not work with static html, but it works great, so I use it to condense longer indexes of links. Very nice tool.

I am using these statics at our main site (http://www.giffmex.org) and at a new site I am experimenting with for Spanish materials at http://articulos.giffmex.org.

This system is pretty fast, and basically will turn my articulos site into a large wiki like site of interlocking statics, without needing to know node.js or github. (maybe I should call it giffipedia...)

Just wanted to float these ideas around in case they help anyone who might also be using or wanting to use TW for static site generation, but who don't want to learn node.js and Github.

Blessings

Dave

[Mat]

David. you're always so generous in sharing your use cases and reasoning. Much appreciated.

Reading the post it's interesting to ponder how I'd approach the needs. I'm sure there are subtleties in your own solutions that might make them preferable for you, so here are my own ideas to, if nothing else, confirm that your own are better for your own specific case;

1. Flipping title field and showname field

Assuming the dynamic and the static versions have different URL's, you can use a conditional viewtemplate (e.g grand TWizard @Tobias has a writeup on that) that shows name depending on url. URL can be detected using Buggy J's location macro, that I use in e.g Public Sidebar.

With conditional templates you could probably even do it so that it shows you the static title as a textwidget editor, i.e in viewmode,perhaps just below the regular title, so that it can be easily edited. And in static, the normal title is hidden and the static title shows instead using regular title formatting.

2. Toggling edit stylesheet and publish stylesheet

 

[...] add links to tiddler B that doesn't exist yet, but I am not ready to actually create tiddler B and add content. I just want to focus on tiddler A.

This is a prime reason why the @ttention plugin was made. It lets you add content to other tids, regardless if those other tids exist or not.

(I just realized that just maybe I should extend it so that one could add tags to that other tid too...)

3. Buttons for links

Since the links are to filenames, I need pretty links for everything. So I created buttons, one to wrap filenames [...]

I recall grand TWizard @Eric describing on the boards some setup that lets you use relative paths involving a fallback when there is no file. Something along those lines. I wouldn't be surprised if the other grand TWizard @Tobias has picked up on it and poblished something. (Yes, poblished = polish + publish ;-)

4. Display macro

I thought the display macro would not work with static html, but it works great, so I use it to condense longer indexes of links. Very nice tool.

Appreciated if you add some clue to where the "display macro" can be found? I rings a bell as if it is something recent from one of the rising tiddly stars in the community (you know who you are guys! ;-) but a quick search on the boards didn't give me anything.

I am using these statics at our main site (http://www.giffmex.org)

What a sweet looking family!!!! ;-)


<:-)

[David Gifford]

Hi Mat

Thanks for your replies.

Here are some thoughts:

1. Regarding your alternative solution to my flipping the title and showname fields, yes, I figured there were probably eight other ways to do the same. TiddlyWiki is like that...it is hard for me to picture what your solution does (not a defect of your solution but of my imagination), so I will just say that my version gives me what I need: control to make file names short, while still seeing a more natural tiddler title; a way to avoid renaming all links to a file if the tiddler title changes. If there were a tangible advantage to doing it another way, I would be open to try it.

2. Thanks for the link to the @ttention plugin, that is great, I had not seen that. Very similar to what I mentioned. I can picture myself using that, and have bookmarked it. Usually when I add a link to a non existent tiddler, though, I don't want to write anything for it, I just want to have a reference to it. Also, I have a question (without having tried it out): Is what you write in the originating tiddler still visible there after you save it? Seems like it would clutter the originating tiddler unnecessarily if it didn't automatically hide the information for the second tiddler.

3. I am not sure what you are referring to about what Eric or Tobias wrote up. I should note that my link buttons do use relative paths to wrap the filename:

If in same folder:

[ext[|./    +     filename to be wrapped     +    .html]]

If in different folder:

[ext[|../FOLDER/    +     filename to be wrapped     +    .html]]

4. Sorry, I was in a hurry when I finished this last night since the family needed my computer to play the movie Arrival which we rented. It was not called the 'display macro' but the 'details widget' and the link is http://tid.li/tw5/hacks.html#DetailsWidget:DetailsWidget%20[[Details%20Basic%20Examples]]%20[[Details%20Advanced%20Examples]], created by the new and prolific TWizard Thomas Elmiger.

5. Thanks for the compliment about my family. I love 'em!

Dave

[Mat]

2. [...] @ttention plugin, [...] Is what you write in the originating tiddler still visible there after you save it? Seems like it would clutter the originating tiddler unnecessarily if it didn't automatically hide the information for the second tiddler.

Currently, yes, it stays. I have not considered that aspect but it is a good one.
 

The other matters, good you have them solved :-)

<:-)