1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-30 05:19:57 +00:00

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
This commit is contained in:
Jeremy Ruston 2024-10-08 17:11:30 +01:00 committed by GitHub
parent 0451a8aa8d
commit 47519b1703
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 486 additions and 453 deletions

View File

@ -4,5 +4,9 @@ title: $:/DefaultTiddlers
[[TiddlyWiki Pre-release]]
HelloThere
[[Quick Start]]
[[Find Out More]]
[[TiddlyWiki on the Web]]
[[Testimonials and Reviews]]
GettingStarted
Community

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,7 @@
title: TiddlyWiki on Gitter
caption: Gitter
tags: [[TiddlyWiki on the Web]]
url: https://gitter.im/TiddlyWiki/public
icon: $:/core/images/gitter
background-color: #753a88
text-color: #fff

View File

@ -0,0 +1,7 @@
title: TiddlyWiki on Mastodon
caption: Mastodon
tags: [[TiddlyWiki on the Web]]
url: https://fosstodon.org/@TiddlyWiki
icon: $:/core/images/mastodon
background-color: #2b90d9
text-color: #fff

View File

@ -0,0 +1,7 @@
title: TiddlyWiki on Open Collective
caption: Open Collective
tags: [[TiddlyWiki on the Web]]
url: https://opencollective.com/tiddlywiki
icon: Open Collective Logo
background-color: #0c2c66
text-color: #fff

View File

@ -0,0 +1,7 @@
title: TiddlyWiki on Reddit
caption: Reddit
tags: [[TiddlyWiki on the Web]]
url: https://www.reddit.com/r/TiddlyWiki5/
icon: Reddit Logo
background-color: #FF4500
text-color: #fff

View File

@ -0,0 +1,7 @@
title: TiddlyWiki on Twitter
caption: Twitter
tags: [[TiddlyWiki on the Web]]
url: https://twitter.com/TiddlyWiki
icon: $:/core/images/twitter
background-color: #1DA1F2
text-color: #fff

View File

@ -0,0 +1,7 @@
title: TiddlyWiki on YouTube
caption: ~YouTube
tags: [[TiddlyWiki on the Web]]
url: https://www.youtube.com/c/JeremyRuston
icon: $:/core/images/video
background-color: #e52d27
text-color: #fff

View File

@ -1,21 +1,9 @@
created: 20130825161100000
modified: 20230803051056946
modified: 20241006202631647
tags: Definitions
title: TiddlyFox
type: text/vnd.tiddlywiki
<<.deprecated-since "FireFox 57" "Saving">>
TiddlyFox is an extension for older versions of Firefox that allows standalone TiddlyWiki files to save their changes directly to the file system. TiddlyFox works on both desktop and smartphone versions of <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>. See [[Saving with TiddlyFox]] or [[Saving with TiddlyFox on Android]] for detailed instructions.
TiddlyFox was an extension for older versions of Firefox that allowed standalone TiddlyWiki files to save their changes directly to the file system.
TiddlyFox is now obsolete due to its incompatibility with the latest versions of Firefox - see [[TiddlyFox Apocalypse]]. There are many alternatives to TiddlyFox, but none that work in precisely the same way -- see GettingStarted for details.
TiddlyFox can be downloaded from the Mozilla Addons site:
https://addons.mozilla.org/en-GB/firefox/addon/tiddlyfox/
<<<
You can also install the latest development version of TiddlyFox direct from GitHub:
https://github.com/TiddlyWiki/TiddlyFox/raw/master/tiddlyfox.xpi
<<<

View File

@ -12,4 +12,4 @@ The next step is to choose a method for saving changes. There's a wide variety o
<<.warning "Don't attempt to use the browser ''File''/''Save'' menu option to save changes (it doesn't work)">><br/><br/>
{{Saving}}
{{Saving}}

View File

@ -0,0 +1,15 @@
modified: 20241001141521924
tags: TableOfContents
title: Find Out More
type: text/vnd.tiddlywiki
icon: $:/core/images/help
color: #880
Resources to help you learn more about ~TiddlyWiki and its community.
<div class="tc-cards">
<$list filter="[tag[HelloThumbnail]]">
<$macrocall $name="flex-card" captionField="caption" descriptionField="text"/>
</$list>
</div>

View File

