A Show'nTell: an evolving approach for TiddlyWiki "reader view(?)"

[Charlie Veniot]

G'day,

Just an FYI about my ever-evolving approach to presenting TiddlyWiki's, by default, in "reader view(?)", with alternative "normal TiddlyWiki view" available via toggling.

• by "reader view" (internal debate on-going about that label), I mean hiding much of what looks like TiddlyWiki interface features, without getting into anything too fancy
• for toggling, I went with no-fuss-no-muss open/close of the sidebar as the toggle for showing/hiding TiddlyWiki interface features

To get the Full Monty experience of what I mean check out the before and after (still very much a work in progress) of my Le P'tit Aurèle:

• my now deprecated version without "reader view"
• the new going-forward version with "reader view" at startup

I guess the mission is: how do I setup the kind of structure that makes for easy/simple navigation to a lot of content without getting lost, while still making it easy to access the full-features of TiddlyWiki for custom digging into the content?

Something like that.

Cheers !

[Ste]

That's looking really good. There have been several read only plugins in the past (I used one on one of my presentations and now camt remember what it was so I can undo it!). It certainly looks cleaner and less cluttered in your new version. 

[TiddlyTweeter]

cj.v...@gmail.com wrote:

To get the Full Monty ...

• the new going-forward version with "reader view" at startup

I guess the mission is: how do I setup the kind of structure that makes for easy/simple navigation to a lot of content without getting lost ... while still making it easy to access the full-features of TiddlyWiki for custom digging into the content?

Ha! Very nice. 

The way it integrates with Google Docs is great! 

As are the pop-out windows for individual words!

Regarding your question "easy/simple navigation to a lot of content without getting lost ..."  I think you mastered the TW tech side of it really well.

The thing is very rich and issues are, from my POV, really about visual information design for purpose. 

I think it would be fine once a user clicked through a few of the many menu items. 

Small neg. comment: it is not ideal visually on mobile. If you want specific comments on that let me know.

But its a true Full Monty.

Best wishes, TT

 

[Charlie Veniot]

"Distraction-free reading" ?  Just did a quick search of the web, and "Reader Mode" seems like the right way to go.

Yeah, I get caught up in wording ...

[Charlie Veniot]

Yeah, responsive web design in on my noggin'.

My next major refactoring job: a new form for entering data and providing presentation layout.  With responsive web design in mind.

Then responsive web design throughout.

Well, "good enough" responsive web design, so that I can get back to adding content.  I've put that aside for way too long.

[TiddlyTweeter]

cj.v...@gmail.com wrote:

Yeah, responsive web design in on my noggin'.

It is certain NOGGIN THE NOG may help :-) NOGGIN THE NOG.

TT

[David Gifford]

How do I reconfigure my firewall so I can open these sites?

[Charlie Veniot]

Yeah, your network, or your computer, is blocking access to anything on neocities.com

Kind of makes sense because I'm sure there are sites hosted on there that are nefarious.

I suppose first things first is to figure out if it is your device or your network infrastructure (at work?)

[Eric Shulman]

On Friday, June 11, 2021 at 6:51:15 PM UTC-7 cj.v...@gmail.com wrote:

• by "reader view" (internal debate on-going about that label), I mean hiding much of what looks like TiddlyWiki interface features, without getting into anything too fancy
• for toggling, I went with no-fuss-no-muss open/close of the sidebar as the toggle for showing/hiding TiddlyWiki interface features

