Introduce step about tags

plugins/tiddlywiki/tour/simplified-tiddler-with-tags.tid

@@ -0,0 +1,106 @@
+title: $:/plugins/tiddlywiki/tour/simplified-tiddler-with-tags
+
+\whitespace trim
+\define tag-pill-styles()
+background-color:$(backgroundColor)$;
+fill:$(foregroundColor)$;
+color:$(foregroundColor)$;
+\end
+
+\procedure tag-pill-label(prefix)
+<$text text={{{ [<currentTiddler>removeprefix<prefix>] }}}/>
+\end
+
+\procedure tag-pill-label-link(prefix)
+<div>
+	<$link>
+		<$transclude $variable="tag-pill-label" prefix=<<prefix>>/>
+	</$link>
+</div>
+\end
+
+<!-- This has no whitespace trim to avoid modifying $actions$. Closing tags omitted for brevity. -->
+\define tag-pill-inner(tag,icon,colour,fallbackTarget,colourA,colourB,element-tag,element-attributes,actions,prefix)
+\whitespace trim
+<$let
+	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__>>/>
+	<$let currentTiddler=<<__tag__>>>
+		<$transclude $variable="tag-pill-label" prefix=<<__prefix__>>/>
+	</$let>
+</$element-tag$>
+</$let>
+\end
+
+\define tag-pill-body(tag,icon,colour,palette,element-tag,element-attributes,actions,prefix)
+<$transclude $variable="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__>>
+	prefix=<<__prefix__>>
+/>
+\end
+
+\procedure simplified-tag(prefix)
+<span class="tc-tag-list-item" data-tag-title=<<currentTiddler>>>
+	<$set name="transclusion" value=<<currentTiddler>>>
+		<$transclude $variable="tag-pill-body"
+			tag=<<currentTiddler>>
+			icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
+			colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
+			palette={{$:/palette}}
+			element-tag="$button"
+			element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter="[all[current]tagging[]]" tag='span'"""
+			prefix=<<prefix>>
+		/>
+		<$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 $variable="tag-pill-label-link" prefix=<<prefix>>/>
+			</$set>
+			<hr>
+			<$list filter="[all[shadows+tiddlers]tag<currentTiddler>]">
+				<$transclude $variable="tag-pill-label-link" prefix=<<prefix>>/>
+			</$list>
+		</$reveal>
+	</$set>
+</span>
+\end
+
+<$let storyTiddler=<<currentTiddler>>>
+	<div class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tiddler-shadow " role="article">
+		<div class="tc-tiddler-title">
+			<div class="tc-titlebar">
+				<span class="tc-tiddler-controls">
+					<$list filter="[<tour-simplified-tiddler-close-button>match[yes]]" variable="ignore">
+						{{||$:/core/ui/Buttons/close}}
+					</$list>
+				</span>
+				<span>
+					<h2 class="tc-title"><$view field="caption"/></h2>
+				</span>
+			</div>
+		</div>
+		<div class="tc-tags-wrapper">
+			<$list filter="[all[current]tags[]sort[title]]" storyview="pop">
+				<<simplified-tag "$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/">>
+			</$list>
+		</div>
+		<div class="tc-tiddler-body">
+			<$transclude field="text" mode="block"/>
+		</div>
+	</div>
+</$let>

plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/data/tiddlers-GasGiant.tid

@@ -0,0 +1,4 @@
+title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Gas Giant
+caption: Gas Giant
+
+ A gas giant is a large planet that has a solid core, but a very thick atmosphere. This means that most of the planet is made up of gas. These planets are very large.

plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/data/tiddlers-Jupiter.tid

@@ -1,4 +1,5 @@
 title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Jupiter
 caption: Jupiter
+tags: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Planet [[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Gas Giant]]
 
 Jupiter is the largest planet in the Solar System. It is the fifth planet from the Sun. Jupiter is a gas giant because it is so large and made of gas. The other gas giants in the Solar System are [[Saturn|$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Saturn]], Uranus, and Neptune.

plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/data/tiddlers-Mars.tid

@@ -0,0 +1,5 @@
+title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Mars
+caption: Mars
+tags: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Planet [[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Rocky]]
+
+Mars is the fourth planet from the Sun in the Solar System and the second-smallest planet. Mars is a terrestrial planet with polar ice caps of frozen water and carbon dioxide. It has the largest volcano in the Solar System, and some very large impact craters. Mars is named after the mythological Roman god of war because it appears of red color.

plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/data/tiddlers-Planet.tid

@@ -0,0 +1,4 @@
+title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Planet
+caption: Planet
+
+ A planet is a large object such as Venus or Earth that orbits a star. Planets are smaller than stars, and they do not make light. Jupiter is the biggest planet in the Solar System, while the smallest planet in the Solar System is Mercury.

plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/data/tiddlers-Rocky.tid

@@ -0,0 +1,4 @@
+title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Rocky
+caption: Rocky
+
+ Rocky planets have a core, a mantle, and a crust. They are a bit like a boiled egg: the central yolk is the core; the white albumin is the mantle; and the shell is the crust. The crust of a terrestrial planet is thin, with the core and the mantle taking up the vast bulk, sometimes with a very large core, sometimes much smaller. Terrestrial planets have metallic cores of mostly iron, with rocky mantles and crusts.

plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/data/tiddlers-Saturn.tid

@@ -1,4 +1,5 @@
 title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Saturn
 caption: Saturn
+tags: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Planet [[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Gas Giant]]
 
 Saturn is the sixth planet from the Sun located in the Solar System. It is the second largest planet in the Solar System, after Jupiter. Saturn is one of the four gas giant planets in the Solar System, along with [[Jupiter|$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Jupiter]], Uranus, and Neptune.

plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid

@@ -0,0 +1,26 @@
+title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/tags
+caption: Tagging tiddlers
+tags: $:/tags/Tour/IntroductionToTiddlyWiki
+display-mode: fullscreen
+enter-actions: <$action-setfield $tiddler="$:/temp/Tour/DemoStoryList" list="$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Mars"/>
+condition: [[$:/temp/Tour/DemoStoryList]contains[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Saturn]]
+
+Tiddlers may be categorised with one or more descriptive keywords or phrases called "tags". Tags can be used to search and navigate between tiddlers.
+
+Click on a tag to display a menu with:
+
+* A link to the tiddler with the same title as the tag
+* A list of links to the other tiddlers with the same tag
+
+Use the tag dropdown to open the tiddler Saturn.
+
+<$navigator story="$:/temp/Tour/DemoStoryList" history="$:/temp/Tour/DemoHistoryList" openLinkFromInsideRiver="below">
+
+<$list
+	filter="[list[$:/temp/Tour/DemoStoryList]]"
+	history="$:/temp/Tour/DemoHistoryList"
+	template="$:/plugins/tiddlywiki/tour/simplified-tiddler-with-tags"
+	storyview="classic"
+/>
+
+</$navigator>

plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/tagsTourIntroductionToTiddlyWiki.tid

@@ -1,2 +1,2 @@
 title: $:/tags/Tour/IntroductionToTiddlyWiki
-list: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/welcome $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/links $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/closing-tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/end-of-fullscreen $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/open-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/close-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/search $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/recent $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/create-tiddler $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/finished
+list: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/welcome $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/links  $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/tags $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/closing-tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/end-of-fullscreen $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/open-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/close-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/search $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/recent $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/create-tiddler $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/finished