Add "cascade" filter run prefix and use it to control view templates (#6168)

* Initial Commit * Set currentTiddler and ..currentTiddler for filter evaulation * Precompile the filters for performance * Add explicit test for empty result when no filter passes * Use the cascade filter run prefix to choose the view template body template * Use the cascade mechanism to choose between the edit and view templates * Simplify cascade filter Thanks @saqimtiaz * Add control panel UI for inspecting the template cascades * Refactor import listing and plugin listing as alternate body templates As suggested by @pmario * Refer to $:/core/ui/{View|Edit}Template via their associated config tiddlers * Fix typo in previous commit * Add demo of custom story tiddler template * Tweak control panel wording * Standardise "Story Tiddler Template" nomenclature * Add a cascade for the editor template body * Add a cascade for the view template title * Avoid unwanted whitespace * Add a cascade for dynamically choosing tiddler icons
2024-11-23 10:07:19 +00:00 · 2021-11-15 21:06:47 +00:00 · 2021-11-15 21:06:47 +00:00 · a350a76a00
commit a350a76a00
parent 9caba544eb
44 changed files with 394 additions and 107 deletions
--- a/core/language/en-GB/ControlPanel.multids
+++ b/core/language/en-GB/ControlPanel.multids
@ -27,10 +27,15 @@ Basics/Tiddlers/Prompt: Number of tiddlers
 Basics/Title/Prompt: Title of this ~TiddlyWiki
 Basics/Username/Prompt: Username for signing edits
 Basics/Version/Prompt: ~TiddlyWiki version
+Cascades/Caption: Cascades
+Cascades/Hint: These global rules are used to dynamically choose certain templates. The result of the cascade is the result of the first filter in the sequence that returns a result
+Cascades/TagPrompt: Filters tagged <$macrocall $name="tag" tag=<<currentTiddler>>/>
 EditorTypes/Caption: Editor Types
 EditorTypes/Editor/Caption: Editor
 EditorTypes/Hint: These tiddlers determine which editor is used to edit specific tiddler types.
 EditorTypes/Type/Caption: Type
+EditTemplateBody/Caption: Edit Template Body
+EditTemplateBody/Hint: This rule cascade is used by the default edit template to dynamically choose the template for editing the body of a tiddler.
 Info/Caption: Info
 Info/Hint: Information about this TiddlyWiki
 KeyboardShortcuts/Add/Prompt: Type shortcut here
@ -191,6 +196,8 @@ Settings/TitleLinks/Yes/Description: Display tiddler titles as links
 Settings/MissingLinks/Caption: Wiki Links
 Settings/MissingLinks/Hint: Choose whether to link to tiddlers that do not exist yet
 Settings/MissingLinks/Description: Enable links to missing tiddlers
+StoryTiddler/Caption: Story Tiddler
+StoryTiddler/Hint: This rule cascade is used to dynamically choose the template for displaying a tiddler in the story river.
 StoryView/Caption: Story View
 StoryView/Prompt: Current view:
 Stylesheets/Caption: Stylesheets
@ -201,6 +208,8 @@ Theme/Caption: Theme
 Theme/Prompt: Current theme:
 TiddlerFields/Caption: Tiddler Fields
 TiddlerFields/Hint: This is the full set of TiddlerFields in use in this wiki (including system tiddlers but excluding shadow tiddlers).
+TiddlerIcon/Caption: Tiddler Icon
+TiddlerIcon/Hint: This rules cascade is used to dynamically choose the icon for a tiddler.
 Toolbars/Caption: Toolbars
 Toolbars/EditToolbar/Caption: Edit Toolbar
 Toolbars/EditToolbar/Hint: Choose which buttons are displayed for tiddlers in edit mode. Drag and drop to change the ordering
@ -212,3 +221,7 @@ Toolbars/EditorToolbar/Hint: Choose which buttons are displayed in the editor to
 Toolbars/ViewToolbar/Caption: View Toolbar
 Toolbars/ViewToolbar/Hint: Choose which buttons are displayed for tiddlers in view mode. Drag and drop to change the ordering
 Tools/Download/Full/Caption: Download full wiki
+ViewTemplateBody/Caption: View Template Body
+ViewTemplateBody/Hint: This rule cascade is used by the default view template to dynamically choose the template for displaying the body of a tiddler.
+ViewTemplateTitle/Caption: View Template Title
+ViewTemplateTitle/Hint: This rule cascade is used by the default view template to dynamically choose the template for displaying the title of a tiddler.
--- a/core/modules/filterrunprefixes/cascade.js
+++ b/core/modules/filterrunprefixes/cascade.js
@ -0,0 +1,51 @@
+/*\
+title: $:/core/modules/filterrunprefixes/cascade.js
+type: application/javascript
+module-type: filterrunprefix
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+/*
+Export our filter prefix function
+*/
+exports.cascade = function(operationSubFunction,options) {
+	return function(results,source,widget) {
+		if(results.length !== 0) {
+			var filterList = operationSubFunction(source,widget),
+				filterFnList = [];
+			var inputResults = results.toArray();
+			results.clear();
+			$tw.utils.each(inputResults,function(title) {
+				var result = ""; // If no filter matches, we return an empty string
+				$tw.utils.each(filterList,function(filter,index) {
+					if(!filterFnList[index]) {
+						filterFnList[index] = options.wiki.compileFilter(filter);
+					}
+					var output = filterFnList[index](options.wiki.makeTiddlerIterator([title]),{
+							getVariable: function(name) {
+								switch(name) {
+									case "currentTiddler":
+										return "" + title;
+									case "..currentTiddler":
+										return widget.getVariable("currentTiddler");
+									default:
+										return widget.getVariable(name);
+								}
+							}
+						});
+					if(output.length !== 0) {
+						result = output[0];
+						return false;
+					}
+				});
+				results.push(result);
+			});
+		}
+	}
+};
+
+})();
--- a/core/ui/ControlPanel/Cascades.tid
+++ b/core/ui/ControlPanel/Cascades.tid
@ -0,0 +1,9 @@
+title: $:/core/ui/ControlPanel/Cascades
+tags: $:/tags/ControlPanel/Advanced
+caption: {{$:/language/ControlPanel/Cascades/Caption}}
+
+{{$:/language/ControlPanel/Cascades/Hint}}
+
+<div class="tc-control-panel">
+<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/ControlPanel/Cascades]!has[draft.of]]" default="$:/core/ui/ControlPanel/StoryTiddler"/>
+</div>
--- a/core/ui/ControlPanel/Cascades/EditTemplateBody.tid
+++ b/core/ui/ControlPanel/Cascades/EditTemplateBody.tid
@ -0,0 +1,9 @@
+title: $:/core/ui/ControlPanel/EditTemplateBody
+tags: $:/tags/ControlPanel/Cascade
+caption: {{$:/language/ControlPanel/EditTemplateBody/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/EditTemplateBody/
+
+<<lingo Hint>>
+
+{{$:/tags/EditTemplateBodyFilter||$:/snippets/ListTaggedCascade}}
--- a/core/ui/ControlPanel/Cascades/StoryTiddler.tid
+++ b/core/ui/ControlPanel/Cascades/StoryTiddler.tid
@ -0,0 +1,9 @@
+title: $:/core/ui/ControlPanel/StoryTiddler
+tags: $:/tags/ControlPanel/Cascades
+caption: {{$:/language/ControlPanel/StoryTiddler/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/StoryTiddler/
+
+<<lingo Hint>>
+
+{{$:/tags/StoryTiddlerTemplateFilter||$:/snippets/ListTaggedCascade}}
--- a/core/ui/ControlPanel/Cascades/TiddlerIcon.tid
+++ b/core/ui/ControlPanel/Cascades/TiddlerIcon.tid
@ -0,0 +1,9 @@
+title: $:/core/ui/ControlPanel/TiddlerIcon
+tags: $:/tags/ControlPanel/Cascades
+caption: {{$:/language/ControlPanel/TiddlerIcon/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/TiddlerIcon/
+
+<<lingo Hint>>
+
+{{$:/tags/TiddlerIconFilter||$:/snippets/ListTaggedCascade}}
--- a/core/ui/ControlPanel/Cascades/ViewTemplateBody.tid
+++ b/core/ui/ControlPanel/Cascades/ViewTemplateBody.tid
@ -0,0 +1,9 @@
+title: $:/core/ui/ControlPanel/ViewTemplateBody
+tags: $:/tags/ControlPanel/Cascades
+caption: {{$:/language/ControlPanel/ViewTemplateBody/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/ViewTemplateBody/
+
+<<lingo Hint>>
+
+{{$:/tags/ViewTemplateBodyFilter||$:/snippets/ListTaggedCascade}}
--- a/core/ui/ControlPanel/Cascades/ViewTemplateTitle.tid
+++ b/core/ui/ControlPanel/Cascades/ViewTemplateTitle.tid
@ -0,0 +1,9 @@
+title: $:/core/ui/ControlPanel/ViewTemplateTitle
+tags: $:/tags/ControlPanel/Cascades
+caption: {{$:/language/ControlPanel/ViewTemplateTitle/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/ViewTemplateTitle/
+
+<<lingo Hint>>
+
+{{$:/tags/ViewTemplateTitleFilter||$:/snippets/ListTaggedCascade}}
--- a/core/ui/EditTemplate/body.tid
+++ b/core/ui/EditTemplate/body.tid
@ -1,56 +1,4 @@
 title: $:/core/ui/EditTemplate/body
 tags: $:/tags/EditTemplate

-\define lingo-base() $:/language/EditTemplate/Body/
-\define config-visibility-title()
-$:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
-\end
-
-\define importFileActions()
-<$action-popup $state=<<importState>> $coords="(0,0,0,0)" $floating="yes"/>
-\end
-
-<$list filter="[all[current]has[_canonical_uri]]">
-
-<div class="tc-message-box">
-
-<<lingo External/Hint>>
-
-<a href={{!!_canonical_uri}}><$text text={{!!_canonical_uri}}/></a>
-
-<$edit-text field="_canonical_uri" class="tc-edit-fields" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"></$edit-text>
-
-</div>
-
-</$list>
-
-<$set name="edit-preview-state" value={{{ [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualify "$:/state/showeditpreview">] }}}>
-<$list filter="[all[current]!has[_canonical_uri]]">
-<$vars importTitle=<<qualify $:/ImportImage>> importState=<<qualify $:/state/ImportImage>> >
-<$dropzone importTitle=<<importTitle>> autoOpenOnImport="no" contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}} class="tc-dropzone-editor" enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}} filesOnly="yes" actions=<<importFileActions>> ><$reveal stateTitle=<<edit-preview-state>> type="match" text="yes">
-<div class="tc-tiddler-preview">
-
-<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
-
-<div class="tc-tiddler-preview-preview">
-
-<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
-
-<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>
-
-</$transclude>
-
-</div>
-
-</div>
-</$reveal>
-
-<$reveal stateTitle=<<edit-preview-state>> type="nomatch" text="yes">
-
-<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
-
-</$reveal>
-</$dropzone>
-</$vars>
-</$list>
-</$set>
+<$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/EditTemplateBodyFilter]get[text]] :and[!is[blank]else[$:/core/ui/EditTemplate/body/default]] }}} />
--- a/core/ui/EditTemplate/body/canonical-uri.tid
+++ b/core/ui/EditTemplate/body/canonical-uri.tid
@ -0,0 +1,13 @@
+title: $:/core/ui/EditTemplate/body/canonical-uri
+
+\define lingo-base() $:/language/EditTemplate/Body/
+
+<div class="tc-message-box">
+
+<<lingo External/Hint>>
+
+<a href={{!!_canonical_uri}}><$text text={{!!_canonical_uri}}/></a>
+
+<$edit-text field="_canonical_uri" class="tc-edit-fields" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"></$edit-text>
+
+</div>
--- a/core/ui/EditTemplate/body/default.tid
+++ b/core/ui/EditTemplate/body/default.tid
@ -0,0 +1,38 @@
+title: $:/core/ui/EditTemplate/body/default
+
+\define config-visibility-title()
+$:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
+\end
+
+\define importFileActions()
+<$action-popup $state=<<importState>> $coords="(0,0,0,0)" $floating="yes"/>
+\end
+
+<$set name="edit-preview-state" value={{{ [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualify "$:/state/showeditpreview">] }}}>
+<$vars importTitle=<<qualify $:/ImportImage>> importState=<<qualify $:/state/ImportImage>> >
+<$dropzone importTitle=<<importTitle>> autoOpenOnImport="no" contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}} class="tc-dropzone-editor" enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}} filesOnly="yes" actions=<<importFileActions>> ><$reveal stateTitle=<<edit-preview-state>> type="match" text="yes">
+<div class="tc-tiddler-preview">
+
+<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
+
+<div class="tc-tiddler-preview-preview">
+
+<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
+
+<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>
+
+</$transclude>
+
+</div>
+
+</div>
+</$reveal>
+
+<$reveal stateTitle=<<edit-preview-state>> type="nomatch" text="yes">
+
+<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
+
+</$reveal>
+</$dropzone>
+</$vars>
+</$set>
--- a/core/ui/ListTaggedCascade.tid
+++ b/core/ui/ListTaggedCascade.tid
@ -0,0 +1,14 @@
+title: $:/snippets/ListTaggedCascade
+
+{{||$:/language/ControlPanel/Cascades/TagPrompt}}
+
+<ol>
+<$list filter="[all[shadows+tiddlers]tag<currentTiddler>]">
+<li>
+<div>
+<$link><$text text=<<currentTiddler>>/></$link>
+</div>
+<$codeblock code={{!!text}}/>
+</li>
+</$list>
+</ol>
--- a/core/ui/PageTemplate/story.tid
+++ b/core/ui/PageTemplate/story.tid
@ -14,7 +14,7 @@ tags: $:/tags/PageTemplate

 </section>

