How To: altering TiddlyWiki appearance based on context (URL parameters at StartUp, and via radio buttons after StartUp)

[Charlie Veniot]

G'day all,

I'm still in the midst of setting up my "Products Review" TiddlyWiki to also behave as a "Urban Off-Gridding for Laypersons" TiddlyWiki.

Both contexts have much in common (from structural elements to content), and I really did not want to create two distinct TiddlyWikis with a ton of duplication between them.

Hence the desire to have one TiddlyWiki with two "contextual" appearances.

Before getting into show and tell images (further below), here are the two links that open the same TiddlyWiki file but trigger different "contextual" appearances upon startup:

• https://intertwingularityslicendice.neocities.org/CJ_ProductReviews.html?context=ProductReviews
• https://intertwingularityslicendice.neocities.org/CJ_ProductReviews.html?context=OffGridding

For the moment, only Title and Subtitle change based on context.  Next: I will start modifying other content to change based on context.

Cheers !

Further below, you'll find images of the various tiddlers (which I plan to tidy-up later) that make all of this work, including:

• GetStartupContext.js
• (javascript macro to retrieve the startup context, i.e. "Products Review" or "...Off-Gridding...)
• Built with help from Stephan Hradek's Javascript Macros in WikiText and by grabbing bits of Javascript from various sites on the web
• Although I am a software developer, I am neither proficient with nor a fan of javascript!
• Set Startup Context
• (a "Startup Actions" tiddler)
• Alternate TiddlyWiki Purposes
• (a tiddler to store the startup context upon startup, and to provide an interface, i.e. radio buttons, to dynamically switch context at any time)
• The context-switching interface (i.e. the radio buttons) as they appear in the sidebar
• SideBar example of content changing (the title and subtitle of the TiddlyWiki) upon context change
• The setup of Title and Subtitle in the Control Panel
• The four Title-related Tiddlers
• The three Subtitle-related Tiddlers 
• The two template tiddlers (tPr and tOg) that help decide which content to show based on current context

[TW Tones]

Chrlie,

Thanks for sharing this code pattern.

I suggest loading it with more information on why this is a compelling "code pattern" and the demo links before you start documenting/posting how it is achieved. 

This allows people to comment on your concept, because once the details are there they may feel they should not comment until they work through the whole solution or code pattern.

I am hoping to help you get more engagement from the community on your interesting developments. You can of course use reply to post the code details right after the initial post.

Just a suggestion, do as you please.

Regards

Tones

[Charlie Veniot]

G'day Tones,

After over fifty years of me being "this way" (and getting ever-increasingly touchy about my communication challenges and related criticisms), it might be a less frustrating experience for all concerned to have somebody else with the skill, when I've done something particularly worthy, to just take what I've got and repackage it in a way that benefits the community.

I am honestly just trying to contribute the best I can.  I can't change the way I'm wired, so I'm much happier to keep contributing what I can, when I can and how I can as I am.  I'd much prefer do that even if it means me being completely ignored (with the hope that, maybe, something will be useful to somebody someday: that's enough to keep me happy.)

However you are trying to help, you are hitting a really raw nerve.  As politely as I can ask: could you please cut that out?

That said, if anybody wants to stealthily (as in unbeknownst to me) steer me towards more suitable posts via questions about content in any of my posts, that might be an easier way to organically get me "there" without me feeling hammered/humiliated yet again over an inability (if not a downright disability) of mine.

[TW Tones]

Charlie,

I will try and "Cut it out", but that means me treating you as an exception, because I would say the same thing to anyone else doing what you do. 

I will also have a go sometimes at

to have somebody else with the skill, when I've done something particularly worthy, to just take what I've got and repackage it in a way that benefits the community.

I will try, however others may do what I do, and I can't control them. With all due respect I suggest you try an anaesthetic on the raw nerve if it gets hit a lot.

Best wishes

Tony

[Eric Shulman]

On Wednesday, September 9, 2020 at 2:58:14 PM UTC-7, Charlie Veniot wrote:

I'm still in the midst of setting up my "Products Review" TiddlyWiki to also behave as a "Urban Off-Gridding for Laypersons" TiddlyWiki.

Both contexts have much in common (from structural elements to content), and I really did not want to create two distinct TiddlyWikis with a ton of duplication between them.

Hence the desire to have one TiddlyWiki with two "contextual" appearances.

Before getting into show and tell images (further below), here are the two links that open the same TiddlyWiki file but trigger different "contextual" appearances upon startup:

• https://intertwingularityslicendice.neocities.org/CJ_ProductReviews.html?context=ProductReviews
• https://intertwingularityslicendice.neocities.org/CJ_ProductReviews.html?context=OffGridding

For the moment, only Title and Subtitle change based on context.  Next: I will start modifying other content to change based on context.

First... let me congratulate you on a good job of combining many different technical bits and pieces!  It shows that you've really dug into the meat of TiddlyWiki!  Having said that, I think I can suggest ways to use existing TiddlyWiki features to reduce some of the complexities while still achieving (nearly) the same results.

Let's start with these two pieces:

• GetStartupContext.js
• Set Startup Context

The result of these two pieces is to, on startup, get the value of the "?context=..." parameter from the URL and save it in a tiddler for later use.  However, you are probably not aware that the TWCore already does this work for you by automatically creating a set of shadow tiddlers that breaks the URL into its component parts:

$:/info/url/full

$:/info/url/host

$:/info/url/hostname

$:/info/url/origin

$:/info/url/pathname

$:/info/url/port

$:/info/url/protocol

$:/info/url/search

For your purposes, you would be most interested in the last one, $:/info/url/search.  Given the URLs you show above, this tiddler would contain text

?context=ProductReviews

or

?context=OffGridding

Note that the tiddler includes the URL parameter itself, "?context=", not just the value.  This is different from your results, but can be easily handled later on.

• Alternate TiddlyWiki Purposes

Instead of using a custom field, "purpose", you can just set the value in $:/info/url/search, like this:

\define link(suffix)
<a title="Use this link to bookmark this site's purpose." href="https://intertwingularityslicendice.neocities.org/CJ_ProductReviews.html?context=$suffix$" style="text-decoration: none;">🔖</a>
\end

<div style="font-size:14px;line-height:1.7;margin-left:30px;color:dimgray;">

<$radio tiddler="$:/info/url/search" value="?context=ProductReviews"> {{TiddlyWiki Title 1}} </$radio> <<link "ProductReviews">>

<br>

<$radio tiddler="$:/info/url/search" value="?context=OffGridding"> {{TiddlyWiki Title 2}} </$radio> <<link "OffGridding">>

</div>

Notes:

* I retain the existing data value format, including the "?context=" prefix.  This keeps the content of $:/info/url/search consistent with the value that was automatically set.

* I've turned the inline links (for bookmarking) into a macro definition using a parameter for the desired suffix, so that it only need to be specified once.

By tagging the above tiddler with $:/tags/SideBarSegment and adding a field named list-before, with a blank value, the radio buttons will appear above the title in the sidebar.  This eliminates much of the need for the "Fancy TiddlyWiki Title" tiddler.  The rest of that tiddler is selecting which title to display, and applying styles to the TiddlyWiki title.  This can be achieved directly in the $:/SiteTitle tiddler, like this:

<div style="border-top:solid lightgray;">
<div style="font-size:15px;line-height:1.5">Charlie's</div>
<$reveal state="$:/info/url/search" type="match" text="?context=ProductReviews">
   {{TiddlyWiki Title 1}}
</$reveal>
<$reveal state="$:/info/url/search" type="match" text="?context=OffGridding">
   {{TiddlyWiki Title 2}}
</$reveal>
</div>

Similarly, your conditional subtitle can be achieved directly in the $:/SiteSubtitle tiddler, like this:

<div style="color:darkgray;font-size:90%;text-align:right;border-bottom:solid lightgray">
   - Version:
   <$list filter="[!is[system]!has[draft.of]!sort[modified]limit[1]]">
      <$view field="modified" format="date" template="YYYY-0MM-0DD 0hh12:0mmam" />
   </$list>
   - <br/>
<$reveal state="$:/info/url/search" type="match" text="?context=OffGridding">
   <div style="color:gray;border-top:solid lightgray thin;text-align:left;">
      //Easy, practical, and budget-friendly experiments/solutions for "light" grid independence.//
   </div>
</$reveal>
</div>

Note that the first part (the version text) is only specified once, and is always displayed, regardless of which "mode" you are currently showing,

and the second part (the $reveal) is only displayed when you are showing the "OffGridding" mode.

I've probably left out some bits and pieces here and there, but hopefully this makes sense to you and you can fill in whatever I've missed without too much trouble.

enjoy,

-e

[Eric Shulman]

On Wednesday, September 9, 2020 at 10:44:05 PM UTC-7, Eric Shulman wrote:

Instead of using a custom field, "purpose", you can just set the value in $:/info/url/search, like this:

Addendum:

When we modify the contents of $:/info/url/search, it creates a "real" tiddler that overrides the default shadow version.

If you then save the document, that overridden shadow tiddler will be retained.  This will interfere with the the use of

the shadow tiddler value the next time you load the document.

To fix this, you can adjust the filter used in $:/core/save/all to exclude the $:/info tiddlers, so that their shadow values

(which are automatically set) will always be used when reloading the document.

Here's the definition of $:/core/save/all:

\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
\define saveTiddlerFilter()
[is[tiddler]] -[prefix[$:/state/popup/]] -[[$:/HistoryList]] -[[$:/boot/boot.css]] -[type[application/javascript]library[yes]] -[[$:/boot/boot.js]] -[[$:/boot/bootprefix.js]] +[sort[title]] $(publishFilter)$
\end
{{$:/core/templates/tiddlywiki5.html}}

The saveTiddlerFilter() macro defines the list of tiddlers that will be saved.

Note how it starts with "[is[tiddler]]" and then *removes* specific tiddlers by using filters with the "-" prefix.

Note also that the macro ends with "$(publishFilter)$".

This variable allows you to add filters to the list without having to directly modify $:/core/save/all.

To do this, create a tiddler (e.g., "PublishFilter"), tagged with $:/tags/Macro, containing

\define publishFilter() -[prefix[$:/info]]

That's it.  Once this is defined, saving the file will automatically exclude saving any tiddlers that start with $:/info, allowing the auto-generated shadow tiddlers to be used whenever you reload the file.

Hope this make sense to you.

-e

[Saq Imtiaz]

Hi Charlie,

Thank you for sharing what you have been working on, and for what I found to be a very well written post. I honestly cannot say I would have written it much differently. Please do continue sharing and engaging with us just as you have been.

As always, there are many ways to achieve the same thing in TiddlyWiki. Eric has provided some great suggestions to streamline things that you may wish to consider in your own time.

Cheers,

Saq

[Charlie Veniot]

Holy smokes, Eric, that is a wonderful and meaty buffet of informative goodness.  

Squirrel !!!  :  This is awesome learnin' at TiddlyWiki University ("TiddlyWiki U"?  "TWU?")

Car !!! :  Has anybody ever thought of some TiddlyWiki merchandising to support and promote the project?

(If I were entrepreneurial at all, I'd be tearing into that to make it happen.  Beyond just the idea, I'm otherwise clueless...)

Thanks !

I've just woken up, and still uncaffeinated.  Once I perk up (pun!), I'm going over all of this again and getting to work.

[Eric Shulman]

Addendum #2

The link macro I previously wrote as part of Alternate TiddlyWiki Purposes can be made more adaptable, by using references to $:/info/url/... shadow tiddlers.

Instead of "hard-coding" the entire URL (except for the ending parameter value):

\define link(suffix)
<a title="Use this link to bookmark this site's purpose." href="https://intertwingularityslicendice.neocities.org/CJ_ProductReviews.html?context=$suffix$" style="text-decoration: none;">🔖</a>
\end

you can write:

\define link(suffix)
<a title="Use this link to bookmark this site's purpose." href={{{ [{$:/info/url/origin}addsuffix{$:/info/url/pathname}?context=$suffix$] }}} style="text-decoration: none;">🔖</a>
\end

In this way, if you re-host the file using a different domain or pathname, it will automatically reflect that change.

-e

[Felicia Crow]

Hi Charlie,

love the concept and very impressiv what you managed to put together, thank you for sharing.

If you don't mind asking, is there a specific reason for placing the decision for what to transclude in the two templates themselves and always calling both of them?

Personally I would have put the decision in the root tiddler - e.g. TiddlyWiki Title - via a match filter and only called what was needed, so I wonder if there is something I am missing/not thinking about or if it is just another case of multiple ways to achieve the same result.

Oh and one thing I noticed, just as an info: Since getstartupcontext is a javascript macro you don't actually need to import it. Unlike normal macros javascript macros are always global.

Kind Regards,

Felicia

[Charlie Veniot]

G'day Felicia,

Hi Charlie,

love the concept and very impressiv what you managed to put together, thank you for sharing.

Thank-you!  Of course, let's keep in mind that, in martial arts terms, I'm not quite a TiddlyWiki yellow belt yet, so I'm sure there are many things that could be improved !

 

If you don't mind asking, is there a specific reason for placing the decision for what to transclude in the two templates themselves and always calling both of them?

Personally I would have put the decision in the root tiddler - e.g. TiddlyWiki Title - via a match filter and only called what was needed, so I wonder if there is something I am missing/not thinking about or if it is just another case of multiple ways to achieve the same result.

I suspect that you are talking about this way of deciding what to show based on context: {{TiddlyWiki Title 1||tPr}}{{TiddlyWiki Title 2||tOg}}

I chose that way of doing things because I'm having a hard time wrapping my mind around filters, but I think I've got transclusion templates down pat.

So I saw that mechanism as a quick (and non-cryptic) and easily repeatable method across the board, for example:

• the "content" tiddler (included in my "navigation" tiddler that shows in the sidebar) has {{Contents (Product Reviews)||tPr}}{{Contents (Urban Off Gridding)||tOg}} to show different navigation links depending on context
• I may want to show other tiddlers different ways depending on context ...

Oh and one thing I noticed, just as an info: Since getstartupcontext is a javascript macro you don't actually need to import it. Unlike normal macros javascript macros are always global.

Maybe I misunderstood something when I put that import there.  I thought that "StartupAction" tiddlers, because they are processed so early, didn't have access to any macros unless they are imported.  Does that just apply to non-javascript macros ?

 

Kind Regards,

Felicia

Cheers, best regards, and Happy Sunday !

 

[Felicia Crow]

Hi Charlie,

yes that was what I meant. I always find it interesting to learn the thought process behind someones solution, since it often gives a different perspective on things that I would not have considered before, leads to learning something new or both. So when I saw a solution I would not have thought of myself I was curious how this came to be.

I sadly don't have any real tips for learning filters as it is one of the things my brain was actually willing to learn at least the basics quite quickly, but if you want I could write up the solution I had in mind so that you can play around with it, if this would be something that interests you/could help you.

And to add something useful to the babbling at the top: A short excursion about the difference between non-javascript and javascript macros at least as far as I learned it - definitely not an expert.

• Javascript macros are loaded in with everything else javascript before any processing happens as this is so to speak the engine on which everything runs, so yes a javascript macro is already loaded in when the startup actions are run.
• Non-javascript macros one the other hand exist at first only within the tiddler they where defined in. So for example if you have a tiddler containing the definition for a macro called get-context you would only be able to use this macro in the same tiddler. This is where then the import pragma and tag $:/tags/Macro come in. Import is used as you have done to allow use of a specific macro in the tiddler it was imported to. The tag $:/tags/Macro on the other hand allows you to mark the macro as global so that you can use it where ever you want without having to specifically import it each time. This is were the exception you reference comes in. Since the startup actions run before the tagged macros are processed to make them globally available you need to import non-javascript macros even if they are properly tagged.
  

Hope you can take away at least something from this and it wasn't too confusing.

Happy Sunday for you as well.

[Charlie Veniot]

G'day Felicia,

Sure, I'd love to see how you'd go about it.  

Since there are always multiple ways of doing things, if you have the time: quick thoughts on advantages/disadvantages of both for a quick back and forth about them?  Might be a pretty short back and forth: I don't have enough know-how to pickout the "pitfalls" (or "trappings") of various approaches?

That aside: I'm kind of proud to have figured out a little something about filters in my last post.

[TW Tones]

Charlie,

I saw in some of your code the use of tiddler named "Contents (Urban Off Gridding)"

• First - I have a shack in the Australian bush that's off grid, sustainability is one of my interests.
• A Quick test revealed (tiddlernames) seem quite secure in filters and other places like transclusions.

I am just mentioning this because it has led me to a solution I have being looking for. Simple one word system tiddlers.

Let me explain, although don't worry if you don't follow, I just wanted to thank you for inspiring me.

• If you want to transclude a "system tiddler" that does not otherwise appear in searches it must have the prefix $:/ and then it must be in keeping with existing naming.
• If you want to include system tiddlers css, templates etc the need to have this prefix and just don't look so good
• For example I I has a function "greatFunction" you would need to reference it as {{$:/myfunctions/greatFunction}} or {$:/myfunctions/greatFunction} in filters
• That is the simple names are no longer available to use.

The thought you gave me is

• I could name a tiddler like this (greatFunction) 
• Exclude titles beginning and ending in () from the standard search (Thus they are somewhat hidden from the user)
• Then you could reference it as {{(greatFunction)}} or {(greatFunction)} in filters etc... 
• It is also then easy to name objects that are more readable {{(task-template)}} that are like system tiddlers.
• Note: this would not impact your use "Contents (Urban Off Gridding)" because it does not begin and end ( )

Conclusion

• Cleaner code
• Easier to help users select from a list of optional views or templates
• Easier as designer
• More real language like.
• A whole new names space

Regards

Tones

[Felicia Crow]

Charlie,

so first things first here is my version. This specific code would go into Content, but it would look nearly the same with the other tiddlers:

<$set name="purpose" filter="[[Alternate TiddlyWiki Purposes]get[purpose]]">
<$list filter="[<purpose>match[ProductReviews]]">
{{Contents (Product Reviews)}}
</$list>
<$list filter="[<purpose>match[OffGridding]]">
{{Contents (Urban Off Gridding)}}
</$list>
</$set>

As for the explanation:

• The filter within set gets the current value of the purpose field that is in the tiddler with the title Alternate TiddlyWiki Purposes.
• The filter in the list widget takes whatever was saved in set and compares it to the parameter in match. If it matches the list widgets content will be rendered.

The code in itself does pretty much the same as your two transclusion templates just in one place, so I think it mostly comes down to personal preference where you check what actually needs to be rendered.

The only thing I could think of what this solution currently does better is being more failsafe in its execusion. The way the transclusion tiddlers in your version are written they only look for fields named purpose which contains their respective value, so when one adds a field purpose to another tiddler and gives it the opposite value both versions will be rendered at the same time. Since this is a wiki only edited by you this probably won't happen, just realized it when I looked once more at your templates while I wrote down my version.

Felicia

[Charlie Veniot]

G'day Tones,

First: a shack in the Australian bush.  I can't imagine a better off-grid image.  Of course, being French-Acadian, I'm a total romantic...

Second: I've always believed that no matter how silly an "offering" (I like to think of myself as lobbing slightly off-key stuff), sometimes the silliest of things bring up the bestest a-ha-who-woulda-thunk goodies.  Although I'm a pooped puppy, I do believe I totally get where you are going, and I rather like what you're thinking (to look at me and my home, nobody would think I'm a fiend of tidiness, but when it comes to information and programming code, I slowly love to tidy the poop out of that.)

Cheers !

[Charlie Veniot]

That looks A-1 to do on one tiddler needing to decide what content to show based on context, but how to do that once so that it can be used for a plethora of tiddlers that show different content based on context?

I would not want to put that kind of code on each of my multi-context-handling tiddlers.

For that code to exist generically once, I imagine each multi-context-tiddler would need some kind of macro call like:  <<SetContextContent "Product Reviews Tiddler Name" "Urban Off Gridding Tiddler Name">>

Aside from not doing that myself (for lack of macro and filter knowledge), I didn't want to go there because I often get tripped up setting these things up to not get screwed up every time I change tiddler titles (which I do repeatedly trying to get titles juuuuuust right.)

Thoughts?  (i.e. how to do that so that both "Contents" tiddler and "Title" tiddler can call some macro that does what your code does, but works generically for every tiddler that needs it?)

On Sunday, September 13, 2020 at 9:22:13 PM UTC-3, Felicia Crow wrote:

Charlie,

so first things first here is my version. This specific code would go into Content, but it would look nearly the same with the other tiddlers. 

[Felicia Crow]

Seeing how I may should eventually remember that sleeping at night is a thing a short answer for now, but I will return with a longer answer and possible examples later.

The solution was mostly to keep it within the current framework and not changing too much around. For a more centralised approach to the whole system tags and or fields will probably get a more prominent role, both for minimizing code duplication as well as dropping a reliance on titles.

For instance the Content and Title tiddler could call the same macro with their type - content and title respectively in this case - and the macro filters for a tiddler with two fields: one named tiddler-type matching what was send to the macro and the other named context matching the context currently in your purpose field. Since this match is made via the two fields the title also doesn't matter. This tiddler or more correctly its title is returned to the tiddler which then transcludes the result.

I will write a more concrete example when my brain isn't on standby but actually working again, but I hope that this may give you some idea already.

[Felicia Crow]

Hi,

so actually the answer is probably not going to be much longer it just contains a macro example and an explanation of how it works. The macro itself can live in any tiddler tagged with $:/tags/Macro.

So first here is the actual macro:

\define RenderContent(id)
<$vars purpose={{{[has[purpose]get[purpose]]}}} id="$id$">
<$list filter="[!has[draft.of]field:tiddler-id<id>field:context<purpose>]">
<$transclude tiddler=<<currentTiddler>> mode="block"/>
</$list>
</$vars>
\end

And while it is a more configureable version of my former solution here is a breakdown of how it works

• First the macro sets two variables: Purpose via an inline filter and id which it gets from the macro parameter. For the inline filter all it does is looking for a tiddler with the field purpose and then gets this fields value. This stops the reliance on title, but you will have to ensure that there is always only one purpose field within the wiki.
  
• The list filter then looks for a tiddler that is not currently being in editmode - the !has[draft.of] part - and has two fields matching the values from the variables. For one the context field being the same as whatever is currently in purpose and the tiddler-id field being the same as the id passed to the macro.
• When a tiddler fullfilling these conditions is found it is transcluded at the place the macro was called from.

To use the macro here is an example using Contents, but it is the exact same process for Title, Subtitle, every future tiddler having different text depending on context just with a different id.

• In the Contents tiddler you replace your line with the two transclusions with <<RenderContent "Contents">>.
• In Contents (Product Reviews) you add two fields. One is called context and has a value of ProductReviews the other is called tiddler-id and gets a value of Contents.
• In Contents (Urban Off Gridding) the same two fields are added, just that context now has a value of OffGridding.

That's it, nothing changes visually, but if you decide that Contents - Product Reviews is a better title for instance the macro still works as expected.

Since I worked with a local copy of your wiki to ensure that the macro is working as intended with the wiki it is inteded for I attached a json file containing the ten tiddlers - the macro itself plus the changed versions of Contents, Title, Subtitle - that you can just import and everything is set up as I described above should you prefer this route.

Kind Regards,

Felicia

[Charlie Veniot]

Holy guacamole, that is a thing of beauty.

I think I get it.  Seeing a macro and filter in the context of some thing I want to do, that kind of practical perspective makes things pretty clear.

Thank-you so much !  I have to figure out how to intertwingle some studying time (for all of this) with all of my little projects.

FUN!

[Felicia Crow]

Thank you for the compliment, I am glad it is understandable.

And while there are definitely people in this group with far more knowledge then me I am happy to help when I can.

[Charlie Veniot]

Hey Tones,

Have you put these ideas of yours into practice?  I'm thinking it would be pretty sweet to see how it all worked out.

On Sunday, September 13, 2020 at 8:49:26 PM UTC-3, TW Tones wrote: