Presenting: static ~ finally share tids with normal people for real

[twMat]

Who da zombie? Mat, after an embarrassing amount of work on this.

…but proudly presenting:

static

This is a small plugin, but IMO it is a game changer for exporting static HTML tiddlers. The plugin makes it practical to export multiple tiddlers because they can presented in categories (by their tags), rather than just showing as a long and overwhelming story river!

Try it out by going there and, first thing, export the seen tiddler. And open the resulting file. Only then go back to the site.

TW was already an engine to produce static websites/documents to publish, email or share otherwise, but with this you can share multiple tiddlers straight from your main wikis with laypeople without confusing them!

Enjoy!

[Springer]

First, please do sleep!

I appreciate all the work here, and may well use it — say, for end-of-semester reports for students, showing an overview of their work, the criteria used for evaluation, etc.

I tried the suggested export, and opened the resulting html. I’ll share two quick observations — both very minor! — about unexpected behaviors:

1. In the titlesbar at left, there’s an X for closing, analogous to what we see in our open sidebar tab. It works… AND visibility can be toggled back on by clicking the X. But it took me a while to realize this, because the button continues to be an X, and clicking on the linky-looking name of the closed (static) tiddler does not restore visibility. So if it’s possible to get the X to toggle into some other shape when tiddler is closed, or otherwise help users recognize how to restore visibility of “closed” (static) tiddler, that would be ideal. (Also, I noticed a few of the tiddler-titles show a grey strike-through when in non-visible “closed” state, while most do not, so that’s just a consistency check on whatever css is happening there. It seems to be single-word tiddler titles showing this effect, multi-word titles lacking the effect.)

2. It’s understandable that tag-pill functions cannot be emulated. But the static html still shows a hover-action (pointing hand) cursor if we hover over a tag pill. This is mildly confusing, since viewer is getting the signal that some kind of click interaction is possible.

Looking forward to exploring more later!

[twMat]

Thanks @Springer , good points.

[…] get the X to toggle into some other shape …
Also, I noticed a few of the tiddler-titles show a grey strike-through when in non-visible “closed” state, while most do not,

Ah, the idea is that the strikeout should signal that the tiddler is closed but if it is buggy then I understnad the confusion. One reason (of a few) for the strikeout was exactly that; what is a good symbol for “open”? We don’t really use one in TW and even if the export is designed with laymen in mind, I can’t think of a subtle enough symbol that would fit in that place. I considered “graying out” the whole title etc but settled on the strikeout … which functions perfectly if you like bugs

It’s understandable that tag-pill functions cannot be emulated.

Actually, with this idea I’m pretty sure they could, but it is beyond my capabilities (because for a regular tag to become something else on export, it would have to be processed in the exporting mechanism itself)

But the static html still shows a hover-action (pointing hand) cursor […]

Fixed now

Thanks.

[twMat]

@Springer

Also, I noticed a few of the tiddler-titles show a grey strike-through when in non-visible “closed” state, while most do not, […] It seems to be single-word tiddler titles showing this effect, multi-word titles lacking the effect.

Hm, actually, this seems to work as intended for me. What system and browser are you using?

[Mohammad]

Hi Mat,
This is truly fantastic; it’s working wonderfully!
The output is user-friendly and can be shared with anyone who has the basic ability to open a webpage.
The next step is to apply some cosmetic enhancements to the sidebar and top bar.

Best wishes

[twMat]

Thanks @Mohammad

The next step is to apply some cosmetic enhancements to the sidebar and top bar.

That is an interesting topic. Do you have ideas?

The aim has been to make it a “skeleton” that people can add stylesheets to, to modify. As noted, the envisioned use is for sharing with non-tiddlywikypeople so I have intentionally wanted the base design to not be very opinionated. Now, obviously, the decision to make tabs definitely breaks that but the alternatives were to style them as tagpills, which is as opinionated and probably less undertsandable for laypeople, or to just let them be floating “tag names” which would be a even more confusing.