-<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template={{$:/config/ui/ViewTemplate}} editTemplate={{$:/config/ui/EditTemplate}} storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}}/>
+<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/StoryTiddlerTemplate" storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}}/>

 <section class="story-frontdrop">

--- a/core/ui/StoryTiddlerTemplate.tid
+++ b/core/ui/StoryTiddlerTemplate.tid
@ -0,0 +1,3 @@
+title: $:/core/ui/StoryTiddlerTemplate
+
+<$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/StoryTiddlerTemplateFilter]get[text]] :and[!is[blank]else{$:/config/ui/ViewTemplate}] }}} />
--- a/core/ui/TagPickerTagTemplate.tid
+++ b/core/ui/TagPickerTagTemplate.tid
@ -16,7 +16,7 @@ title: $:/core/ui/TagPickerTagTemplate
 <$set name="backgroundColor" value={{!!color}}>
 <$wikify name="foregroundColor" text="""<$macrocall $name="contrastcolour" target={{!!color}} fallbackTarget=<<fallbackTarget>> colourA=<<colourA>> colourB=<<colourB>>/>""">
 <span class="tc-tag-label tc-btn-invisible" style=<<tag-pill-styles>>>
-<$transclude tiddler={{!!icon}}/><$view field="title" format="text"/>
+{{||$:/core/ui/TiddlerIcon}}<$view field="title" format="text"/>
 </span>
 </$wikify>
 </$set>