In my "Inside TiddlyWiki" book project (http://tiddlytools.com/InsideTW), I defined a stylesheet (TiddlyTools/ReadOnly/Stylesheet) that uses a configuration tiddler ($:/config/TiddlyTools/ReadOnly) to toggle the interface display between "readertools" and "authortools":

\define readonly() $:/config/TiddlyTools/ReadOnly

<pre>

<$reveal type="match" text="yes" state=<<readonly>>>

   .authortools { display:none; }

   .readertools { display:inline; }

   .tc-topbar-right .tc-btn-invisible { visibility:hidden; } /* HIDE SIDEBAR BUTTON */ 

</$reveal>

<$reveal type="nomatch" text="yes" state=<<readonly>>>

   .authortools { display:inline; }

   .readertools { display:none; }

</$reveal>

</pre>

Next,  I defined a tiddler (TiddlyTools/ReadOnly) that displays a "locked/unlocked" button to toggle the read-only configuration setting:

\define readonly() $:/config/TiddlyTools/ReadOnly

\define sidebar()  $:/state/sidebar

<$reveal type="match" text="yes" state=<<readonly>>>

<$button class="tt-button"

   tooltip="unlock this document (allow editing)">

   <$action-setfield $tiddler=<<readonly>> text="no"/>

   {{$:/core/images/locked-padlock}}

</$button></$reveal>

<$reveal type="nomatch" text="yes" state=<<readonly>>>

<$button class="tt-button"

   tooltip="lock this document (disable editing)">

   <$action-setfield $tiddler=<<readonly>> text="yes"/>

   <$action-setfield $tiddler=<<sidebar>>  text="no"/>

   {{$:/core/images/unlocked-padlock}}

</$button></$reveal>

Then, wherever I want controls (or content) that should only appear in authormode, I wrap those controls in @@.authortools ... @@ and wherever I want controls (or content) that should only appear in readermode, I wrap those controls in @@.readertools ... @@. All other controls/content appear normally, regardless of the current authormode/readermode setting.  Note that the toggle button for the standard TiddlyWiki sidebar is automatically hidden when in readermode.

how do I setup the kind of structure that makes for easy/simple navigation to a lot of content without getting lost, while still making it easy to access the full-features of TiddlyWiki for custom digging into the content?

I've also created several mechanisms to facilitate navigation throughout the "TiddlyBook" interface:

* TiddlyTools/SlideBars enables content to "slide" out from the sides of the browser window.  I use this interface to show a customized TOC (Table of Contents) tree navigation that highlights to tiddler topic you are currently viewing (note: TiddlyBook uses "zoomin" display mode so only one tiddler is shown at any given time).  The TOC also provides an "expand/collapse all" button (upper left corner) to quickly view/hide the entire TOC tree, and a "you are here" display (below the TOC tree) to show the title of the topic you are currently viewing with "permalink" and "toggle favorite" buttons (see below).

* TiddlyTools/NavBar/Top is a replacement for the standard TiddlyWiki titlebar, and includes buttons for navigating to related tiddlers, based on the TOC structure, as well as a "navbar path" that shows links to the hierarchical path from the TOC tree "root" to the current tiddler.

* TiddlyTools/NavBar/Bottom adds navigation at the bottom of each tiddler that let's you move sequentially through a list of all topics in the TOC tree.  It also adds a "Chapters" popup that links to each book chapter as well as an "Appendix" popup that links to topics in the Appendix section of the book.

* TiddlyTools/History provides a button ("clock" icon displayed in the NavBar/Top) and popup to list links to the current contents of the $:/HistoryList maintained by the TWCore.  The popup lets you quickly navigate to any item in the $:/HistoryList.  The NavBar/Top also shows "Next" and "Previous" buttons ("double chevron" icons) to navigate through the items in $:/HistoryList with just a single click.   There is also a "delete" button in the History popup that lets you instantly clear the entire History list (except for the currently viewed item and the TiddlyBook "CoverPage").

* TiddlyBook/Favorites manages a list of "starred" topics, stored as an indexed tiddler, $:/config/TiddlyBook/Favorites.  The NavBar/Top also includes TiddlyBook/Favorites/ToggleFavorite to show a "star" button that you can click to add/remove the current topic from the list of Favorites.  The Favorites list is automatically saved to a *cookie* (using macros defined by TiddlyTools/Cookies/*.js code and invoked by TiddlyBook/CookieJar).  This allows visitors to the online "InsideTiddlyWiki" book to maintain their own set of Favorites that is automatically re-loaded when they visit the site.  (Note that, due to browser security restrictions, cookies only work for online documents delivered via http or https).

* TiddlyBook/Search provides a button and popup that lets you quickly search through the title/caption/text of only the "topic tiddlers" that are included in the TOC tree (i.e., excluding all the "internal" utilities and interface components).

Perhaps sometime soon, depending on community interest, I will host a Google Meet session to provide a comprehensive "walkthrough" and demonstration of the entire TiddlyBook interface.

-e

[Télumire]

Just a head up, I've spotted a typo : " Acceuil" --> "Accueil"
Great work on the UI btw !

[Charlie Veniot]

Oops, I mean neocities.org !

[Charlie Veniot]

Ah marde.  Merci !  Good eye!

Very much appreciated, although:  Lord that's depressing ...

[Charlie Veniot]

I am in "deuil" (mourning) over my misspelled "accueil".

One of the beauties of the French language:  the "euil" of deuil and the "cueil" of "accueil" have the same sound.

If I could time-travel to a certain period long ago, I'd be giving somebody at the Académie française a slap from the future.

On Saturday, June 12, 2021 at 7:56:39 PM UTC-3 Télumire wrote:

[Télumire]

Yes don't worry too much about it,  this is a very common mistakes even for french speakers, it's so much common in fact that my teachers (I'm an infographist) strongly recommend us to use "index" instead of "accueil" in our websites because they have seen this error countless times in their student's works, if this can help make you feel a bit better :)

[Télumire]

A tool I use a lot (sorry for the double post, I forgot to include this in my previous post and I feel like it's important) to avoid that is bonpatron.com, which is the best free grammatical french corrector I've found online.

They also have a tool for English, spellcheckplus.com .

I find Grammarly a bit better but spellcheckplus is made by university language teachers so I'm kind of biased to trust their tool more.

The best overall for french is antidote by druid but the pricing is outrageous.

Back to tiddlywiki: if you want to use the codemirror plugin to write your tiddlers, you may have seen that it prevents the browser to display syntax and orthographic errors. I've found several (suboptimal, admittedly) solutions :

* Create a custom preview mode, as explained here by Jeremy: https://groups.google.com/g/tiddlywiki/c/c3y-PycRP4M/m/V0IyOvR0AAAJ
* Use an addon. The best I've found for french on firefox yet is Grammalecte (open source & free): https://grammalecte.net/
* Add your own dictionary to TiddlyWiki by following this proof of concept: http://codemirror-spellcheck.tiddlyspot.com/ - I did not succeed but YMMV

If you know a better solution please let me know, I'm prone to errors myself and could use a little bit of help (I'm currently writing a french version of the angular doc so it's quite important to me)