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

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

/*{{{*/
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]];}

.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}

.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]];}

#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:0px; top:0px;}

.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:0px 3px 0px 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:0px; padding-bottom:0px;}

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

.sparkline {line-height:1em;}
.sparktick {outline:0;}

.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='header' 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' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->

<!--{{{-->
<div class='toolbar' 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>
<!--}}}-->

<!--{{{-->
<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>>

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

<<importTiddlers>>

Playground

build lots of little apps

<<newApp>>

[[Welcome]]
[[List Of Apps]]
!Default App Settings
[[Description Settings|DefaultApp]]
[[Code Settings|AppFrameTweaks]]

!Apps
<<betterList filter [tag[app]] emptyMessage:"no apps yet">>

#mainMenu ul { list-style-type: none; }
/* #mainMenu a.button { background: #ff9; border: 1px solid #ee4; padding: 3px; } */
.betterList ul { list-style-type: none; margin-left: 0; padding-left: 0; }
#mainMenu .button, .viewer .button { border: 1px solid #db4; }

<!--{{{-->
<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='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->

<!--{{{-->
<div class='toolbar' 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='appContainer' macro='appFrame title'></div>
<div class='tagClear'></div>
<!--}}}-->

[[Welcome]]
[[List Of Apps]]

(function($) {

  config.macros.newApp = {
    handler: function(place,macroName,params,wikifier,paramString,tiddler) {
      var macroParams = paramString.parseParams();
      var label = getParam(macroParams, "label") || "new app"
      invokeMacro(place, "newTiddler", 'label:"'+label+'" title:"New App" tag:"app" text: "'+store.getTiddlerText("DefaultApp")+'"');
    }
  }

})(jQuery);

Welcome to the Playground! A little tool by [[Michael Mahemoff|http://mahemoff.com]] to stick a bunch of small web apps into a single TiddlyWiki, which is to say, a single file. You can then mail the file to your mates, who can make further changes if they like, or upload it to a server to share the demos with the world. Because it's a TiddlyWiki, there are hundreds of plugins available to drop into your Playground to make it look and feel just the way you like it.

<<betterList filter [tag[app]] emptyMessage:"There are no apps yet.">>
<<newApp>>

!Summary

!Coding Notes

!Related Apps
* [[App1]]
* [[App2]]

/***
|Name|AppFramePlugin|
|Description||
|Source||
|Documentation||
|Version|0.1|
|Requires|jquery.app|
|Author|Michael Mahemoff, Osmosoft|
|''License:''|[[BSD open source license]]|
|~CoreVersion|2.2|
***/


/***
{{{

!StyleSheet
.appFrame { width: 100%; height: 400px; }
.appPanel { margin: 10px 0; }
.appPanel a.tiddlyLink { background: #ffe; margin-right: 5px; border: 1px solid #ffc; padding: 2px; }
.appPanel a.tiddlyLink:hover { color: #008; }
.appPanel span { cursor: pointer; }
.appPanel button { margin-left: 10px; }
pre.component { font-size: normal; }

.appSource { display: none;
             width: 100%; max-height: 400px; 
             background: #ffa; }

!The plugin
}}}
***/

(function($) {

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

  var TWEAKS_TITLE = "AppFrameTweaks";
  var componentTiddlerTypes = ["htm", "css", "javascript"];

  config.macros.appFrame = {


    init: function() {
      var stylesheet = store.getTiddlerText("AppFramePlugin##StyleSheet");
      config.shadowTiddlers["StyleSheetAppFramePlugin"] = stylesheet;
      store.addNotification("StyleSheetAppFramePlugin", refreshStyles);
    },

    handler: function(place,macroName,params,wikifier,paramString,tiddler) {

      var macroParams = paramString.parseParams();
      var appTiddlerTitle = getParam(macroParams, "app") || tiddler.title;

      $(place).addClass("app").append(makeAppPanel(appTiddlerTitle));
      $("<pre class='appSource'/>").appendTo(place);
      var $iframe = $("<iframe class='appFrame' />").appendTo(place);
      populate(appTiddlerTitle, place);

    }

  };

  function populate(appTiddlerTitle, place) {
    var app = makeApp(appTiddlerTitle);
    var appHTML = app.asHTML();
    $(place).find(".appFrame").inject(appHTML);
    $(place).find(".appSource").text(appHTML);
  }

  /* Adaptor/Builder - inspects tiddlers and passes to jQuery app plugin */
  function makeApp(appTiddlerTitle) {
    var app = $.app();

    $.each(getComponentSpecs(TWEAKS_TITLE, "commonLibraryScripts")
          .concat(getComponentSpecs(appTiddlerTitle, "libraryScripts")), function (i, script) {
      if (script=="_jQuery_") app.attachScripts($("#jslibArea").html().replace(/^\/\/.*/mg, ""));
      else if (isURL(script)) app.attachLinkedScripts(script);
      else if (matches=script.match(/\[\[(.*)\]\]/)) app.attachScripts(extractCode(store.getTiddlerText(matches[1])));
    });


    $.each(getComponentSpecs(TWEAKS_TITLE, "commonLibraryStylesheets")
          .concat(getComponentSpecs(appTiddlerTitle, "libraryStylesheets")), function (i, stylesheet) {
      if (isURL(stylesheet)) app.attachLinkedStylesheets(stylesheet);
      else if (matches=stylesheet.match(/\[\[(.*)\]\]/)) app.attachStylesheets(extractCode(store.getTiddlerText(matches[1])));
    });

    app.attachHTML("core", extractComponentCode(appTiddlerTitle, "htm"));
    app.attachHTML("title", appTiddlerTitle);
    app.attachStylesheets(extractComponentCode(appTiddlerTitle, "css"));
    app.attachScripts(extractComponentCode(appTiddlerTitle, "javascript"));

    return app;
  }


  function makeAppPanel(appTiddlerTitle, place) {

    var $panel = $("<div class='appPanel' />");

    $.each(componentTiddlerTypes, function(i, componentTiddlerType) {
      createTiddlyLink($panel[0], appTiddlerTitle+"."+componentTiddlerType, true);
    });

    $("<input type='checkbox' />")
    .click(function() { $(place).find(".appSource").toggleSlide(); })
    .appendTo($panel)
    .after($("<span>view source</span>").click(function() { $(this).prev().click(); }));

    $("<button>Reload</button>")
    .click(function() { populate(appTiddlerTitle, place); })
    .appendTo($panel);

    return $panel;

  }


  config.shadowTiddlers.ComponentViewTemplate = config.shadowTiddlers.ViewTemplate.replace(
    /<div.*class='viewer'.*<\/div>/,
    "<pre class='component' macro='view text'></pre>");

  var chooseTemplateForTiddler = Story.prototype.chooseTemplateForTiddler;
  c=Story.prototype.chooseTemplateForTiddler = function(title, template) {
    var parts = title.split(".");
    var suffix = parts[parts.length-1];
    if ((!template||template==DEFAULT_VIEW_TEMPLATE)
        && parts.length>1 && componentTiddlerTypes.indexOf(suffix)!=-1) {
      return "ComponentViewTemplate";
    }
    return chooseTemplateForTiddler.apply(this, arguments);
  };


  function isURL(s) { return (/^\S+:\/\/.+/).test(s); }

  function getField(tiddler, field) {
    tiddler = store.getTiddler(tiddler)||tiddler;
    return tiddler && tiddler.fields ? tiddler.fields[field] : "";
  }

  function log() { if (console && console.log) console.log.apply(console, arguments); }
  function strip(s) { return s ? s.replace(/\s+/g, "") : ""; }

  var TRIES=10, RETRY_INTERVAL=100;
  $.fn.inject = function(content) {
    return $(this).filter("iframe").each(function() {
      remaining = TRIES;
      var iframe = this;
      (function inject() {
        var doc = iframe.contentWindow.document || iframe.contentDocument || iframe.document;
        if (doc) {
          doc.open();
          doc.writeln(content);
          doc.close();
        } else {
          if (remaining-- > 0) setTimeout(inject, RETRY_INTERVAL);
        }
      })();
    });
  };

  function extractComponentCode(appTiddlerTitle, componentType) {
    var componentContent = store.getTiddlerText(appTiddlerTitle+"."+componentType) ||
                           store.getTiddlerText(TWEAKS_TITLE +"##Fallback "+componentType);
    log("cc", componentType, componentContent, "thing", TWEAKS_TITLE +"##Fallback "+componentType, "con", store.getTiddlerText(TWEAKS_TITLE +"##Fallback "+componentType));
    return componentContent ? extractCode(componentContent) : "";
  }

  function extractCode(content) {
    // var text = store.getTiddlerText(tiddler) || "";
    log("content", content);
    return content ? content.replace(/(\s\S)*\n$/, "$1") : "";
  }

  function getComponentSpecs(tiddlerTitle, sliceTitle) {
    var components = strip(store.getTiddlerText(tiddlerTitle+"::"+sliceTitle));
    return components.length ? components.split(",") : [];
  }

  $.fn.toggleSlide = function() {
    $(this).css("display")=="none" ? $(this).slideDown() : $(this).slideUp();
  }

})(jQuery);
/*}}}*/

Here you can set common javascripts and stylesheets, which will be used in all apps; and fallback HTML, CSS, and Javascript, each of which will be used if an app doesn't set the corresponding component.

|commonLibraryScripts||
|commonLibraryStylesheets||
    
!Fallback htm

!Fallback css

!Fallback javascript

(function($) {

//******************************************************************************
// Component type config
//******************************************************************************

  var componentTypes = {
    linkedStylesheets: { pre: '<link rel="stylesheet" type="text/css" href="', post: '"></link>\n' },
    linkedScripts: { pre: '<script type="text/javascript" src="', post: '"></script>\n' },
    stylesheets: { pre: '<style>\n', post: '\n</style>\n' },
    scripts: { pre: '<script type="text/javascript">\n', post: '\n</script>\n' }
  }

  var DEFAULT_TEMPLATE = "\
<html>\n\
  <head>\n\
    <title>[[title]]</title>\n\
    [[components]]\n\
  </head>\n\
  <body>\n\
    [[core]]\n\
  </body>\n\
</html>";

//******************************************************************************
// Basic setup
//******************************************************************************

  $.app = function(options) {
    return new app(options);
  }

  app = function(options) {

    options = options || {};
    this.settings = $.extend({
      template: DEFAULT_TEMPLATE,
      decode: function(s) { return s; }
    }, options);
    this.components = [];
    this.htmlSegments = {};

    var thisApp=this;
    $.each(componentTypes, function(componentType) {
      thisApp[componentType] = [];
    });

  }

//******************************************************************************
// Interrogator - Render/Format - this is the guts of this lib
//******************************************************************************

  app.prototype.asHTML = function() { 

    var app = this;
    var html = this.settings.template;

    var componentsHTML = "";
    $.each(this.components, function(i, component) {
      componentsHTML += component.type.pre+component.val+component.type.post;
    });

    var html = html.replace(/\[\[(.+?)\]\]/g, function (s, componentToken) {
      var output;
      if (componentToken=="components")
        output = componentsHTML;
      else
        output = app.htmlSegments[componentToken] || "";
      return app.settings.decode(output);
    });

    return html;

  };

  function makeComponentHTML(componentList, preString, postString) {
    var componentHTML = "";
    $.each(componentList, function(i, component) {
      componentHTML+=preString + component + postString;
    });
    return componentHTML;
  }

//******************************************************************************
// Interrogators - Other
//******************************************************************************

  // app.prototype. = function() {
  // };

//******************************************************************************
// Manipulators - Define functions like app.attachLinkedStylesheets
//******************************************************************************

  app.prototype.attachHTML = function(id, html) { 
    this.htmlSegments[id] = html;
  };

  $.each(componentTypes, function(componentType) {
    app.prototype["attach"+nominalize(componentType)] = function() {
      for (var i=0; i<arguments.length; i++) {
        this.components.push({
          type: componentTypes[componentType],
          val: arguments[i]
        });
      }
    }
  });
 
//******************************************************************************
// Utils
//******************************************************************************

  function nominalize(s) {
    return s.substr(0,1).toUpperCase() + s.substr(1);
  }

})(jQuery);

/*
  BetterListPlugin
*/

/***
|Name|BetterListPlugin|
|Description||
|Source||
|Documentation||
|Version|0.1|
|Author|Michael Mahemoff, Osmosoft|
|''License:''|[[BSD open source license]]|
|~CoreVersion|2.2|
***/

(function($) {

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

  var macro = config.macros.betterList = {


  init: function() {
    // var stylesheet = store.getTiddlerText(tiddler.title + "##StyleSheet");
    // config.shadowTiddlers["StyleSheetBetterListPlugin"] = stylesheet;
    // store.addNotification("StyleSheetBetterListPlugin", refreshStyles);
  },

  handler: function(place,macroName,params,wikifier,paramString,tiddler) {
    var format, macroParams = paramString.parseParams();
    
    var matches = paramString.match(/^(.*)(format:)(\S+)(.*)$/);
    console.log("par", paramString);
    if (matches) {
      console.log("matches", matches);
      format = matches[3]; 
      paramString = matches[1]+matches[4];
      console.log("for", format);
    }
    console.log("pam", paramString);
    params = paramString.split(/\s+/);
    var type = params[0] || "all";

    $(place).addClass("betterList");
    if (!config.macros.list[type].handler) return;
    var tiddlers = config.macros.list[type].handler(params);
    if (tiddlers.length) {
      if (format=="raw") {
        $.each(tiddlers, function(i, tiddler) { $(place).append(tiddler.title+"\n"); })
      } else {
        var $list = $("<ul/>").appendTo(place);
        $.each(tiddlers, function(i, tiddler) {
          var $li = $("<li/>").appendTo($list);
          createTiddlyLink($li.get(0), tiddler.title || tiddler, true);
        });
      }
    } else {
      $("<div/>").text(getParam(macroParams, "emptyMessage") || "no matches").appendTo(place);
    }
  }


}
})(jQuery);


/***
!StyleSheet

!(end of StyleSheet)

***/

/*}}}*/

/***
|Name|TaggedTemplateTweak|
|Source|http://www.TiddlyTools.com/#TaggedTemplateTweak|
|Documentation|http://www.TiddlyTools.com/#TaggedTemplateTweakInfo|
|Version|1.5.1|
|Author|Eric Shulman - ELS Design Studios|
|License|http://www.TiddlyTools.com/#LegalStatements <br>and [[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]|
|~CoreVersion|2.1|
|Type|plugin|
|Requires||
|Overrides|Story.prototype.chooseTemplateForTiddler()|
|Description|use alternative ViewTemplate/EditTemplate for tiddler's tagged with specific tag values|
This tweak extends story.chooseTemplateForTiddler() so that ''whenever a tiddler is marked with a specific tag value, it can be viewed and/or edited using alternatives to the standard tiddler templates.'' 
!!!!!Documentation
>see [[TaggedTemplateTweakInfo]]
!!!!!Revisions
<<<
2009.01.06 [1.5.1] reversed logic so that title-as-prefix takes precedence over tag-matched prefix
2008.12.18 [1.5.0] added handling for using tiddler //title// as prefix (e.g., {{{SomeTiddlerViewTemplate}}}) 
| please see [[TaggedTemplateTweakInfo]] for previous revision details |
2007.06.11 [1.0.0] initial release
<<<
!!!!!Code
***/
//{{{
version.extensions.TaggedTemplateTweak= {major: 1, minor: 5, revision: 1, date: new Date(2009,1,6)};

Story.prototype.taggedTemplate_chooseTemplateForTiddler = Story.prototype.chooseTemplateForTiddler
Story.prototype.chooseTemplateForTiddler = function(title,template)
{
	// get default template from core
	var coreTemplate=this.taggedTemplate_chooseTemplateForTiddler.apply(this,arguments);

	// if the tiddler doesn't exist yet, return core result
	var tiddler=store.getTiddler(title); if (!tiddler) return coreTemplate;

	// split core template into theme prefix and template name
	var theme="";
	var template=coreTemplate;
	var parts=template.split(config.textPrimitives.sectionSeparator);
	if (parts[1]) { theme=parts[0]; template=parts[1]; }
	else theme=config.options.txtTheme||""; // fallback if theme is not specified
	theme+=config.textPrimitives.sectionSeparator;

	// look for template whose prefix matches the *title* of this tiddler
	if (!store.getTaggedTiddlers(title).length) { // if tiddler is not a tag
		if (store.getTiddlerText(theme+title+template)) { return theme+title+template; } // theme##TitleTemplate
		if (store.getTiddlerText(title+template)) 	{ return title+template; }	 // TitleTemplate
	}

	// look for template whose prefix matches a *tag* on this tiddler (if any)
	for (i=0; i<tiddler.tags.length; i++) {
		var t=tiddler.tags[i]+template; // add tag prefix to template
		var c=t.substr(0,1).toUpperCase()+t.substr(1); // capitalized for WikiWord title
		if (store.getTiddlerText(theme+t))	{ return theme+t; } // theme##tagTemplate
		if (store.getTiddlerText(theme+c))	{ return theme+c; } // theme##TagTemplate
		if (store.getTiddlerText(t)) 		{ return t; }	    // tagTemplate
		if (store.getTiddlerText(c))		{ return c; }	    // TagTemplate
	}

	// no matching tag OR title prefix... return core result
	return coreTemplate;
}
//}}}