@ -1,73 +1,17 @@
created: 20130822170200000
list: [[A Gentle Guide to TiddlyWiki]] [[Discover TiddlyWiki]] [[Some of the things you can do with TiddlyWiki]] [[Ten reasons to switch to TiddlyWiki]] Examples [[What happened to the original TiddlyWiki?]]
modified: 20240710115948992
modified: 20241001141521924
tags: TableOfContents
title: HelloThere
type: text/vnd.tiddlywiki
icon: $:/core/icon
!!.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.
~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''
* ~TiddlyWiki is infinitely customisable and extensible with many plugins that add new features
<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>
<div class="tc-cards tc-small">
<$link to="中文社区 - Chinese Community" class="tc-btn-big-green tc-card" aria-label="Chinese Community">
中文社区<br/>Chinese Community
</$link>
</div>
!! ''Find Out More''
<div class="tc-cards">
<$list filter="[tag[HelloThumbnail]]">
<$macrocall $name="flex-card" captionField="caption" descriptionField="text"/>
</$list>
</div>
!! ''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">
{{$:/core/images/help}} ~TalkTW
</a>
<a href="https://www.youtube.com/c/JeremyRuston" class="tc-btn-big-green" style="border-radius:4px;background-color:#e52d27;" target="_blank" rel="noopener noreferrer">
{{$:/core/images/video}} ~YouTube
</a>
<a href="https://discord.gg/HFFZVQ8" class="tc-btn-big-green" style="border-radius:4px;background-color:#5462EB;" target="_blank" rel="noopener noreferrer">
{{$:/core/images/globe}} Discord
</a>
<a href="https://twitter.com/TiddlyWiki" class="tc-btn-big-green" style="border-radius:4px;background-color:#1DA1F2;" target="_blank" rel="noopener noreferrer">
{{$:/core/images/twitter}} Twitter
</a>
<a rel="me" href="https://fosstodon.org/@TiddlyWiki" class="tc-btn-big-green" style="border-radius:4px;background-color:#2b90d9;" target="_blank" rel="noopener noreferrer">
{{$:/core/images/mastodon}} Mastodon
</a>
<a href="https://github.com/TiddlyWiki/TiddlyWiki5" class="tc-btn-big-green" style="border-radius:4px;background-color:#444;" target="_blank" rel="noopener noreferrer">
{{$:/core/images/github}} ~GitHub
</a>
<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>
<a href="https://opencollective.com/tiddlywiki" class="tc-btn-big-green" style="border-radius:4px;background-color:#0c2c66;" target="_blank" rel="noopener noreferrer">
{{Open Collective Logo}} Open Collective
</a>
</div>
!! ''Testimonials & Reviews''
<div class="tc-cards">
<$list filter="[tag[Testimonial]]">
<$macrocall $name="flex-card" class="tc-card-quote" captionField="caption" descriptionField="text"/>
</$list>
</div>
* ~TiddlyWiki is the product of a collective of developers, part of an extensive community of users

View File

@ -0,0 +1,13 @@
modified: 20241001141521924
tags: TableOfContents
title: Testimonials and Reviews
type: text/vnd.tiddlywiki
icon: $:/core/images/star-filled
color: #088
\parsermode inline
<div class="tc-cards">
<$list filter="[tag[Testimonial]]">
<$macrocall $name="flex-card" class="tc-card-quote" captionField="caption" descriptionField="text"/>
</$list>
</div>

View File

@ -1,2 +1,18 @@
title: Quick Start
list: [[Quick Start: Tiddlyhost]] [[Quick Start: Desktop]] [[Quick Start: DIY]] [[Quick Start: Xememex]]
modified: 20241001141521924
list: [[Quick Start: Tiddlyhost]] [[Quick Start: Desktop]] [[Quick Start: DIY]] [[Quick Start: Xememex]]
icon: $:/core/images/tip
color: #cc9
Choose how to get started quickly with ~TiddlyWiki.
<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>
<div class="tc-cards tc-small">
<$link to="中文社区 - Chinese Community" class="tc-btn-big-green tc-card" aria-label="Chinese Community">
中文社区<br/>Chinese Community
</$link>
</div>

View File

@ -4,4 +4,4 @@ tags: picture
title: Open Collective Logo
alt-text: Open Collective Logo
<svg style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 28 28"><path d="M25.509 6.026A13.934 13.934 0 0 1 28 14c0 2.963-.92 5.71-2.491 7.974l-3.626-3.627A8.96 8.96 0 0 0 23 14a8.964 8.964 0 0 0-1.117-4.347l3.626-3.627Z"/><path d="m21.974 2.49-3.627 3.628a9 9 0 1 0 0 15.765l3.627 3.626A13.934 13.934 0 0 1 14 27.999C6.268 28 0 21.733 0 14 0 6.269 6.268 0 14 0c2.963 0 5.711.922 7.974 2.492Z"/></svg>
<svg style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" width="22pt" height="22pt" viewBox="0 0 28 28"><path d="M25.509 6.026A13.934 13.934 0 0 1 28 14c0 2.963-.92 5.71-2.491 7.974l-3.626-3.627A8.96 8.96 0 0 0 23 14a8.964 8.964 0 0 0-1.117-4.347l3.626-3.627Z"/><path d="m21.974 2.49-3.627 3.628a9 9 0 1 0 0 15.765l3.627 3.626A13.934 13.934 0 0 1 14 27.999C6.268 28 0 21.733 0 14 0 6.269 6.268 0 14 0c2.963 0 5.711.922 7.974 2.492Z"/></svg>

View File

@ -15,3 +15,5 @@ type: text/vnd.tiddlywiki
[[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.
If you find Tiddlyhost useful, please consider [[donation or sponsorship|https://tiddlyhost.com/donate]].

View File

@ -1,17 +0,0 @@
caption: Saving with ~FireFox
created: 20230803205140949
modified: 20230803213246739
tags: Saving Firefox
title: Saving with FireFox
# Restart [[Firefox]]
# [[Download]] an empty TiddlyWiki by clicking this button:
#> {{$:/editions/tw5.com/snippets/download-empty-button}}
# Locate the file you just downloaded
#* You may rename it, but be sure to keep the `.html` or `.htm` extension
# Open the file in [[Firefox]]
# Try creating a new tiddler using the ''new tiddler'' <<.icon $:/core/images/new-button>> button in the sidebar. Type some content for the tiddler, and click the <<.icon $:/core/images/done-button>> ''ok'' button
# Save your changes by clicking the <<.icon $:/core/images/save-button-dynamic>> ''save changes'' button in the sidebar
#* Look for the yellow notification ''Saved wiki'' at the top right of the window
# Refresh the browser window to verify that your changes have been saved correctly

View File

@ -1,26 +0,0 @@
created: 20140103134551508
modified: 20230803051340676
tags: [[Saving with TiddlyFox]]
title: Saving with TiddlyFox on Android
type: text/vnd.tiddlywiki
<<.deprecated-since "FireFox 57" "Saving">>
(Alternatively, see the [[video tutorial|TiddlyWiki on Firefox for Android Video]])
# Ensure you have the latest version of [[Firefox for Android|http://getfirefox.com]]
#* http://getfirefox.com
# Install the latest release of the TiddlyFox extension from:
#* https://addons.mozilla.org/en-GB/firefox/addon/tiddlyfox/
# Install this extension to be able to save the TiddlyWiki file locally:
#* https://addons.mozilla.org/en-GB/android/addon/save-link-menus/
# [[Download]] an empty TiddlyWiki by saving this link:
#* https://tiddlywiki.com/empty.html
#> (to save the link, ensure you've installed the "save-link-menus" extension and then long-press on the link and choose "Save link")
# When the file has downloaded, click on it within the notification tray or the download manager application
# Choose to open the file in Firefox (rather than the default Android viewer)
# Click ''OK'' in response to the prompt from TiddlyFox that asks whether to enable saving for this file
# Try creating a new tiddler using the ''new tiddler'' <<.icon $:/core/images/new-button>> button in the sidebar. Type some content for the tiddler, and click the <<.icon $:/core/images/done-button>> ''ok'' button
# Save your changes by clicking the <<.icon $:/core/images/save-button-dynamic>> ''save changes'' button in the sidebar
#* Look for the yellow notification ''Saved wiki'' at the top right of the window
# Refresh the browser window to verify that your changes have been saved correctly

View File

@ -4,5 +4,9 @@ title: $:/DefaultTiddlers
type: text/vnd.tiddlywiki
HelloThere
[[Quick Start]]
[[Find Out More]]
[[TiddlyWiki on the Web]]
[[Testimonials and Reviews]]
GettingStarted
Community

View File

@ -1,6 +0,0 @@
created: 20200507002521489
modified: 20220719134613555
title: $:/_tw5.com-card-template
type: text/vnd.tiddlywiki
<$macrocall $name="flex-card" bordercolor={{!!color}} captionField="caption" subtitle={{{ [{!!community-author}!is[blank]addprefix[by ]] }}}/>

View File

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

View File

@ -87,48 +87,3 @@ type: text/vnd.tiddlywiki
<$link to=<<tiddler>>/>:
<$transclude $variable=tw-code tiddler=<<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>] }}}
aria-label=<<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" 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>
<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>
\end

View File

@ -3,4 +3,6 @@ tags: Testimonial
caption: Product Hunt
extlink: https://www.producthunt.com/posts/tiddlywiki-2?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-tiddlywiki-2
TiddlyWiki was featured on Product Hunt on April 17th 2020, rising to become the #2 product of the day.
<div style="text-align:center;">{{Product Hunt Link}}</div>