tiddlywiki 5.3.5 → 5.3.6

package/editions/tw5.com/tiddlers/system/tw5.com-styles.tid

@@ -82,291 +82,10 @@ type: text/vnd.tiddlywiki
 	height: 1em;
 }
 
-
-
 .tc-wrapper-flex {
 	display: flex;
 }
 
-.tc-saving-sidebar {
-	margin: 0;
-	padding: 0;
-	min-width: 200px;
-	overflow: auto;
-}
-
-.tc-saving-sidebar a {
-	display: block;
-}
-
-@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
-	.tc-wrapper-flex {
-		flex-direction: column;
-	}
-	.tc-saving-sidebar {
-		width: 100%;
-		height: auto;
-	}
-	.tc-saving-sidebar a {
-		float: left;
-	}
-}
-
-.tc-saving-sidebar-category {
-	margin-bottom: 10px;
-}
-
-.tc-saving-sidebar-category-title {
-	font-weight: bold;
-	margin-bottom: 5px;
-	font-size: 16px;
-}
-
-.tc-saving-sidebar-category-item {
-	margin-left: 10px;
-}
-
-.tc-saving-introduction {
-	display: flex;
-	justify-content: center;
-	text-align: center;
-	align-items: center;
-	padding: 4em;
-	font-style: italic;
-}
-
-.tc-cards {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-evenly;
-	width: 100%;
-	padding: 0.5em;
-	background: <<colour background>>;
-	border-color: rgba(34,36,38,.15);
-	box-shadow: 0 2px 25px 0 rgb(34 36 38 / 5%) inset;
-	gap: 1em;
-}
-
-.tc-cards.tc-small {
-	text-align: center;
-	font-size: 0.7em;
-}
-
-.tc-cards.tc-action-card {
-	text-align: center;
-	background: none;
-}
-
-.tc-cards.tc-action-card .tc-card-button {
-	border: 1px solid <<colour foreground>>;
-	background: <<colour foreground>>;
-	margin: 0.5em;
-	border-radius: 6px;
-	padding: 0.5em;
-	color: <<colour background>>;
-	fill: <<colour background>>;
-}
-
-.tc-cards.tc-action-card .tc-card-button svg {
-	width: 0.65em;
-	height: 0.65em;
-	vertical-align: middle;
-}
-
-.tc-tiddlylink.tc-card {
-	font-weight: normal;
-	max-width: 100%;
-	position: relative;
-	background: <<colour background>>;
-	color: <<colour foreground>>;
-	width: 200px;
-	min-height: 0;
-	border: none;
-	border-radius: 8px;
-	box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
-	transition: box-shadow 0.3s ease,transform .3s ease;
-}
-
-.tc-cards.tc-cards-vertical .tc-tiddlylink.tc-card {
-	width: 100%;
-}
-
-@media (max-width: 500px) {
-	
-	.tc-cards {
-		padding: 0;
-	}
-
-	.tc-tiddlylink.tc-card {
-		margin: 0.25em;
-		width: 45%;
-	}
-
-}
-
-.tc-tiddlylink.tc-card.tc-card-quote {
-	width: 320px;
-	box-shadow: none;
-	background-color: #effdff;
-}
-
-.tc-card-accent {
-	height: 100%;
-	display: flex;
-	align-items: stretch;
-	flex-direction: column;
-	justify-content: stretch;
-	border-radius: 8px;
-}
-
-.tc-cards.tc-cards-vertical .tc-card-accent {
-	flex-direction: row;
-	align-items: center;
-}
-
-.tc-tiddlylink.tc-card:hover {
-	color: <<colour foreground>>;
-	background: <<colour notification-background>>;
-	text-decoration: none;
-	cursor: pointer;
-	box-shadow: 0 1px 5px 0 #bcbdbd, 0 0 0 1px #d4d4d5;
-	transform: translateY(-3px);
-}
-
-.tc-card-ribbon-wrapper {
-	line-height: 0;
-	width: 75px;
-	height: 75px;
-	position: absolute;
-	right: 0;
-	overflow: hidden;
-	top: 0;
-	z-index: 849;
-	pointer-events: none;
-}
-
-.tc-card-ribbon {
-	transition: top 0.3s ease-in-out;
-	top: 15px;
-	right: -77px;
-	position: absolute;
-	transform: rotate(45deg);
-	background-color: red;
-	box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 50%);
-}
-
-.tc-tiddlylink.tc-card:hover .tc-card-ribbon {
-	top: -77px;
-}
-
-.tc-card-ribbon-inner {
-	font-size: 10px;
-	line-height: 13px;
-	font-weight: 700;
-	color: white;
-	text-decoration: none;
-	text-shadow: 0 -1px rgb(0 0 0 / 50%);
-	width: 200px;
-	display: inline-block;
-	padding: 2px 0;
-	text-align: center;
-}
-
-.tc-card-image {
-	border-top-left-radius: 8px;
-	border-top-right-radius: 8px;
-	line-height: 0;
-	overflow: hidden;
-}
-
-.tc-card-image img {
-	border-top-left-radius: 8px;
-	border-top-right-radius: 8px;
-	width: 100%;
-	transition: transform 0.3s ease-in-out;
-}
-
-.tc-tiddlylink.tc-card:hover .tc-card-image img {
-	transform: scale(1.05);
-}
-
-.tc-card-title {
-	font-size: 1.2em;
-	line-height: 1.2;
-	font-weight: 600;
-	transition: color 0.3s ease-in-out;
-	padding: 0 10px;
-	margin: 0.5em 0 0.25em 0;
-}
-
-.tc-cards.tc-cards-vertical .tc-card-title {
-	font-size: 1em;
-	min-width: 10em;
-	text-align: right;
-}
-
-.tc-cards.tc-cards-vertical .tc-card-title svg {
-	width: 1em;
-	height: 1em;
-	vertical-align: text-bottom;
-}
-
-.tc-card-subtitle,
-.tc-card-author {
-	font-size: 0.8em;
-	line-height: 1.2;
-	color: <<colour muted-foreground>>;
-	padding: 0 10px;
-	margin: 0.5em 0;
-	font-style: italic;
-}
-
-.tc-card-body {
-	font-size: 0.9em;
-	line-height: 1.2;
-	padding: 0.25em 10px;
-	margin: 0;
-}
-
-.tc-cards.tc-cards-vertical .tc-card-body {
-	font-size: 1em;
-}
-
-.tc-card-body-wrapper {
-	position: relative;
-	flex-grow: 1;
-}
-
-.tc-tiddlylink.tc-card.tc-card-quote .tc-card-body:before {
-	font-family: Georgia, serif;
-	color: <<colour blockquote-bar>>;
-	content: open-quote;
-	font-size: 5em;
-	line-height: 1;
-	float: left;
-}
-
-.tc-tiddlylink.tc-card.tc-card-quote .tc-card-body:after {
-	font-family: Georgia, serif;
-	color: <<colour blockquote-bar>>;
-	content: close-quote;
-	font-size: 5em;
-	line-height: 1;
-	float: right;
-}
-
-.tc-tiddlylink.tc-card .tc-card-body-clear {
-	clear: both;
-}
-
-.tc-card-body > p {
-	margin: 0.25em 0;
-}
-
-.tc-card a:active, .tc-card a:focus, .tc-btn-download:active, .tc-btn-download:focus{
-	outline: none; 
-}
-
 .tc-btn-download {
 	padding: 10px 30px;
 	border-radius: 5px;
@@ -398,8 +117,31 @@ type: text/vnd.tiddlywiki
 	-webkit-column-gap: 1em;
 }
 