But I think the titlebar (the “sidebar”) is almost as plain as it can be though; an open/close button and the title. Do you have other thoughts?

One ambition was to make the layout as hackable as possible. It remains to be seen if I succeeed.

[Mohammad]

I think a small tiddler(s) shall be exported alongside to define the styles for EXPORTED elements!

I did not look at the mechanism you have used! I may have better suggestions when I have a better understanding!

Yes, keep it as simple as possible. The toggle button to hide/show may be improved or replaced with a TOC.

[Birthe]

@Springer

Also, I noticed a few of the tiddler-titles show a grey strike-through when in non-visible “closed” state, while most do not, […] It seems to be single-word tiddler titles showing this effect, multi-word titles lacking the effect.

I see the same. I am using Firefox on Linux.
It works perfectly in your linked wiki - but in the exported static the strikeout only works for one word titles.
What about using an open and closed eye. We do not really open and close those titles - it is see them or not see them.

Thank you for working on this!

[twMat]

@Mohammad

I think a small tiddler(s) shall be exported alongside to define the styles for EXPORTED elements!

I don’t understand what you mean here.

The toggle button to hide/show may be improved or replaced with a TOC.

That’s interesting. As I outline under the “Maybe” tag, I think it would be useful with more static “widgets” - not just for my plugin. Thomas Elmigers Detailswidget is the only one I can think of that works in static. A detailswidget is a simple version of a static accordion which is is pretty close to a ToC. …because you do mean a collapsible ToC, right? Just a ToC is also nice but/and even simpler and there seems to be many solutions.

I’m guessing a collapse widget can be put in a recursion to generate a static ToC. Spontaneously it doesn’t even sound overly difficult ( …but I have been wrong once before in my life)

[twMat]

Birthe! My favourite Dane!

@Birthe

I see the same. I am using Firefox on Linux.
It works perfectly in your linked wiki - but in the exported static the strikeout only works for one word titles.

Aha! In the exported one, how could I not think of that. Than you @Birthe and @Springer - that’s a bug.

What about using an open and closed eye. We do not really open and close those titles - it is see them or not see them.

Ha, that’s the best so far - but I think “closed eye” icons (like in TW) look like, well, “what is that?”

But I think that once I get the strikeout to show properly, it should be much clearer that something is shown/active or not.

[Mohammad]

@twMat

I don’t understand what you mean here.

Here I mean a tiddler contains the styles to be used for exported elements (e.g. tab, toc, heading, etc.)
can be employed. This tiddler contains CSS may not use in TiddlyWiki itself but in the exported page.

Idea behind this: When create static site using TW on node.js, one can use css framework not included in TiddlyWiki like Bootstrap, or Bulma

[TW_Tones]

Nice work @twMat

If we think of tiddlywiki as a smart document, this allows the publishing of sub documents with rudimentary navigation.

• I see why @Mohammad is asking for more styling, and you more widgets being effective.
• Perhaps adding templating to the solution such that when someone does craft a new static representation we can share it as a static template.

@twMat

what is a good symbol for “open”? We don’t really use one in TW and even if the export is designed with laymen in mind, I can’t think of a subtle enough symbol that would fit in that place.

The method we use is make it look like a html link, typically unfollowed vs followed is the internet standard. Perhaps this be used rather than consuming space. one could have he links be red (closed) or Green open? and is necessary amber if unclear?

• This means no layout concerns are introduced that are not in use in the source.

[twMat]

My international team ran some brutal stress testing on the plugin and discovered that clicking on the X didn’t cause the desired striking of the title in static mode (some Einstein had only tested it in dynamic mode - pah!). I must say they are worth every penny I pay them many times over. So I can now present… an update!

static

(is there no way to make those release-links a little bigger? They’re so unremarkable.)

[twMat]

@Mohammad

Here I mean a tiddler contains the styles to be used for exported elements (e.g. tab, toc, heading, etc.)
can be employed. This tiddler contains CSS may not use in TiddlyWiki itself but in the exported page.

