compare-tw2-tw5 - a TiddlySpace

Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88

<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->

To get started with this blank [[TiddlyWiki]], you'll need to modify the following tiddlers:
* [[SiteTitle]] & [[SiteSubtitle]]: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* [[MainMenu]]: The menu (usually on the left)
* [[DefaultTiddlers]]: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>

<<importTiddlers>>

<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->

These [[InterfaceOptions]] for customising [[TiddlyWiki]] are saved in your browser

Your username for signing your edits. Write it as a [[WikiWord]] (eg [[JoeBloggs]])

<<option txtUserName>>
<<option chkSaveBackups>> [[SaveBackups]]
<<option chkAutoSave>> [[AutoSave]]
<<option chkRegExpSearch>> [[RegExpSearch]]
<<option chkCaseSensitiveSearch>> [[CaseSensitiveSearch]]
<<option chkAnimate>> [[EnableAnimations]]

----
Also see [[AdvancedOptions]]

<!--{{{-->
<div class='header' role='banner' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' role='navigation' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' role='navigation' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' role='complementary' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea' role='main'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->

/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}

a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}

h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}

.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}

.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}

.tabSelected {color:[[ColorPalette::PrimaryDark]];
	background:[[ColorPalette::TertiaryPale]];
	border-left:1px solid [[ColorPalette::TertiaryLight]];
	border-top:1px solid [[ColorPalette::TertiaryLight]];
	border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}

.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
	border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
	border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
	border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}

.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}

#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}

.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}

.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}

.tiddler .defaultCommand {font-weight:bold;}

.shadow .title {color:[[ColorPalette::TertiaryDark]];}

.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}

.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}

.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}

.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}

.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}

.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}

.imageLink, #displayArea .imageLink {background:transparent;}

.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}

.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}

.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}

.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}

.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}

.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}
.readOnly {background:[[ColorPalette::TertiaryPale]];}

#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:alpha(opacity=60);}
/*}}}*/

/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em; left:0; top:0;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 0.3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0 0; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0;}
.wizardFooter .status {padding:0 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0 0 0.5em;}
.tab {margin:0 0 0 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0 0.25em; padding:0 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0 3px 0 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0; font-size:.9em;}
.editorFooter .button {padding-top:0; padding-bottom:0;}

.fieldsetFix {border:0; padding:0; margin:1px 0px;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0; right:0;}
#backstageButton a {padding:0.1em 0.4em; margin:0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin-left:3em; padding:1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/

/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/

/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none !important;}
#displayArea {margin: 1em 1em 0em;}
noscript {display:none;} /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
}
/*}}}*/