-@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+/* Switch to 2 columns for 780x1280 displays which is 780p */
+@media (max-width: 1279px) {
 	.multi-columns {
 		column-count: 2;
 	}
-}
+}
+
+@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+	.multi-columns {
+		column-count: 1;
+	}
+}
+
+.tc-saving-sidebar-category { margin-bottom:10px; }
+.tc-saving-sidebar-category-title { margin-bottom:5px; font-weight:bold; }
+.tc-saving-sidebar-category-item { margin-left:10px; white-space:nowrap; }
+
+.tc-scary-warning {
+	font-weight: bold;
+	padding: 0 1em;
+	margin-left: -1em;
+	margin-right: -1em;
+	color: #f22;
+	border-radius: 4px;
+	border: 3px solid transparent;
+	background: #ffd;
+	background: linear-gradient(#ffd, #ffd) padding-box, repeating-linear-gradient(-45deg, red 0, red 25%, transparent 0, transparent 50%) 0 / .6em .6em;
+}

package/editions/tw5.com/tiddlers/system/version-macros.tid

@@ -19,20 +19,22 @@ type: text/vnd.tiddlywiki
 \end
 
 \procedure .from-version(version)
-<% if [<version>compare:version:gteq<tf.from-version-reference>] %>
+<%if [<version>compare:version:gteq<tf.from-version-reference>] %>
 	<<.from-version-template "doc-from-version doc-from-version-new" "New in v">>
-<% else %>
+<%else%>
 	<<.from-version-template "doc-from-version" "Introduced in v">>
-<% endif %>
+<%endif%>
 \end
 
-\procedure .deprecated-since(version, superseded:"TODO-Link")
+\procedure .deprecated-since(version, superseded:"")
 <$link to="Deprecated - What does it mean" class="doc-deprecated-version tc-btn-invisible">
 	{{$:/core/images/warning}}
-	<span class="tc-tiny-gap">Deprecated since:</span>
-	<$text text=<<version>>/>
+	<span class="tc-tiny-gap">Deprecated from </span>
+	v<$text text=<<version>>/>
 </$link>
-<span class="tc-tiny-gap-left">
-	(see <$link class="tc-tiny-gap-left" to=<<superseded>>><$text text=<<superseded>>/></$link>)
-</span>
+<%if [<superseded>else[]!match[]] %>
+	<span class="tc-tiny-gap-left">
+		(see <$link class="tc-tiny-gap-left" to=<<superseded>>><$text text=<<superseded>>/></$link>)
+	</span>
+<%endif%>
 \end

package/editions/tw5.com/tiddlers/system/wikitext-macros.tid

@@ -1,6 +1,6 @@
 code-body: yes
 created: 20150117184156000
-modified: 20240315144208842
+modified: 20240716181836632
 tags: $:/tags/Macro
 title: $:/editions/tw5.com/wikitext-macros
 type: text/vnd.tiddlywiki
@@ -80,50 +80,10 @@ type: text/vnd.tiddlywiki
 \end
 
 \procedure tw-code(tiddler)
-<$codeblock language={{$tiddler$!!type}} code={{$tiddler$}}/>
+<$codeblock language={{{ [<tiddler>get[type]] }}} code={{{ [<tiddler>get[text]] }}}/>
 \end
 
 \procedure tw-code-link(tiddler)
-[[$tiddler$]]:
-<<tw-code $tiddler$>>
-\end
-
-\procedure flex-card(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link")
-<$link class={{{ [<class>addprefix[tc-card ]] }}} to={{{ [<currentTiddler>get<linkField>else<currentTiddler>] }}}>
-	<div class="tc-card-accent" style.borderTop={{{ [<bordercolor>!is[blank]addprefix[5px solid ]] }}} style.background={{!!background}} style.backgroundColor=<<backgroundcolor>> style.color=<<textcolor>> style.fill=<<textcolor>>>
-		<$list filter="[<currentTiddler>has[ribbon-text]]" variable="ignore">
-			<div class="tc-card-ribbon-wrapper">
-				<div class="tc-card-ribbon" style.backgroundColor={{{ [<currentTiddler>get[ribbon-color]else[red]] }}}>
-					<div class="tc-card-ribbon-inner">
-						<$text text={{!!ribbon-text}}/>
-					</div>
-				</div>
-			</div>
-		</$list>
-		<$list filter="[<currentTiddler>has<imageField>]" variable="ignore">
-			<div class="tc-card-image">
-				<$image source={{{ [<currentTiddler>get<imageField>] }}}/>
-			</div>
-		</$list>
-		<div class="tc-card-title"><$transclude field=<<captionField>>><$view field="title"/></$transclude></div>
-		<$list filter="[<subtitle>!is[blank]]" variable="ignore">
-			<div class="tc-card-subtitle">
-				<$text text=<<subtitle>>/>
-			</div>
-		</$list>
-		<div class="tc-card-icon"><$transclude tiddler={{!!icon}}/></div>
-		<div class="tc-card-body-wrapper">
-			<div class="tc-card-body">
-				<$transclude field=<<descriptionField>> mode="block"/>
-			</div>
-			<div class="tc-card-body-clear">
-			</div>
-		</div>
-		<$list filter="[all[current]has[button-text]]" variable="ignore">
-			<div class="tc-card-button" style.background-color={{!!button-color}} style.border-color={{!!button-color}}>
-				<$text text={{!!button-text}}/>&#32;{{$:/core/images/chevron-right}}
-			</div>
-		</$list>
-	</div>
-</$link>
+<$link to=<<tiddler>>/>:
+<$transclude $variable=tw-code tiddler=<<tiddler>> />
 \end

package/editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_ClassFilters_PageTemplate.tid

@@ -6,4 +6,4 @@ tags: SystemTags
 title: SystemTag: $:/tags/ClassFilters/PageTemplate
 type: text/vnd.tiddlywiki
 
-The [[system tag|SystemTags]] `$:/tags/ClassFilters/PageTemplate` marks filters marks filters evaluated to dynamically add their output as CSS classes to the page template.
+The [[system tag|SystemTags]] `$:/tags/ClassFilters/PageTemplate` marks filters evaluated to dynamically add their output as CSS classes to the page template.

package/editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_ControlPanel_SettingsTab.tid

@@ -0,0 +1,9 @@
+caption: $:/tags/ControlPanel/SettingsTab
+created: 20240813060717747
+description: marks elements to be placed under "Settings" tab in Control Panel
+modified: 20240813060843043
+tags: SystemTags
+title: SystemTag: $:/tags/ControlPanel/SettingsTab
+type: text/vnd.tiddlywiki
+
+The [[system tag|SystemTags]] `$:/tags/ControlPanel/SettingsTab` marks elements to be placed under "Settings" tab in [[$:/ControlPanel]]

package/editions/tw5.com/tiddlers/testcases/DataWidget/ImportCustomTitle.tid

@@ -0,0 +1,29 @@
+title: TestCases/DataWidget/ImportCustomTitle
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+description: Importing a payload tiddler and overwriting the title
+display-format: plaintext
+
+title: Narrative
+
+Importing a payload tiddler and overwriting the title
++
+title: Output
+
+\whitespace trim
+<$data $tiddler="HelloThere" title="RealTitle"/>
++
+title: HelloThere
+tags: Definitions
+
+This is the tiddler HelloThere
++
+title: ExpectedResult
+
+<p>[
+    {
+        "title": "RealTitle",
+        "tags": "Definitions",
+        "text": "This is the tiddler HelloThere"
+    }
+]</p>

package/editions/tw5.com/tiddlers/testcases/HTML/BlockModeInHTMLTable.tid

@@ -0,0 +1,30 @@
+created: 20240713164810184
+description: Block mode for table cells
+modified: 20240713164810184
+tags: $:/tags/wiki-test-spec
+title: TestCases/HTML/BlockModeInHTMLTable
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+Unlike the table wiki syntax, the less convenient `<table>`, `<tr>`, `<td>` html tags can use a blank line
+to get block mode punctuation regognised inside of table cells.
++
+title: Output
+
+<table>
+<tr><td>
+
+* list item one
+* list item two
+</td><td>
+
+|nested|table|
+</td></tr>
+</table>
++
+title: ExpectedResult
+
+<p><table>
+<tr><td><ul><li>list item one</li><li>list item two</li></ul></td><td><table><tbody><tr class="evenRow"><td>nested</td><td>table</td></tr></tbody></table></td></tr>
+</table></p>

package/editions/tw5.com/tiddlers/testcases/HTML/OpenTagBlankLine.tid

@@ -0,0 +1,23 @@
+created: 20240622142425004
+description: Blank line after open tag
+modified: 20240622144230258
+tags: $:/tags/wiki-test-spec
+title: TestCases/HTML/OpenTagBlankLine
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+A blank line after an open html tag allows block mode punctuation to be recognised
++
+title: Output
+
+<div>
+
+* blank line after open tag allows
+* block mode punctuation (i.e. this list) to
+* be recognised
+</div>
++
+title: ExpectedResult
+
+<div><ul><li>blank line after open tag allows</li><li>block mode punctuation (i.e. this list) to</li><li>be recognised</li></ul></div>

package/editions/tw5.com/tiddlers/testcases/HTML/OpenTagBlankLineInBoldSyntax.tid

@@ -0,0 +1,22 @@
+created: 20240622144038465
+description: Blank line after open tag in bold syntax
+modified: 20240622145114506
+tags: $:/tags/wiki-test-spec
+title: TestCases/HTML/OpenTagBlankLineInBoldSyntax
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+A blank line after an open html tag allows block mode punctuation to be recognised even when the html is embedded within inline punctuation (bold here).
++
+title: Output
+
+''<div>
+
+* list item one
+* list item two
+</div>''
++
+title: ExpectedResult
+
+<p><strong><div><ul><li>list item one</li><li>list item two</li></ul></div></strong></p>

package/editions/tw5.com/tiddlers/testcases/HTML/OpenTagBlankLineInTableSyntax.tid

@@ -0,0 +1,22 @@
+created: 20240622144753311
+description: Blank line after open tag in table syntax
+modified: 20240622145056299
+tags: $:/tags/wiki-test-spec
+title: TestCases/HTML/OpenTagBlankLineInTableSyntax
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+A blank line after an open html tag cannot work when used inside table syntax since each row of a table must be all on one line
++
+title: Output
+
+|For a blank line after open tag|<div>
+
+* list is recognised
+* but the surrounding table row is not
+</div>|
++
+title: ExpectedResult
+
+<p>|For a blank line after open tag|<div><ul><li>list is recognised</li><li>but the surrounding table row is not</li></ul></div>|</p>

package/editions/tw5.com/tiddlers/testcases/HTML/OpenTagNoBlankLine.tid

@@ -0,0 +1,34 @@
+created: 20240622143533021
+description: No blank line after open tag
+modified: 20240622145145440
+tags: $:/tags/wiki-test-spec
+title: TestCases/HTML/OpenTagNoBlankLine
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+Block mode punctuation is not recognised when HTML open tag is not followed by a blank line
++
+title: Output
+
+<div>
+* Open tag without a blank line means
+* block mode punctuation (i.e. this list) will
+* NOT be recognised.
+
+Paragraphs are only recognised in block mode. Even with blank lines, new paragraphs are not recognised.
+
+This also is not a new paragraph.
+</div>
++
+title: ExpectedResult
+
+<p><div>
+* Open tag without a blank line means
+* block mode punctuation (i.e. this list) will
+* NOT be recognised.
+
+Paragraphs are only recognised in block mode. Even with blank lines, new paragraphs are not recognised.
+
+This also is not a new paragraph.
+</div></p>

package/editions/tw5.com/tiddlers/testcases/RevealWidget/AccordionSlider.tid

@@ -0,0 +1,30 @@
+created: 20240721163229297
+description: Reveal widget for accordion or slider functionality
+modified: 20240721172211283
+tags: $:/tags/wiki-test-spec
+title: TestCases/RevealWidget/AccordionSlider
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+Two distinct buttons toggle the state of the tiddler value. Two reveal widgets. The first displays the button to show the content. The second displays both the content and the button to hide the content.
++
+title: Output
+
+<$reveal type="nomatch" state="$:/state/SampleReveal2" text="show">
+
+<$button set="$:/state/SampleReveal2" setTo="show">Show me</$button>
+
+</$reveal>
+<$reveal type="match" state="$:/state/SampleReveal2" text="show">
+
+<$button set="$:/state/SampleReveal2" setTo="hide">Hide me</$button>
+
+! This is the revealed content
+And this is some text
+
+</$reveal>
++
+title: ExpectedResult
+
+<div class=" tc-reveal"><p><button class="">Show me</button></p></div><div class=" tc-reveal" hidden="true"></div>

package/editions/tw5.com/tiddlers/testcases/RevealWidget/Popup.tid

@@ -0,0 +1,27 @@
+created: 20240721163229297
+description: Reveal widget for popup content
+modified: 20240721172211283
+tags: $:/tags/wiki-test-spec
+title: TestCases/RevealWidget/Popup
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+When the button is clicked, the tiddler specified by the popup attribute is filled with the click coordinates. The reveal widget uses these coordinates to position the popup content.
++
+title: Output
+
+<$button popup="$:/SamplePopupState">Pop me up!</$button>
+
+<$reveal type="popup" state="$:/SamplePopupState">
+<div class="tc-drop-down">
+
+! This is the popup
+And this is some text
+
+</div>
+</$reveal>
++
+title: ExpectedResult
+
+<p><button aria-expanded="false" class="">Pop me up!</button></p><p><span class=" tc-reveal" hidden="true"></span></p>

package/editions/tw5.com/tiddlers/testcases/RevealWidget/SimpleReveal.tid

@@ -0,0 +1,27 @@
+created: 20240721163229297
+description: Simple content reveal
+modified: 20240721172211283
+tags: $:/tags/wiki-test-spec
+title: TestCases/RevealWidget/SimpleReveal
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+Two distinct buttons toggle the state of the tiddler value. The reveal widget displays its content for one of the two states.
++
+title: Output
+
+<$button set="$:/state/SampleReveal1" setTo="show">Show me</$button>
+<$button set="$:/state/SampleReveal1" setTo="hide">Hide me</$button>
+
+<$reveal type="match" state="$:/state/SampleReveal1" text="show">
+
+! This is the revealed content
+And this is some text
+
+</$reveal>
++
+title: ExpectedResult
+
+<p><button class="">Show me</button>
+<button class="">Hide me</button></p><div class=" tc-reveal" hidden="true"></div>