--- a/core/ui/TagTemplate.tid
+++ b/core/ui/TagTemplate.tid
@ -3,7 +3,7 @@ title: $:/core/ui/TagTemplate
 \whitespace trim
 <span class="tc-tag-list-item" data-tag-title=<<currentTiddler>>>
 <$set name="transclusion" value=<<currentTiddler>>>
-<$macrocall $name="tag-pill-body" tag=<<currentTiddler>> icon={{!!icon}} colour={{!!color}} palette={{$:/palette}} element-tag="""$button""" element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter='[all[current]tagging[]]' tag='span'"""/>
+<$macrocall $name="tag-pill-body" tag=<<currentTiddler>> colour={{!!color}} palette={{$:/palette}} element-tag="""$button""" element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter='[all[current]tagging[]]' tag='span'"""/>
 <$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
 <$set name="tv-show-missing-links" value="yes">
 <$transclude tiddler="$:/core/ui/ListItemTemplate"/>
--- a/core/ui/TiddlerIcon.tid
+++ b/core/ui/TiddlerIcon.tid
@ -0,0 +1,15 @@
+title: $:/core/ui/TiddlerIcon
+
+\whitespace trim
+\define title-styles()
+fill:$(foregroundColor)$;
+\end
+<$let tiddlerIcon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]get[text]] }}}>
+<$list filter="[<tiddlerIcon>!is[blank]]" variable="ignore">
+<$let foregroundColor={{!!color}}>
+<span class=<<iconSpanClass>> style=<<title-styles>>>
+<$transclude tiddler=<<tiddlerIcon>>/>
+</span>
+</$let>
+</$list>
+</$let>
--- a/core/ui/ViewTemplate/body.tid
+++ b/core/ui/ViewTemplate/body.tid
@ -3,14 +3,6 @@ tags: $:/tags/ViewTemplate

 <$reveal tag="div" class="tc-tiddler-body" type="nomatch" stateTitle=<<folded-state>> text="hide" retain="yes" animate="yes">