Stylesheets - if that is what you’re talking about - are already included when TW exports to Static HTML. In fact, I’m formulating a post about that fact because it is frustrating that all(!) stylesheets are exported by default and that the vanilla ss is so big.

Idea behind this: When create static site using TW on node.js, one can use css framework not included in TiddlyWiki like Bootstrap, or Bulma

That would mean that the “elements” in my plugin would need to have some class attributes with correct classes in them, right? Or how would some, say, bootstrap styles know what to style?

[twMat]

@TW_Tones

The method we use is make it look like a html link, typically unfollowed vs followed is the internet standard. Perhaps this be used rather than consuming space. one could have he links be red (closed) or Green open? and is necessary amber if unclear?

Using colour to signal open/close or on/off is a good idea per se but the context we’re talking about is a button next to the link. The link itself cannot both be a link and a button. So some “thing” is needed nex to it.

[pmario]

@twMat

(is there no way to make those release-links a little bigger? They’re so unremarkable.)

This also works in inline-mode here in the forum: static

<big>[static ](https://static.tiddlyhost.com/)</big>

[DaveGifford]

Applause and thanks

WOW this is fantastic. Thank you for creating this! It solves three issues for me:

1. Creating static packets that aren’t one long vertical html page
2. Facilitating navigation for statics without having to manually add tables of content and html anchors
3. Exporting multiple tiddlers into multiple categories without having to use node.js

I played around with this and here is what I came up with so far: Static experiment 2

Suggested fixes

1. Add a bit of space between the X and the link in the titlesbar by changing your stylesheet to: .static-cbx:before {content:"⨉  ";

2. Make it so that the items in the titlesbar can be displayed by the caption field first, if it exists, and if not, then by the title. That would allow longer titles yet keep the width of the titlesbar smaller. “The literary features of Romans” could appear in the titlesbar as “Literary”, for example.

3. I took the liberty of creating a tiddler $:/plugins/TWaddle/static/StaticTitle.for.Static.Export and then adding the following to the very top of $:/plugins/TWaddle/static/settingspanel:

<$list filter="[title[$:/plugins/TWaddle/static/StaticTitle.for.Static.Export]]"><$transclude field="text" mode="block"/></$list>

This allowed me to add a “Site Title” without interfering with the file’s SiteTitle or subtitle. You might want to do something similar, in a more elegant way than I did.

4. Actually, what gave me the above idea was that my custom TIDDLER subtitle was showing up at the top, above the settings panel. I had to untag it to hide it. You might want to figure out how to hide that by default.

Requests

1. Please tell me how to add my Google fonts to your plugin! I had code in my own customized export tiddlers, but I had to delete those to get your plugin to work. I have my code from Google in a tiddler tagged $:/tags/RawMarkup, and it looks like this.

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100..900&display=swap" rel="stylesheet">

---

[DaveGifford]

One more request

2. How would I add [sort[gorder]] to the list of entries in the titlesbar? (Spanish requires the definite article in a lot of cases, resulting in things out of order, so I use a gorder [giff order] field to order them manually)

[DaveGifford]

No rush. I still think I should organize my statics another way. But thanks for getting me playing all day today!

[twMat]

@DaveGifford - thanks for the praise and for great feedback!

The focus right now is to get the tiddlers (seemingly) regular “close tiddler” button to work. I have found a technique (yay!) but it also makes me remake a few other things. So I will turn to your requests but not at this very moment. Again, thanks for great feedback

…and, in your experiment, your idea to keep a “site title” looks great! And a line under the titles label - pretty!

Regarding Viewtemplates showing up in the export, this is to be expected and I’ve written this explanation on why, and how to remove it. Basically add:

.tc-static-story-river .your-templates-encapsulating-class {display:none;}

…which, in the next update, will be modified to:

.tc-static-story-river :has(.static) .your-templates-encapsulating-class {display:none;}