It works ok as is, I would just rather not have visitors see things that they can click but can’t actually use.
Currently running as a single-file instance on my laptop, but would it be easier to run a node.js version for this purpose?
1 Like
If I understand this, and I may not, I use macros that run on startup, to determine what to show and what to hide. These macro use URL parameters to determine this. A common parameter I use is mode. Mode can be edit, where default is readonly.
Eg
tw.html?mode=edit
Here’s a startup action I made to hide buttons when accessing the wiki in view mode : Read only TW — experiment for a read only wiki hosted on tiddlyhost
<$tiddler tiddler="$:/StartupAction/ReadOnly">
<$list filter="
[[TiddlyWiki Safe Mode]is[tiddler]]
[{$:/status/IsLoggedIn}match[yes]]
[{$:/info/url/protocol}match[file:]]
+[then[show]else[hide]]" variable="visibility">
<$list filter="[list[!!config-visibility]]" variable=buttons>
<$list filter="[<currentTiddler>get<buttons>enlist-input[]]" variable="button">
<$action-setfield $tiddler={{{ $:/config/[<buttons>]/Visibility/[<button>]+[join[]] }}} text=<<visibility>> />
</$list>
</$list>
</$list>
</$tiddler>
With the fields
| title | $:/StartupAction/ReadOnly |
| config-visibility | PageControlButtons ViewToolbarButtons |
| PageControlButtons | $:/core/ui/Buttons/save-wiki |
| tags | $:/tags/StartupAction |
| ViewToolbarButtons | $:/core/ui/Buttons/edit $:/core/ui/Buttons/more-tiddler-actions |
If any of the following is true :
- The wiki is in safe mode
- $:/status/IsLoggedIn text is set to “yes”
- The url protocol match “:file” ( = single file tiddlywiki open in the browser locally)
Then the buttons matching the tiddlers in the field ViewToolbarButtons and PageControlButtons will be displayed, else they will be hidden.
EDIT: clarified the code snippet and improved the filter. If you want help to adapt this code to hide other parts of the ui (e.g. the sidebar tabs), let me know
I push my single-page html file to GitHub, which is then opened by Netlify. Do either of these solutions work in this particular case? I don’t log in and edit online, just locally.
Yes it should. Since you are editing your wiki offline,
[{$:/info/url/protocol}match[file:]]
should match on your side but not on netflify. Maybe you will need to remove this part from the filter :
[{$:/status/IsLoggedIn}match[yes]]
In case the github saver set your status as logged in and upload it to github.
But I’m not sure, you should test it out 
1 Like
Telumire,
This is a very helpful solution for me.
I certainly would be grateful if you’d share the quick way to expand your solution to hide the TW-author-oriented sidebar tabs.
I suspect a good many novice users would love to have a version of this that is even more GUI-friendly (say, as an add-in to the Control Panel, with checkboxes for the various buttons that could be toggled, as well as tabs). After all, a person might be a very serious public content-creator on tiddlyhost without having much confidence with TW technicalities.
Meanwhile, as a solution for those who don’t mind tinkering, this single-tiddler solution is fantastic.
I will second that!
I did finally manage to figure out how to import then configure your StartupAction to show only the Home and Light/Dark-mode buttons. But I do also want to eliminate the tabs as well…
@Springer, @dixonge Here it is :
<$tiddler tiddler="$:/StartupAction/ReadOnly">
<$list filter="
[[TiddlyWiki Safe Mode]is[tiddler]]
[{$:/status/IsLoggedIn}match[yes]]
[{$:/info/url/protocol}match[file:]]
[{$:/info/url/hostname}match[localhost]]
+[then[show]else[hide]]
" variable="visibility">
<$list filter="[list[!!config-visibility]]" variable="UI-elements">
<$list filter="[<currentTiddler>get<UI-elements>enlist-input[]]" variable="UI-element">
<!-- config visibility -->
<$list filter="[<UI-elements>search:title[Buttons]]" variable=_>
<$action-setfield $tiddler={{{ $:/config/[<UI-elements>]/Visibility/[<UI-element>]+[join[]] }}} text=<<visibility>> />
</$list>
<!-- toggle tags -->
<$list filter="[<UI-elements>search:title[tabs]]:filter[<visibility>match[hide]]" variable="_" >
<$action-listops $tiddler=<<UI-element>> $tags="+[remove[$:/tags/SideBar]]" />
</$list>
<$list filter="[<UI-elements>search:title[tabs]]:filter[<visibility>match[show]]" variable="_" >
<$action-listops $tiddler=<<UI-element>> $tags="+[append[$:/tags/SideBar]]" />
</$list>
</$list>
</$list>
<$action-setfield $tiddler="$:/state/tab/sidebar--595412856" text={{{ $:/tags/SideBar +[tagging[]nth[1]] }}}/>
</$list>
</$tiddler>
fields :
-
config-visibility: PageControlButtons ViewToolbarButtons SideBarSegments/tabs -
PageControlButtons: $:/core/ui/Buttons/save-wiki -
SideBarSegments/tabs: $:/core/ui/SideBar/Recent $:/core/ui/SideBar/Tools $:/core/ui/SideBar/More -
ViewToolbarButtons: $:/core/ui/Buttons/edit $:/core/ui/Buttons/more-tiddler-actions
ReadOnly.json (2.0 KB)
Thanks so much @telumire! Extremely helpful. Now if I can just figure out which tiddler to use to hide the Advanced Search button…
1 Like
@dixonge the tag that places items on the side bar is $:/tags/SideBarSegment. use <<tag $:/tags/SideBarSegment>> in a tiddler to get a tag pill.
From this we can see the sidfebar search is in $:/core/ui/SideBarSegments/search inside that you will see the following;
<$button to="$:/AdvancedSearch" tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
{{$:/core/images/advanced-search-button}}
</$button>
from which you could delete the above and clone make your own version, removing the $:/tags/SideBarSegment from the original and more…
1 Like
Very helpful, thanks. For now i just commented out the advanced search button code segment. Works for my purposes, at least temporarily.
Oops! That also hides it on my local instance. Will have to think more about this one…
Update: good ol’ CSS does the trick!
ah crap. OK, need to figure out how to add the CSS to the StartupAction I guess 
Done
ReadOnly.json (5.8 KB)
And it’s now accessible from the control panel.
I added a edit-text widget for custom CSS rules :
You can test it here :
https://read-only.tiddlyhost.com/#%24%3A%2FReadOnly
EDIT: Hold on, dont use this yet - the way I did it, all unchecked buttons will be displayed on the toolbars on startup. It’s a bit annoying but it shouldnt be too hard to fix…
EDIT2: It should be fine now, let me know if you encounter any issue.
EDIT3: now you can toggle the edit mode on and off with a checkbox (useful for testing and if you want to allow people to download then edit the wiki):
<$checkbox
tiddler="$:/status/IsLoggedIn"
field="text"
checked="yes"
actions={{$:/ReadOnly}}
/>
EDIT4: forgot to close a style tag
1 Like
Nice work @telumire I have build some custom toolbars in the past and they can be very useful, although it can be a little time consuming to do so.
I note in your $:/ReadOnly that you are using local fields to iterate ViewToolbarButtons, PageControlButtons and SideBarSegments/tabs. Which is great.
However I just wanted to suggest a “Code Pattern” to use, you may want to consider in future solutions, although not necessarily essential to this solution, This is a code pattern I need to remind myself of as well.
For example, I see you use the hard coded filter ‘[[$:/tags/ViewToolbar]tagging[]]’ to populate this toggle list.
<$macrocall $name="toggle-visibility" filter="[[$:/tags/ViewToolbar]tagging[]]" field="ViewToolbarButtons"/>
A design pattern to use is, the subfilter, to use a filter/list, So alternatively one could create a field or config tiddler ViewToolbarButtons-filterand rewrite the above as;
<$macrocall $name="toggle-visibility" filter="[subfilter{!!ViewToolbarButtons-filter}]" field="ViewToolbarButtons"/>then to duplicate the current behaviour of your solution set ViewToolbarButtons-filter to [[$:/tags/ViewToolbar]tagging[]]
The key advantage of this approach is, using a subfilter allows the “parameter” to be either or both a list of titles OR a filter, or set of filters. The final code will be even simpler with the release of version 5.2.3, because of changes to the checkbox widget to use the listField parameter. Using a subfilter allows;
- You can simply add a single tiddler to the ViewToolbarButtons-filter
- You can add a filter to ViewToolbarButtons-filter
- this includes
-[[tiddlername]]for exceptions - or
+[sort[]]to reorder
- this includes
- this allows the configuration to rule in out, include/exclude and other useful alternatives via the power of filters.
Oh that’s good to know, it’s a very neat feature !
I understand how using a subfilter can be useful but in this case I dont think it would simplify the code ? Thanks for the tip though, I’ll use it later
Agreed, but this was a good opportunity to illustrate the alternative code pattern, if not entirely relevant here.
Your Read only solution is marvellous @telumire
1 Like
I switched to the new version, added a piece of CSS (one extra thing I wanted to hide) and it is working fine.
However, it does not take into account any sidebar tabs added by other plugins. Any easy way to do that? In my case I decided to delete those plugins as I’m not using those features, but could be useful…
1 Like
This is because I choose to search for tiddlers beginning with “$:/core/ui/SideBar”
[all[tiddlers+shadows]search:title:anchored[$:/core/ui/SideBar/]]
When I should have searched for tiddlers with the tag “$:/tags/SideBar”
[[$:/tags/SideBar]tagging[]]
I corrected it, let me know if it works :
- Online demo
- ReadOnly.json (5.8 KB)
EDIT: Updated to keep listing the sidebar tags in the read-only UI while in read-only mode
May have to wait - working for now so I can’t test it until I fire up a new TW at some point.
ok, so I tried this and it still doesn’t pick up any Sidebar tabs from plugins.
One other question: trying to move away from TiddlyDesktop, but when I open the wikifile directly in the browser (via localhost using WebDavNav) it sets it to read-only mode. How can I turn this off for localhost?
UPDATE: fixed it - changed the word ‘localhost’ to the actual IP address I’m using w/ WebDAVNav and it allows me to stay in edit mode and saving does not prompt for a download so that part works fine. Plugin sidebar tabs is still an issue.