-<$list filter="[all[current]!has[plugin-type]!field:hide-body[yes]]">
-
-<$transclude>
-
-<$transclude tiddler="$:/language/MissingTiddler/Hint"/>
-
-</$transclude>
-
-</$list>
+<$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/ViewTemplateBodyFilter]get[text]] :and[!is[blank]else[$:/core/ui/ViewTemplate/body/default]] }}} />

 </$reveal>
--- a/core/ui/ViewTemplate/body/blank.tid
+++ b/core/ui/ViewTemplate/body/blank.tid
@ -0,0 +1,3 @@
+title: $:/core/ui/ViewTemplate/body/blank
+
+<!-- Intentionally blank -->
--- a/core/ui/ViewTemplate/body/code.tid
+++ b/core/ui/ViewTemplate/body/code.tid
@ -0,0 +1,3 @@
+title: $:/core/ui/ViewTemplate/body/code
+
+<$codeblock code={{{ [<currentTiddler>get[text]] }}} language={{{ [<currentTiddler>get[type]else[text/vnd.tiddlywiki]] }}}/>
--- a/core/ui/ViewTemplate/body/default.tid
+++ b/core/ui/ViewTemplate/body/default.tid
@ -0,0 +1,7 @@
+title: $:/core/ui/ViewTemplate/body/default
+
+<$transclude>
+
+<$transclude tiddler="$:/language/MissingTiddler/Hint"/>
+
+</$transclude>
--- a/core/ui/ViewTemplate/body/import.tid
+++ b/core/ui/ViewTemplate/body/import.tid
@ -1,5 +1,4 @@
-title: $:/core/ui/ViewTemplate/import
-tags: $:/tags/ViewTemplate
+title: $:/core/ui/ViewTemplate/body/import

 \define lingo-base() $:/language/Import/

