tiddlywiki 5.1.21 → 5.2.1

package/editions/tw5.com/tiddlers/hiddensettings/Hidden Setting_ Disable Drag and Drop.tid

@@ -0,0 +1,19 @@
+created: 20200315143638556
+modified: 20210519155433742
+tags: [[Hidden Settings]]
+title: Hidden Setting: Disable Drag and Drop
+type: text/vnd.tiddlywiki
+
+<<.from-version "5.1.22">> To disable all the drag and drop operations that are built into the core, set the following tiddler to "no":
+
+$:/config/DragAndDrop/Enable
+
+To selectively re-enable drag and drop for an instance of the [[list-tagged-draggable Macro]] or [[list-links-draggable Macro]] you must ensure that the variable `tv-enable-drag-and-drop` is set to `yes` for the scope of the macro invocation. For example, note how it is still possible to use drag and drop within this list even if $:/config/DragAndDrop/Enable is set to "no":
+
+<$macrocall $name="wikitext-example-without-html" src="""<$set name="tv-enable-drag-and-drop" value="yes">
+
+<<list-tagged-draggable tag:"HelloThere">>
+
+</$set>"""/>
+
+Note that when using the DropzoneWidget and the DroppableWidget directly the ''enable'' attribute works independently of the global setting.

package/editions/tw5.com/tiddlers/hiddensettings/Hidden Setting_ Disable Lazy Loading.tid

@@ -0,0 +1,9 @@
+created: 20191025100113266
+modified: 20191025100113266
+tags: [[Hidden Settings]]
+title: Hidden Setting: Disable Lazy Loading
+type: text/vnd.tiddlywiki
+
+LazyLoading can be disabled by setting this value to `yes`
+
+$:/config/SyncDisableLazyLoading

package/editions/tw5.com/tiddlers/hiddensettings/Hidden Setting_ Enable File Import in Editor_1.tid

@@ -0,0 +1,12 @@
+created: 20210519155447339
+modified: 20210519160010708
+tags: [[Hidden Settings]]
+title: Hidden Setting: Enable File Import in Editor
+type: text/vnd.tiddlywiki
+
+<<.from-version "5.2.0">>
+
+$:/config/Editor/EnableImportFilter
+
+This filter determines whether dragging and dropping files in the editor works for a given tiddler or not. A non-empty result enables drag and drop in the editor for that tiddler.
+This filter is used in such a manner that it respects the global drag and drop setting.

package/editions/tw5.com/tiddlers/hiddensettings/Hidden Setting_ Typin Refresh Delay.tid

@@ -1,11 +1,13 @@
 created: 20150619162409306
-modified: 20150619162511957
+modified: 20191014091803518
 tags: [[Hidden Settings]]
 title: Hidden Setting: Typing Refresh Delay
 type: text/vnd.tiddlywiki
 
-TiddlyWiki defers processing changes to draft tiddlers until a timeout has elapsed. The default value of 400ms gives a good balance of responsiveness in most cases but isn't always optimal on lower powered mobile devices.
+TiddlyWiki defers processing changes to draft tiddlers and tiddlers with the prefix `$:/temp/volatile/` until a timeout has elapsed (this is called throttling). The mechanism can be extended to other tiddlers by adding a `throttle.refresh` field. See RefreshThrottling for details.
+
+The default value of 400ms gives a good balance of responsiveness in most cases but isn't always optimal on lower powered mobile devices.
 
 The timeout can now be changed by changing this value (in milliseconds):
 
-$:/config/Drafts/TypingTimeout
+$:/config/Drafts/TypingTimeout

package/editions/tw5.com/tiddlers/hiddensettings/Hidden Settings_ Import Content Types for Editor.tid

@@ -0,0 +1,11 @@
+created: 20210519155910219
+modified: 20210519160221219
+tags: [[Hidden Settings]]
+title: Hidden Settings: Import Content Types for Editor
+type: text/vnd.tiddlywiki
+
+<<.from-version "5.2.0">>
+
+$:/config/Editor/ImportContentTypesFilter
+
+This filter determines which `contentTypes` can be imported by dragging and dropping into the editor. It used by a DropzoneWidget wrapped around the editor, for the `contentTypesFilter` attribute.

package/editions/tw5.com/tiddlers/howtos/Adding_a_table_of_contents_to_the_sidebar.tid

@@ -19,7 +19,7 @@ A customisable [[table of contents|Table-of-Contents Macros]] can be added to th
 # Add a ''caption'' field with the text ''Contents''
 # Add a ''list-after'' field with the text ''~$:/core/ui/SideBar/Open''
 
