Simple solution for an online read-only TW

[telumire]

A fair warning (thanks @Charlie_Veniot !) : this cannot prevent anyone from downloading your wiki (ctrl-S), or making it appear like your TiddlyWiki at that URL contains content that it doesn’t actually have (using the browser developer tools for example).
If your goal is to prevent users from accidentally messing with your wiki or to remove clutter from the UI, this is good enough, but a true read-only wiki would require a much more complex solution (if at all possible).

Since TW 5.1.14, there is an easy way to check if the wiki is online or served locally, thanks to the InfoMechanism :

This wiki is {{{ [{$:/info/url/protocol}match[file:]then[local]else[online]] }}}.

Using this, we can hide the edit buttons only when the protocol isn’t file:, with CSS.

Create a tiddler with the tag $:/tags/Stylesheet, then copy/paste the following wikitext:

<$reveal type="match" default={{{ [{$:/info/url/protocol}match[file:]] }}} text="">
button:is(
[aria-label="edit"],
[aria-label="delete"],
[aria-label*="new"],
[aria-label="clone"],
[aria-label="set"] ) {
  display:none;
}
</$reveal>

When the url protocol doesn’t match file:, thus when your wiki is online, the CSS above hide all the buttons with the specified aria-label. *= means that if there is the word “new” somewhere inside the aria label, then it must be hidden. That way we can hide both the new tiddler and new journal buttons. Learn more about CSS selectors here.

If you want to make your wiki editable when run in safe mode, use this filter instead :

{{{[[TiddlyWiki Safe Mode]is[tiddler]][{$:/info/url/protocol}match[file:]]}}}

You can also use $:/status/IsLoggedIn if applicable. See https://tiddlywiki.com/#WidgetMessage%3A%20tm-login

Maybe this is common knowledge, but since I’ve struggled for a bit to find a solution and the one I found involved using a plugin, I thought this may be helpful for others

Online demo : TiddlyTweaks — Small tweaks for TiddlyWiki

This trick could also be used to set a “reader” layout on startup using the tag $:/tags/StartupAction/Browser

---

More steps you can do to restrict your wiki :

Disable Drag and Drop

Set $:/config/DragAndDrop/Enable to no to prevent users from drag&dropping tiddlers in the wiki.

[SuzyM]

Hi, this looks interesting - but how exactly is it implemented? Is the CSS saved by itself as a tiddler?

[Scot]

Hi @SuzyM
If you copy and paste this into a tiddler in your tiddlywiki, call it something like Hide

<$reveal type="match" default={{{[[TiddlyWiki Safe Mode]is[tiddler]][{$:/info/url/protocol}match[file:]]}}} text="">
button:is( 
[aria-label*="edit"],
[aria-label*="delete"],
[aria-label*="new"],
[aria-label*="clone"],
[aria-label*="save"],
[aria-label*="set"],
[aria-label*="GitHub perma"],
[aria-label*="Toggle"]
){
display:none;
}
</$reveal>

https://telumire.be/TiddlyTweaks/index.html#:[[Check%20if%20the%20wiki%20is%20local%20or%20online]][[%24:/ThemeTweaks/style/read-only]]

Import the Tiddler $:/ThemeTweaks/style/read-only to your tiddlywiki
Then if your tiddlywiki is online, it will hide the buttons

Scot

[Charlie_Veniot]

This is a very cool implementation of read-only.

It would be good to remind all that this cannot prevent anyone from downloading your wiki, or making it appear like your TiddlyWiki at that URL contains content that it doesn’t actually have.

For the giggles, I altered the Index screen to have the image as per screenshot below (yes, that’s one of my favourite movies.)

[telumire]

Note that the lines

[aria-label*="GitHub perma"],
[aria-label*="Toggle"]

are only useful if you use the following tweaks : SaveToGitHub, spoiler and tasker.

@SuzyM : To add to what @Scot said ; the tiddler in which you copy/paste the wikitext must have the tag $:/tags/Stylesheet. I should have mentioned it, it is now fixed. Thanks for your feedback !

@Charlie_Veniot

It would be good to remind all that this cannot prevent anyone from downloading your wiki, or making it appear like your TiddlyWiki at that URL contains content that it doesn’t actually have.

You’re absolutely right!

I dont think there is any way to stop someone really determined to download and edit a tiddlywiki since it’s all contained inside one html file - That’s why IMO using CSS is good enough : it’s just to prevent users from accidentally messing with the wiki.

A good example is this (absolutely beautiful) website, made with tiddlywiki : https://atlas-disciplines.unige.ch/
They did a complete overall of the TW UI, but it’s very easy to access the original layout and make changes:
simply load the website from Interactive Historical Atlas of the Disciplines — University of Geneva !

And that’s only using build-in tw features, there are plenty of other ways to do it.

Not everyone might know that though, so I will add your warning both to my website and this post. Thanks !

[Charlie_Veniot]

@telumire

I dont think there is any way to stop someone really determined

It doesn’t require much determination. Basic understanding of how TiddlyWiki works, and away you go!

Read-only is quite awesome to remove all of the “noise” (i.e. distractions) of the TiddlyWiki interface when just reading/browsing/searching.

As long as nobody thinks for a second that “read-only” in the sense of “secure content” is ever possible.

[Springer]

Hey Telumire and all:
Is there a variation on this solution that can track the difference between my own (password-verified) access to tiddlyhost or github sites (over https), and the served-up version that visitors get – or that I get when I’m not authenticated?
-Springer

[telumire]

@Springer I didnt found a build-in way to check if a user is logged-in on tiddlyhost with wikitext, but I have some ideas on how to go about it :

• Get the server status with the WebServer API : read_only will be set to false if the user is logged in. This will require javascript, I’m not sure how to go from there…
• Create a button that prompt the user to log-in with the tm-login message, this will create the tiddler $:/status/IsLoggedIn which can then be used as a condition to display the buttons. If you use GithubPage, this tiddler should already exist.
• Since this method is not secure at all anyway, you can simply create a tiddler begining with $:/, and put inside a button that toggle the read-only mode. That way this tiddler will not be listed and cant be found unless you search for it. You could also add this button in the “more” dropdown of the page toolbar, to hide it from view but still access it quickly.
• Use the encrypt widget to create a password protected tiddler which once decrypted allows to edit the wiki
• Call a macro in a url parameter that disable the “read-only” mode by creating a state tiddler for the duration of the session, this way you can create a shortcut to your wiki in edit-mode (not sure if this is possible, I’m testing this). EDIT : While it’s possible to use macro in a filter run, I didnt found out how to edit a tiddler that way.
• Check if a named tiddler is open in the story to disable the read-only mode. E.g : {{{ [<tv-story-list>contains:list[$:/read-only-off]then[yes]else[no]] }}}. You can hide the tiddler $:/read-only-off with CSS :

<style>
[data-tiddler-title="<$text text="$:/read-only-off"/>"]{
display:none;
}
</style>

Then when you want to open your wiki in edit mode, use the link https://your-wiki.tiddlyhost.com/#:$:/read-only-off. Here’s a demo : Read only TW — experiment for a read only wiki hosted on tiddlyhost