Docs: Fixed PR for getting started tweaks (#7399)

* Cherry picked from getting-started-tweaks-feb-2023

* Update tiddler modified dates

editions/tw5.com/tiddlers/definitions/Tiddlyhost.tid

@@ -0,0 +1,12 @@
+title: Tiddlyhost
+tags: definition
+created: 20230410105035569
+modified: 20230410105035569
+
+<span style="float:right;">[img width=140 [Tiddlyhost Logo]]</span>
+
+[[Tiddlyhost.com|https://tiddlyhost.com/]] is a hosting service for TiddlyWiki created by Simon Baird. Once you sign up and confirm your email you can create "sites", (i.e. ~TiddlyWikis), with support for online saving. Sites can be private or public, and you can optionally list them on the taggable and searchable [[Tiddlyhost Hub|https://tiddlyhost.com/hub]] where they'll be discoverable by others.
+
+Unlike [[TiddlySpot|Saving on TiddlySpot]], [[Tiddlyhost|https://tiddlyhost.com]] is secure, open source, and has proper support for TiddlyWiki5. It also allows uploading existing ~TiddlyWiki files, supports TiddlyWikiClassic, and lets you claim ownership of your ~TiddlySpot sites. For more information see the [[FAQ|https://github.com/simonbaird/tiddlyhost/wiki/FAQ]] and the [[About|https://tiddlyhost.com/about]] page.
+
+<div style="clear: both;"/>

editions/tw5.com/tiddlers/definitions/Xememex.tid

@@ -0,0 +1,14 @@
+title: Xememex
+tags: Definitions
+created: 20230410105035569
+modified: 20230410105035569
+
+<span style="float:right;">[img width=340 [Xememex Logo]]</span>
+
+Xememex is a multiuser TiddlyWiki from [[Federatial]]. It allows large groups of people to work together on intertwingled wikis that can share content.
+
+The largest customer implementation has hundreds of online wikis with thousands of users. See https://manuals.annafreud.org/
+
+Xememex is currently only available under commercial terms from Federatial. Contact [[Jeremy Ruston at Federatial|mailto:jeremy@federatial.com]] for more details.
+
+<div style="clear: both;"/>

editions/tw5.com/tiddlers/hellothere/HelloThere.tid

@@ -5,11 +5,19 @@ tags: TableOfContents
 title: HelloThere
 type: text/vnd.tiddlywiki
 
-!! ''Welcome to TiddlyWiki, a unique [[non-linear|Philosophy of Tiddlers]] notebook for [[capturing|Creating and editing tiddlers]], [[organising|Structuring TiddlyWiki]] and [[sharing|Sharing your tiddlers with others]] complex information''
+!!.tc-hero-heading ''Welcome to TiddlyWiki, a unique [[non-linear|Philosophy of Tiddlers]] notebook for [[capturing|Creating and editing tiddlers]], [[organising|Structuring TiddlyWiki]] and [[sharing|Sharing your tiddlers with others]] complex information''
 
 Use it to keep your [[to-do list|TaskManagementExample]], to plan an [[essay or novel|"TiddlyWiki for Scholars" by Alberto Molina]], or to organise your wedding. Record every thought that crosses your brain, or build a flexible and responsive website.
 
-Unlike conventional online services, TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will [[still be able to use|Future Proof]] the notes you take today.
+TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will [[still be able to use|Future Proof]] the notes you take today.
+
+!! ''Quick Start''
+
+<div class="tc-cards tc-action-card">
+<$list filter="[tag[Quick Start]]">
+<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}} backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
+</$list>
+</div>
 
 !! ''Find Out More''
 
@@ -19,7 +27,7 @@ Unlike conventional online services, TiddlyWiki lets you choose where to keep yo
 </$list>
 </div>
 
-!! ''~TiddlyWiki Hubs''
+!! ''Community''
 
 <div class="tc-cards" style="font-size:0.7em;text-align:center;margin:3em auto;">
 <a href="https://talk.tiddlywiki.org/" class="tc-btn-big-green" style="border-radius:4px;background-color:#FF8C19;" target="_blank" rel="noopener noreferrer">
@@ -40,6 +48,9 @@ Unlike conventional online services, TiddlyWiki lets you choose where to keep yo
 <a href="https://gitter.im/TiddlyWiki/public" class="tc-btn-big-green" style="border-radius:4px;background-color:#753a88;background-image:linear-gradient(to left,#cc2b5e,#753a88);" target="_blank" rel="noopener noreferrer">
 {{$:/core/images/gitter}} Gitter
 </a>
+<a href="https://www.reddit.com/r/TiddlyWiki5/" class="tc-btn-big-green" style="border-radius:4px;background-color:#FF4500;" target="_blank" rel="noopener noreferrer">
+{{Reddit Logo}} Reddit
+</a>
 </div>
 
 !! ''Testimonials & Reviews''

editions/tw5.com/tiddlers/hellothere/quickstart/Quick Start.tid

@@ -0,0 +1,2 @@
+title: Quick Start
+list: [[Quick Start: Tiddlyhost]] [[Quick Start: Desktop]] [[Quick Start: DIY]] [[Quick Start: Xememex]]

editions/tw5.com/tiddlers/hellothere/quickstart/desktop.tid

@@ -0,0 +1,10 @@
+title: Quick Start: Desktop
+tags: [[Quick Start]]
+caption: Desktop
+icon: $:/core/images/storyview-zoomin
+button-color: #37753e
+button-text: Download
+background: linear-gradient(90deg,#f0fff1, #ffffff)
+link: TiddlyDesktop
+
+Download the official desktop application for macOS, Windows and Linux

editions/tw5.com/tiddlers/hellothere/quickstart/diy.tid

@@ -0,0 +1,10 @@
+title: Quick Start: DIY
+tags: [[Quick Start]]
+caption: DIY
+icon: $:/core/images/theme-button
+button-color: #ff4522
+button-text: Explore
+background: linear-gradient(90deg,#fff4f2, #ffffff)
+link: GettingStarted
+
+Find the configuration that is right for you to get the full benefits of ~TiddlyWiki

editions/tw5.com/tiddlers/hellothere/quickstart/tiddlyhost.tid

@@ -0,0 +1,10 @@
+title: Quick Start: Tiddlyhost
+tags: [[Quick Start]]
+caption: Tiddlyhost
+icon: $:/core/images/globe
+button-color: #00009a
+button-text: Create Account
+background: linear-gradient(90deg,#f5f5ff, #ffffff)
+link: Tiddlyhost
+
+The easiest way to get started with an online ~TiddlyWiki

editions/tw5.com/tiddlers/hellothere/quickstart/xememex.tid

@@ -0,0 +1,10 @@
+title: Quick Start: Xememex
+tags: [[Quick Start]]
+caption: Xememex
+icon: $:/core/images/star-filled
+button-color: #bf5fb6
+button-text: Find out more
+background: linear-gradient(90deg,#fff1fe, #ffffff)
+link: Xememex
+
+For companies and teams, a multiuser ~TiddlyWiki from Federatial

editions/tw5.com/tiddlers/images/Reddit Logo.tid

@@ -0,0 +1,7 @@
+title: Reddit Logo
+
+<svg width="22pt" height="22pt" viewBox="0 0 20 20">
+	<g>
+		<path d="M16.67,10C16.641,9.22 15.992,8.593 15.211,8.593C14.834,8.593 14.472,8.739 14.2,9C13.063,8.227 11.725,7.799 10.35,7.77L11,4.65L13.14,5.1C13.194,5.605 13.626,5.993 14.134,5.993C14.683,5.993 15.134,5.542 15.134,4.993C15.134,4.444 14.683,3.993 14.134,3.993C13.779,3.993 13.449,4.183 13.27,4.49L10.82,4C10.798,3.995 10.776,3.993 10.754,3.993C10.607,3.993 10.48,4.097 10.45,4.24L9.71,7.71C8.318,7.731 6.962,8.159 5.81,8.94C5.539,8.685 5.181,8.543 4.81,8.543C4.009,8.543 3.35,9.202 3.35,10.003C3.35,10.573 3.683,11.092 4.2,11.33C4.189,11.476 4.189,11.624 4.2,11.77C4.2,14.01 6.81,15.83 10.03,15.83C13.25,15.83 15.86,14.01 15.86,11.77C15.871,11.624 15.871,11.476 15.86,11.33C16.363,11.08 16.679,10.561 16.67,10ZM12.3,12.04C11.751,12.04 11.3,11.589 11.3,11.04C11.3,10.491 11.751,10.04 12.3,10.04C12.849,10.04 13.3,10.491 13.3,11.04C13.301,11.053 13.301,11.067 13.301,11.08C13.301,11.629 12.849,12.08 12.301,12.08C12.297,12.08 12.294,12.08 12.29,12.08L12.3,12.04ZM12.48,13.75C11.771,14.285 10.897,14.557 10.01,14.52C9.123,14.557 8.249,14.285 7.54,13.75C7.5,13.702 7.479,13.641 7.479,13.579C7.479,13.431 7.601,13.309 7.749,13.309C7.811,13.309 7.872,13.33 7.92,13.37C8.521,13.811 9.255,14.033 10,14C10.746,14.041 11.483,13.825 12.09,13.39C12.142,13.339 12.212,13.311 12.285,13.311C12.438,13.311 12.564,13.437 12.564,13.59C12.564,13.665 12.534,13.737 12.48,13.79L12.48,13.75ZM6.67,11C6.67,10.451 7.121,10 7.67,10C8.219,10 8.67,10.451 8.67,11C8.67,11.549 8.219,12 7.67,12C7.121,12 6.67,11.549 6.67,11Z"/>
+	</g>
+</svg>

editions/tw5.com/tiddlers/images/Tiddlyhost Logo.png.meta

@@ -0,0 +1,3 @@
+title: Tiddlyhost Logo
+type: image/png
+tags: picture

editions/tw5.com/tiddlers/images/Xememex Logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1073" height="232"><g fill="#000" fill-rule="nonzero"><path d="M157.972 224h26.053l-6.756-11.94-70.621-124.802-.04 7.95L157.124 8h-25.588L89.064 82.431h13.897L60.489 8H34.574l50.855 87.227-.051-7.969L14.756 212.06 8 224h25.761l2.289-4.102 66.949-120-13.98-.013 66.667 120zM1038.972 224h26.053l-6.756-11.94-70.621-124.802-.04 7.95 43.559-75.198L1038.124 8h-25.588l-2.302 4.035-40.17 70.396h13.897l-40.169-70.396L941.489 8h-25.915l7.013 12.029 43.842 75.198-.051-7.969-70.622 124.802L889 224h25.761l2.289-4.102 66.949-120-13.98-.013 66.667 120zM191 224h106.904l10-21.65H204.932l8 8V65.153l-8 8h101.955l10-21.65H204.932l8 8V21.65l-8 8h88.452l10-21.65H191v208zM478 224h106.904l10-21.65H491.932l8 8V65.153l-8 8h101.955l10-21.65H491.932l8 8V21.65l-8 8h88.452l10-21.65H478v208zM762 224h106.904l10-21.65H775.932l8 8V65.153l-8 8h101.955l10-21.65H775.932l8 8V21.65l-8 8h88.452l10-21.65H762v208zM437.831 224h22.214V8l-71.304 61.952h10.564L328 8v216h22.215V39.062l-12.48 5.968 55.911 49.911 56.357-49.889-12.172-5.99zM722.831 224h22.214V8l-71.304 61.952h10.564L613 8v216h22.215V39.062l-12.48 5.968 55.911 49.911 56.357-49.889-12.172-5.99z"/></g></svg>

editions/tw5.com/tiddlers/images/Xememex Logo.svg.meta

@@ -0,0 +1,2 @@
+type: image/svg+xml
+title: Xememex Logo

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

@@ -6,6 +6,10 @@ type: text/vnd.tiddlywiki
 
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
 
+.tc-hero-heading a.tc-tiddlylink {
+	font-weight: bold;
+}
+
 .tc-double-spaced-list li {
 	padding-bottom: .5em;
 	padding-top: .5em;
@@ -140,26 +144,48 @@ type: text/vnd.tiddlywiki
 	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-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;
-	display: flex;
-	flex-direction: column;
 	background: <<colour background>>;
 	color: <<colour foreground>>;
 	width: 200px;
 	min-height: 0;
-	padding: 0 0 0.5em 0;
-	margin: 0.5em;
 	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 {
@@ -180,8 +206,17 @@ type: text/vnd.tiddlywiki
 }
 
 .tc-card-accent {
-	border-top-left-radius: 8px;
-	border-top-right-radius: 8px;
+	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 {
@@ -233,6 +268,8 @@ type: text/vnd.tiddlywiki
 }
 
 .tc-card-image {
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
 	line-height: 0;
 	overflow: hidden;
 }
@@ -254,7 +291,19 @@ type: text/vnd.tiddlywiki
 	font-weight: 600;
 	transition: color 0.3s ease-in-out;
 	padding: 0 10px;
-	margin: 0.5em 0;
+	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,
@@ -270,12 +319,17 @@ type: text/vnd.tiddlywiki
 .tc-card-body {
 	font-size: 0.9em;
 	line-height: 1.2;
-	padding: 0 10px;
+	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 {
@@ -343,4 +397,4 @@ type: text/vnd.tiddlywiki
 	.multi-columns {
 		column-count: 2;
 	}
-}
+}

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

@@ -95,10 +95,10 @@ That renders as:
 <<tw-code $tiddler$>>
 \end
 
-\define flex-card(class,bordercolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link")
+\define flex-card(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"link")
 \whitespace trim
 <$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 ]] }}}>
+	<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]] }}}>
@@ -119,6 +119,7 @@ That renders as:
 				<$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"/>
@@ -126,6 +127,11 @@ That renders as:
 			<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>
 \end