-Add entries to the table of contents by creating tiddlers tagged ''~TableOfContents''. An easy way is to choose {{$:/core/images/new-here-button}} ''new here'' from the tiddler toolbar of the ''~TableOfContents'' tiddler. 
-(if you don't see the "new here" button, click on the down arrow {{$:/core/images/down-arrow}} to see more menu options.)
+Add entries to the table of contents by creating tiddlers tagged ''~TableOfContents''. An easy way is to choose <<.icon $:/core/images/new-here-button>> ''new here'' from the tiddler toolbar of the ''~TableOfContents'' tiddler. 
+(if you don't see the "new here" button, click on the down arrow <<.icon $:/core/images/down-arrow>> to see more menu options.)
 
 To create child tiddlers (tiddlers that come below other tiddlers), tag them with the name of the parent tiddler.

package/editions/tw5.com/tiddlers/howtos/Creating SubStories.tid

@@ -1,44 +1,32 @@
 created: 20140214215718317
-modified: 20140919161514318
+modified: 20211127032217828
 tags: Learning
 title: Creating SubStories
 type: text/vnd.tiddlywiki
 
-This example shows how to create a sub-story within a tiddler that is independent of the main story.
+This example shows how to create a sub-story within a tiddler that is independent of the main [[story|Story River]].  The NavigatorWidget and ListWidget work together to:
 
-Here's the code:
+# Add tiddlers to the [[story|Story River]] when links are clicked. Navigate to the tiddler corresponding to the link click. (''story'' attribute of the NavigatorWidget)
+# Remove tiddlers from the [[story|Story River]] when tiddler close buttons are clicked. (''story'' attribute of NavigatorWidget)
+# Animate the opening and closing of tiddlers. (''storyview'' attribute of the ListWidget)
+# Display the list of open tiddlers. (''filter'' and ''template'' attributes of the ListWidget)
+# Display tiddlers in [[draft mode|DraftMechanism]]. (''editTemplate'' attribute of the ListWidget)
+# Track [[navigation history|HistoryMechanism]]. (''history'' attribute of both NavigatorWidget and ListWidget)
+# And more!
 
-```
-<$navigator story="MySubStoryList" history="MySubHistoryList">
+Here is the example code (see also StateMechanism for related discussion):
 
-Click this link to get started: HelloThere
+<$macrocall $name='wikitext-example-without-html'
+src='<$navigator story="$:/temp/DemoStoryList" history="$:/temp/DemoHistoryList">
 
-<$list filter="[list[MySubStoryList]]" history="MySubHistoryList">
-<div>
+{{$:/core/ui/SideBarSegments/search}}
 
-! <$button message="tm-close-tiddler" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button> <$view field="title"/>
+<$list
+  filter="[list[$:/temp/DemoStoryList]]"
+  history="$:/temp/DemoHistoryList"
+  template={{$:/config/ui/ViewTemplate}}
+  editTemplate={{$:/config/ui/EditTemplate}}
+  storyview="classic"
+  emptyMessage="Use search box above. Clicked search links will open here instead of in the main story.<p>No search ideas? Click this link to get started: HelloThere</p>"/>
 
-<$transclude/>
-</div>
-</$list>
-
-</$navigator>
-```
-
-Note how you can open the HelloThere tiddler in the substory by clicking on the link below. Links within the substory open within the substory, and not in the main story.
-
-<$navigator story="MySubStoryList" history="MySubHistoryList">
-
-Click this link to get started: HelloThere
-
-<$list filter="[list[MySubStoryList]]" history="MySubHistoryList">
-<div>
-
-! <$button message="tm-close-tiddler" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button> <$view field="title"/>
-
-<$transclude/>
-
-</div>
-</$list>
-
-</$navigator>
+</$navigator>'>

package/editions/tw5.com/tiddlers/howtos/Debugging Stylesheets.tid

@@ -0,0 +1,11 @@
+created: 20211125175712017
+modified: 20211125175906085
+tags: [[Using Stylesheets]]
+title: Debugging Stylesheets
+type: text/vnd.tiddlywiki
+
+The core shadow tiddler $:/snippets/DebugStylesheets contains a simple tool for tracking down certain problems with mismatched brackets and other nested structures.
+
+In the list below, any stylesheets containing an error will be marked with a red cross:
+
+{{$:/snippets/DebugStylesheets}}

package/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid

@@ -18,6 +18,8 @@ For other table-making techniques see also:
 /* FOUR COLUMN MODE */
 .fourcolumns {
    display:block;
+   column-count:4;
+   column-gap:1em;
    -moz-column-count:4;
    -moz-column-gap:1em;
    -webkit-column-count: 4;
@@ -42,6 +44,8 @@ Note the various places you need to indicate the number of columns
 <style>
 .fourcolumns {
    display:block;
+   column-count:4;
+   column-gap:1em;
    -moz-column-count:4;
    -moz-column-gap:1em;
    -webkit-column-count: 4;

package/editions/tw5.com/tiddlers/howtos/Generating Static Sites with TiddlyWiki.tid

@@ -1,23 +1,25 @@
 created: 20130828190200000
-modified: 20160622111343603
+modified: 20200421003440463
 tags: [[TiddlyWiki on Node.js]]
 title: Generating Static Sites with TiddlyWiki
 type: text/vnd.tiddlywiki
 
 TiddlyWiki5 can be used to generate static HTML representations of a TiddlyWiki that doesn't need JavaScript.
+This process requires that TiddlyWiki be installed on Node.js on your local system. See [[Installing TiddlyWiki on Node.js]] for 
+details.
 
 There is much flexibility in how the static HTML is generated. The following scenarios are all illustrated on https://tiddlywiki.com.
 
 ! Wiki Snapshots and Tiddler Snapshots
 
-You can explore a static representation of this TiddlyWiki at [ext[static.html]]. That file is a static snapshot of the current DefaultTiddlers. Any tiddlers that it links to are referred to via URLs of the form `/static/HelloThere.html` that point to static snapshots of individual tiddlers. The tiddler HTML files reference a `static.css` stylesheet file.
+You can explore a static representation of the main TiddlyWiki site at https://tiddlywiki.com/static.html. That file is a static snapshot of the current DefaultTiddlers. Any tiddlers that it links to are referred to via URLs of the form `/static/HelloThere.html` that point to static snapshots of individual tiddlers. The tiddler HTML files reference a `static.css` stylesheet file.
 
 The following commands are used to generate the sample static version of the TiddlyWiki5 site:
 
 ```
---rendertiddlers [!is[system]] $:/core/templates/static.tiddler.html static text/plain
---rendertiddler $:/core/templates/static.template.html static.html text/plain
---rendertiddler $:/core/templates/static.template.css static/static.css text/plain
+tiddlywiki wikipath --rendertiddlers '[!is[system]]' $:/core/templates/static.tiddler.html static text/plain
+tiddlywiki wikipath --rendertiddler $:/core/templates/static.template.html static.html text/plain
+tiddlywiki wikipath --rendertiddler $:/core/templates/static.template.css static/static.css text/plain
 ```
 
 The first RenderTiddlersCommand generates the HTML representations of individual tiddlers, the second RenderTiddlerCommand saves the static version of the DefaultTiddlers, and the final RenderTiddlerCommand saves the stylesheet. (All the files are placed in the `output` folder of the wiki folder).
@@ -26,7 +28,7 @@ The first RenderTiddlersCommand generates the HTML representations of individual
 
 It is also possible to produce a single HTML file that contains static representations of tiddlers, and uses standard HTML anchor links to jump between them.
 
-For example: [ext[alltiddlers.html]]
+For example: https://tiddlywiki.com/alltiddlers.html
 
 The example is built by the following commands:
 

package/editions/tw5.com/tiddlers/howtos/How to add a banner for GitHub contributions.tid

@@ -7,7 +7,7 @@ When you edit a tiddler on https://tiddlywiki.com you will see a small ribbon in
 
 If you are using Node.js, you can replicate this feature for your own TiddlyWiki-based site as follows:
 
-# Make sure the following setting is included in the `tiddlywiki.info` file in your WikiFolder:
+# Make sure the following setting is included in the <$link to="tiddlywiki.info Files">`tiddlywiki.info`</$link> file in your [[wiki folder|TiddlyWikiFolders]]:
 #> <pre><code>	"config": {
 		"retain-original-tiddler-path": true
 	}</code></pre>

package/editions/tw5.com/tiddlers/howtos/How to apply custom styles.tid

@@ -5,6 +5,6 @@ tags: [[Customise TiddlyWiki]]
 title: How to apply custom styles
 type: text/vnd.tiddlywiki
 
-At the moment there are several ways to apply custom styles.
+There are several ways to apply custom styles.
 
 <<list-links filter:"[tag[How to apply custom styles]]">>

package/editions/tw5.com/tiddlers/howtos/How to create a custom story tiddler template.tid

@@ -0,0 +1,40 @@
+created: 20211204120244761
+modified: 20211206165108185
+tags: Learning Cascades [[Story Tiddler Template]] [[Story Tiddler Template Cascade]] [[Customise TiddlyWiki]]
+title: How to create a custom story tiddler template
+type: text/vnd.tiddlywiki
+
+Here we show how to add a rule to the [[Story Tiddler Template Cascade]] that causes tiddlers tagged <<tag "$:/tags/TiddlerList">> to be displayed with a custom appearance incorporating thumbnails of the tiddlers named in the list field.
+
+Open [[Demo Tiddler List with Custom Story Tiddler Template]] to see the demo.
+
+First, we add a new step to the story tiddler template cascade. The new filter step is:
+
+```
+[tag[$:/tags/TiddlerList]then[$:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template]]
+```
+
+It can be read as:
+
+```
+If the tiddler has the tag $:/tags/TiddlerList then return $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template
+```
+
+> The template $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template also depends on styles defined in [[$:/_tw5.com/CustomStoryTiddlerTemplateDemo/Styles]].
+
+The story tiddler template cascade is defined by the tag <<tag "$:/tags/StoryTiddlerTemplateFilter">>, so we need to create a configuration tiddler with that tag.
+
+We also need to make sure that it is inserted at the correct point in the cascade:
+
+* The new rule must be after the "draft" rule to ensure that draft tiddlers with the tag $:/tags/TiddlerList can be edited
+* The new rule must be before the "default" rule otherwise it will never be executed
+
+The control panel "Cascades" tab shows that this can be achieved by inserting the new step immediately before the default step using the `list-before` field.
+
+The full list of fields in the configuration tiddler is:
+
+<<.tiddler-fields "$:/_tw5.com/CustomStoryTiddlerTemplateDemo/Filter">>
+
+Finally, we need to create the demo tiddler itself:
+
+<<.tiddler-fields "Demo Tiddler List with Custom Story Tiddler Template">>

package/editions/tw5.com/tiddlers/howtos/How to create a custom tiddler colour rule.tid

@@ -0,0 +1,36 @@
+created: 20211206114114698
+modified: 20211206165150302
+tags: Learning Cascades [[Customise TiddlyWiki]]
+title: How to create a custom tiddler colour rule
+type: text/vnd.tiddlywiki
+
+Here we show how to add a rule to the [[Tiddler Colour Cascade]] that causes tiddlers with the tag <<tag "TableOfContents">> to be given a bright blue colour and tiddlers with the tag <<tag "Working with TiddlyWiki">> to be given a dark purple colour.
+
+<<.tip "[[How to create a custom tiddler icon rule]] describes how the same tiddlers have been given a custom icon">>
+
+First, we add a new step to the tiddler colour cascade. The new filter step is:
+
+```
+[tag[TableOfContents]then[#1e90ff]]
+[tag[Working with TiddlyWiki]then[darkorchid]]
+```
+
+It can be read as:
+
+```
+If the tiddler has the tag "TableOfContents" then return the colour #1e90ff
+Else if the tiddler has the tag "Working with TiddlyWiki" then return the colour darkorchid
+```
+
+The tiddler colour cascade is defined by the tag <<tag "$:/tags/TiddlerColourFilter">>, so we need to create a configuration tiddler with that tag.
+
+We also need to make sure that it is inserted at the correct point in the cascade:
+
+* The new rule must be after the "colour-field" rule to ensure that tiddlers with an explicit ''color'' field will respect the value of that field
+* The new rule must be before the "default" icon otherwise it will never be seen if the default colour is specified
+
+The control panel "Cascades" tab shows that this can be achieved by inserting the new step immediately before the default step using the `list-before` field.
+
+The full list of fields in the configuration tiddler is:
+
+<<.tiddler-fields "$:/_tw5.com/CustomTiddlerColourCascadeDemo">>

package/editions/tw5.com/tiddlers/howtos/How to create a custom tiddler icon rule.tid

@@ -0,0 +1,36 @@
+created: 20211204161649863
+modified: 20211206165129215
+tags: Learning Cascades [[Tiddler Icon Cascade]] [[Customise TiddlyWiki]]
+title: How to create a custom tiddler icon rule
+type: text/vnd.tiddlywiki
+
+Here we show how to add a rule to the [[Tiddler Icon Cascade]] that causes tiddlers with the tag <<tag "TableOfContents">> to be given the "globe" icon <<.icon $:/core/images/globe>> and tiddlers with the tag <<tag "Working with TiddlyWiki">> to be given the "help" icon <<.icon $:/core/images/help>>.
+
+<<.tip "[[How to create a custom tiddler colour rule]] describes how the same tiddlers have been given a custom colour">>
+
+First, we add a new step to the tiddler icon cascade. The new filter step is:
+
+```
+[tag[TableOfContents]then[$:/core/images/globe]]
+[tag[Working with TiddlyWiki]then[$:/core/images/help]] 
+```
+
+It can be read as:
+
+```
+If the tiddler has the tag "TableOfContents" then return $:/core/images/globe
+Else if the tiddler has the tag "Working with TiddlyWiki" then return $:/core/images/help
+```
+
+The tiddler icon cascade is defined by the tag <<tag "$:/tags/TiddlerIconFilter">>, so we need to create a configuration tiddler with that tag.
+
+We also need to make sure that it is inserted at the correct point in the cascade:
+
+* The new rule must be after the "icon-field" rule to ensure that tiddlers with an explicit ''icon'' field will respect the value of that field
+* The new rule must be before the "default" icon otherwise it will never be seen if the default icon is specified
+
+The control panel "Cascades" tab shows that this can be achieved by inserting the new step immediately before the default step using the `list-before` field.
+
+The full list of fields in the configuration tiddler is:
+
+<<.tiddler-fields "$:/_tw5.com/CustomTiddlerIconCascadeDemo">>

package/editions/tw5.com/tiddlers/howtos/How to create dynamic editor toolbar buttons.tid

@@ -0,0 +1,126 @@
+created: 20201216182347597
+modified: 20211018102328148
+tags: 
+title: How to create dynamic editor toolbar buttons
+type: text/vnd.tiddlywiki
+
+\define disabledFilterExample()`[[$(tempBoldDisabled)$]get[state-disabled]else[no]]`
+
+\define remove-shortcuts()
+<$action-deletetiddler $tiddler=<<shortcutInfo>>/>
+<$action-deletetiddler $tiddler=<<shortcutConfigMac>>/>
+<$action-deletetiddler $tiddler=<<shortcutConfigNotMac>>/>
+<$action-deletetiddler $tiddler=<<tempBold>>/>
+<$action-deletetiddler $tiddler=<<tempBoldDisabled>>/>
+\end
+
+\define create-shortcut-tiddlers()
+<$action-createtiddler $basetitle=<<shortcutInfo>> 
+  $template="$:/config/ShortcutInfo/bold" 
+  $overwrite="yes"
+/>
+<$action-navigate $to=<<shortcutInfo>>/>
+
+<$action-createtiddler $basetitle=<<shortcutConfigMac>> 
+  $template="$:/config/shortcuts-mac/bold" 
+  $overwrite="yes"
+  text="meta-shift-X"
+/>
+<$action-navigate $to=<<shortcutConfigMac>>/>
+
+<$action-createtiddler $basetitle=<<shortcutConfigNotMac>> 
+  $template="$:/config/shortcuts-not-mac/bold" 
+  $overwrite="yes"
+  text="ctrl-shift-X"
+/>
+<$action-navigate $to=<<shortcutConfigNotMac>>/>
+
+\end
+
+\define clone-bold()
+<$action-createtiddler $basetitle=<<tempBold>> 
+  $template="$:/core/ui/EditorToolbar/bold" 
+  $overwrite="yes"
+  icon="$:/core/images/spiral"
+  shortcuts="((temp-bold))"
+  condition-disabled="[[$(tempBoldDisabled)$]get[state-disabled]else[no]]"
+/>
+<$action-sendmessage $message="tm-edit-tiddler" $param=<<tempBold>>/>
+\end
+
+\define clone-button-bold()
+<$button actions=<<clone-bold>> >Create a Temporary Bold Button</$button>
+\end
+
+\define toggle-bold()
+<$action-listops  $tiddler=<<tempBoldDisabled>> $field="state-disabled" $subfilter="+[toggle[yes],[no]]" />
+\end
+
+<!-- $vars is needed don't remove it! -->
+<$vars tempBold="$:/temp/bold" tempBoldDisabled="$:/temp/bold/disabled" shortcutInfo="$:/config/ShortcutInfo/temp-bold"  shortcutConfigMac="$:/config/shortcuts-mac/temp-bold" shortcutConfigNotMac="$:/config/shortcuts-not-mac/temp-bold">
+
+!! Create a New Toolbar Button
+
+The easiest way to create new editor toolbar button is to clone and open one.
+
+><<clone-button-bold>> 
+
+This tiddler contains all the necessary elements that are important for toolbar buttons. 
+
+<<<
+
+; text
+: We don't discuss the text field details in this howto
+
+; caption
+: The caption field is used to display the shortcut name in the $:/ControlPanel : Keyboard Shortcuts tab
+
+; condition
+: A filter, that defines the button visibility state
+
+; condition-disabled  <<.from-version "5.1.23">>
+: A ''filter'', that allows us to define the "disabled" attribute for buttons. eg: <<disabledFilterExample>>
+:  This condition ''must'' return "no", if the "state tiddler" or "state field" doesn't exist! So there has to be a `else[no]` element in the filter.
+
+; description
+: Is used as the button tooltip
+
+; icon 
+: Assigns the button icon. We use `$:/core/images/spiral` {{$:/core/images/spiral}} here. More button icons can be found in the [[Icon Gallery]]
+
+; shortcuts
+: This is the [[Keyboard Shortcut Descriptor]] eg: `((temp-bold))`
+
+<<<
+
+!! Disabled State
+
+You can use any "state tiddler" to define the button disabled state. It's important, that the ''condition-disabled'' field is a ''filter''. For our example we use the `state-disabled` field from tiddler: <<tempBoldDisabled>>
+
+The easiest way to test filters is with the $:/AdvancedSearch : Filter tab
+
+> The temporary "bold button" is disabled: ''"{{{ [<tempBoldDisabled>get[state-disabled]else[no]] }}}"'' ... You can see the button in the editor toolbar if you edit any tiddler!
+
+> <$button actions=<<toggle-bold>>>Toggle Temporary Bold Button Visisbility</$button>
+
+!! Create Keyboard Shortcuts for New Button
+
+For our ~HowTo we use the ''Keyboard Shortcut Descriptor'': `((temp-bold))`
+
+To create a valid shortcut configuration we need 2 tiddlers: 
+
+>[[$:/config/ShortcutInfo/|$:/config/ShortcutInfo/temp-bold]]''temp-bold'' .. and
+>[[$:/config/shortcuts/|$:/config/shortcuts/temp-bold]]''temp-bold''
+
+> <$button actions=<<create-shortcut-tiddlers>>>Create Shortcut Tiddlers</$button>
+
+!! 
+
+!! Clean up the Configuration Tiddlers
+
+If you don't need the config tiddlers anymore you can 
+
+><$button actions=<<remove-shortcuts>>>Remove the Shortcut Configuration</$button>
+
+
+</$vars><!-- needed don't remove! -->

package/editions/tw5.com/tiddlers/howtos/How to create keyboard shortcuts.tid

@@ -14,7 +14,7 @@ A tiddler with the <<.def prefix>> `$:/config/ShortcutInfo/` and a ''unique suff
 
 In the [[Keyboard Shortcuts Tab|$:/core/ui/ControlPanel/KeyboardShortcuts]] the ''key combination'' that should trigger the shortcut can be configured:
 
-> Look for the ''unique suffix'' defined for the new shortcut and click the <$button class="tc-btn-invisible">{{$:/core/images/edit-button}}<$action-sendmessage $message="tm-notify" $param="$:/core/images/edit-button"/></$button> button to open a popup that detects ''key combinations'' and shows the detected combination in its input field
+> Look for the ''unique suffix'' defined for the new shortcut and click the <$button class="tc-btn-invisible"><<.icon $:/core/images/edit-button>><$action-sendmessage $message="tm-notify" $param="$:/core/images/edit-button"/></$button> button to open a popup that detects ''key combinations'' and shows the detected combination in its input field
 
 >The ''add shortcut'' assigns the key-combination to the shortcut
 
@@ -34,7 +34,7 @@ In the [[Keyboard Shortcuts Tab|$:/core/ui/ControlPanel/KeyboardShortcuts]] the
 * $:/config/shortcuts-not-windows/`my-shortcut`
 * $:/config/shortcuts-not-linux/`my-shortcut`
 
-<<.tip """Note that those platform-specific tiddlers don't have to be created manually if the ''ShortcutInfo'' tiddler as mentioned above is created first and and the shortcut is configured in the ~ControlPanel""">>
+<<.tip """Note that those platform-specific tiddlers don't have to be created manually if the ''ShortcutInfo'' tiddler as mentioned above is created first and the shortcut is configured in the ~ControlPanel""">>
 
 <br>
 
@@ -98,7 +98,7 @@ If the tiddler that contains the macro definition is known and - for example - t
 !!! Messages
 
 <$list filter="[tag[navigator-message]]">
-<$link to={{!!title}}><$view field="title"/></$link><br>
+<$link/><br>
 </$list>
 
 </$vars>

package/editions/tw5.com/tiddlers/howtos/How to export tiddlers.tid

@@ -6,17 +6,17 @@ type: text/vnd.tiddlywiki
 
 ! Selecting All tiddlers for export
 
-To export ''all'' tiddlers click on the "Tools" tab of the Sidebar. Find and click the {{$:/core/images/export-button}} ''export all'' button. A pop-up menu will offer you the chance to export tiddlers in multiple formats.
+To export ''all'' tiddlers click on the "Tools" tab of the Sidebar. Find and click the <<.icon $:/core/images/export-button>> ''export all'' button. A pop-up menu will offer you the chance to export tiddlers in multiple formats.
 
 ! Exporting a tiddler
 
-If you want to export a particular tiddler, first navigate to that tiddler. Then click on the {{$:/core/images/down-arrow}} ''more'' button that appears above the tiddler. From the list that appears select {{$:/core/images/export-button}} ''export tiddler''. A pop-up menu will offer you the chance to export the tiddler in multiple formats.
+If you want to export a particular tiddler, first navigate to that tiddler. Then click on the <<.icon $:/core/images/down-arrow>> ''more'' button that appears above the tiddler. From the list that appears select <<.icon $:/core/images/export-button>> ''export tiddler''. A pop-up menu will offer you the chance to export the tiddler in multiple formats.
 
 ! Exporting tiddlers matching a criteria (filter)
 
-To export a selection of tiddlers, click the little magnifying glass {{$:/core/images/advanced-search-button}} next to the search area on the sidebar. This will open the [[Advanced Search|$:/AdvancedSearch]] tiddler. Click on the "Filter" tab of the Advanced Search tiddler. Only the [[Filter|Filters]] tab will allow you to export a selection of tiddlers. [[Filters]] follow a particular syntax. Click on this [[Filters|Filters]] link to learn about how to make filters.
+To export a selection of tiddlers, click the little magnifying glass <<.icon $:/core/images/advanced-search-button>> next to the search area on the sidebar. This will open the [[Advanced Search|$:/AdvancedSearch]] tiddler. Click on the "Filter" tab of the Advanced Search tiddler. Only the [[Filter|Filters]] tab will allow you to export a selection of tiddlers. [[Filters]] follow a particular syntax. Click on this [[Filters|Filters]] link to learn about how to make filters.
 
-Once you have written a filter, a list of tiddlers matching the filter will appear. Now you can click on the {{$:/core/images/export-button}} ''export tiddler'' button to the right of the filter input field. A pop-up menu will offer you the chance to export tiddlers in multiple formats.
+Once you have written a filter, a list of tiddlers matching the filter will appear. Now you can click on the <<.icon $:/core/images/export-button>> ''export tiddler'' button to the right of the filter input field. A pop-up menu will offer you the chance to export tiddlers in multiple formats.
 
 ! Export formats
 

package/editions/tw5.com/tiddlers/howtos/How to put the last modification date in a banner.tid

@@ -7,7 +7,7 @@ type: text/vnd.tiddlywiki
 Here's how to display the last modification date of a wiki in a banner in the corner of the window:
 
 # [[Install the plugin|Installing a plugin from the plugin library]] <<.def "Corner ribbon">> in your ~TiddlyWiki
-# Save ({{$:/core/images/save-button}}) and reload ({{$:/core/images/refresh-button}}) your wiki
+# Save (<<.icon $:/core/images/save-button>>) and reload (<<.icon $:/core/images/refresh-button>>) your wiki
 # Create a new tiddler called [[$:/_MyRibbon]] tagged [[$:/tags/PageControls]] and containing:<div>
 
 ```

package/editions/tw5.com/tiddlers/howtos/Insert link.tid

@@ -5,6 +5,6 @@ title: Insert link
 
 This will give you a dialog to search for and pick existing tiddlers in the wiki. When you pick a tiddler it will be inserted as a WikiText link where the cursor is in the text field.
 
-Pressing {{$:/core/images/link}} will give you `[[Some link]]`
+Pressing <<.icon $:/core/images/link>> will give you `[[Some link]]`
 
 It wil ''not'' insert: external web links or [[picture|Insert picture]] links.

package/editions/tw5.com/tiddlers/howtos/Insert picture.tid

@@ -6,4 +6,4 @@ title: Insert picture
 This will give you a dialog to search for and pick existing image tiddlers in the wiki. When you pick a tiddler it will be inserted as a WikiText  image link where the cursor is in the text field.
 
 
-Pressing {{$:/core/images/picture}} will give you `[img[$:/favicon.ico]]`
+Pressing <<.icon $:/core/images/picture>> will give you `[img[$:/favicon.ico]]`

package/editions/tw5.com/tiddlers/howtos/KeyboardShortcuts.tid

@@ -20,11 +20,15 @@ Keyboard shortcuts are available for common editing operations within the Text E
 
 <<.from-version 5.1.18>> : New ''global'' Keyboard shortcuts:
 
-* Creating a new tiddler (defaults to <kbd>alt-N</kbd> )
-* Creating a new journal (defaults to <kbd>alt-J</kbd> )
-* Creating a new image (defaults to <kbd>alt-I</kbd> )
-
-The current shortcuts can be inspected and customised in the "Keyboard Shortcuts" tab of the [[Control Panel|$:/ControlPanel]] {{$:/core/images/options-button}}.
+|!Action |!Default Shortcut|
+|Creating a new tiddler |<kbd>alt-N</kbd> |
+|Creating a new journal |<kbd>alt-J</kbd> |
+|Creating a new image |<kbd>alt-I</kbd> |
+|Focusing sidebar search |<<.from-version 5.1.20>><kbd>ctrl-shift-F</kbd> |
+|Toggling the sidebar |<<.from-version 5.1.20>><kbd>shift-alt-S</kbd> |
+|Advanced search |<<.from-version 5.1.20>><kbd>ctrl-shift-A</kbd> |
+
+The current shortcuts can be inspected and customised in the "Keyboard Shortcuts" tab of the [[Control Panel|$:/ControlPanel]] <<.icon $:/core/images/options-button>>.
 
 !! Special Keys
 

package/editions/tw5.com/tiddlers/howtos/More actions.tid

@@ -3,4 +3,4 @@ modified: 20160817110101356
 tags: [[Editor toolbar]]
 title: More actions
 
-Pressing {{$:/core/images/down-arrow}} Gives you  a dropdown menu with more editing options.
+Pressing <<.icon $:/core/images/down-arrow>> Gives you  a dropdown menu with more editing options.

package/editions/tw5.com/tiddlers/howtos/Setting a favicon.tid

@@ -1,15 +1,17 @@
 created: 20131224074240979
-modified: 20140912142228347
+modified: 20200510115704738
 tags: [[Customise TiddlyWiki]]
 title: Setting a favicon
 type: text/vnd.tiddlywiki
 
-"favicons" are small icons that most browsers display to help users identify websites.
+"favicons" are small icons that most browsers display to help users identify websites. Note that all browsers support bitmap images, but only certain modern browsers support SVG format icons.
 
 ! favicons in the Browser
 
 When TiddlyWiki starts up in the browser it looks for a tiddler called [[$:/favicon.ico]] and dynamically uses it as the favicon for the page. If you modify the image then the favicon changes instantly to reflect it.
 
+<<.from-version "5.1.23">> To set an external image as the favicon, assign the URL to the ''_canonical_uri'' field of the [[$:/favicon.ico]] tiddler.
+
 ! favicons on the Server
 
 On the server, the ServerCommand will serve the tiddler [[$:/favicon.ico]] at the path `/favicon.ico`.

package/editions/tw5.com/tiddlers/howtos/Setting a page background image.tid

@@ -6,7 +6,7 @@ type: text/vnd.tiddlywiki
 
 # Import your image as a tiddler (see [[Images in WikiText]])
 #* You can also use an [[external image|ExternalImages]]
-# Open the [[control panel|$:/ControlPanel]] {{$:/core/images/options-button}} and switch to the ''Appearance''/''Theme Tweaks'' tab
+# Open the [[control panel|$:/ControlPanel]] <<.icon $:/core/images/options-button>> and switch to the ''Appearance''/''Theme Tweaks'' tab
 # Select your image from the dropdown labelled "Page background image"
 # Set "Page background image attachment" to "Fixed to window" to have the background stay stationary and the content to scroll over the top of it, or "Scroll with tiddlers" to have it move (note that the iPhone/iPad [[doesn't support the fixed setting|http://stackoverflow.com/a/20444219]] for performance reasons)
 # Set "Page background image size" as follows: