Experiments: Refactoring HelloThere (#8664)

* Initial Commit * Fix default tiddlers for prerelease * Use parsermode: inline for tiddlers that don't semantically have paragraphs * Tweak card styles Cards can now grow slightly to fill the available space * Rename "Community Links" to "TiddlyWiki on the Web", and excise the items to individual tiddlers * Revert changes to core styles * Introductory text for each welcome tiddler * Colours for welcome tiddlers * Simplify introduction of GettingStarted * Update TiddlyFox information * Move all the card related definitions into their own folder Perhaps preparatory to making them into a plugin, or putting them into the core * Add a hover effect for card icons * Retract changes to GettingStarted and system fonts We'll come back to that * Revert properly
TiddlyWiki · Oct 8, 2024 · 47519b1 · 47519b1
1 parent 0451a8a
commit 47519b1
Show file tree

Hide file tree

Showing 28 changed files with 486 additions and 453 deletions.
diff --git a/editions/prerelease/tiddlers/system/DefaultTiddlers.tid b/editions/prerelease/tiddlers/system/DefaultTiddlers.tid
@@ -4,5 +4,9 @@ title: $:/DefaultTiddlers
 
 [[TiddlyWiki Pre-release]]
 HelloThere
+[[Quick Start]]
+[[Find Out More]]
+[[TiddlyWiki on the Web]]
+[[Testimonials and Reviews]]
 GettingStarted
 Community
diff --git a/editions/tw5.com/tiddlers/cards/card-procedures.tid b/editions/tw5.com/tiddlers/cards/card-procedures.tid
@@ -0,0 +1,86 @@
+code-body: yes
+tags: $:/tags/Macro
+title: $:/cards/procedures
+type: text/vnd.tiddlywiki
+
+\whitespace trim
+
+\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>] }}}
+	aria-label=<<currentTiddler>>
+>
+	<$transclude
+		$variable="flex-card-body"
+		bordercolor=<<bordercolor>>
+		backgroundcolor=<<backgroundcolor>>
+		textcolor=<<textcolor>>
+		imageField=<<imageField>>
+		captionField=<<captionField>>
+		subtitle=<<subtitle>>
+		descriptionField=<<descriptionField>>
+	/>
+</$link>
+\end
+
+\procedure flex-card-external(class,bordercolor:"",backgroundcolor:"",textcolor:"",imageField:"image",captionField:"caption",subtitle:"",descriptionField:"description",linkField:"url")
+<a class={{{ [<class>addprefix[tc-card ]addprefix[tc-tiddlylink ]]  }}}
+	href={{{ [<currentTiddler>get<linkField>] }}}
+	aria-label=<<currentTiddler>>
+	rel="noopener noreferrer"
+	target="_blank"
+>
+	<$transclude
+		$variable="flex-card-body"
+		bordercolor=<<bordercolor>>
+		backgroundcolor=<<backgroundcolor>>
+		textcolor=<<textcolor>>
+		imageField=<<imageField>>
+		captionField=<<captionField>>
+		subtitle=<<subtitle>>
+		descriptionField=<<descriptionField>>
+	/>
+</a>
+\end
+
+\procedure flex-card-body(bordercolor,backgroundcolor,textcolor,imageField,captionField,subtitle,descriptionField)
+<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" aria-hidden="true">
+			<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>] }}}
+				alt={{{ [<currentTiddler>get<imageField>get[alt-text]else[Image.]] }}}
+			/>
+		</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>
+	<%if [all[current]get<descriptionField>else[]!match[]] %>
+		<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>
+	<%endif%>
+	<%if [all[current]has[button-text]] %>
+		<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>
+	<%endif%>
+</div>
+\end
diff --git a/editions/tw5.com/tiddlers/cards/card-styles.tid b/editions/tw5.com/tiddlers/cards/card-styles.tid
@@ -0,0 +1,256 @@
+tags: $:/tags/Stylesheet
+title: $:/cards/styles
+type: text/vnd.tiddlywiki
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
+
+.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-cards-vertical {
+}
+
+.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;
+	flex-grow: 1;
+	max-width: 250px;
+	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;
+	justify-content: start;
+	padding: 5px 7px;
+	align-items: center;
+}
+
+.tc-cards.tc-cards-vertical .tc-card-icon {
+	line-height: 0;
+	order: 1;
+}
+
+.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 .tc-card-icon svg {
+	transition: transform 0.3s ease-in-out;
+}
+
+.tc-card:hover .tc-card-icon svg {
+	transform: scale(1.1);
+}
+
+.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: 1.1em;
+	min-width: 10em;
+	order: 2;
+}
+
+.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; 
+}
diff --git a/editions/tw5.com/tiddlers/community/TiddlyWiki on the Web.tid b/editions/tw5.com/tiddlers/community/TiddlyWiki on the Web.tid
@@ -0,0 +1,15 @@
+modified: 20241001141521924
+tags: TableOfContents
+title: TiddlyWiki on the Web
+type: text/vnd.tiddlywiki
+icon: $:/core/images/link
+color: #808
+list: TalkTiddlyWiki [[TiddlyWiki on YouTube]]  [[TiddlyWiki on Reddit]] [[TiddlyWiki on Discord]] [[TiddlyWiki on GitHub]] [[TiddlyWiki on Mastodon]] [[TiddlyWiki on Twitter]] [[TiddlyWiki on Gitter]] [[TiddlyWiki on Open Collective]]
+
+Links to the ~TiddlyWiki community elsewhere on the web.
+
+<div class="tc-cards tc-cards-vertical">
+<$list filter="[tag[TiddlyWiki on the Web]]">
+<$macrocall $name="flex-card-external" backgroundcolor={{!!background-color}} textcolor={{!!text-color}} captionField="caption"/>
+</$list>
+</div>
diff --git a/editions/tw5.com/tiddlers/community/links/TalkTiddlyWiki.tid b/editions/tw5.com/tiddlers/community/links/TalkTiddlyWiki.tid
@@ -0,0 +1,7 @@
+title: TalkTiddlyWiki
+caption: ~TalkTiddlyWiki
+tags: [[TiddlyWiki on the Web]]
+url: https://talk.tiddlywiki.org/
+icon: $:/core/images/help
+background-color: #FF8C19
+text-color: #fff
diff --git a/editions/tw5.com/tiddlers/community/links/TiddlyWiki on Discord.tid b/editions/tw5.com/tiddlers/community/links/TiddlyWiki on Discord.tid
@@ -0,0 +1,7 @@
+title: TiddlyWiki on Discord
+caption: Discord
+tags: [[TiddlyWiki on the Web]]
+url: https://discord.gg/HFFZVQ8
+icon: $:/core/images/globe
+background-color: #5462EB
+text-color: #fff
diff --git a/editions/tw5.com/tiddlers/community/links/TiddlyWiki on GitHub.tid b/editions/tw5.com/tiddlers/community/links/TiddlyWiki on GitHub.tid
@@ -0,0 +1,7 @@
+title: TiddlyWiki on GitHub
+caption: ~GitHub
+tags: [[TiddlyWiki on the Web]]
+url: https://github.com/TiddlyWiki/TiddlyWiki5
+icon: $:/core/images/github
+background-color: #444
+text-color: #fff