<!--{{{-->
<div class='toolbar' role='navigation' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->

[[Tiddlyhost|https://tiddlyhost.com]] is a hosting service for ~TiddlyWiki.

no

is a tag used to assign eg: todo

! Block Quotes

TW5 has more possibilities. see: http://tiddlywiki.com and search for {{{Block Quotes in WikiText}}}

see: http://tiddlywiki.com/#Block%20Quotes%20in%20WikiText


! Formatting
| TWc | TW5 | result | update needed |h
|<<tiddler {{tiddler.title + '##tw-quote-block'}}>> |<<tiddler {{tiddler.title + '##twc-quote-result'}}>> |<<tiddler {{tiddler.title + '##tw5-quote-result'}}>> |yes - since linebreak handling is different |
|<<tiddler {{tiddler.title + '##tw-single-line'}}>> |<<tiddler {{tiddler.title + '##tw-single-line-result'}}>> |<<tiddler {{tiddler.title + '##tw-single-line-result'}}>> | - |

/%

! tw-single-line
{{{
> quote block level 1
>> quote block level 2
>>> quote block level 3
}}}

! tw-single-line-result
> quote block level 1
>> quote block level 2
>>> quote block level 3

! tw-quote-block
{{{
<<<
this text is inside a block quote. 
second line
<<<
}}}

! twc-quote-result
<<<
this text is inside a block quote. 
second line
<<<

! tw5-quote-result
<<<
this text is inside a block quote. no second line, since there are no {{{<br>'s}}}
<<<


!%/

<<list filter [tag[comment]][sort[-modified]] template:"CommentList##template" emptyMessage: "No matching tiddler found...">>

/%
!template
<<view modified date "YYYY-0MM-0DD 0hh:0mm">> - <<view root link>> - - - - <<view title link>> - - - - <<view modifier text>> 
!
%/

/*
  TiddlyWiki Comments Plugin - Online demo at http://tiddlyguv.org/CommentsPlugin.html

  TODO:
  - Support Cascade comment delete when the top-level tiddler is deleted
  - Support more than one < <comments> > per tiddler. This will probably entail creating an invisible root tiddler to
    hold all the comments for a macro together. The user will need to provide an ID for this tiddler.
  - Don't use global "macro" var (use "macro" param a la jquery)

*/

/***
|Name|CommentsPlugin|
|Description|Macro for nested comments, where each comment is a separate tiddler.|
|Source|http://tiddlyguv.org/CommentsPlugin.html#CommentsPlugin|
|Documentation|http://tiddlyguv.org/CommentsPlugin.html#CommentsPluginInfo|
|Version|0.1 hacked|
|Author|Michael Mahemoff, Osmosoft|
|''License:''|[[BSD open source license]]|
|~CoreVersion|2.2|
***/

//{{{
if(!version.extensions.CommentsPlugin) {

  version.extensions.CommentsPlugin = {installed:true};

  (function(plugin) {

  var cmacro = config.macros.comments = {

//##############################################################################
//# CONFIG
//##############################################################################

//################################################################################
//# MACRO INITIALISATION
//################################################################################

init: function() {
  var stylesheet = store.getTiddlerText(tiddler.title + "##StyleSheet");
  if (stylesheet) { // check necessary because it happens more than once for some reason
    config.shadowTiddlers["StyleSheetCommentsPlugin"] = stylesheet;
    store.addNotification("StyleSheetCommentsPlugin", refreshStyles);
  }
  if (!version.extensions.CommentsPlugin.retainViewTemplate) cmacro.enhanceViewTemplate();
},

enhanceViewTemplate: function() {
  var template = config.shadowTiddlers.ViewTemplate;
  if ((/commentBreadcrumb/g).test(template)) return; // already enhanced
  var TITLE_DIV = "<div class='title' macro='view title'></div>";
  var commentsDiv = "<div class='commentBreadcrumb' macro='commentBreadcrumb'></div>";
  config.shadowTiddlers.ViewTemplate = template.replace(TITLE_DIV,commentsDiv+"\n"+TITLE_DIV);
},

handler: function(place,macroName,params,wikifier,paramString,tiddler) {
  var macroParams = paramString.parseParams();
  var tiddlerParam = getParam(macroParams, "tiddler");
  tiddler = tiddlerParam ? store.getTiddler(tiddlerParam) : tiddler;
  if (!tiddler || !store.getTiddler(tiddler.title)) return;
  cmacro.buildCommentsArea(tiddler, place, macroParams);
  // cmacro.refreshCommentsFromRoot(story.getTiddler(tiddler.title).commentsEl, tiddler, macroParams);
  cmacro.refreshCommentsFromRoot(place.commentsEl, tiddler, macroParams);
},

//################################################################################
//# MACRO VIEW - RENDERING COMMENTS
//################################################################################

buildCommentsArea: function(rootTiddler, place, macroParams) {
  var commentsArea = createTiddlyElement(place, "div", null, "comments");
  var heading = getParam(macroParams, "heading");
  if (heading) createTiddlyElement(commentsArea, "h1", null, null, heading);
  var comments = createTiddlyElement(commentsArea, "div", null, "");
  place.commentsEl = comments;

  if (cmacro.editable(macroParams)) {
    var newCommentArea = createTiddlyElement(commentsArea, "div", null, "newCommentArea", "New comment:");
    cmacro.forceLoginIfRequired(params, newCommentArea, function() {
      var newCommentEl = cmacro.makeTextArea(newCommentArea, macroParams);
      // var addComment = createTiddlyElement(newCommentArea, "button", null, "addComment button", "Add Comment");
      var addComment = createTiddlyButton(newCommentArea, "Add Comment", null, function() {
        var comment = cmacro.createComment(newCommentEl.value, rootTiddler, macroParams); 
        newCommentEl.value = "";
        cmacro.refreshCommentsFromRoot(comments, rootTiddler, macroParams);
      }, "addComment button");
    });
  }

},


makeTextArea: function(container, macroParams) {
  var textArea = createTiddlyElement(container, "textarea");
  textArea.rows = getParam(macroParams, "textRows") || 4;
  textArea.cols = getParam(macroParams, "textCols") || 20;
  textArea.value = getParam(macroParams, "text") || "";
  return textArea;
},

refreshCommentsFromRoot: function(rootCommentsEl, rootTiddler, macroParams) {
  cmacro.treeifyComments(rootTiddler);
  cmacro.refreshComments(rootCommentsEl, rootTiddler, macroParams);
},

refreshComments: function(daddyCommentsEl, tiddler, macroParams) {
  // cmacro.log("refreshComments - root", rootCommentsEl, "daddy", daddyCommentsEl,
    // "tiddler ", tiddler, "macroParams ", macroParams);
  // cmacro.log("refreshComments", arguments);

  var commentsEl;
  if (tiddler.fields.daddy) {
    var commentEl = cmacro.buildCommentEl(daddyCommentsEl, tiddler, macroParams);
    daddyCommentsEl.appendChild(commentEl);
    commentsEl = commentEl.commentsEl;
  } else { // root element
    removeChildren(daddyCommentsEl);
    // refreshedEl = story.getTiddler(tiddler.title);
    commentsEl = daddyCommentsEl;
  }

  for (var child = tiddler.firstChild; child; child = child.next) {
     cmacro.refreshComments(commentsEl, child, macroParams);
  }

},

treeifyComments: function(rootTiddler) {

  var comments = cmacro.findCommentsFromRoot(rootTiddler);

  cmacro.forEach(comments, function(comment) {
    var prev = comment.fields.prev;
    var daddy = comment.fields.daddy;
    if (prev) {
      store.getTiddler(prev).next = comment;
    } else {
      store.getTiddler(daddy).firstChild = comment;
    }
  });

},

logComments: function(comments) {
  for (var i=0; i<comments.length; i++) {
    var comment = comments[i];
  }
},

findCommentsFromRoot: function(rootTiddler) {
  var comments = [];
  store.forEachTiddler(function(title,tiddler) {
    if (tiddler.fields.root==rootTiddler.title) comments.push(tiddler);
  });
  return comments;
},

findChildren: function(daddyTiddler) {
  var comments = [];
  store.forEachTiddler(function(title,tiddler) {
    if (tiddler.fields.daddy==daddyTiddler.title) comments.push(tiddler);
  });
  return comments;
},

buildCommentEl: function(daddyCommentsEl, comment, macroParams) {

  // COMMENT ELEMENT
  var commentEl = document.createElement("div");
  commentEl.className = "comment";

  // HEADING <- METAINFO AND DELETE
  var headingEl = createTiddlyElement(commentEl, "div", null, "heading");

  var metaInfoEl = createTiddlyElement(headingEl, "div", null, "commentTitle",  comment.modifier + '@' + comment.modified.formatString(getParam(macroParams,"dateFormat") || "DDD, MMM DDth, YYYY hh12:0mm:0ss am"));
  metaInfoEl.onclick = function() { 
    // story.closeAllTiddlers();
    story.displayTiddler("top", comment.title, null, true);
    // document.location.hash = "#" + comment.title;
  };

  var deleteEl = createTiddlyElement(headingEl, "div", null, "deleteComment", "X");
  deleteEl.onclick = function() {
    if (true || confirm("Delete this comment and all of its replies?")) {
      cmacro.deleteTiddlerAndDescendents(comment);
      commentEl.parentNode.removeChild(commentEl);
    }
  };

  // TEXT
  commentEl.text = createTiddlyElement(commentEl, "div", null, "commentText");
  wikify(comment.text, commentEl.text);

  // REPLY LINK
  if (cmacro.editable(macroParams)) {
    var replyLinkZone = createTiddlyElement(commentEl, "div", null, "replyLinkZone");
    var replyLink = createTiddlyElement(replyLinkZone, "span", null, "replyLink", "reply to this comment");
    replyLink.onclick = function() { cmacro.openReplyLink(comment, commentEl, replyLink, macroParams); };
  }

  // var clearance = createTiddlyElement(commentEl, "clearance", null, "clearance");
  // clearance.innerHTML = "&nbsp;";

  // COMMENTS AREA
  commentEl.commentsEl = createTiddlyElement(commentEl, "div", null, "comments");

  // RETURN
  return commentEl;

},

openReplyLink: function(commentTiddler, commentEl, replyLink, macroParams) {
  if (commentEl.replyEl) {
    commentEl.replyEl.style.display = "block";
    return;
  }

  commentEl.replyEl = document.createElement("div");
  commentEl.replyEl.className = "reply";

  replyLink.style.display = "none";
  var newReplyHeading = createTiddlyElement(commentEl.replyEl, "div", null, "newReply");
  createTiddlyElement(newReplyHeading, "div", null, "newReplyLabel", "New Reply:");
  var closeNewReply = createTiddlyElement(newReplyHeading, "div", null, "closeNewReply", "close");
  closeNewReply.onclick = function() {
    commentEl.replyEl.style.display = "none";
    replyLink.style.display = "block";
  };

  cmacro.forceLoginIfRequired(params, commentEl.replyEl, function() {
    var replyText =  cmacro.makeTextArea(commentEl.replyEl, macroParams);
      var submitReply = createTiddlyButton(commentEl.replyEl, "Reply", null, function() {
        var newComment = cmacro.createComment(replyText.value, commentTiddler, macroParams);
        replyText.value = "";
        closeNewReply.onclick();
        cmacro.refreshComments(commentEl.commentsEl, newComment, macroParams);
      });
  });

  commentEl.insertBefore(commentEl.replyEl, commentEl.commentsEl);
},

//################################################################################
//# RELATIONSHIP MANAGEMENT
//#
//# Children are held in a singly linked list structure.
//#
//# The root tiddler (containing comments macro) and all of its comments have
//# one or more of the following custom fields:
//#   - daddy: title of parent tiddler ("parent" is already used in DOM, hence "daddy")
//#   - firstchild: title of first child
//#   - nextchild: title of next child in the list (ie its sibling). New comments are always
//#     appended to the list of siblings at the end, if it exists.
//#
//# Iff daddy is undefined, this is the root in the hierarchy (ie it's the thing that the 
//# comments are about)
//# Iff firstchild is undefined, this tiddler has no children
//# Iff nextchild is undefined, this tiddler is the most 
//#
//# Incidentally, the only redundancy with this structure is with "daddy" field. This field exists only
//# to give the comment some context in isolation. It's redundant as it could be derived
//# from inspecting all tiddlers' firstchild and nextchild properties. However, 
//# that would be exceedingly slow, especially where the tiddlers live on a server.
//#
//################################################################################

createComment: function(text, daddy, macroParams) {

  var rootTitle = daddy.fields.root ? daddy.fields.root : daddy.title;
    // second case is the situation where daddy *is* root
  var newComment = cmacro.createCommentTiddler(macroParams, rootTitle);
  var fieldsParam = getParam(macroParams, "fields") || "";
  var fields = fieldsParam.decodeHashMap();
  var inheritedFields = (getParam(macroParams, "inheritedFields") || "").split(",");
  cmacro.forEach(inheritedFields, function(field) {
    if (field!="") fields[field] = daddy.fields[field];
  });
  var tagsParam = getParam(macroParams, "tags") || "comment";
  var now = new Date();
  newComment.set(null, text, config.options.txtUserName, now, tagsParam.split(","), now, fields);

  var youngestSibling = cmacro.findYoungestChild(daddy)
  if (youngestSibling) newComment.fields.prev = youngestSibling.title;
  newComment.fields.daddy = daddy.title;
  newComment.fields.root = rootTitle;

  cmacro.saveTiddler(newComment.title);
  if (rootTitle) cmacro.saveTiddler(rootTitle);
 
  autoSaveChanges(false);
  return newComment;
},

findYoungestChild: function(daddy) {

  var siblingCount = 0;
  var elderSiblings = cmacro.mapize(cmacro.selectTiddlers(function(tiddler) {
    isChild = (tiddler.fields.daddy==daddy.title);
    if (isChild) siblingCount++;
    return isChild;
  }));
  if (!siblingCount) return null;

  // Find the only sibling that doesn't have a prev pointing at it
  var youngestSiblings = cmacro.clone(elderSiblings) // as a starting point
  cmacro.forEachMap(elderSiblings, function(tiddler) {
    delete youngestSiblings[tiddler.fields.prev];
  });

  for (title in youngestSiblings) { return youngestSiblings[title]; }

},

// The recursive delete is run by a separate function (nested inside
// this one, for encapsulation purposes).
deleteTiddlerAndDescendents: function(tiddler) {

  function deleteRecursively(tiddler) {
    for (var child = tiddler.firstChild; child; child = child.next) {
      deleteRecursively(child);
    }
    store.removeTiddler(tiddler.title);
  }

  cmacro.treeifyComments(store.getTiddler(tiddler.fields.root));

  // save some info prior to deleting
  var prev = tiddler.fields.prev;
  var next = tiddler.next;

  deleteRecursively(tiddler);

  // used saved info
  if (next) {
    next.fields.prev = prev;
    cmacro.saveTiddler(next.title);
  }

  autoSaveChanges(false);

},

//##############################################################################
//# COLLECTION CLOSURES
//##############################################################################

forEach: function(list, visitor) { for (var i=0; i<list.length; i++) visitor(list[i]); },
forEachMap: function(map, visitor) { for (var key in map) visitor(map[key]); },
select: function(list, selector) { 
  var selection = [];
  cmacro.forEach(list, function(currentItem) {
    if (selector(currentItem)) { selection.push(currentItem); }
  });
  return selection;
},
selectTiddlers: function(selector) { 
  var tiddlers = [];
  store.forEachTiddler(function(title, tiddler) {
    var wanted = selector(tiddler);
    if (wanted) tiddlers.push(tiddler);
  });
  return tiddlers;
},
map: function(list, mapper) { 
  var mapped = [];
  cmacro.forEach(list, function(currentItem) { mapped.push(mapper(currentItem)); });
  return mapped;
},
remove: function(list, unwantedItem) {
  return cmacro.select(list,
        function(currentItem) { return currentItem!=unwantedItem; });
},
mapize: function(tiddlerList) {
  var map = {};
  cmacro.forEach(tiddlerList, function(tiddler) { map[tiddler.title] = tiddler; });
  return map;
},
clone: function(map) { return merge({}, map); },

//##############################################################################
//# PARAMS
//##############################################################################

editable: function(params) {
  var editable = getParam(params, "editable");
  return (!editable || editable!="false");
},

needsLogin: function(params) {
  var loginCheck = getParam(params, "loginCheck");
  return loginCheck && !window[loginCheck]();
},

forceLoginIfRequired: function(params, loginPromptContainer, authenticatedBlock) {
  if (cmacro.needsLogin(params)) wikify("<<"+getParam(macroParams, "loginPrompt")+">>", loginPromptContainer);
  else authenticatedBlock();
},

//##############################################################################
//# GENERAL UTILS
//##############################################################################

mergeReadOnly: function(first, second) {
  var merged = {};
  for (var field in first) { merged[field] = first[field]; }
  for (var field in second) { merged[field] = second[field]; }
  return merged;
},

// callers may replace this with their own ID generation algorithm
createCommentTiddler: function(macroParams, rootTitle) {
  // var titleFormat = getParam(macroParams, "titleFormat") || "%root%Comment"; 
  var prefix = rootTitle+"Comment"; // was "_comment"
  if (!store.createGuidTiddler) return store.createTiddler(prefix+((new Date()).getTime()));
  return store.createGuidTiddler(prefix);
},
saveTiddler: function(tiddler) {
  var tiddler = (typeof(tiddler)=="string") ? store.getTiddler(tiddler) : tiddler; 
  store.saveTiddler(tiddler.title, tiddler.title, tiddler.text, tiddler.modifier, tiddler.modified, tiddler.tags, cmacro.mergeReadOnly(config.defaultCustomFields, tiddler.fields), false, tiddler.created)
},

log: function() { if (console && console.firebug) console.log.apply(console, arguments); },
assert: function() { if (console && console.firebug) console.assert.apply(console, arguments); },

//##############################################################################
//# TIDDLYWIKI UTILS
//##############################################################################

copyFields: function(fromTiddler, toTiddler, field1, field2, fieldN) {
  for (var i=2; i<arguments.length; i++) {
    fieldKey = arguments[i];
    if (fromTiddler.fields[fieldKey]) toTiddler.fields[fieldKey] = fromTiddler.fields[fieldKey];
  }
}
}

config.macros.commentsCount = {
  handler: function(place,macroName,params,wikifier,paramString,tiddler) {
    var rootTiddler = paramString.length ? paramString : tiddler.title;
    var count = config.macros.comments.findCommentsFromRoot(store.getTiddler(rootTiddler)).length;
    createTiddlyText( place, count);
//    createTiddlyElement(place, "span", null, "commentCount", count);
  }
},

config.macros.commentBreadcrumb = {
  handler: function(place,macroName,params,wikifier,paramString,tiddler) {
    if (!tiddler.fields.root) return;
    var rootLink = createTiddlyElement(place, "span", null, null);
    createTiddlyLink(rootLink, tiddler.fields.root, true);

    var rootIsParent = tiddler.fields.daddy==tiddler.fields.root;
    var rootIsGrandparent = (store.getTiddler(tiddler.fields.daddy)).fields.daddy==tiddler.fields.root;

    if (!rootIsParent) {
      if (!rootIsGrandparent) createTiddlyElement(place, "span", null, null, " > ... ");
      createTiddlyElement(place, "span", null, null, " > ");
      var daddyLink = createTiddlyElement(place, "span", null, null);
      createTiddlyLink(daddyLink, tiddler.fields.daddy, true);
    }

    createTiddlyElement(place, "span", null, null, " > ");

    // place.appendChild(createTiddlyLink(tiddler.fields.root));
  }
}

config.macros.tiddlyWebComments = {};
config.macros.tiddlyWebComments.handler =
  function(place,macroName,params,wikifier,paramString,tiddler) {
    paramString += "fields:'server.workspace:bags/compare-tw2-tw5_public' inheritedFields:'server.host,server.type'";
    config.macros.comments.handler(place,macroName,params,wikifier, paramString,tiddler);
  };

function log() { if (console && console.firebug) console.log.apply(console, arguments); }

})(version.extensions.CommentsPlugin);

//################################################################################
//# CUSTOM STYLESHEET
//################################################################################

/***
!StyleSheet

.comments h1 { margin-bottom: 0; padding-bottom: 0; }
.comments { padding: 0; }
.comment .comments { margin-left: 1em; }

.comment { padding: 0; margin: 1em 0 0; }
.comment .comment { margin 0; }
.comment .toolbar .button { border: 0; color: #9a4; }
.comment .heading { background: [[ColorPalette::PrimaryPale]]; color: [[ColorPalette::PrimaryDark]]; border-bottom: 1px solid [[ColorPalette::PrimaryLight]]; border-right: 1px solid [[ColorPalette::PrimaryLight]]; padding: 0.5em; height: 1.3em; }
.commentTitle { float: left; }
.commentTitle:hover { text-decoration: underline; cursor: pointer; }
.commentText { clear: both; padding: 1em 1em; }
.deleteComment { float: right; cursor: pointer; text-decoration:underline; color:[[ColorPalette::SecondaryDark]]; padding-right: 0.3em; }
.comment .reply { margin-left: 1em; }
.comment .replyLink { color:[[ColorPalette::SecondaryDark]]; font-style: italic; 
                     cursor: pointer; text-decoration: underline; margin: 0 1em; }
.comment .created { }
.comment .newReply { color:[[ColorPalette::SecondaryDark]]; margin-top: 1em; }
.newReplyLabel { float: left; }
.closeNewReply { cursor: pointer; float: right; text-decoration: underline; }
.comments textarea { width: 100%; padding: 0.3em; margin-bottom: 0.6em; }
.newCommentArea { margin-top: 0.5em; }

.clearance { clear: both; }


!(end of StyleSheet)

***/

  config.macros.comments.init();

} // end of 'install only once'
//}}}

// function log() { if (console && console.firebug) console.log.apply(console, arguments); }

! Compare TWclassic Syntax with TW5 Syntax

TW5 docs: http://tiddlywiki.com/#WikiText

!! Some Info 

<<list filter [tag[syntax]]>>

! Dashes in WikiText

see: http://tiddlywiki.com/#Dashes%20in%20WikiText

!! Formatting

| TWc | TW5 | result | update needed |h
|{{{&ndash;}}} |{{{--}}} | – |yes - TW5 can handle {{{&mdash;}}} ''but'' {{{--}}} indicates a ''strikethrough'' in TWc |
|{{{&mdash;}}} |{{{---}}} | — |yes - TW5 can handle {{{&mdash;}}} |

!! HTML Entities

Should work fine in TWc and TW5.
see: http://classic.tiddlywiki.com/#HtmlEntities

see: http://tiddlywiki.com/#Linking%20in%20WikiText

| Example | TWc | TW5 | update needed |h
|{{{http://tiddlywiki.com/}}} | http://tiddlywiki.com/ |http://tiddlywiki.com/ | - |
|{{{tiddlywiki.com/}}} | tiddlywiki.com/ | tiddlywiki.com/ | - |
|{{{tiddlywiki.com/}}} | {{{[[tiddlywiki.com/|http://tiddlywiki.com/]]}}} | {{{[ext[tiddlywiki.com/]]}}} | yes, but no big problem, because TWc version is compatible with TW5 |

! Formatting

see: http://tiddlywiki.com/#WikiText

| TWc | TW5 | result | update needed |h
|<<tiddler {{tiddler.title + '##twc-inline-code'}}>>  | {{{`backticks for inline code`}}} | {{{ twc inline code }}}  | yes |
|  | {{{``double backticks to `nest` backticks``}}} | {{{ double backticks to `nest` backticks }}}  | not possible with TWc |
| {{{''bold''}}} | {{{''bold''}}} | ''bold text'' | - |
| {{{//italic//}}} | {{{//italic//}}} | //italic// | - |
| {{{__underscore__}}} | {{{__underscore__}}} | __underscore__ | - |
| {{{^^superscript^^}}} | {{{^^superscript^^}}} | for^^superscript^^text | - |
| {{{~~subscript~~}}} | {{{,,subscript,,}}} | for~~subscript~~text | yes |
| {{{--strikethrough--}}} | {{{~~strikethrough~~}}} | --strikethrough-- | yes |
|<<tiddler {{tiddler.title + '##twc-code-block'}}>> |<<tiddler {{tiddler.title + '##tw5-code-block'}}>> |<<tiddler {{tiddler.title + '##twc-code-block-result'}}>> | yes |


/%

! twc-inline-code
//{{{
{{{ twc inline code }}}
//}}}
! twc-code-block
//{{{
{{{
twc code 
block
}}}
//}}}
or 
//{{{
<!--{{{-->
html code block
<!--}}}-->
//}}}
or 
{{{
//{{{
javascript code block
//}}}
}}}

! twc-code-block-result
{{{
twc code 
block
}}}
! tw5-code-block
//{{{
```
tw5 code 
block
```
//}}}

no equivalents for {{{html and js}}} code blocks ??

!%/

While discussing the "list elements" there was the idea to use {{{* or **}}} as indicator for ''bold''.
see:

* http://www.youtube.com/watch?v=zQ_pM286Ew8&feature=player_detailpage#t=4523
* [[Lists]]

Most of us seem to like "double backslash" {{{//}}} for //italic//

see: http://www.youtube.com/watch?v=zQ_pM286Ew8&feature=player_detailpage#t=4678

I believe the preference was for **bold**, not just single asterisk.

For completeness, perhaps consider all of...
http://tiddlywiki.org/#Markup

Would the double asterisks run into problems when working in an unordered list?

Yes: as shown in [[Lists]]

See my comment under [[Lists]] about the clash between bold and list formatting

I'm so sorry to mis-delete the comment on August 23rd by pmario. I found the "X" button to the right and... I thought my action should have no effects but I am wrong... Very sorry! Here is the original comment of pmario:

<<<
While discussing the "list elements" there was the idea to use {{{* or **}}} as indicator for ''bold''.
see:

* http://www.youtube.com/watch?v=zQ_pM286Ew8&feature=player_detailpage#t=4523
* [[Lists]]
<<<

And also, the comment above "Most of us seem to like..." is not mine. Maybe the modifier field got changed when the child comment was deleted. Feel free to revert it.

! Hard Line Breaks

see: http://tiddlywiki.com/#Hard%20Linebreaks%20in%20WikiText

* The syntax for "hard linebreaks" in TW5 is used for "nowiki" syntax in TWc.
* The "nowiki" syntax in TW5 is called a {{{\rule}}} eg:  {{{\rule except wikilinks}}}

!! Format
see: Comments in ParagraphHandling

| TWc | TW5 | result | update needed |h
|<<tiddler {{tiddler.title + '##twc-nowiki-syntax1'}}>> | n.a. |<<tiddler {{tiddler.title + '##twc-nowiki-result'}}>> |yes - since it means something different |
|<<tiddler {{tiddler.title + '##twc-nowiki-syntax2'}}>> | n.a. |<<tiddler {{tiddler.title + '##twc-nowiki-result'}}>> |yes - since it means something different |
| n.a |<<tiddler {{tiddler.title + '##tw-hard-br-syntax'}}>> |<<tiddler {{tiddler.title + '##tw-hard-br-result'}}>> |yes - since it means something different |


/%
! twc-nowiki-result
"""
This is AnotherLink, this is a 
copyright symbol &copy; and this 
site is called <<tiddler SiteTitle>>
"""

! twc-nowiki-syntax1
{{{
"""
This is AnotherLink, this is a 
copyright symbol &copy; and this 
site is called <<tiddler SiteTitle>>
"""
}}}

! twc-nowiki-syntax2
{{{
<nowiki>This is AnotherLink, this is a 
copyright symbol &copy; and this 
site is called <<tiddler SiteTitle>></nowiki>
}}}

! tw-hard-br-syntax
{{{
"""
This is a line
and this is a new line. 
CamelCase will be wikified
"""
}}}

! tw-hard-br-result
This is a line
and this is a new line. 
CamelCase will be wikified
!%/

! Hello There

''This space is for explaining and discussing the differences between TWclassic and TW5''. This space may miss some informations. If you find anything missing just post at the [[google group|https://groups.google.com/forum/?fromgroups#!forum/tiddlywiki]] or if you are a member of ~TiddlySpace, you can add comments here!

* Every tiddler tagged: {{{topic}}} or {{{syntax}}} gets a "comment" text area.
* Comments are open for everyone, who is logged in to TS
* You are able to ''create'' and ''edit'' any tiddler. 
* You ''can't delete'' tiddlers
* All comments are public by default
* Latest Comments can be seen at: LatestComments 
** see the link in the top menu

!! Top Menu

* In the top menu you can see some important links and the ''"hide/show" sidebar'' and ''toggle TiddlersBar'' 

!! Chat using Etherpad

* Below the header, you can see a "Community Chat" slider. This is an etherpad link to the typo3.org page. typo3 is a widely used CMS system. So there service should be stable. 
* Content there should only be used to cooperatively write stuff and copy it to a tiddler afterwards.

! Image Links

In TW V 5.1.0 the TWc syntax also works in TW5. So should be no real problem anymor. 

see: http://tiddlywiki.com/#Images%20in%20WikiText

!! Format

| TWc | TW5 | result | update needed |h
|<<tiddler {{tiddler.title + '##twc-image'}}>> |<<tiddler {{tiddler.title + '##tw-image'}}>> | - | yes |

/%
! tw-image
{{{
{{Motovun Jack.jpg}}
}}}

! twc-image
{{{
[img[Motovun Jack.jpg]]
}}}

!%/

!! Keyboard Shortcuts 

Scott points out, that keyboard shortcuts could be used to insert "special" markup. 

see. http://www.youtube.com/watch?v=zQ_pM286Ew8&feature=player_detailpage#t=3510

<<list filter [tag[comment]][sort[-modified]] template:"LatestComments##template" emptyMessage: "No matching tiddler found...">>

/%
!template
<<view modified date "YYYY-0MM-0DD 0hh:0mm">> - <<view root link>> - - - - <<view title link>> - - - - <<view modifier text>> 
!
%/

!! Lists

see: http://tiddlywiki.com/#Lists%20in%20WikiText

The discussion starts here: http://www.youtube.com/watch?v=zQ_pM286Ew8&feature=player_detailpage#t=3442

| TWc | TW5 | result | update needed |h
|{{{*}}} | {{{*}}}| <<tiddler {{tiddler.title + '##twc-bullet'}}>> | - |
|{{{**}}} | {{{**}}}|  | - |
|{{{#}}} | {{{#}}}| <<tiddler {{tiddler.title + '##twc-number'}}>> | - |

... but TW5 has much more possibilities. see: http://five.tiddlywiki.com/ and search for "WikiText" eg: Nesting of "bullet lists" and "numbered lists". This was not possible to create with TWc.
{{{
* To do today
*# Eat
* To get someone else to do
*# This
*# That
*## And the other
}}}

which produces: 

<html>
<ul><li>To do today<ol><li>Eat</li></ol></li><li>To get someone else to do<ol><li>This</li><li>That<ol><li>And the other</li></ol></li></ol></li></ul>
</html>

/%
! twc-bullet
* level 1
** level 2
! twc-number
# level 1
## level 2
# level 1
!%/

As the syntax discussion evolves, {{{*}}} and/or {{{**}}} was discussed as an indicator for ''bold''. Which causes a problem with the TW5 "bullet list" syntax. 

see: [[Formatting]]

What do you mean "was not possible"? If you take that markup and render it here it works. o.O

it's inside {{{<html></html>}}} tags :)

I note that MarkDown actually seems to require a space after the before the body of a list item. That makes it easy to distinguish a list from the proposed {{{**boldface**}}} syntax.

(http://markdownlivepreview.com/ is useful for exploring MarkDown conversion interactively)

! Macros vs. Widgets

* In TWc macros are used to extend the functionality.


* In TW5 widgets are used to extend the functionality.


* In TW5 macros are used to create "text substitutions"
** see: http://tiddlywiki.com and search for ''Macros in ~WikiText''

!! Widgets

| TWc | TW5 |h
| n.a | {{{<$widgetname ../>}}} or {{{<$widgetname ..> .. </widgetname>}}}|

!! Macros

| TWc | TW5 | update needed |h
| {{{<<tiddler params>>}}} | - ||
| - |{{{<<substitutetext params>>}}} |yes - since the meaning completely changed!<br>learn more at: http://tiddlywiki.com |

{{noBullets{<<list filter [tag[mainMenu]]>>}}}

!! List handling in Markdown

see: http://www.youtube.com/watch?v=zQ_pM286Ew8&feature=player_detailpage#t=3442

* Markdown has the possibilitiy to create lists with multi paragraph text.

The problem Jeremy faced, is that it uses "tabs" and "spaces" as a "syntax", which is a problem, if you want to edit tiddlers in an external editor.

! Paragraph Handling

see: http://tiddlywiki.com/#Paragraphs%20in%20WikiText

| TWc | TW5 | result | update needed |h
|<<tiddler {{tiddler.title + '##twc-paragraph'}}>> |<<tiddler {{tiddler.title + '##tw5-paragraph'}}>> |  | yes |

Jeremy did implement HardLineBreaks 

/%
! twc-paragraph
{{{
In TWc there is no paragraph handling.
Instead <br /> is used as a linebreak
}}}
! tw5-paragraph
{{{
This is the first paragraph.

And this is the second paragraph.
}}}
!%/

Discussion about paragraph handling starts at 0:24:23 - http://www.youtube.com/watch?feature=player_detailpage&v=zQ_pM286Ew8#t=1464

* TWc had the problem, that you need to use {{{<br />}}} tag to indicate, that you want to have an explicite linebreak.
* TW5 now has the oposit problem. Single line breaks are ignored. 

There are 2 possibilities at the moment. 

# Use markdown flavored syntax for line break handling: GithubFlavoredMarkdown
# Create a TW5 markup, that uses a "fenced syntax" eg: {{{~}}}

{{{
~
Within this area single line breaks
will be treated as line breaks

And hopefully this is a new 2 line 
paragraph.
~
}}}

The use of "double markers" was discussed too.

{{{
~~
Within this area single line breaks
will be treated as line breaks
~~
}}}

also see: http://www.youtube.com/watch?v=zQ_pM286Ew8&feature=player_detailpage#t=1628

I'm in favor of version 2 because:
* the tilde {{{~}}} or {{{~~}}} at the beginning and the end is fast to type. 
* It visually indicates that there is something special going on between these 2 markers.

I think I favour the double tilde

* With https://github.com/Jermolene/TiddlyWiki5/commit/6a8feb216a0ddc2a7a1644cffe816f0d437b2fe4 jeremy implemented
* also see: HardLineBreaks

{{{
"""
wikitext with
hard line breaks
"""
}}}

/***
|Name:|PrettyDatesPlugin|
|Description:|Provides a new date format ('pppp') that displays times such as '2 days ago'|
|Version:|1.0 ($Rev: 3646 $)|
|Date:|$Date: 2008-02-27 02:34:38 +1000 (Wed, 27 Feb 2008) $|
|Source:|http://mptw.tiddlyspot.com/#PrettyDatesPlugin|
|Author:|Simon Baird <simon.baird@gmail.com>|
|License:|http://mptw.tiddlyspot.com/#TheBSDLicense|
!!Notes
* If you want to you can rename this plugin. :) Some suggestions: LastUpdatedPlugin, RelativeDatesPlugin, SmartDatesPlugin, SexyDatesPlugin.
* Inspired by http://ejohn.org/files/pretty.js
***/
//{{{
Date.prototype.prettyDate = function() {
	var diff = (((new Date()).getTime() - this.getTime()) / 1000);
	var day_diff = Math.floor(diff / 86400);

	if (isNaN(day_diff))      return "";
	else if (diff < 0)        return "in the future";
	else if (diff < 60)       return "just now";
	else if (diff < 120)      return "1 minute ago";
	else if (diff < 3600)     return Math.floor(diff/60) + " minutes ago";
	else if (diff < 7200)     return "1 hour ago";
	else if (diff < 86400)    return Math.floor(diff/3600) + " hours ago";
	else if (day_diff == 1)   return "Yesterday";
	else if (day_diff < 7)    return day_diff + " days ago";
	else if (day_diff < 14)   return  "a week ago";
	else if (day_diff < 31)   return Math.ceil(day_diff/7) + " weeks ago";
	else if (day_diff < 62)   return "a month ago";
	else if (day_diff < 365)  return "about " + Math.ceil(day_diff/31) + " months ago";
	else if (day_diff < 730)  return "a year ago";
	else                      return Math.ceil(day_diff/365) + " years ago";
}

Date.prototype.formatString_orig_mptw = Date.prototype.formatString;

Date.prototype.formatString = function(template) {
	return this.formatString_orig_mptw(template).replace(/pppp/,this.prettyDate());
}

// for MPTW. otherwise edit your ViewTemplate as required.
// config.mptwDateFormat = 'pppp (DD/MM/YY)'; 
config.mptwDateFormat = 'pppp'; 

//}}}

Space compare-tw2-tw5

a TiddlySpace

compare-tw2-tw5

!! Related Links

* The discussion about TW5 "markdownisation" starts here: http://www.youtube.com/watch?feature=player_detailpage&v=zQ_pM286Ew8#t=990
* Jeremy opens the markdown page: http://www.youtube.com/watch?feature=player_detailpage&v=zQ_pM286Ew8#t=1406

! Transclusions

see: http://tiddlywiki.com/#Transclusion%20in%20WikiText

The transclusion mechanism changed fundamentally!
* In TWclassic the "transclusion" was a {{{<<tiddler>>}}} macro call.
* In TW5 it is part of the "wiki syntax". 
** For detailes see: http://tiddlywiki.com ans search for ''transclusion'' 

!! Format

| TWc | TW5 | result | update needed |h
|<<tiddler {{tiddler.title + '##twc-transclusion'}}>> |<<tiddler {{tiddler.title + '##tw5-transclusion'}}>> | - | yes |


/%
! twc-transclusion
{{{
<<tiddler toBeTranscluded>>
}}}

! tw5-transclusion
{{{
{{toBeTranscluded}}
}}}
!%/

* take care of {{{<<tiddler asdf with: param1 param2>>}}} ... This content will be tricky to convert.

!! ~WikiLinks

see: http://tiddlywiki.com/#Linking%20in%20WikiText

| TWc | TW5 | result | update needed |h
| {{{[[Tiddler Title]]}}} | {{{[[Tiddler Title]]}}} | [[Tiddler Title]] | - |
| {{{[[Displayed Link Title|Tiddler Title]]}}} | {{{[[Displayed Link Title|Tiddler Title]]}}} | [[Displayed Link Title|Tiddler Title]] | - |
| {{{CamelCase}}} | {{{CamelCase}}} | CamelCase | - |
| {{{http://five.tiddlywiki.com/}}} | {{{http://five.tiddlywiki.com/}}} | http://five.tiddlywiki.com/ | - |
| {{{~IgnoreCamelCase}}} | {{{~IgnoreCamelCase}}} | ~IgnoreCamelCase | - |

!! Differences between TWc and TW5

| Example | TWc | TW5 | update needed |h
|{{{System-Tiddler}}} |System-Tiddler |~System-Tiddler| yes .. {{{~}}} not needed anymore |
|{{{ABC2DEF}}} |ABC2DEF |~ABC2DEF | yes .. {{{~}}} not needed anymore |

''Hint: Check your text for visible {{{~}}} Symbols. They may be obsolete now.''

TW5 uses a different settings to detect CamelCase links. eg: System-Tiddler in TWc is converted to a link while with TW5 it looks like this: ~System-Tiddler

* Is a tag, that is used to define tiddlers that describe the difference between TWc syntax and TW5 syntax.
* It will be usee to create a summary tiddler.
* This TW only discusses differences. Syntax, that is compatible will not be mentined here.

* Tiddlers listed below need attention.
* If you did change, fix ... something there just tag them {{{review}}} and remove the {{{todo}}} tag.

Topics are tiddlers, that you want to discuss. Tiddlers, that contain syntax comparison must be tagged: [[syntax]]

Topic is a tag used to create lists like: {{{<<list filter [tag[topic]]>>}}}

<<paletteView ColorPalette>>

/***
|Name         |ThostUploadPlugin |
|Description  |Support saving to Tiddlyhost.com |
|Version      |1.0.1 |
|Date         |March 06, 2021 |
|Source       |https://github.com/tiddlyhost/tiddlyhost-com/tree/main/rails/tw_content/plugins |
|Author       |BidiX, Simon Baird, Yakov Litvin |
|License      |BSD open source license |
|~CoreVersion |2.9.2 |
***/
//{{{

version.extensions.ThostUploadPlugin = { major: 1, minor: 0, revision: 1 };

//
// Environment
//

if (!window.bidix) window.bidix = {};

// To change these defaults, create a tiddler named "ThostOptions" with tag
// "systemConfig" and the following content:
// window.bidix = { "editModeAlways": false, "uploadButtonAlways": false };

// Set false if you want the chkHttpReadOnly cookie to decide whether to
// render in read-only mode or edit mode when you're not logged in or when
// the site is being viewed by others. Default true.
if (!("editModeAlways" in bidix)) { bidix.editModeAlways = true; }

// Set false to hide the "upload to tiddlyhost" button when you're not logged
// in or when the site is being viewed by others. Default true.
if (!("uploadButtonAlways" in bidix)) { bidix.uploadButtonAlways = true; }

// For debugging. Default false.
if (!("debugMode" in bidix)) { bidix.debugMode = false; }

//
// Upload Macro
//

config.macros.thostUpload = {
  handler: function(place,macroName,params) {
    createTiddlyButton(place, "save to tiddlyhost",
      "save this TiddlyWiki to a site on Tiddlyhost.com",
      this.action, null, null, this.accessKey);
  },

  action: function(params) {
    var siteName = config.options.txtThostSiteName.trim();
    if (!siteName) {
      alert("Tiddlyhost site name is missing!");
      clearMessage();
    }
    else {
      bidix.thostUpload.uploadChanges('https://' + siteName + '.tiddlyhost.com');
    }
    return false;
  }
};

//
// Upload functions
//

if (!bidix.thostUpload) bidix.thostUpload = {};

if (!bidix.thostUpload.messages) bidix.thostUpload.messages = {
  invalidFileError: "The original file '%0' does not appear to be a valid TiddlyWiki",
  mainSaved: "Main TiddlyWiki file uploaded",
  mainFailed: "Failed to upload main TiddlyWiki file. Your changes have not been saved",
  loadOriginalHttpPostError: "Can't get original file",
  aboutToSaveOnHttpPost: 'About to upload on %0 ...',
  storePhpNotFound: "The store script '%0' was not found."
};

bidix.thostUpload.uploadChanges = function(storeUrl) {
  var callback = function(status, uploadParams, original, url, xhr) {
    if (!status) {
      displayMessage(bidix.thostUpload.messages.loadOriginalHttpPostError);
      return;
    }
    if (bidix.debugMode) {
      alert(original.substr(0,500)+"\n...");
    }

    var posDiv = locateStoreArea(original);
    if ((posDiv[0] == -1) || (posDiv[1] == -1)) {
      alert(config.messages.invalidFileError.format([localPath]));
      return;
    }

    bidix.thostUpload.uploadMain(uploadParams, original, posDiv);
  };

  clearMessage();

  // get original
  var uploadParams = [storeUrl];
  var originalPath = document.location.toString();
  var dest = 'index.html';
  displayMessage(bidix.thostUpload.messages.aboutToSaveOnHttpPost.format([dest]));

  if (bidix.debugMode) {
    alert("about to execute Http - GET on "+originalPath);
  }

  var r = doHttp("GET", originalPath, null, null, null, null, callback, uploadParams, null);

  if (typeof r == "string") {
    displayMessage(r);
  }

  return r;
};

bidix.thostUpload.uploadMain = function(uploadParams, original, posDiv) {
  var callback = function(status, params, responseText, url, xhr) {
    if (status) {
      displayMessage(bidix.thostUpload.messages.mainSaved);
      store.setDirty(false);
    }
    else {
      alert(bidix.thostUpload.messages.mainFailed);
      displayMessage(bidix.thostUpload.messages.mainFailed);
    }
  };

  var revised = updateOriginal(original, posDiv);
  bidix.thostUpload.httpUpload(uploadParams, revised, callback, uploadParams);
};

bidix.thostUpload.httpUpload = function(uploadParams, data, callback, params) {
  var localCallback = function(status, params, responseText, url, xhr) {
    if (xhr.status == 404) {
      alert(bidix.thostUpload.messages.storePhpNotFound.format([url]));
    }

    var saveNotOk = responseText.charAt(0) != '0';

    if (bidix.debugMode || saveNotOk) {
      alert(responseText);
    }

    if (saveNotOk) {
      status = null;
    }

    callback(status, params, responseText, url, xhr);
  };

  // do httpUpload
  var boundary = "---------------------------"+"AaB03x";
  var uploadFormName = "UploadPlugin";
  // compose headers data
  var sheader = "";
  sheader += "--" + boundary + "\r\nContent-disposition: form-data; name=\"";
  sheader += uploadFormName +"\"\r\n\r\n";
  sheader += "backupDir=x" +
        ";user=x" +
        ";password=x" +
        ";uploaddir=x";
  if (bidix.debugMode) {
    sheader += ";debug=1";
  }
  sheader += ";;\r\n";
  sheader += "\r\n" + "--" + boundary + "\r\n";
  sheader += "Content-disposition: form-data; name=\"userfile\"; filename=\"index.html\"\r\n";
  sheader += "Content-Type: text/html;charset=UTF-8" + "\r\n";
  sheader += "Content-Length: " + data.length + "\r\n\r\n";
  // compose trailer data
  var strailer = "";
  strailer = "\r\n--" + boundary + "--\r\n";
  data = sheader + data + strailer;
  if (bidix.debugMode) {
    alert("about to execute Http - POST on " + uploadParams[0]+ "\n with \n" + data.substr(0,500) + " ... ");
  }
  var r = doHttp("POST", uploadParams[0], data,
    "multipart/form-data; ;charset=UTF-8; boundary=" + boundary, 'x','x', localCallback, params, null);

  if (typeof r == "string") {
    displayMessage(r);
  }

  return r;
};

// a fix for versions before 2.9.2 (updateOriginal used conversions irrelevant for Tiddlyhost)
convertUnicodeToFileFormat = function(s) { return s };

//
// Site config
//

bidix.initOption = function(name,value) {
  if (!config.options[name]) {
    config.options[name] = value;
  }
};

merge(config.optionsDesc, {
  txtThostSiteName: "Site name for uploads to Tiddlyhost.com",
});

bidix.initOption('txtThostSiteName','compare-tw2-tw5-281');

//
// Tiddlyhost stuff
//

bidix.ownerLoggedIn = (config.shadowTiddlers.TiddlyHostIsLoggedIn &&
  config.shadowTiddlers.TiddlyHostIsLoggedIn == "yes")

if (bidix.editModeAlways || bidix.ownerLoggedIn) {
  // If user is logged in to Tiddlyhost and viewing their own site then
  // we disregard the original value of the chkHttpReadOnly cookie
  config.options.chkHttpReadOnly = false
  // window.readOnly gets set before plugins are loaded, so we need to
  // set it here to make sure TW is editable, unlike window.showBackstage
  // which is set after
  window.readOnly = false
}

if (bidix.uploadButtonAlways || bidix.ownerLoggedIn) {
  // Add the 'save to tiddlyhost' button after the regular save button
  config.shadowTiddlers.SideBarOptions = config.shadowTiddlers.SideBarOptions
    .replace(/(<<saveChanges>>)/,"$1<<thostUpload>>");
}

//}}}