Add demo of custom story tiddler template

editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/Demo Tiddler List with Custom Story Tiddler Template.tid

@@ -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}}

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;
+}

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>

editions/tw5.com/tiddlers/demonstrations/CustomStoryTiddlerTemplateDemo.tid/TiddlerTemplateFilter.tid

@@ -0,0 +1,5 @@
+title: $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Filter
+tags: $:/tags/TiddlerTemplateFilter
+list-before: $:/config/TiddlerTemplateFilters/default
+
+[tag[$:/tags/TiddlerList]then[$:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template]]