--- a/core/ui/ViewTemplate/body/plugin.tid
+++ b/core/ui/ViewTemplate/body/plugin.tid
@ -0,0 +1,10 @@
+title: $:/core/ui/ViewTemplate/body/plugin
+
+<div class="tc-tiddler-plugin-info">
+<$let plugin-type={{!!plugin-type}}
+	default-popup-state="yes"
+	qualified-state=<<qualify "$:/state/plugin-info">>
+>
+{{||$:/core/ui/Components/plugin-info}}
+</$let>
+</div>
--- a/core/ui/ViewTemplate/plugin.tid
+++ b/core/ui/ViewTemplate/plugin.tid
@ -1,15 +0,0 @@
-title: $:/core/ui/ViewTemplate/plugin
-tags: $:/tags/ViewTemplate
-
-<$reveal tag="div" class="tc-tiddler-plugin-info" type="nomatch" stateTitle=<<folded-state>> text="hide" retain="yes" animate="yes">
-
-<$list filter="[all[current]has[plugin-type]] -[all[current]field:plugin-type[import]]">
-<$set name="plugin-type" value={{!!plugin-type}}>
-<$set name="default-popup-state" value="yes">
-<$set name="qualified-state" value=<<qualify "$:/state/plugin-info">>>
-{{||$:/core/ui/Components/plugin-info}}
-</$set>
-</$set>
-</$set>
-</$list>
-</$reveal>
--- a/core/ui/ViewTemplate/title.tid
+++ b/core/ui/ViewTemplate/title.tid
@ -2,9 +2,6 @@ title: $:/core/ui/ViewTemplate/title
 tags: $:/tags/ViewTemplate

 \whitespace trim
-\define title-styles()
-fill:$(foregroundColor)$;
-\end
 <div class="tc-tiddler-title">
 <div class="tc-titlebar">
 <span class="tc-tiddler-controls">
@ -12,25 +9,10 @@ fill:$(foregroundColor)$;
 </span>
 <$set name="tv-wikilinks" value={{$:/config/Tiddlers/TitleLinks}}>
 <$link>
-<$set name="foregroundColor" value={{!!color}}>
-<$list filter="[all[current]has[icon]]~[[$:/config/DefaultTiddlerIcon]has[text]]">
-<span class="tc-tiddler-title-icon" style=<<title-styles>>>
-<$transclude tiddler={{!!icon}}>
-<$transclude tiddler={{$:/config/DefaultTiddlerIcon}}/>
-</$transclude>
-</span>
-</$list>
-</$set>
-<$list filter="[all[current]removeprefix[$:/]]">
-<h2 class="tc-title" title={{$:/language/SystemTiddler/Tooltip}}>
-<span class="tc-system-title-prefix">$:/</span><$text text=<<currentTiddler>>/>
-</h2>
-</$list>
-<$list filter="[all[current]!prefix[$:/]]">
-<h2 class="tc-title">
-<$view field="title"/>
-</h2>
-</$list>
+<$let iconSpanClass="tc-tiddler-title-icon">
+{{||$:/core/ui/TiddlerIcon}}
+</$let>
+<$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/ViewTemplateTitleFilter]get[text]] :and[!is[blank]else[$:/core/ui/ViewTemplate/title/default]] }}} />
 </$link>
 </$set>
 </div>
