tiddlywiki 5.1.21 → 5.2.1

package/plugins/tiddlywiki/consent-banner/startup.js

@@ -0,0 +1,107 @@
+/*\
+title: $:/plugins/tiddlywiki/consent-banner/startup.js
+type: application/javascript
+module-type: startup
+
+Startup initialisation
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+// Export name and synchronous status
+exports.name = "consent-banner";
+exports.platforms = ["browser"];
+exports.after = ["startup"];
+exports.before = ["render"];
+exports.synchronous = true;
+
+var CHECK_CONSENT_INTERVAL = 1000, // Milliseconds between checking local storage
+	IS_LOGGED_IN_TITLE = "$:/status/IsLoggedIn",
+	CONSENT_KEY = "COOKIE_CONSENT", // Local storage keyname
+	CONSENT_TITLE = "$:/state/consent-banner/accepted", // "": undeclared, "yes": accepted, "no": declined
+	CONFIG_BLOCK_EMBEDDED_CONTENT_TITLE = "$:/config/plugins/tiddlywiki/consent-banner/block-embedded-content",
+	EMBEDDED_MESSAGE_WRAPPER_TITLE = "$:/plugins/tiddlywiki/consent-banner/blocked-embed-message-wrapper";
+
+exports.startup = function() { 
+	var consentState = "",
+		setConsentStatus = function(state) {
+			if(consentState !== state) {
+				consentState = state;
+				// Write to local storage
+				window.localStorage.setItem(CONSENT_KEY,state);
+				// Write to a state tiddler
+				$tw.wiki.addTiddler(new $tw.Tiddler({
+					title: CONSENT_TITLE,
+					text: state
+				}));
+			}
+		},
+		calculateConsentStatus = function() {
+			// Consent is implied for logged in users, otherwise we check local storage
+			return ($tw.wiki.getTiddlerText(IS_LOGGED_IN_TITLE) === "yes" && "yes") || window.localStorage.getItem(CONSENT_KEY) || "";
+		},
+		checkConsentStatus = function() {
+			setConsentStatus(calculateConsentStatus());
+			if(consentState === "") {
+				pollConsentStatus();
+			}
+		},
+		pollConsentStatus = function() {
+			setTimeout(checkConsentStatus,CHECK_CONSENT_INTERVAL);
+		};
+	// Set the current consent status
+	checkConsentStatus();
+	// Listen for consent messages
+	$tw.rootWidget.addEventListener("tm-consent-accept",function(event) {
+		setConsentStatus("yes");
+	});
+	$tw.rootWidget.addEventListener("tm-consent-decline",function(event) {
+		setConsentStatus("no");
+	});
+	$tw.rootWidget.addEventListener("tm-consent-clear",function(event) {
+		setConsentStatus("");
+	});
+	// Add our element rendering hook
+	if($tw.wiki.getTiddlerText(CONFIG_BLOCK_EMBEDDED_CONTENT_TITLE,"no") === "yes") {
+		$tw.hooks.addHook("th-rendering-element",function(parseTreeNodes,widget) {
+			if(parseTreeNodes) {
+				return parseTreeNodes;
+			}
+			if(["iframe","object","embed"].indexOf(widget.tag) !== -1 && widget.getVariable("tv-block-embedded-content","no") === "yes") {
+				var url = widget.getAttribute("src"),
+					addUnitsIfMissing = function(str) {
+						str = "" + str;
+						return str + (("" + parseInt(str,10)) === str ? "px" : "");
+					},
+					width = addUnitsIfMissing(widget.getAttribute("width","")),
+					height = addUnitsIfMissing(widget.getAttribute("height",""));
+				return [
+					{
+						type: "vars",
+						attributes: {
+							url: {type: "string", value: url},
+							width: {type: "string", value: width},
+							height: {type: "string", value: height}
+						},
+						children: [
+							{
+								type: "transclude",
+								attributes: {
+									tiddler: {type: "string", value: EMBEDDED_MESSAGE_WRAPPER_TITLE},
+									mode: {type: "string", value: "inline"}
+								}
+							}
+						]
+					}
+				];
+			}
+			return null;
+		});
+	}
+};
+
+})();

package/plugins/tiddlywiki/consent-banner/styles.tid

@@ -0,0 +1,111 @@
+title: $:/plugins/tiddlywiki/consent-banner/styles
+tags: $:/tags/Stylesheet
+
+.tc-consent-backdrop {
+	z-index: 1999;
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: <<colour consent-banner-backdrop-background>>;
+}
+
+.tc-consent-banner-left {
+	z-index: 2000;
+	position: fixed;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	max-width: 500px;
+	overflow-y: auto;
+}
+
+.tc-consent-banner {
+	padding: 1em;
+	background: <<colour consent-banner-background>>;
+	color: <<colour consent-banner-foreground>>;
+	box-shadow: 0 0 20px rgba(0,0,0,.2);
+}
+
+.tc-consent-banner a.tc-tiddlylink-external {
+	text-decoration: underline;
+	color: <<colour consent-banner-link-foreground>>;
+	background-color: inherit;
+}
+
+.tc-consent-banner a.tc-tiddlylink-external:visited {
+	color: <<colour consent-banner-link-foreground>>;
+	background-color: inherit;
+}
+
+.tc-consent-banner hr {
+	clear: both;
+	padding: 0;
+	width: 100%;
+	overflow: hidden;
+	text-align: left;
+	border: 0 none;
+	margin: 24px 0;
+	height: 1px;
+	max-height: 1px;
+	background: <<colour consent-banner-hr-background>>;
+}
+
+.tc-consent-buttons {
+	
+}
+
+.tc-consent-banner .tc-consent-button {
+	margin-right: 1em;
+}
+
+.tc-consent-button {
+	border: 1px solid <<colour consent-banner-button-border>>;
+	margin-top: 1em;
+	padding: 0.75em 1.5em;
+	color: <<colour consent-banner-button-foreground>>;
+	background: <<colour consent-banner-button-background>>;
+	font-weight: bold;
+}
+
+.tc-consent-button:hover {
+	color: <<colour consent-banner-button-hover-foreground>>;
+	border-color: <<colour consent-banner-button-hover-border>>;
+	background: <<colour consent-banner-button-hover-background>>;
+	opacity: .6;
+}
+
+.tc-consent-button-default {
+	color: <<colour consent-banner-button-default-foreground>>;
+	background: <<colour consent-banner-button-default-background>>;
+}
+
+.tc-blocked-embedded-content {
+	display: inline-block;
+	overflow: hidden;
+	color: <<colour background>>;
+	background: <<colour muted-foreground>>;
+	border: 1px solid <<colour foreground>>;
+	<<box-shadow "inset 0 0 8px rgba(0, 0, 0, 0.15)">>
+}
+
+.tc-blocked-embedded-content-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.tc-blocked-embedded-content-inner-inner {
+	display: inline-block;
+	text-align: center;
+}
+
+.tc-blocked-embedded-content-inner-inner hr {
+    background: <<colour foreground>>;
+    height: 1px;
+    width: 80%;
+    border: none;
+}

package/plugins/tiddlywiki/consent-banner/youtube-macros.tid

@@ -0,0 +1,21 @@
+title: $:/plugins/tiddlywiki/consent-banner/youtube
+tags: $:/tags/Macro
+
+\define embed-video-with-consent(code)
+<$set name="tv-block-embedded-content" value="no">
+<$reveal state="$:/state/consent-banner/accepted" type="match" text="yes" tag="div">
+<iframe width="560" height="315" src="https://www.youtube.com/embed/$code$" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+</$reveal>
+<$reveal state="$:/state/consent-banner/accepted" type="nomatch" text="yes" tag="div">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/$code$" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+</$reveal>
+</$set>
+\end
+
+! Macro source
+
+<$codeblock code={{$:/plugins/tiddlywiki/consent-banner/youtube}}/>
+
+! Example
+
+<<embed-video-with-consent KtCUr83XgyE>>

package/plugins/tiddlywiki/d3/plugin.info

@@ -1,7 +1,6 @@
 {
 	"title": "$:/plugins/tiddlywiki/d3",
-	"description": "D3: data visualisation",
-	"author": "JeremyRuston",
-	"core-version": ">=5.0.0",
+	"name": "D3",
+	"description": "D3 data visualisation demo",
 	"list": "readme"
 }

package/plugins/tiddlywiki/dynannotate/docs/readme.tid

@@ -0,0 +1,108 @@
+title: $:/plugins/tiddlywiki/dynannotate/readme
+
+The ''Dynannotate'' plugin allows annotations on textual content to be created and displayed. It has three components:
+
+* The dynannotate widget overlays clickable textual annotations, search highlights and search snippets on the content that it contains
+* The selection tracker displays a popup that tracks the selection, and keeps track of the selected text. It also tracks a prefix and suffix that can be used to disambiguate the selected text within the container
+* The `<$action-popup>` widget is used for some specialised popup switching in the demo
+
+''Note that the TiddlyWiki core plugin __Dynaview__ is required for correct operation of __Dynannotate__''
+
+!! Dynannotate Widget
+
+The attributes of the `<$dynannotate>` widget describe annotations to be overlaid over the text contained within its child widgets. A single annotation can be directly applied using the attributes or multiple annotations can be applied by providing a filter identifying the "annotation tiddlers" that specify each annotation.
+
+The content of the  `<$dynannotate>` widget should not contain HTML `<input>` or `<textarea>` text editing elements (and therefore should not contain TiddlyWiki's `<$edit-text>` widget)
+
+The `<$dynannotate>` widget uses the selection tracker to support a popup that dynamically tracks selected text within it.
+
+!!! Attributes
+
+|!Attribute |!Description |
+|target |Optional text to be annotated |
+|targetPrefix |Optional prefix text to disambiguate the target |
+|targetSuffix |Optional suffix text to disambiguate the target |
+|filter |Filter identifying the annotation tiddlers applying to this content (see below) |
+|actions |Action string to be executed when an annotation is clicked. The variable `annotationTiddler` contains the title of the tiddler corresponding to the annotation that was clicked, and the variable `modifierKey` contains "ctrl", "shift", "ctrl-shift", "normal" according to which modifier keys were pressed |
+|popup |Popup state tiddler to be used to trigger a popup when an annotation is clicked |
+|search |Search text to be highlighted within the widget |
+|searchDisplay |"overlay" or "snippet" (see below) |
+|searchMode |"normal" (default), "regexp" or "whitespace" (see below) |
+|searchMinLength |Optional minimum length of search string |
+|searchCaseSensitive |"no" (default) for a case insensitive search, or "yes" for a case sensitive search |
+|searchClass |Optional CSS class to be added to search overlays |
+|snippetContextLength |Optional length of search result contextual prefix/suffix |
+|selection |Tiddler to which the currently selected text should be dynamically saved |
+|selectionPrefix |Tiddler to which up to 50 characters preceding the currently selected text should be dynamically saved |
+|selectionSuffix |Tiddler to which up to 50 characters succeeding the currently selected text should be dynamically saved |
+|selectionPopup |Popup state tiddler to be used to trigger a popup when text is selected |
+
+The values supported by the `searchDisplay` attribute are:
+
+* `overlay` - display search results as overlays over the contained text
+* `snippet` - display search results as a sequence of highlighted snippets, and the original text is hidden. Selecting this option therefore disables the annotation functionality
+
+The search modes supported by the `searchMode` attribute are:
+
+* `normal` - a literal string of plain text to match
+* `regexp` - a JavaScript-style regular expression (without the quoting backslashes and flags)
+* `whitespace` - a literal string to match while normalising runs of whitespace. This allows `a. b` to match `a.  b`
+
+When the selection popup is triggered, the currently selected text can be found in the tiddler named in the `selection` attribute, with the disambiguating prefix and suffix in the tiddlers named in the `selectionPrefix` and `selectionPopup` tiddlers. Note that the selection text will be an empty string if the selection popup was triggered in response to a click (ie zero width selection).
+
+Here's a simple example that highlights the first occurrence of the word "ut" within the text contained within it:
+
+```
+<$dynannotate target="ut">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+</$dynannotate>
+```
+
+A prefix and/or suffix can be specified to disambiguate the annotation. For example, here we target the second occurrence of the word "ut":
+
+```
+<$dynannotate target="ut" targetPrefix="ullamco laboris nisi " targetSuffix=" aliquip ex ea commodo consequat">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+</$dynannotate>
+```
+
+The widget works by scanning the rendered text of its content, so it works even if the text is built dynamically:
+
+```
+<$dynannotate target="HelloThere">
+<<list-links "[tag[Work]]">>
+</$dynannotate>
+```
+
+!!! Annotation Tiddlers
+
+An annotation tiddler is a tiddler describing an annotation to be overlaid over another tiddler. Their fields are used as follows:
+
+|!Field |!Description |
+|title |By convention the prefix `$:/annotations/<username>/` is used, but any title can be used |
+|text |The text of the annotation |
+|created, creator, modified, modifier |As per TiddlyWiki normal behaviour |
+|annotate-tiddler |The title of the target tiddler being annotated (optional, see below) |
+|annotate-text |The text being annotated in the target tiddler |
+|annotate-prefix |Optional prefix to disambiguate the target annotation |
+|annotate-suffix |Optional suffix to disambiguate the target annotation |
+|annotate-colour |CSS colour for the annotation (defaults to `rgba(255,255,0,0.3)`) |
+|annotate-blend-mode |CSS [[mix blend mode|https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode]] for the annotation (defaults to `multiply`) |
+
+Note that using the `annotate-tiddler` field to associate an annotation with the annotated tiddler is a lightweight convention employed by the examples; it isn't actually required by any of the JavaScript code. Thus authors can experiment with other techniques for recording the association.
+
+!! Selection Tracker
+
+The selection tracker is incorporated within the `<$dynannotate>` widget, but it can be used independently for specialised applications.
+
+Each selection container is marked with the class `tc-dynannotate-selection-container`, and should contain the following attributes:
+
+* `data-annotation-selection-save`: title of tiddler to which the selected text should be saved
+* `data-annotation-selection-prefix-save`: title of tiddler to which up to 50 characters preceding the currently selected text should be dynamically saved
+* `data-annotation-selection-suffix-save`: title of tiddler to which up to 50 characters succeeding the currently selected text should be dynamically saved
+* `data-annotation-selection-popup`: title of state tiddler used to trigger the selection popup
+
+Notes:
+
+* The selection popup will disappear if the selection is cancelled; this will happen if the user clicks on any other element apart than a button. Thus it is not possible to have any interactive controls within the popup apart from buttons
+

package/plugins/tiddlywiki/dynannotate/examples/combined.tid

@@ -0,0 +1,111 @@
+title: $:/plugins/tiddlywiki/dynannotate/examples/combined
+tags: $:/tags/dynannotateExamples
+caption: Combined
+
+\define click-annotation-actions()
+<$action-setfield $tiddler="$:/temp/dynannotate/demo/annotation-title" $value=<<annotationTiddler>>/>
+\end
+
+\define create-annotation-actions()
+<$action-createtiddler
+	$basetitle="$:/plugins/tiddlywiki/dynannotate/demo-annotation"
+	$savetitle={{{ [<chunk>addprefix[$:/state/dynannotate/temp-save-title/]] }}}
+	annotate-tiddler=<<chunk>>
+	annotate-text=<<text>>
+	annotate-prefix=<<prefix>>
+	annotate-suffix=<<suffix>>
+	annotate-colour=<<colour>>
+/>
+<$set name="popup-coords" value={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]get[text]] }}}>
+<$action-deletetiddler $tiddler={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]] }}}/>
+<$action-setfield $tiddler="$:/temp/dynannotate/demo/annotation-title" $value={{{ [<chunk>addprefix[$:/state/dynannotate/temp-save-title/]get[text]] }}}/>
+<$action-popup $state={{{ [<chunk>addprefix[$:/state/dynannotate/popup-annotation/]] }}} $coords=<<popup-coords>>/>
+</$set>
+\end
+
+<div class="tc-dynannotation-example-info">
+
+This example combines many of the features of the dynannotate plugin:
+
+* using annotation tiddlers to store the details of each annotation
+* triggering actions when the annotations are clicked
+* attaching a popup to the annotations
+* tracking the selection with another popup
+
+See the [[source|$:/plugins/tiddlywiki/dynannotate/examples/combined]] for details
+
+</div>
+
+Search: <$edit-text tiddler="$:/temp/search" tag="input"/>
+
+<$list filter="[all[tiddlers+shadows]tag[DynannotateDemo]sort[title]]" variable="chunk">
+<div style="position:relative;"><!-- Needed for the popups to work -->
+<$dynannotate
+	filter="[all[shadows+tiddlers]!has[draft.of]annotate-tiddler<chunk>]"
+	actions=<<click-annotation-actions>>
+	popup={{{ [<chunk>addprefix[$:/state/dynannotate/popup-annotation/]] }}}
+	selection={{{ [<chunk>addprefix[$:/state/dynannotate/selection/]] }}}
+	selectionPrefix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-prefix/]] }}}
+	selectionSuffix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-suffix/]] }}}
+	selectionPopup={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]] }}}
+	search={{$:/temp/search}}
+	searchClass="tc-dynannotation-search-overlay-blurred"
+	searchMinLength={{$:/config/Search/MinLength}}
+>
+<$transclude tiddler=<<chunk>> mode="block"/>
+</$dynannotate>
+<$reveal type="popup" state={{{ [<chunk>addprefix[$:/state/dynannotate/popup-annotation/]] }}} position="belowright" animate="yes" retain="yes" style="overflow-y:hidden;">
+<div class="tc-drop-down-wrapper">
+<div class="tc-drop-down tc-popup-keep" style="max-width:550px;white-space: normal;overflow-y:hidden;">
+<$tiddler tiddler={{$:/temp/dynannotate/demo/annotation-title}}>
+<p>
+<h2>
+This is an annotation
+</h2>
+</p>
+<p>
+The annotation is stored in the tiddler:
+</p>
+<p>
+<$link><$view field="title"/></$link>
+</p>
+<p>
+The annotated text is ''<$view field="annotate-text"/>''.
+</p>
+<p>
+Annotation Colour:
+<$macrocall $name='colour-picker' actions="""
+<$action-setfield $field="annotate-colour" $value=<<colour-picker-value>>/>
+"""/>
+</p>
+</$tiddler>
+</div>
+</div>
+</$reveal>
+<$reveal type="popup" state={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]] }}} position="belowright" animate="yes" retain="yes" style="overflow-y:hidden;">
+<div class="tc-drop-down-wrapper">
+<div class="tc-drop-down tc-popup-keep" style="max-width:550px;white-space:normal;">
+<$vars
+	text={{{ [<chunk>addprefix[$:/state/dynannotate/selection/]get[text]] }}}
+	prefix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-prefix/]get[text]] }}}
+	suffix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-suffix/]get[text]] }}}
+	colour={{{ [<chunk>addprefix[$:/state/dynannotate/annotation-colour/]get[text]] }}}
+>
+<$button actions=<<create-annotation-actions>>>
+Create annotation
+</$button>
+<p>
+Text: <$text text=<<text>>/>
+</p>
+<p>
+Prefix: <$text text=<<prefix>>/>
+</p>
+<p>
+Suffix: <$text text=<<suffix>>/>
+</p>
+</$vars>
+</div>
+</div>
+</$reveal>
+</div>
+</$list>

package/plugins/tiddlywiki/dynannotate/examples/example-annotation-1.tid

@@ -0,0 +1,5 @@
+title: $:/plugins/tiddlywiki/dynannotate/example-annotation-1
+annotate-tiddler: $:/plugins/tiddlywiki/dynannotate/example-text-1
+annotate-text: memory is transitory.  Yet the speed of action
+annotate-colour: SkyBlue
+annotate-blend-mode: multiply

package/plugins/tiddlywiki/dynannotate/examples/example-annotation-2.tid

@@ -0,0 +1,5 @@
+title: $:/plugins/tiddlywiki/dynannotate/example-annotation-2
+annotate-tiddler: $:/plugins/tiddlywiki/dynannotate/example-text-3
+annotate-text: It needs a name, and to coin one at random, "memex" will do
+annotate-colour: rgba(255,0,255,0.45)
+annotate-blend-mode: multiply

package/plugins/tiddlywiki/dynannotate/examples/example-annotation-3.tid

@@ -0,0 +1,5 @@
+title: $:/plugins/tiddlywiki/dynannotate/example-annotation-3
+annotate-tiddler: $:/plugins/tiddlywiki/dynannotate/example-text-5
+annotate-text: it would take him hundreds of years to fill the repository
+annotate-colour: #fff
+annotate-blend-mode: difference

package/plugins/tiddlywiki/dynannotate/examples/example-annotation-4.json

@@ -0,0 +1,10 @@
+{
+"title": "$:/plugins/tiddlywiki/dynannotate/example-annotation-4",
+"annotate-tiddler": "$:/plugins/tiddlywiki/dynannotate/example-text-1",
+"annotate-text": "that",
+"annotate-prefix": "It has other characteristics, of course; trails ",
+"annotate-suffix": " are not frequently followed are prone to fade",
+"annotate-colour": "rgba(255,0,255,0.45)",
+"annotate-blend-mode": "difference",
+"text": "(This tiddler is in .json format so that we can have field values that start with a whitespace"
+}

package/plugins/tiddlywiki/dynannotate/examples/example-text.multids

@@ -0,0 +1,19 @@
+title: $:/plugins/tiddlywiki/dynannotate/example-text-
+source: https://www.w3.org/History/1945/vbush/vbush.txt
+tags: DynannotateDemo
+
+1: The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain.  It has other characteristics, of course; trails that are not frequently followed are prone to fade, items are not fully permanent, memory is ''transitory''.  Yet the speed of action, the intricacy of trails, the detail of mental pictures, is awe-inspiring beyond all else in nature.
+
+2: Man cannot hope fully to duplicate this mental process artificially, but he certainly ought to be able to learn from it.  In minor ways he may even improve, for his records have relative permanency.  The first idea, however, to be drawn from the analogy concerns selection. Selection by association, rather than by indexing, may yet be mechanized.  One cannot hope thus to equal the speed and flexibility with which the mind follows an associative trail, but it should be possible to beat the mind decisively in regard to the permanence and clarity of the items resurrected from storage.
+
+3: Consider a future device for individual use, which is a sort of mechanized private file and library.  It needs a name, and to coin one at random, "memex" will do.  A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility.  It is an enlarged intimate supplement to his memory.
+
+4: It consists of a desk, and while it can presumably be operated from a distance, it is primarily the piece of furniture at which he works. On the top are slanting translucent screens, on which material can be projected for convenient reading.  There is a keyboard, and sets of buttons and levers.  Otherwise it looks like an ordinary desk.
+
+5: In one end is the stored material.  The matter of bulk is well taken care of by improved microfilm.  Only a small part of the interior of the memex is devoted to storage, the rest to mechanism.  Yet if the user inserted 5000 pages of material a day it would take him hundreds of years to fill the repository, so he can be profligate and enter material freely.
+
+6: Most of the memex contents are purchased on microfilm ready for insertion.  Books of all sorts, pictures, current periodicals, newspapers, are thus obtained and dropped into place.  Business correspondence takes the same path.  And there is provision for direct entry.  On the top of the memex is a transparent platen.  On this are placed longhand notes, photographs, memoranda, all sort of things. When one is in place, the depression of a lever causes it to be photographed onto the next blank space in a section of the memex film, dry photography being employed.
+
+7: There is, of course, provision for consultation of the record by the usual scheme of indexing.  If the user wishes to consult a certain book, he taps its code on the keyboard, and the title page of the book promptly appears before him, projected onto one of his viewing positions.  Frequently-used codes are mnemonic, so that he seldom consults his code book; but when he does, a single tap of a key projects it for his use.  Moreover, he has supplemental levers.  On deflecting one of these levers to the right he runs through the book before him, each page in turn being projected at a speed which just allows a recognizing glance at each.  If he deflects it further to the right, he steps through the book 10 pages at a time; still further at 100 pages at a time.  Deflection to the left gives him the same control backwards.
+
+8: A special button transfers him immediately to the first page of the index.  Any given book of his library can thus be called up and consulted with far greater facility than if it were taken from a shelf.  As he has several projection positions, he can leave one item in position while he calls up another.  He can add marginal notes and comments, taking advantage of one possible type of dry photography, and it could even be arranged so that he can do this by a stylus scheme, such as is now employed in the telautograph seen in railroad waiting rooms, just as though he had the physical page before him. 

package/plugins/tiddlywiki/dynannotate/examples/examples.tid

@@ -0,0 +1,4 @@
+title: $:/plugins/tiddlywiki/dynannotate/examples
+
+<<tabs "[all[tiddlers+shadows]tag[$:/tags/dynannotateExamples]!has[draft.of]]" "$:/plugins/tiddlywiki/dynannotate/examples/snippets">>
+

package/plugins/tiddlywiki/dynannotate/examples/simple.tid

@@ -0,0 +1,100 @@
+title: $:/plugins/tiddlywiki/dynannotate/examples/simple
+tags: $:/tags/dynannotateExamples
+caption: Simple
+
+\define show-example(example)
+<$codeblock code=<<__example__>>/>
+
+//''Displays as:''//
+
+$example$
+\end
+
+<div class="tc-dynannotation-example-info">
+
+!! Simple annotation
+
+We use the `target*` attributes to specify a target string for the annotation and optionally a prefix and suffix for disambiguating multiple occurances.
+
+</div>
+
+<<show-example """
+<$dynannotate
+	target="the"
+	targetPrefix="Yet "
+	targetSuffix=" speed"
+>
+<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
+</$dynannotate>
+""">>
+
+<div class="tc-dynannotation-example-info">
+
+!! Plain text searching
+
+We use the `search` attribute to specify a search string for highlighting:
+
+</div>
+
+<<show-example """
+<$dynannotate
+	search="the"
+>
+<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
+</$dynannotate>
+""">>
+
+<div class="tc-dynannotation-example-info">
+
+!! Regular expression searching
+
+We use the `mode` attribute set to `regexp` to highlight matches of a regular expression:
+
+</div>
+
+<<show-example """
+<$dynannotate
+	search="the|an"
+	searchMode="regexp"
+	searchClass="tc-dynannotation-search-overlay-blurred"
+>
+<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
+</$dynannotate>
+""">>
+
+<div class="tc-dynannotation-example-info">
+
+!! Normalised whitespace searching
+
+We use the `mode` attribute set to `whitespace` to search for a string with whitespace normalised (ie runs of whitespace are collapsed to a single space for matching purposes):
+
+</div>
+
+<<show-example """
+<$dynannotate
+	search="does  not     work that way.     It operates"
+	searchMode="whitespace"
+	searchClass="tc-dynannotation-search-overlay-animated"
+>
+<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
+</$dynannotate>
+""">>
+
+<div class="tc-dynannotation-example-info">
+
+!! Using annotation tiddlers
+
+Annotation tiddlers can be used to describe annotations. This example references the following annotation tiddlers:
+
+</div>
+
+<<list-links "[all[shadows+tiddlers]annotate-tiddler[$:/plugins/tiddlywiki/dynannotate/example-text-1]]">>
+
+<<show-example """
+<$dynannotate
+	filter="[all[shadows+tiddlers]annotate-tiddler[$:/plugins/tiddlywiki/dynannotate/example-text-1]]"
+>
+<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
+</$dynannotate>
+""">>
+