Methods for Completely Overriding the TiddlyWiki Interface

[tomzheng]

Methods for Completely Overriding the TiddlyWiki Interface

Method One: Create a New Layout

Use a new layout to replace the default TiddlyWiki display.

• Can call TiddlyWiki API: Yes;
• Can execute JS: No;
• Retains TiddlyWiki functionality: Can switch back to default TiddlyWiki interface;

Procedure:

• Create a new tiddler.
• Add the tag: “$:/tags/Layout”
• Edit the tiddler and add the content you want to display. The content format is inline mode wikitext, so you need to use the open tag or transclude block mode or wikify.
• Add a field: name. The field’s value is the layout name. The field description is optional.
• Save and close the tiddler.
• Use the hotkey Ctrl+Shift+L to switch to the newly created layout.

Method Two: RawMarkup

Place the content to be displayed within RawMarkup. RawMarkup allows writing any HTML code, including JavaScript. RawMarkup executes before TiddlyWiki loads.

• Can call TiddlyWiki API: No;
• Can execute JS: Yes;
• Retains TiddlyWiki functionality: Can switch to default TiddlyWiki interface;

Method:

• Create a new tiddler.
• Add tag: “$:/tags/RawMarkup”
• Edit the tiddler and add the content to be displayed.
• Save and close the tiddler.
• Next, make RawMarkup content fill the entire screen.
• Create a new tiddler.
• Add the tag: “$:/tags/Layout”
• Keep the tiddler content empty.
• Add a field: name. The field’s value is the layout name. The field description is optional.
• Save and close the tiddler.
• Save and refresh TiddlyWiki.
• Use the hotkey Ctrl+Shift+L to switch to the newly created layout.

Method Three: Hide all visible TiddlyWiki elements.

Edit the CSS to hide all elements.

• Can call TiddlyWiki API: Yes;
• Can execute JS: No;
• Retains TiddlyWiki functionality: Can switch to default TiddlyWiki interface;

Method:

TiddlyWiki Bare-Bones User Interface - Discussion - Talk TW

Method Four: Remove display-related TiddlyWiki modules.

Remove display-related TiddlyWiki modules.

• Can call TiddlyWiki API: Partially;
• Can execute JS: Yes;
• Retains TiddlyWiki functionality: Partially;

Method:

Separating saver code and filter code from the tiddlywiki code base

Separating saver code and filter code from the tiddlywiki code base The code is here Demo here https://no-ui.tiddlyhost.com Usage Fill in some content. Then click the change button. It will change the content of the tiddler my1. Click the save button. It will save the changes to the site if you are already logged in to tiddlyhost. Visit the following URL to download the page with the changed content. https://no-ui.tiddlyhost.com/download Note I chose the put method in the setup for b…

[tomzheng]

Following this line of thinking, TiddlyWiki can be used solely as a file system or cloud storage.

[btheado]

@tomzheng

Edit the tiddler and add the content you want to display. The content format is HTML, not TiddlyWiki, so you need to convert it using wikify.

What do you mean by this? I’ve created layouts using wiki syntax. The example at
https://tiddlywiki.com/#Alternative%20page%20layouts also shows using wiki syntax.

[tomzheng]

Since you’ve utilized the “core” capability, wikification isn’t required. However, if it’s entirely new content, wikification is necessary.

For example, I currently want a full-screen stream editor. So I can only modify it based on the system’s page template.

[btheado]

Thanks and I still don’t understand. If I follow the steps you list in “Method One” I am able to use wiki syntax. What steps do I need to follow to get “entirely new content” where “wikification is necessary”?

[Peter]

Make sure your layouts have a name and a description - I think both are needed to show up in the layout switcher.

I wonder how the new UI for 5.4.0 is shaping up (or if it’s still planned) - I think this is a great opportunity to spruce up TiddlyWiki!

[TW_Tones]

I have thought about this in the past, by way of comparison to WordPress for which at least in the past was often used as the backend. The value being you can leverage all the code, tools, features plugins and structure

I would have though starting with a reimagining of the page template tiddler which defines a Layout, and addressing which if any of the items tagged $:/tags/PageTemplate or an alternate tag set you have the ability to totally reskin the wiki.

• Personally I would not do it this way but make changes via tips, tricks, plugins and CSS available out there and perhaps include a single tiddler storyView to reskin the wiki to get the result I want but driven by TiddlyWiki Script and wiki text.

The motivation to reskin TiddlyWiki is only valid if at the same time you are leveraging the “TiddlyWiki Platform” otherwise I would go elsewhere.

With all your above examples I think you could tweak it to get yes on every one of the features you list.

[tomzheng]

@CodaCoder Why was it moved back to the discuss category? This topic is primarily of interest to developers.

[tomzheng]

@Peter

Make sure your layouts have a name and a description - I think both are needed to show up in the layout switcher.

If it’s not there, it won’t affect the outcome. I’ll go ahead and refine the topic.

[tomzheng]

@btheado

Thanks and I still don’t understand. If I follow the steps you list in “Method One” I am able to use wiki syntax. What steps do I need to follow to get “entirely new content” where “wikification is necessary”?

I specifically went back to test it again with TiddlyWiki 5.3.8.

Modify the layout, not the page template.

In the code example below, the first |a| displays three characters. Only the second |a| shows the correct result: a table.

title:test
name:test
tag:$:/tags/Layout

|a|

<$wikify name="code" text="|a|" output="html">
<<code>> 
</$wikify>

[tomzheng]

If you want website visitors to be free from any visual distractions, you need to hide all TiddlyWiki interfaces. For example, on a landing page. Or for a specific web application. TiddlyWiki should function solely as a backend editor and data storage solution.

Or trim down TiddlyWiki’s features and completely overhaul its interface. For example, a fully VS Code-inspired interface. For example, one that only allows editing a single Markdown file—no tags, no fields. For example, an editor that fills the entire display area (outline editor, document editor, scalable whiteboard notes). For example, a microblogging app. For example, a Kanban board app. For example, the tiddlywiki shell discussed earlier in the forum.

Below are the clipping capabilities I envision for TiddlyWiki:

I hope TiddlyWiki releases an edition focused solely on file management and writing.

I hope TiddlyWiki releases an edition without any interface.

I hope TiddlyWiki releases an edition with only the saver module.

TiddlyWiki’s tag-based information management, field-based information management, filter query functionality, and wikitext could all be packaged as standalone applications or libraries for users and developers. This would significantly reduce TiddlyWiki’s learning curve.

[TW_Tones]

@tomzheng

I hope TiddlyWiki releases an edition without any interface.

Of course the best person to ask is @jeremyruston

As a person with a deep understanding of tiddlywiki, more as a superuser than a developer, I think we could do this on top of tiddlywiki without removing much, although we can just not use what we don’t want and hide the rest. After all the core is relatively small. I am not against providing an edition like this, but unlike you perhaps I see tiddlywiki as a platform, and I see its advantage being what features it has, its design sensibility, its democratisation of software for the non-developer. Sure I can see value in an alternate front end, but without removing any capacities.

Have you seen the Kanban layout that looks like Trello, or the Muri unrestricted tiddler placement, multi-columns layouts and Streams as an outliner? There is also a branch called feather wiki for a really light version.

I would also argue that the very learning curve one has to do with TiddlyWiki exposes lots of evolved advantages and concepts invaluable to users of a range of skill levels.

• The main element to me is the tiddler, and its unique title is a key to a record placed at eye level to the user, this is where TiddlyWiki gets much of its power.

Not withstanding the above it is true the “non-trivial Quine like self saving nature” is a valuable feature a lot of developers may want to make use of, but saver modules can be read, researched and reused. Yet they only form a very small part of TiddlyWiki (even if necessary). It is an open source project and you don’t need to go looking for the source, it is there for you to read, and reuse.

What is it you want to keep and if it is only the saver, why?

[tomzheng]

Developers sometimes require 100% control over the display space. They don’t want visitors’ attention to be diverted. Nor do they want uncontrolled display styles.

@TW_Tones

What is it you want to keep and if it is only the saver, why?

→

@tomzheng

Following this line of thinking, TiddlyWiki can be used solely as a file system or cloud storage.

[buggyj]

Here is an example showing the layout controlled by preact and tailwind - it is still a tiddlywiki, everything is a tiddler. https://simplifaifullscreen.tiddlyhost.com/

[btheado]

Great, thanks for that example! I’m able to duplicate the issue, whereas I was unable to see the issue with my example.

I had tried with this in the body text and the “main view” text was properly bolded:

Hello world. Hit Ctrl-Shift-L to switch back to ''main view''

Since mine worked and yours didn’t, my guess is that it is an inline vs. block mode issue. See https://tiddlywiki.com/#WikiText%20parser%20mode%3A%20HTML%20examples.

If I change the body text from your example to the following, then both tables get rendered (note the blank line after the opening div):

<div>

|a|

<$wikify name="code" text="|a|" output="html">
<<code>> 
</$wikify>
</div>

The rendering of the page layout must start in inline mode rather than block mode and you have to force it to block mode.

[Charlie_Veniot]

I am a HUGE fan of the approach I use for my TiddlyWiki instances, exemplified by this “Bare Bones Interface” prototype:

https://tiddlywiki-programming.neocities.org/BBUI#Home

[tomzheng]

@buggyj

Here is an example showing the layout controlled by preact and tailwind - it is still a tiddlywiki, everything is a tiddler. https://simplifaifullscreen.tiddlyhost.com/

Was it achieved using one of the four methods I mentioned?

[tomzheng]

@btheado

If I change the body text from your example to the following, then both tables get rendered (note the blank line after the opening div):

<div>

|a|

<$wikify name="code" text="|a|" output="html">
<<code>> 
</$wikify>
</div>

The rendering of the page layout must start in inline mode rather than block mode and you have to force it to block mode.

Yes. It appears the layout is in inline mode. Using <div> can resolve this issue. Alternatively, <$transclude tiddler="abc" mode="block"/> can also resolve this issue.

[tomzheng]

@Charlie_Veniot

I am a HUGE fan of the approach I use for my TiddlyWiki instances, exemplified by this “Bare Bones Interface” prototype:

https://tiddlywiki-programming.neocities.org/BBUI#Home

My third method contained an incorrect link. Thank you. You helped me discover this issue.

[buggyj]

@tomzheng

Was it achieved using one of the four methods I mentioned?

I use a button to switch both the layout and the stylesheet:

<$action-setfield $tiddler="$:/theme" text="$:/themes/bj/cssreset"/>
<$action-setfield $tiddler="$:/layout" text="$:/plugins/bj/simplifai/AiApp"/>