Add a demo of alerts and tweak styles

editions/tw5.com/tiddlers/Features.tid

@@ -4,12 +4,15 @@ tags: introduction
 title: Features
 type: text/vnd.tiddlywiki
 
+\define alert-demo()
+<$fieldmangler tiddler="SampleAlert"><$set name="currentTiddler" value="SampleAlert"><$button message="tw-add-tag" param="$:/tags/Alert" class="btn btn-inverse">alerts</$button></$set></$fieldmangler>
+\end
 * The ability to save changes on almost any desktop HTML5 compatible-browser, with custom apps to enable [[Saving on iPad/iPhone]] and [[Android|Saving on Android]], and a cross-platform [[Firefox extension|Saving with TiddlyFox]] that even runs on Android
 * [[Bitmap images|Motovun Jack.jpg]] and [[SVG images|UsingSVG]] are first-class citizens alongside text
 * Concise and expressive WikiText that generates semantic HTML
 * Integrated [[AES encryption|Saving with Encryption]]
 * TiddlyWiki isn't just a wiki - you can build custom applications with it like this TaskManagementExample
-* Familiar user interface elements like <$button message="tw-modal" param="SampleWizard" class="btn btn-inverse">wizards</$button> and <$button message="tw-notify" param="SampleNotification" class="btn btn-inverse">notifications</$button>
+* Familiar user interface elements like <<alert-demo>>, <$button message="tw-modal" param="SampleWizard" class="btn btn-inverse">wizards</$button> and <$button message="tw-notify" param="SampleNotification" class="btn btn-inverse">notifications</$button>
 * Easily [[import|ImportTiddlers]] content via drag and drop, copy and paste, or browsing for local files
 * Clone existing tiddlers (for example, <$button message="tw-new-tiddler" param=<<currentTiddler>>>clone this tiddler</$button>)
 * TiddlyWiki is [[surprisingly scalable|Scalability]] to many thousands of tiddlers and megabytes of content

editions/tw5.com/tiddlers/mechanisms/AlertMechanism.tid

@@ -6,6 +6,8 @@ type: text/vnd.tiddlywiki
 
 Alerts are displayed as yellow boxes overlaying the main TiddlyWiki window. Each one corresponds to a tiddler with the tag [[$:/tags/Alert]]. Clicking the delete icon on an alert deletes the corresponding tiddler.
 
+Here's a demo <$fieldmangler tiddler="SampleAlert"><$set name="currentTiddler" value="SampleAlert"><$button message="tw-add-tag" param="$:/tags/Alert" class="btn btn-inverse">alert</$button></$set></$fieldmangler>.
+
 Alert tiddlers should have the following fields:
 
 |!Field |!Description |
@@ -14,4 +16,3 @@ Alert tiddlers should have the following fields:
 |modified |Date of the alert (used for ordering the alerts on screen) |
 |component |Component name associated with the alert |
 |tags |Must include [[$:/tags/Alert]] |
-

editions/tw5.com/tiddlers/samples/SampleAlert.tid

@@ -0,0 +1,6 @@
+title: SampleAlert
+component: demo
+
+This is a demonstration alert.
+
+Note that the trashcan icon deletes the tiddler containing this alert. You can also remove it by opening the tiddler SampleAlert and editing it to remove the tag [[$:/tags/Alert]].