Read only mode: how to hide content from tiddler body?

Hi all!

I am using tiddlywiki to host a wiki for my dnd players. I am hosting this wiki using node.js and keep all my notes in it. My players can only view a version of this wiki that is static html file export of the wiki. This way I prevent them from doing edits, and seeing notes that should still be a secret for them.

To keep secrets out of the static file export i used this filter, to write secret info within the tiddler body, so it is part of the text flow for me:

<!-- Text within this list will be hidden in the eport  -->
<$list filter="[<tv-config-toolbar-icons>prefix[yes]]" variable=0>

this is a secret line within the text

</$list>

I think I got this snippet somewhere on this forum. I am also using a filter on the static file export to exclude many tiddlers from being exported, to keep those notes hidden.

My players expressed they they struggle finding stuff, now the wiki is expanding and I am also running into the limits of the static html exports. So ideally I want to keep a interactive version of the wiki that is readonly for my players. And then a edit version of the wiki for myself.

Using https://tiddlywiki.com/#ListenCommand I host the wiki as readonly, and have login credentials for myself to edit it.

Is there a way to then also check the visiters rights to dynamically show content? And ideally part of the tiddler body? So that non logged in users can read only the public parts, and I can keep my hidden notes part of the same wiki?

A very quick and spontaneous idea, as I’m not an expert on that use case, maybe the real experts could chip in on that plan:

  • I imagine there was a way to prevent editing (e.g. hide all New/Edit buttons and those alike), that would give us the readonly part
  • now, you could add a magic tiddler, where you enter a password (for example), which gets stored in a temp tiddler
  • then, you implement your own toolbar edit/new/whatever buttons, by simply putting filters around the standard buttons, with the filter only showing the button if the password matches

I have once done some CSS in a similar way, which hides pretty much of the controls under certain conditions (in my case that was a special class in the surrounding Iframe, but I guess you could make CSS conditional in TW with some clever filtering).

Authentication and readonly is already working out of the box with nodejs, see: https://tiddlywiki.com/#ListenCommand

I am looking for conditionally showing tiddlers and content based on a user being authenticated or not.

I don’t know if my techniques would suit you. It depends on whether you only want to keep the extra information from casually wandering eyes or to ensure it’s not visible to a TW-sophisticated hacker.

Mine only handles the former. But it’s worked well for me across many projects. You can download the following and drag it to a wiki:

ReadOnlySettings.json (4.1 KB)

You will need to save and reload, since there’s a startup action included. This offers a read-only mode and turns it on by default if I’m not running in Node. I can toggle that with the keystroke CTRL-SHIFT-/ (or because that may not work on certain keyboards, with CTRL-SHIFT-1.) So when I build and deploy my wiki to GH Pages or similar, it’s read-only mode, but I can easily toggle into edit mode.

Yes, this is security-by-obscurity. I would not do this if I was worried about someone peeking behind the curtain. But that’s not my concern; it may be yours. Instead, I simply don’t want to confuse users with things that seem to offer them the ability to change but which they can’t update on my read-only servers.

That code really needs to be updated. We discussed this in #12964. It shouldn’t be difficult, but I’ve never gotten back to it. The code works fine for me, though.

I find it a little simpler to write a custom widget to do the same thing:

title: $:/_/my/widget/edit-only
tags: $:/tags/Global

\widget $edit.only()
<% if [{$:/status/IsReaderMode}!match[yes]] %>
<$slot $name="ts-raw" />
<% endif %>
\end

Then it can be used like this:

This is <$edit.only>NOT </$edit.only>in read-only mode. 

<$edit.only>

Handles block mode (if you start with a newline),

[[Links|https://google.com]], and //so on// ''work'' as expected.
</$edit.only>

Read-only

image

Edit mode

image