--- a/core/ui/ViewTemplate/title/default.tid
+++ b/core/ui/ViewTemplate/title/default.tid
@ -0,0 +1,6 @@
+title: $:/core/ui/ViewTemplate/title/default
+
+\whitespace trim
+<h2 class="tc-title">
+<$view field="title"/>
+</h2>
--- a/core/ui/ViewTemplate/title/system.tid
+++ b/core/ui/ViewTemplate/title/system.tid
@ -0,0 +1,6 @@
+title: $:/core/ui/ViewTemplate/title/system
+
+\whitespace trim
+<h2 class="tc-title" title={{$:/language/SystemTiddler/Tooltip}}>
+<span class="tc-system-title-prefix">$:/</span><$text text={{{ [<currentTiddler>removeprefix[$:/]] }}}/>
+</h2>
--- a/core/wiki/config/EditTemplateBodyFilters.multids
+++ b/core/wiki/config/EditTemplateBodyFilters.multids
@ -0,0 +1,5 @@
+title: $:/config/EditTemplateBodyFilters/
+tags: $:/tags/EditTemplateBodyFilter
+
+canonical-uri: [has[_canonical_uri]then[$:/core/ui/EditTemplate/body/canonical-uri]]
+default: [[$:/core/ui/EditTemplate/body/default]]
--- a/core/wiki/config/StoryTiddlerTemplateFilters.multids
+++ b/core/wiki/config/StoryTiddlerTemplateFilters.multids
@ -0,0 +1,5 @@
+title: $:/config/StoryTiddlerTemplateFilters/
+tags: $:/tags/StoryTiddlerTemplateFilter
+
+draft: [is[draft]then{$:/config/ui/EditTemplate}]
+default: [{$:/config/ui/ViewTemplate}]
--- a/core/wiki/config/TiddlerIconFilters.multids
+++ b/core/wiki/config/TiddlerIconFilters.multids
@ -0,0 +1,5 @@
+title: $:/config/TiddlerIconFilters/
+tags: $:/tags/TiddlerIconFilter
+
+icon-field: [has[icon]then{!!icon}]
+default: [{$:/config/DefaultTiddlerIcon}has[text]]
--- a/core/wiki/config/ViewTemplateBodyFilters.multids
+++ b/core/wiki/config/ViewTemplateBodyFilters.multids
@ -0,0 +1,8 @@
+title: $:/config/ViewTemplateBodyFilters/
+tags: $:/tags/ViewTemplateBodyFilter
+
+system: [prefix[$:/boot/]] [prefix[$:/config/]] [prefix[$:/core/]!field:title[$:/core/readme]!field:title[$:/core/icon]] [prefix[$:/info/]] [prefix[$:/language/]] [prefix[$:/languages/]] [prefix[$:/snippets/]] [prefix[$:/state/]] [prefix[$:/status/]] [prefix[$:/info/]] [prefix[$:/temp/]] +[limit[1]then[$:/core/ui/ViewTemplate/body/code]]
+import: [field:plugin-type[import]then[$:/core/ui/ViewTemplate/body/import]]
+plugin: [has[plugin-type]then[$:/core/ui/ViewTemplate/body/plugin]]
+hide-body: [field:hide-body[yes]then[$:/core/ui/ViewTemplate/body/blank]]
+default: [[$:/core/ui/ViewTemplate/body/default]]
--- a/core/wiki/config/ViewTemplateTitleFilters.multids
+++ b/core/wiki/config/ViewTemplateTitleFilters.multids
@ -0,0 +1,5 @@
+title: $:/config/ViewTemplateTitleFilters/
+tags: $:/tags/ViewTemplateTitleFilter
+
+system: [prefix[$:/]then[$:/core/ui/ViewTemplate/title/system]]
+default: [[$:/core/ui/ViewTemplate/title/default]]
--- a/core/wiki/macros/tag.tid
+++ b/core/wiki/macros/tag.tid
@ -10,18 +10,18 @@ color:$(foregroundColor)$;
 \define tag-pill-inner(tag,icon,colour,fallbackTarget,colourA,colourB,element-tag,element-attributes,actions)
 <$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$""">
 <$element-tag$ $element-attributes$ class="tc-tag-label tc-btn-invisible" style=<<tag-pill-styles>>>
-$actions$<$transclude tiddler="""$icon$"""/><$view tiddler=<<__tag__>> field="title" format="text" />
+$actions${{||$:/core/ui/TiddlerIcon}}<$view tiddler=<<__tag__>> field="title" format="text" />
 </$element-tag$>
 </$vars>
 \end

 \define tag-pill-body(tag,icon,colour,palette,element-tag,element-attributes,actions)
-<$macrocall $name="tag-pill-inner" tag=<<__tag__>> icon="""$icon$""" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}} element-tag="""$element-tag$""" element-attributes="""$element-attributes$""" actions="""$actions$"""/>
+<$macrocall $name="tag-pill-inner" tag=<<__tag__>> colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}} element-tag="""$element-tag$""" element-attributes="""$element-attributes$""" actions="""$actions$"""/>
 \end

 \define tag-pill(tag,element-tag:"span",element-attributes:"",actions:"")
 <span class="tc-tag-list-item" data-tag-title=<<__tag__>>>
-<$macrocall $name="tag-pill-body" tag=<<__tag__>> icon={{{ [<__tag__>get[icon]] }}} colour={{{ [<__tag__>get[color]] }}} palette={{$:/palette}} element-tag="""$element-tag$""" element-attributes="""$element-attributes$""" actions="""$actions$"""/>
+<$macrocall $name="tag-pill-body" tag=<<__tag__>> colour={{{ [<__tag__>get[color]] }}} palette={{$:/palette}} element-tag="""$element-tag$""" element-attributes="""$element-attributes$""" actions="""$actions$"""/>
 </span>
 \end

--- a/core/wiki/tags/EditTemplateBodyFilter.tid
+++ b/core/wiki/tags/EditTemplateBodyFilter.tid
@ -0,0 +1,2 @@
+title: $:/tags/EditTemplateBodyFilter
+list: $:/config/EditTemplateBodyFilters/canonical-uri $:/config/EditTemplateBodyFilters/default
--- a/core/wiki/tags/StoryTiddlerTemplateFilter.tid
+++ b/core/wiki/tags/StoryTiddlerTemplateFilter.tid
@ -0,0 +1,2 @@
+title: $:/tags/StoryTiddlerTemplateFilter
+list: $:/config/StoryTiddlerTemplateFilters/draft $:/config/StoryTiddlerTemplateFilters/default
--- a/core/wiki/tags/TiddlerIconFilter.tid
+++ b/core/wiki/tags/TiddlerIconFilter.tid
@ -0,0 +1,3 @@
+title: $:/tags/TiddlerIconFilter
+list: $:/config/TiddlerIconFilters/icon-field $:/config/TiddlerIconFilters/default
+
--- a/core/wiki/tags/ViewTemplateBodyFilter.tid
+++ b/core/wiki/tags/ViewTemplateBodyFilter.tid
@ -0,0 +1,3 @@
+title: $:/tags/ViewTemplateBodyFilter
+list: $:/config/ViewTemplateBodyFilters/system $:/config/ViewTemplateBodyFilters/import $:/config/ViewTemplateBodyFilters/plugin $:/config/ViewTemplateBodyFilters/hide-body $:/config/ViewTemplateBodyFilters/default
+
--- a/core/wiki/tags/ViewTemplateTitleFilter.tid
+++ b/core/wiki/tags/ViewTemplateTitleFilter.tid
@ -0,0 +1,3 @@
+title: $:/tags/ViewTemplateTitleFilter
+list: $:/config/ViewTemplateTitleFilters/system $:/config/ViewTemplateTitleFilters/default
+
--- a/editions/test/tiddlers/tests/test-prefixes-filter.js
+++ b/editions/test/tiddlers/tests/test-prefixes-filter.js
@ -288,6 +288,38 @@ describe("'reduce' and 'intersection' filter prefix tests", function() {
 		tags: ["cakes","with tea"],
 		text: "Does anyone eat pound cake?"
 	});
+	wiki.addTiddler({
+		title: "$:/filter1",
+		text: "[tag[cakes]then[It is customary]]",
+		tags: "$:/tags/Filter $:/tags/SecondFilter"
+	});
+	wiki.addTiddler({
+		title: "$:/filter2",
+		text: "[<currentTiddler>tag[shopping]then[It is not customary]]",
+		tags: "$:/tags/Filter $:/tags/SecondFilter"
+	});
+	wiki.addTiddler({
+		title: "$:/filter3",
+		text: "[[Just a default]]",
+		tags: "$:/tags/Filter"
+	});
+	wiki.addTiddler({
+		title: "$:/tags/Filter",
+		list: "$:/filter1 $:/filter2 $:/filter3"
+	});
+	wiki.addTiddler({
+		title: "$:/tags/SecondFilter",
+		list: "$:/filter1 $:/filter2"
+	});
+	
+	it("should handle the :cascade filter prefix", function() {
+		expect(wiki.filterTiddlers("[[Rice Pudding]] :cascade[all[shadows+tiddlers]tag[$:/tags/Filter]get[text]]").join(",")).toBe("It is not customary");
+		expect(wiki.filterTiddlers("[[chocolate cake]] :cascade[all[shadows+tiddlers]tag[$:/tags/Filter]get[text]]").join(",")).toBe("It is customary");
+		expect(wiki.filterTiddlers("[[Sparkling water]] :cascade[all[shadows+tiddlers]tag[$:/tags/Filter]get[text]]").join(",")).toBe("Just a default");
+		expect(wiki.filterTiddlers("[[Rice Pudding]] :cascade[all[shadows+tiddlers]tag[$:/tags/SecondFilter]get[text]]").join(",")).toBe("It is not customary");
+		expect(wiki.filterTiddlers("[[chocolate cake]] :cascade[all[shadows+tiddlers]tag[$:/tags/SecondFilter]get[text]]").join(",")).toBe("It is customary");
+		expect(wiki.filterTiddlers("[[Sparkling water]] :cascade[all[shadows+tiddlers]tag[$:/tags/SecondFilter]get[text]]").join(",")).toBe("");
+	});

 	it("should handle the :reduce filter prefix", function() {
 		expect(wiki.filterTiddlers("[tag[shopping]] :reduce[get[quantity]add<accumulator>]").join(",")).toBe("22");
--- a/editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/Demo
+++ b/editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/Demo
@ -0,0 +1,9 @@
+title: Demo Tiddler List with Custom Story Tiddler Template
+tags: $:/tags/TiddlerList
+filter: HelloThere Community GettingStarted Features Reference Plugins Learning
+
+This is a demo tiddler with a custom story tiddler template. See [[Story Tiddler Templates]] for details.
+
+Click to close this tiddler: {{||$:/core/ui/Buttons/close}}
+
+Click to edit this tiddler: {{||$:/core/ui/Buttons/edit}}
--- a/editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/Styles.tid
+++ b/editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/Styles.tid
@ -0,0 +1,31 @@
+title: $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Styles
+tags: $:/tags/Stylesheet
+
+.tc-custom-tiddler-template {
+	border: 3px solid <<colour muted-foreground>>;
+	border-radius: 1em;
+	margin-bottom: 1em;
+}
+
+.tc-custom-tiddler-template-inner {
+	background: <<colour muted-foreground>>;
+	padding: 1em;
+}
+
+.tc-custom-tiddler-template-list {
+	position: relative;
+	height: 33vh;
+}
+
+.tc-custom-tiddler-template-list .tc-custom-tiddler-template-list-item {
+	position: absolute;
+	width: 100%;
+	transform-origin: 50% 0;
+	top: 50px;
+	left: 0;
+	<<box-shadow "0px 0px 15px rgba(0, 0, 0, 0.3)">>
+}
+
+.tc-custom-tiddler-template-list .tc-custom-tiddler-template-list-item .tc-tiddler-frame {
+	margin: 0;
+}
--- a/editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/Template.tid
+++ b/editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/Template.tid
@ -0,0 +1,22 @@
+title: $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template
+
+\define list-item-styles()
+transform: translate($(left)$%,$(top)$%) scale(0.3) rotate($(angle)$deg);
+\end
+
+<div class="tc-custom-tiddler-template">
+	<div class="tc-custom-tiddler-template-inner">
+		<$transclude mode="block"/>
+	</div>
+	<div class="tc-custom-tiddler-template-list">
+		<$let numItems={{{ [subfilter{!!filter}count[]] }}} angleIncrement={{{ [[45]divide<numItems>] }}} posIncrement={{{ [[90]divide<numItems>] }}}>
+			<$list filter={{!!filter}} counter="counter">
+				<$let  angle={{{ [<counter>subtract[1]multiply<angleIncrement>subtract[22.5]] }}} left={{{ [<counter>subtract[1]multiply<posIncrement>subtract[45]] }}} top={{{ 0 }}}>
+					<div class="tc-custom-tiddler-template-list-item" style=<<list-item-styles>>>
+						{{||$:/core/ui/ViewTemplate}}
+					</div>
+				</$let>
+			</$list>
+		</$let>
+	</div>
+</div>
--- a/editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/TiddlerTemplateFilter.tid
+++ b/editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/TiddlerTemplateFilter.tid
@ -0,0 +1,5 @@
+title: $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Filter
+tags: $:/tags/StoryTiddlerTemplateFilter
+list-before: $:/config/StoryTiddlerTemplateFilters/default
+
+[tag[$:/tags/TiddlerList]then[$:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template]]
--- a/editions/tw5.com/tiddlers/demonstrations/CustomTiddlerIconCascadeDemo/CustomTiddlerIconCascadeDemo.tid
+++ b/editions/tw5.com/tiddlers/demonstrations/CustomTiddlerIconCascadeDemo/CustomTiddlerIconCascadeDemo.tid
@ -0,0 +1,5 @@
+title: $:/_tw5.com/CustomTiddlerIconCascadeDemo
+tags: $:/tags/TiddlerIconFilter
+
+[tag[TableOfContents]then[$:/core/images/globe]]
+[tag[Working with TiddlyWiki]then[$:/core/images/help]]