1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-01-23 11:24:40 +00:00

Compare commits

..

3 Commits

Author SHA1 Message Date
jeremy@jermolene.com
f823885d67 Docs update 2022-10-24 12:13:07 +01:00
jeremy@jermolene.com
f23ae21260 Switched to \end <name> instead of all those repeated backslashes
Thanks @kookma. See https://github.com/Jermolene/TiddlyWiki5/pull/7004#issuecomment-1286429236
2022-10-22 09:00:59 +01:00
jeremy@jermolene.com
b3982efcd6 First commit 2022-10-20 18:07:36 +01:00
70 changed files with 80 additions and 1890 deletions

View File

@@ -233,15 +233,6 @@ node $TW5_BUILD_TIDDLYWIKI \
--build index \
|| exit 1
# /editions/twitter-archivist/index.html Twitter Archivist edition
node $TW5_BUILD_TIDDLYWIKI \
./editions/twitter-archivist \
--verbose \
--load $TW5_BUILD_OUTPUT/build.tid \
--output $TW5_BUILD_OUTPUT/editions/twitter-archivist/ \
--build index \
|| exit 1
######################################################
#
# Plugin demos

View File

@@ -2403,11 +2403,11 @@ $tw.boot.initStartup = function(options) {
$tw.utils.registerFileType("application/x-font-ttf","base64",".woff");
$tw.utils.registerFileType("application/font-woff2","base64",".woff2");
$tw.utils.registerFileType("audio/ogg","base64",".ogg");
$tw.utils.registerFileType("audio/mp4","base64",[".mp4",".m4a"]);
$tw.utils.registerFileType("video/ogg","base64",[".ogm",".ogv",".ogg"]);
$tw.utils.registerFileType("video/webm","base64",".webm");
$tw.utils.registerFileType("video/mp4","base64",".mp4");
$tw.utils.registerFileType("audio/mp3","base64",".mp3");
$tw.utils.registerFileType("audio/mp4","base64",[".mp4",".m4a"]);
$tw.utils.registerFileType("text/markdown","utf8",[".md",".markdown"],{deserializerType:"text/x-markdown"});
$tw.utils.registerFileType("text/x-markdown","utf8",[".md",".markdown"]);
$tw.utils.registerFileType("application/enex+xml","utf8",".enex");

View File

@@ -58,7 +58,7 @@ exports.parse = function() {
var reEnd;
if(this.match[3]) {
// If so, the end of the body is marked with \end
reEnd = /(\r?\n\\end[^\S\n\r]*(?:$|\r?\n))/mg;
reEnd = new RegExp("(\\r?\\n\\\\end[^\\S\\n\\r]*(?:" + $tw.utils.escapeRegExp(this.match[1]) + ")?(?:$|\\r?\\n))","mg");
} else {
// Otherwise, the end of the definition is marked by the end of the line
reEnd = /($|\r?\n)/mg;

View File

@@ -30,16 +30,6 @@ exports.handler = function(request,response,state) {
if(fields.revision) {
delete fields.revision;
}
// If this is a skinny tiddler, it means the client never got the full
// version of the tiddler to edit. So we must preserve whatever text
// already exists on the server, or else we'll inadvertently delete it.
if(fields._is_skinny !== undefined) {
var tiddler = state.wiki.getTiddler(title);
if(tiddler) {
fields.text = tiddler.fields.text;
}
delete fields._is_skinny;
}
state.wiki.addTiddler(new $tw.Tiddler(fields,{title: title}));
var changeCount = state.wiki.getChangeCount(title).toString();
response.writeHead(204, "OK",{

View File

@@ -15,7 +15,7 @@ tags: $:/tags/AdvancedSearch/FilterButton
<div class="tc-block-dropdown-wrapper">
<div class="tc-block-dropdown tc-edit-type-dropdown">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Filter]]">
<$link to={{!!filter}}><$let tv-wikilinks="no"><$transclude field="description"/></$let></$link>
<$link to={{!!filter}}><$transclude field="description"/></$link>
</$list>
</div>
</div>

View File

@@ -23,7 +23,7 @@ title: $:/core/ui/EditTemplate
<div
data-tiddler-title=<<currentTiddler>>
data-tags={{!!tags}}
class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/TiddlerTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-tiddler-frame tc-tiddler-edit-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}}
class={{{ tc-tiddler-frame tc-tiddler-edit-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}}
role="region"
aria-label={{$:/language/EditTemplate/Caption}}>
<$fieldmangler>

View File

@@ -3,6 +3,9 @@ name: {{$:/language/PageTemplate/Name}}
description: {{$:/language/PageTemplate/Description}}
\whitespace trim
\define containerClasses()
tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
\end
\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
<$vars
@@ -14,7 +17,7 @@ description: {{$:/language/PageTemplate/Description}}
storyviewTitle={{$:/view}}
languageTitle={{{ [{$:/language}get[name]] }}}>
<div class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/PageTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-page-container [[tc-page-view-]addsuffix<storyviewTitle>] [[tc-language-]addsuffix<languageTitle>] :and[unique[]join[ ]] }}} >
<div class=<<containerClasses>>>
<$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>

View File

@@ -7,7 +7,7 @@ $:/state/folded/$(currentTiddler)$
\define cancel-delete-tiddler-actions(message) <$action-sendmessage $message="tm-$message$-tiddler"/>
\import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]]
<$vars storyTiddler=<<currentTiddler>> tiddlerInfoState=<<qualify "$:/state/popup/tiddler-info">>>
<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/TiddlerTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article">
<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem">
<$transclude tiddler=<<listItem>>/>
</$list>

View File

@@ -1,21 +1,21 @@
title: $:/core/macros/list
tags: $:/tags/Macro
\define list-links(filter,type:"ul",subtype:"li",class:"",emptyMessage,field:"caption")
\define list-links(filter,type:"ul",subtype:"li",class:"",emptyMessage)
\whitespace trim
<$genesis $type=<<__type__>> class=<<__class__>>>
<$list filter=<<__filter__>> emptyMessage=<<__emptyMessage__>>>
<$genesis $type=<<__subtype__>>>
<$type$ class="$class$">
<$list filter="$filter$" emptyMessage=<<__emptyMessage__>>>
<$subtype$>
<$link to={{!!title}}>
<$let tv-wikilinks="no">
<$transclude field=<<__field__>>>
<$transclude field="caption">
<$view field="title"/>
</$transclude>
</$let>
</$link>
</$genesis>
</$subtype$>
</$list>
</$genesis>
</$type$>
\end
\define list-links-draggable-drop-actions()

View File

@@ -1,5 +1,5 @@
created: 20190115173333457
modified: 20221029175754753
modified: 20190115173723915
tags: TableOfContents
title: HelloThere
type: text/vnd.tiddlywiki
@@ -15,7 +15,6 @@ Welcome to the developer documentation for TiddlyWiki (https://tiddlywiki.com/).
** [[Using ES2016 for Writing Plugins]]
** [[Adding Babel Polyfill to TiddlyWiki]]
** [[TiddlyWiki Drag and Drop Interoperability]]
** [[Javascript Widget Tutorial]]
* The original developer documentation from https://tiddlywiki.com:
** [[TiddlyWiki for Developers]]
** [[TiddlyWiki Coding Style Guidelines]]

View File

@@ -1,140 +0,0 @@
created: 20190202160512541
modified: 20190222231130254
title: Child widgets tutorial
type: text/vnd.tiddlywiki
\define showTrees(wikitext)
<table>
<thead>
<tr><th>wiki text</th><th>html</th><th>renders as</th></tr>
</thead>
<tbody>
<tr>
<td>`$wikitext$`</td>
<td>
<$wikify name=html text="""$wikitext$""" output=html mode=inline>
<$text text=<<html>>/>
</$wikify>
</td>
<td>$wikitext$</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>parse tree</th><th>widget tree</th></tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: text-top">
<pre><code>
<$wikify name=parsetree text="""$wikitext$""" output=parsetree mode=inline>
<<parsetree>>
</$wikify>
</code></pre>
</td>
<td style="vertical-align: text-top">
<pre><code>
<$wikify name=widgettree text="""$wikitext$""" output=widgettree mode=inline>
<<widgettree>>
</$wikify>
</code></pre>
</td>
</tr>
</tbody>
</table>
\end
! Introduction
Until now the examples have covered only simple, leaf widgets, but widgets can be arranged into a hierarchy. Compared to a leaf-only widget, widget classes which support having children must contain code to instantiate the children.
Not all widgets need to support having children. Widgets whose only purpose is to integrate third party javascript libraries, for example may not need it.
! wiki text ⇨ parse tree ⇨ widget tree ⇨ DOM tree
# [[wiki text|https://tiddlywiki.com/#WikiText]] - Users write content in tiddlers using wiki text.
# [[parse tree|https://tiddlywiki.com/dev/#ParsingMechanism]] - A parse tree is a JSON data structure describing the wiki text. Wiki text can be converted into a parse tree using `this.wiki.parseText`.
# ''widget tree'' - Most items in the parse tree correspond to one or more items in the widget tree. The `this.makeChildWidgets` method is used to convert the parse tree into a widget tree.
# [[DOM tree|https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction]] - A DOM tree is a standard javascript datastructure used by browsers to display a web page. The `this.renderChildren` method is used to instantiate the widget class and then render each widget in the widget tree. If a given widget will be visible in the browser, then one or more DOM nodes will be created.
!Examples
!! Simple trees without nesting
[[Widgets in wiki text|https://tiddlywiki.com/#Widgets%20in%20WikiText]] have a syntax similar to html (i.e. `<$list/>`). But all [[wiki markup|https://tiddlywiki.com/#WikiText]] is seen by the tiddlywiki code as widgets.
Even a simple string with no special syntax will be treated as a widget. In this case a widget of type `text`:
<<showTrees """hello""">>
The above bare string of text is mostly just a synonym for this widget syntax:
<<showTrees """<$text text=hello/>""">>
Some of the details of the parseTree and widgetTree are different in the two examples, but the general structure is the same and the rendered output is the same.
In these two simple examples, there is no nesting and so no child widgets are created.
!! Trees with one level of nesting
This next example shows the structure for bold wiki syntax. It is still simple, but does introduce one level of nesting: `element`→`text`
The wiki syntax for bold converts to the standard html element `strong`. Any standard html element is represented in tiddlywiki as a widget of type `element`:
<<showTrees """''bold''""">>
Another example showing one level of nesting (`link`→`text`):
<<showTrees """<$link to=atiddler>link</$link>""">>
!!Widgets with no DOM contribution
Not all widgets contribute items to the DOM. The purpose of some widgets is to affect the display of descendant widgets by changing some state. The `$set` widget for example sets a variable which will be accessible to the descendant widgets:
<<showTrees """<$set name=myvar value=hi/>""">>
Nothing is rendered and there is no html, but the parse tree and widget tree contain information about the variable.
!! Dynamic widget children using this.wiki.parseText
In all the examples so far, there has been a close mapping between the nesting structure of the parse tree and the widget tree. If the item is in the parse tree, then it is in the widget tree. If the parse tree item has children, then the widget tree has the same number of children.
However, there are several examples of widgets in which more levels of nesting are created dynamically during the widget rendering process
The `$macrocall` widget is one example:
<<showTrees """<$macrocall $name=now/>""" >>
The parse tree has just a single type=$macrocall element with no children. The widget tree has that same type=$macrocall element, but it also has a child widget which wasn't in the parse tree.
In all cases, the `$macrocall` widget calls the given macro and then calls `this.wiki.parseText` on the output. This results in a new parse tree which is used to make the child widgets.
In this particular case, the `now` macro is called. It returns a simple string of text, so when it is parsed the result causes the creation of a single child text widget containing the current date and time.
!! Widgets which do not support nesting
Just as some widgets can cause widget trees to have more nesting than the parse tree, some widgets can cause widget trees to have less nesting.
This happens when there is no use for the widget to have any children. The `$text` widget, for example, has no use for displaying any descendants.
This behavior is accomplished by not calling the `makeChildWidgets` method. Without that method call, the child widgets are not created from the child parse tree items. For example:
<$macrocall $name=showTrees wikitext="""<$text text="hi">ignored child text</$text>"""/>
Since the `$text` widget does not have a call to `makeChildWidgets`, 'ignored child text' above is present in the parse tree, but not in the widget tree.
!Reference
|!method|!when to call|!what it does|
|`makeChildWidgets`|directly or indirectly from `render` method|converts child parse tree items into widget tree items|
|`renderChildren`|directly or indirectly from `render` method, after the `makeChildWidgets` call|calls the `render` method of the child widget|
|`refreshChildren`|directly or indirectly from `refresh` method, only needed if `refreshSelf` is not called|calls the `refresh` method of of the child widgets so they can check if refresh is needed|
|`this.wiki.parseText`|pass the output parse tree to `makeChildWidgets`|converts the given text to a parse tree...only needed for dynamically constructed parsetree|
|!example call|!purpose|!widgets using this approach|
|`this.makeChildWidgets()`|construct child widgets from the static parse tree|[[$link|$:/core/modules/widgets/link.js]], [[$button|$:/core/modules/widgets/button.js]], etc.|
|`this.makeChildWidgets(parseTreeNodes)`|construct child widgets from a dynamic parse tree|[[$list|$:/core/modules/widgets/list.js]], [[$transclude|$:/core/modules/widgets/transclude.js]], [[$macrocall|$:/core/modules/widgets/macrocall.js]], etc|
|`this.renderChildren(parent, nextSibling)`|when the widget adds nothing to the dom, just pass the `render` arguments through to the children|[[$set|$:/core/modules/widgets/set.js]], [[$importvariables|$:/core/modules/widgets/importvariables.js]], [[$tiddler|$:/core/modules/widgets/tiddler.js]], [[$wikify|$:/core/modules/widgets/wikify.js]], etc.|
|`this.renderChildren(domNode, null)`|passes the dom node generated by this widget into the children|[[$link|$:/core/modules/widgets/link.js]], [[$button|$:/core/modules/widgets/button.js]], etc|

View File

@@ -1,22 +0,0 @@
created: 20190201120100249
modified: 20190201222600576
tags:
title: Do nothing widget demo
type: text/vnd.tiddlywiki
<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
<$list name=refresh filter=[[donothing.js]get[text]]>
<$innerwiki width="600" height="400" style="width:100%;">
<$data title="$:/DefaultTiddlers" text="[[do nothing widget]]"/>
<$data $tiddler=donothing.js/>
<$data title="do nothing widget" text="""
```
<$donothing/>
```
Renders as:
<$donothing/>
"""/>
</$innerwiki>
</$list>

View File

@@ -1,25 +0,0 @@
created: 20190201232102417
modified: 20190202145547621
tags:
title: Do nothing widget tutorial
type: text/vnd.tiddlywiki
In order to define a widget in a tiddler, the tiddler must satisfy these requirements:
* type field is application/javascript
* module-type field is widget
* the text field contains the javascript code
The [[donothing.js]] tiddler fulfills the requirements and its code looks like this:
{{donothing.js}}
That code does 2 key things:
* Imports the core Widget class ([[$:/core/modules/widgets/widget.js]])
* exports the class in an attribute with the name we want our widget to have (`donothing`)
Here's what it looks like:
{{Do nothing widget demo}}
And it worked. No error message this time.
''Exercise'': Modify [[donothing.js]] and [[Do nothing widget demo]] so the widget is named `noop` instead of `donothing`

View File

@@ -1,23 +0,0 @@
created: 20190201114718313
modified: 20190201231556294
tags:
title: Hello World demo
type: text/vnd.tiddlywiki
<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
<$list name=refresh filter=[[hello.js]get[text]]>
<$innerwiki width="600" height="400" style="width:100%;">
<$data title="$:/DefaultTiddlers" text="[[hello world widget]]"/>
<$data $tiddler=hello.js/>
<$data title="hello world widget" text="""
```
<$hello/>
```
Renders as:
<$hello/>
"""/>
</$innerwiki>
</$list>

View File

@@ -1,18 +0,0 @@
created: 20190201232200698
modified: 20190216175629825
tags:
title: Hello World widget tutorial
type: text/vnd.tiddlywiki
Now let's create a widget which actually has output.
When tiddlywiki encounters a widget definition like `<$hello>` it will create an object which is an instance of the class which is exported by the widget code.
In addition to creating an instance of the class, tiddlywiki will call the render method of the resulting object. The render method is expected to create a dom node which will be display in place of the widget.
In the `donothing` example the core widget was exported. The core widget class doesn't have a render method which creates a dom node and that's why there is no output. Getting output requires writing a widget class which inherits from the core `Widget` class. Code in the render method of this class will display the hello world message.
The [[hello.js]] tiddler has code which accomplishes that:
{{hello.js}}
The code for importing the core widget class remains, but now we also have code to create our own class which inherits from it. In addition an implementation of the `render` method is included. Here is the result:
{{Hello World demo}}

View File

@@ -1,37 +0,0 @@
created: 20190202035524804
modified: 20221029161501848
tags:
title: Javascript Widget Tutorial
type: text/vnd.tiddlywiki
! Introduction
This tutorial provides step-by-step, interactive examples of how to write code for tiddlywiki widgets. The demo javascript code can be modified without having to reload the entire wiki.
Intended audience:
# Those who know tiddlywiki well and know programming and javascript and want to write their own widget. I don't make any effort to explain javascript here. For that you will need other resources.
# Those who know tiddlywiki well and don't know javascript, but want to understand more about how tiddlywiki works. You should be able to skim through and interact with the demos and learn something.
!The tutorial
*[[Undefined widget tutorial]]
*[[Do nothing widget tutorial]]
*[[Hello World widget tutorial]]
*[[Widget refresh tutorial part I]]
*[[Widget refresh tutorial part II]]
*[[Widget refresh tutorial part III]]
*[[Widget attributes tutorial part I]]
*[[Widget attributes tutorial part II]]
*[[Child widgets tutorial]]
! Notes
tiddlywiki doesn't support dynamically reloading javascript. If you change a javascript tiddler, then you need to save and reload the wiki before the changes will take affect.
To avoid the need for such reloads, the excellent [[innerwiki plugin|https://tiddlywiki.com/prerelease/plugins/tiddlywiki/innerwiki/]] is used. This allows an inner wiki to be created from a subset of tiddlers in the outer wiki. Each time the inner wiki is refreshed, its entire wiki is reloaded and the javascript changes in the inner wiki will take affect.
Without the need for reloads, a tiddlywiki instance with the [[innerwiki plugin|https://tiddlywiki.com/prerelease/plugins/tiddlywiki/innerwiki/]] installed works great as a playground for interacting with tiddlywiki javascript.
! Other documentation on writing TW widgets
*WidgetModules
*[[Widgets]]

View File

@@ -1,18 +0,0 @@
created: 20190201212238781
modified: 20190201213112748
tags:
title: Undefined widget demo
type: text/vnd.tiddlywiki
<$innerwiki width="600" height="400" style="width:100%;">
<$data title="$:/DefaultTiddlers" text="[[Undefined widget]]"/>
<$data title="Undefined widget" text="""
```
<$donothing/>
```
Renders as:
<$donothing/>
"""/>
</$innerwiki>

View File

@@ -1,11 +0,0 @@
created: 20190201232001970
modified: 20190202145655413
tags:
title: Undefined widget tutorial
type: text/vnd.tiddlywiki
Let's start be defining a minimal widget which does nothing. It doesn't support any attributes, no child elements, and it doesn't output anything. The name of the widget will be `donothing`. If it does nothing, then how can we verify after writing the code that we accomplished anything? Well, let's see what happens when an undefined widget is referenced.
{{Undefined widget demo}}
Since we haven't written the code, the attempt to render the widget gives an undefined widget error. So we will know the donothing code accomplishes something if we don't get the undefined widget error when rendering.

View File

@@ -1,48 +0,0 @@
created: 20190204020507195
modified: 20190204031520013
tags:
title: Widget attributes demo I
type: text/vnd.tiddlywiki
<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
<$list name=refresh filter=[[hello-attribute.js]get[text]]>
<$innerwiki width="600" height="400" style="width:100%;">
<$data title="$:/DefaultTiddlers" text="[[hello world widget]]"/>
<$data $tiddler=hello-attribute.js/>
<$data title="hello world widget" text="""
```
<$hello/>
```
Renders as:
<$hello/>
---
```
<$hello message="pale blue dot"/>
```
Renders as:
<$hello message="pale blue dot"/>
---
<$edit-text focus=yes tiddler=test tag=input/>
```
<$hello message={{test!!text}}/>
```
Renders as:
<$hello message={{test!!text}}/>
"""/>
<$data title="test" text="Alice"/>
</$innerwiki>
</$list>

View File

@@ -1,48 +0,0 @@
created: 20190205024953535
modified: 20190205025028737
tags:
title: Widget attributes demo II
type: text/vnd.tiddlywiki
<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
<$list name=refresh filter=[[hello-attribute-optimized.js]get[text]]>
<$innerwiki width="600" height="400" style="width:100%;">
<$data title="$:/DefaultTiddlers" text="[[hello world widget]]"/>
<$data $tiddler=hello-attribute-optimized.js/>
<$data title="hello world widget" text="""
```
<$hello/>
```
Renders as:
<$hello/>
---
```
<$hello message="pale blue dot"/>
```
Renders as:
<$hello message="pale blue dot"/>
---
<$edit-text focus=yes tiddler=test tag=input/>
```
<$hello message={{test!!text}}/>
```
Renders as:
<$hello message={{test!!text}}/>
"""/>
<$data title="test" text="Alice"/>
</$innerwiki>
</$list>

View File

@@ -1,50 +0,0 @@
created: 20190202035425715
modified: 20190205023518575
tags:
title: Widget attributes tutorial part I
type: text/vnd.tiddlywiki
So far none of the widgets we've implemented have had any code for handling widget attributes A vast majority of useful widgets will need to support attributes in order to make them useful.
As an example, let's change the Hello World widget so it can greet not just the world, but whoever/whatever the user wants. To do that we can add support for an attribute named `what` and call it like `<$hello what="pale blue dot"/>`.
The tiddlywiki widget class provides methods `computeAttributes` and `getAttribute` which can together be used by the widget code to discover what values are passed into the widget.
The `computeAttributes` and `getAttribute` methods can be called like this (the second parameter to `getAttribute` will be used as the default value if the user doesn't provide that attribute in the widget call):
```javascript
this.computeAttributes();
var message = this.getAttribute("message", "World");
```
Then the `message` variable can be used to construct the Hello XXX string:
```javascript
var textNode = this.document.createTextNode("Hello, " + message + "!");
```
The original [[hello.js]] code only implements a `render` method. The `refresh` method is not needed because the output from the widget can never be different...it will always be "Hello, World!".
Even with a `message` attribute, you might think the `render` by itself is enough. After all, the value of the input parameter `message` can only be changed by modifying the wiki text which means the tiddler will be redisplayed from scratch.
However, tiddlywiki has a syntax which allows parameter values to vary without modifying the wiki text. See https://tiddlywiki.com/#Widgets%20in%20WikiText for details. As one example, if the widget were called like `<$hello message={{MyTiddler!!field}}/>`, then every time the `field` field of `MyTiddler` were modified, only the `refresh` method would be called. Therefore, in order to get the widget display to update, the refresh method needs to be implemented.
If the `computeAttributes` and `getAttribute` calls are placed in the `render` method then we can implement a performance unoptimized version of refresh as was done in [[Widget refresh tutorial part II]]:
```javascript
/*
A widget with optimized performance will selectively refresh, but here we refresh always
*/
MyWidget.prototype.refresh = function(changedTiddlers) {
// Regenerate and rerender the widget and
// replace the existing DOM node
this.refreshSelf();
return true;
};
```
The full code can be seen at [[hello-attribute.js]] and here is the result ([[Widget attributes demo I]]):
{{Widget attributes demo I}}
The third example above is the only one which requires the refresh method in order to behave properly.

View File

@@ -1,33 +0,0 @@
created: 20190205023543910
modified: 20190217012121130
tags:
title: Widget attributes tutorial part II
type: text/vnd.tiddlywiki
This example will build on the previous one. The only modification will be to add a check to the `refresh` method. The `refreshSelf` will only be called if a change to the attributes is detected.
The `computeAttributes` method returns a Javascript object containing properties for each attribute which has changed. So a check like `if (changedAttributes.attr1 || changedAttributes.attr2 || changedAttributes.attr3)` etc. can be used to detect the change. See the refresh method in [[$:/core/modules/widgets/view.js]] for an example showing the check for multiple attributes.
For this example, `message` is the only attribute implemented.
```javascript
/*
Refresh if the attribute value changed since render
*/
MyWidget.prototype.refresh = function(changedTiddlers) {
// Find which attributes have changed
var changedAttributes = this.computeAttributes();
if (changedAttributes.message) {
this.refreshSelf();
return true;
} else {
return false;
}
};
```
The full code can be seen at [[hello-attribute-optimized.js]] and here is the result ([[Widget attributes demo II]]):
{{Widget attributes demo II}}
The visible behavior here should be identical to the unoptimized behavior of the previous tutorial.

View File

@@ -1,44 +0,0 @@
created: 20190201233806976
modified: 20221029194854112
tags:
title: Widget refresh demo I
type: text/vnd.tiddlywiki
<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
<$list name=refresh filter=[[tiddlerfield-norefresh.js]get[text]]>
<$innerwiki width="600" height="400" style="width:100%;">
<$data title="$:/DefaultTiddlers" text="[[tiddler field widget]]"/>
<$data title="test" text="type new text here"/>
<$data $tiddler=tiddlerfield-norefresh.js/>
<$data title="tiddler field widget" text="""
<$edit-text focus=yes tiddler=test tag=input/>
<$button set="!!refresh" setTo={{test}}>Force refresh</$button>
<$list filter="[{!!refresh}]">
<div>
<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
```
<$tiddlerfield/>
```
Renders as:
<$tiddlerfield/>
</div>
<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
```
<$view tiddler="test"/>
```
Renders as:
<$view tiddler="test"/>
</div>
</div>
</$list>
"""/>
</$innerwiki>
</$list>

View File

@@ -1,40 +0,0 @@
created: 20190202032354223
modified: 20190217005540498
tags:
title: Widget refresh demo II
type: text/vnd.tiddlywiki
<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
<$list name=refresh filter=[[tiddlerfield.js]get[text]]>
<$innerwiki width="600" height="400" style="width:100%;">
<$data title="$:/DefaultTiddlers" text="[[tiddler field widget]]"/>
<$data title="test" text="type new text here"/>
<$data $tiddler=tiddlerfield.js/>
<$data title="tiddler field widget" text="""
<$edit-text focus=yes tiddler=test tag=input/>
<div>
<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
```
<$tiddlerfield/>
```
Renders as:
<$tiddlerfield/>
</div>
<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
```
<$view tiddler="test"/>
```
Renders as:
<$view tiddler="test"/>
</div>
"""/>
</$innerwiki>
</$list>

View File

@@ -1,50 +0,0 @@
created: 20190202122928187
modified: 20190216191939585
tags:
title: Widget refresh demo III
type: text/vnd.tiddlywiki
<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
<$list name=refresh filter=[[refreshcount.js]get[text]]>
<$innerwiki width="600" height="400" style="width:100%;">
<$data title="$:/DefaultTiddlers" text="[[refresh count widget]]"/>
<$data title="test" text="Text field of tiddler='test'"/>
<$data $tiddler=refreshcount.js/>
<$data title="refresh count widget" text="""
*<$button set="test!!test" setTo="hello">Modify a different tiddler</$button>
*<$button set="!!test" setTo="hello">Modify this tiddler</$button>
*<$edit-text focus=yes tiddler=test tag=input/>
<div>
<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
```
<$refreshcount/>
```
Renders as:
<$refreshcount/>
</div>
<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
```
<$list filter="[[test]get[text]]">
<<currentTiddler>><br>
<$refreshcount/>
</$list>
```
Renders as:
<$list filter="[[test]get[text]]">
<<currentTiddler>><br>
<$refreshcount/>
</$list>
"""/>
</div>
</div>
</$innerwiki>
</$list>

View File

@@ -1,47 +0,0 @@
created: 20190201232847949
modified: 20221029203553291
tags:
title: Widget refresh tutorial part I
type: text/vnd.tiddlywiki
But what if we want to display dynamic content? How can we display information and keep it up to date as it changes? Let's display the content of a tiddler field.
The [[tiddlerfield-norefresh.js]] which defines the `tiddlerfield` widget is almost the same as [[hello.js]] except for this part:
```javascript
MyWidget.prototype.render = function(parent,nextSibling) {
this.parentDomNode = parent;
var text = this.wiki.getTiddlerText("test", "<empty>")
var textNode = this.document.createTextNode(text);
parent.insertBefore(textNode,nextSibling);
this.domNodes.push(textNode);
};
```
Instead of creating the text dom node from a static string, the text field of the `test` tiddler is used. This is similar to using the view widget like this: `<$view tiddler="test"/>`
Here's how it looks (see [[Widget refresh demo I]] to look at the code):
{{Widget refresh demo I}}
Notice if you change the text in the input box, the output from the `tiddlerfield` widget doesn't change, but the output of the `view` widget does. Only after the ''Force refresh'' button is clicked does the output of `tiddlerfield` update to match the input box contents.
What's going on here? The render method of the widget code is only called by tiddlywiki core when the widget is first created. After that, it isn't called again unless the widget is completely destroyed and then created again.
The tiddlywiki ~ViewWidget has a properly written `refresh` method so typing in the input box will cause its content to update. However, the `tiddlerfield` widget does not have a `refresh` method at all. It has no way of being notified that the `test` tiddler content has changed. Its output will not change until the ''Force refresh'' button is clicked.
See the next example for an implementation of the `refresh` method for the `tiddlerfield` widget.
The code for the refresh button looks like this:
```
<$button set="!!refresh" setTo={{test}}>Force refresh</$button>
```
and the widgets are enclosed in a list widget like this:
```
<$list filter="[{!!refresh}]">...</$list>
```
When the button is clicked the field `refresh` in the containing tiddler is modified and it causes the children of the list widget to be created from scratch. The render method is called and the output of the `tiddlerfield` widget updates.

View File

@@ -1,37 +0,0 @@
created: 20190201232910076
modified: 20190217014335419
tags:
title: Widget refresh tutorial part II
type: text/vnd.tiddlywiki
This example is like [[Widget refresh tutorial part I]] except the widget output will be automatically refreshed when the tiddler field changes.
[[tiddlerfield.js]] is the same as [[tiddlerfield-norefresh.js]], except this `refresh` method is added:
```javascript
/*
A widget with optimized performance will selectively refresh, but here we refresh always
*/
MyWidget.prototype.refresh = function(changedTiddlers) {
// Regenerate and rerender the widget and
// replace the existing DOM node
this.refreshSelf();
return true;
};
```
The `refreshSelf` method called above is implemented by the core widget class and it takes care of cleaning the old dom node and calling the render function.
Here is the result ([[Widget refresh demo II]]):
{{Widget refresh demo II}}
And now any typing into the input box will cause both the `tiddlerfield` and the `view` widget output to refresh immediately.
Note this is a naive version of `refresh`. It unconditionally refreshes itself. This is far from optimal since the `refresh` method for all visible widgets is called every time the tiddler store changes. But the way we've defined our widget, the output ONLY depends on the tiddler titled `text`.
In tiddlywiki the tiddler store is used for everything and almost any interaction will result in an update to the store. This means almost any interaction will cause the refresh method to be called. If you type into the search box, for example, the `tiddlerfield` widget will be refreshed with every keystroke.
Adding and removing dom elements is a relatively expensive operation, so if someone has used the list widget to create a few hundred instances of this widget, then such tiddlywiki interactions might gain a noticable lag. Therefore, it usually makes sense to avoid modifying the dom when possible by writing a smarter `refresh` method.
''Exercise'' - change the refresh method above to only call `refreshSelf` when the `changedTiddlers` input array contains `test` as one of its entries (Hint: see the refresh method in $:/core/modules/widgets/view.js for an example).

View File

@@ -1,26 +0,0 @@
created: 20190202034841184
modified: 20221029201023638
tags:
title: Widget refresh tutorial part III
type: text/vnd.tiddlywiki
This tutorial is intended to demonstrate a few examples of when calls to the `refresh` method happen vs. when a widget is recreated from scratch.
This is accomplished with a [[refreshcount.js]] widget which sets a counter to zero when the widget is created and increments the counter every time the `refresh` method is called. Here is the full code:
{{refreshcount.js}}
These are the key parts of the code from above:
```javascript
this.refreshCount = 0;
this.document.createTextNode(this.refreshCount + " refreshes");
this.refreshCount++;
```
In the following example (see [[Widget refresh demo III]] for the code), two instances of the `refreshcount` widget are created. One at the top level and the other inside a list widget whose filter results depend on the value in the `text` field of the `test` widget. The tiddler store can be modified in a few ways via two buttons and an input box:
{{Widget refresh demo III}}
* ''Modify a different tiddler'' - every time this button is clicked, both counters increment, indicating the `refresh` method is being called
* ''Modify this tiddler'' - clicking this button modifies the tiddler itself. In earlier ~TiddlyWiki versions that caused both widgets to be recreated from scratch and the counters are thereby reset to zero. Since [[version 5.2.0|https://tiddlywiki.com/#Release%205.2.0]] modifying another field in this tiddler does not cause the widgets to be recreated and the counters are not reset.
* ''Text field of tiddler='test''' - typing text into the input box causes the counter in the standalone `refreshcount` widget to be incremented. But the other instance of the widget is embedded inside a list widget whose filter output depends on the value of the tiddler field which is being modified. This causes it to recreate its children from scratch and the counter is reset every time. So with every keystroke, the counter on the left is incremented, but the counter on the right goes to/stays at zero.

View File

@@ -1,47 +0,0 @@
/*\
Library function for creating widget using a dom creating function
\*/
(function() {
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
function createDomWidget(domCreatorFunction) {
var MyWidget = function(parseTreeNode, options) {
this.initialise(parseTreeNode, options);
};
/*
Inherit from the base widget class
*/
MyWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
MyWidget.prototype.render = function(parent, nextSibling) {
this.parentDomNode = parent;
var domNode = domCreatorFunction(this.document);
parent.insertBefore(domNode, nextSibling);
this.domNodes.push(domNode);
};
/*
A widget with optimized performance will selectively refresh, but here we refresh always
*/
MyWidget.prototype.refresh = function(changedTiddlers) {
// Regenerate and rerender the widget and replace the existing DOM node
this.refreshSelf();
return true;
};
return MyWidget;
}
module.exports = createDomWidget;
})();

View File

@@ -1,6 +0,0 @@
created: 20190201025244440
modified: 20190201030708723
module-type: library
tags:
title: domwidget.js
type: application/javascript

View File

@@ -1,16 +0,0 @@
/*\
Do nothing widget
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
exports.donothing = Widget;
})();

View File

@@ -1,6 +0,0 @@
created: 20190201115945945
modified: 20190201222441271
module-type: widget
tags:
title: donothing.js
type: application/javascript

View File

@@ -1,51 +0,0 @@
/*\
Hello, World widget
\*/
(function() {
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var MyWidget = function(parseTreeNode, options) {
this.initialise(parseTreeNode, options);
};
/*
Inherit from the base widget class
*/
MyWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
MyWidget.prototype.render = function(parent, nextSibling) {
this.parentDomNode = parent;
this.computeAttributes();
var message = this.getAttribute("message", "World");
var textNode = this.document.createTextNode("Hello, " + message + "!");
parent.insertBefore(textNode, nextSibling);
this.domNodes.push(textNode);
};
/*
Refresh if the attribute value changed since render
*/
MyWidget.prototype.refresh = function(changedTiddlers) {
// Find which attributes have changed
var changedAttributes = this.computeAttributes();
if (changedAttributes.message) {
this.refreshSelf();
return true;
} else {
return false;
}
};
exports.hello = MyWidget;
})();

View File

@@ -1,6 +0,0 @@
created: 20190205024846183
modified: 20190205025110882
module-type: widget
tags:
title: hello-attribute-optimized.js
type: application/javascript

View File

@@ -1,47 +0,0 @@
/*\
Hello, World widget
\*/
(function() {
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var MyWidget = function(parseTreeNode, options) {
this.initialise(parseTreeNode, options);
};
/*
Inherit from the base widget class
*/
MyWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
MyWidget.prototype.render = function(parent, nextSibling) {
this.parentDomNode = parent;
this.computeAttributes();
var message = this.getAttribute("message", "World");
var textNode = this.document.createTextNode("Hello, " + message + "!");
parent.insertBefore(textNode, nextSibling);
this.domNodes.push(textNode);
};
/*
A widget with optimized performance will selectively refresh, but here we refresh always
*/
MyWidget.prototype.refresh = function(changedTiddlers) {
// Regenerate and rerender the widget and
// replace the existing DOM node
this.refreshSelf();
return true;
};
exports.hello = MyWidget;
})();

View File

@@ -1,6 +0,0 @@
created: 20190204020011193
modified: 20190204030332147
module-type: widget
tags:
title: hello-attribute.js
type: application/javascript

View File

@@ -1,35 +0,0 @@
/*\
Hello, World widget
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var MyWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
};
/*
Inherit from the base widget class
*/
MyWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
MyWidget.prototype.render = function(parent,nextSibling) {
this.parentDomNode = parent;
var textNode = this.document.createTextNode("Hello, World!");
parent.insertBefore(textNode,nextSibling);
this.domNodes.push(textNode);
};
exports.hello = MyWidget;
})();

View File

@@ -1,6 +0,0 @@
created: 20190201114558816
modified: 20190201224846870
module-type: widget
tags:
title: hello.js
type: application/javascript

View File

@@ -1,43 +0,0 @@
/*\
widget to count the number of times this widget refreshes
\*/
(function() {
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var MyWidget = function(parseTreeNode, options) {
this.refreshCount = 0;
this.initialise(parseTreeNode, options);
};
/*
Inherit from the base widget class
*/
MyWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
MyWidget.prototype.render = function(parent, nextSibling) {
this.parentDomNode = parent;
var textNode = this.document.createTextNode(this.refreshCount + " refreshes");
parent.insertBefore(textNode, nextSibling);
this.domNodes.push(textNode);
};
MyWidget.prototype.refresh = function(changedTiddlers) {
// Regenerate and rerender the widget and replace the existing DOM node
this.refreshCount++;
this.refreshSelf();
return true;
};
exports.refreshcount = MyWidget;
})();

View File

@@ -1,6 +0,0 @@
created: 20190201005026324
modified: 20190202143451303
module-type: widget
tags:
title: refreshcount.js
type: application/javascript

View File

@@ -1,36 +0,0 @@
/*\
Hello, World widget
\*/
(function() {
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var MyWidget = function(parseTreeNode, options) {
this.initialise(parseTreeNode, options);
};
/*
Inherit from the base widget class
*/
MyWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
MyWidget.prototype.render = function(parent, nextSibling) {
this.parentDomNode = parent;
var text = this.wiki.getTiddlerText("test", "<empty>")
var textNode = this.document.createTextNode(text);
parent.insertBefore(textNode, nextSibling);
this.domNodes.push(textNode);
};
exports.tiddlerfield = MyWidget;
})();

View File

@@ -1,6 +0,0 @@
created: 20190201233714872
modified: 20190202030615781
module-type: widget
tags:
title: tiddlerfield-norefresh.js
type: application/javascript

View File

@@ -1,46 +0,0 @@
/*\
Hello, World widget
\*/
(function() {
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var MyWidget = function(parseTreeNode, options) {
this.initialise(parseTreeNode, options);
};
/*
Inherit from the base widget class
*/
MyWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
MyWidget.prototype.render = function(parent, nextSibling) {
this.parentDomNode = parent;
var text = this.wiki.getTiddlerText("test", "<empty>")
var textNode = this.document.createTextNode(text);
parent.insertBefore(textNode, nextSibling);
this.domNodes.push(textNode);
};
/*
A widget with optimized performance will selectively refresh, but here we refresh always
*/
MyWidget.prototype.refresh = function(changedTiddlers) {
// Regenerate and rerender the widget and
// replace the existing DOM node
this.refreshSelf();
return true;
};
exports.tiddlerfield = MyWidget;
})();

View File

@@ -1,6 +0,0 @@
created: 20190202032530728
modified: 20190202032700995
module-type: widget
tags:
title: tiddlerfield.js
type: application/javascript

View File

@@ -5,8 +5,7 @@
"tiddlywiki/nodewebkitsaver",
"tiddlywiki/github-fork-ribbon",
"tiddlywiki/menubar",
"tiddlywiki/internals",
"tiddlywiki/innerwiki"
"tiddlywiki/internals"
],
"themes": [
"tiddlywiki/vanilla",

View File

@@ -1,6 +1,6 @@
caption: 5.2.4
created: 20221101094408196
modified: 20221101094408196
created: 20221017165036377
modified: 20221017165036377
tags: ReleaseNotes
title: Release 5.2.4
type: text/vnd.tiddlywiki
@@ -34,8 +34,8 @@ Improvements to the translation features of TiddlyWiki:
* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/d62a16ee464fb9984b766b48504829a1a3eb143b">> problem with long presses on tiddler links triggering a preview on iOS/iPadOS
* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6910">> consistency of button and input elements across browsers
* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/d825f1c875f5e46158c9c41c8c66471138c162d1">> edit preview to use the [[View Template Body Cascade]]
* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/36896c3db8c9678c0385a561996248a6f00a45ff">> opening a tiddler in a new window to use the [[View Template Body Cascade]]
* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6970">> detection of infinite recursion errors in widgets and filters
* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/36896c3db8c9678c0385a561996248a6f00a45ff">> opening a tiddler in a new window to use the [[View Template Body Cascade]]
* <<.link-badge-extended "https://github.com/Jermolene/TiddlyWiki5/pull/6877">> default styles for [[styled runs|Styles and Classes in WikiText]]
! Widget Improvements
@@ -49,7 +49,6 @@ Improvements to the translation features of TiddlyWiki:
! Hackability Improvements
* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/6976">> support for [[SystemTag: $:/tags/ClassFilters/TiddlerTemplate]] and [[SystemTag: $:/tags/ClassFilters/PageTemplate]] to assign dynamic CSS classes to both tiddler frames and the page template
* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/6936">> new operators for reading and formatting JSON data: [[jsonget Operator]], [[jsonindexes Operator]], [[jsontype Operator]] and [[format Operator]]
* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/commit/c5d3d4c26e8fe27f272dda004aec27d6b66c4f60">> safe mode to disable wiki store indexers
* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/166a1565843878083fb1eba47c73b8e67b78400d">> safe mode to prevent globally disabling parser rules
@@ -61,8 +60,6 @@ Improvements to the translation features of TiddlyWiki:
* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/fb34df84ed41882c1c2a6ff54f0e908b43ef95a3">> "new image" keyboard shortcut not to assign journal tags
* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/6987">> SelectWidget class to update if it uses a filter
* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/issues/6303">> issue with availability of variables within filter runs
* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/issues/7017">> issue with wikification within the advanced search filter dropdown
! Developer Improvements
@@ -84,20 +81,14 @@ Improvements to the translation features of TiddlyWiki:
<<.contributors """
bestony
btheado
BramChen
EvidentlyCube
FlashSystems
flibbles
fu-sen
joebordes
hoelzro
Marxsal
oflg
pmario
rmunn
roma0104
saqimtiaz
tw-FRed
twMat
xcazin

View File

@@ -0,0 +1,36 @@
title: Macros/NestedMacros
description: Nested Macros
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
title: Output
\whitespace trim
\define outer()
\whitespace trim
\define middle()
\whitespace trim
\define inner()
\whitespace trim
Jaguar
\end inner
<<inner>>
\end middle
<<middle>>
\end outer
<<outer>>
+
title: ExpectedResult
<p>Jaguar</p>

View File

@@ -1,6 +1,6 @@
caption: list-links
created: 20140917083515996
modified: 20221105090835041
modified: 20190206000000000
tags: Macros [[Core Macros]]
title: list-links Macro
type: text/vnd.tiddlywiki
@@ -15,8 +15,6 @@ Note: Each first [[step|Filter Step]] of a [[filter run|Filter Run]] not given a
;filter
: A [[filter|Filters]] selecting which tiddlers to include
;caption
: The name of the field to transclude for each list item, defaultingt to `caption`
;type
: An HTML element to use for the overall list element, defaulting to `ul`
;subtype

View File

@@ -1,9 +0,0 @@
caption: $:/tags/ClassFilters/PageTemplate
created: 20221020035315795
description: marks filters evaluated to dynamically add classes to the page template.
modified: 20221020035945262
tags: SystemTags
title: SystemTag: $:/tags/ClassFilters/PageTemplate
type: text/vnd.tiddlywiki
The [[system tag|SystemTags]] `$:/tags/ClassFilters/PageTemplate` marks filters marks filters evaluated to dynamically add their output as CSS classes to the page template.

View File

@@ -1,9 +0,0 @@
caption: $:/tags/ClassFilters/TiddlerTemplate
created: 20221020035738692
description: marks filters evaluated to dynamically add classes to the page template.
modified: 20221020035933363
tags: SystemTags
title: SystemTag: $:/tags/ClassFilters/TiddlerTemplate
type: text/vnd.tiddlywiki
The [[system tag|SystemTags]] `$:/tags/ClassFilters/TiddlerTemplate` marks filters marks filters evaluated to dynamically add their output as CSS classes to the tiddler template.

View File

@@ -1,6 +1,6 @@
caption: genesis
created: 20221101100729587
modified: 20221101100729587
created: 20220924140702430
modified: 20220924140702430
tags: Widgets
title: GenesisWidget
type: text/vnd.tiddlywiki
@@ -27,15 +27,3 @@ Note that attributes explicitly specified take precedence over attributes with t
<$macrocall $name='wikitext-example-without-html'
src='<$genesis $type="div" class="tc-thing" label="Squeak">Mouse</$genesis>'/>
<$macrocall $name='wikitext-example-without-html'
src="""\define my-banner(mode:"inline",caption)
<$genesis $type={{{ [<__mode__>match[inline]then[span]else[div]] }}} class="tc-mybanner">
<<__caption__>>
</$genesis>
\end
<<my-banner caption:"I'm in a SPAN">>
<<my-banner mode:"block" caption:"I'm in a DIV">>
"""/>

View File

@@ -1,13 +1,15 @@
caption: Macro Definitions
created: 20150220181617000
modified: 20180820165115455
modified: 20221022135909352
tags: WikiText
title: Macro Definitions in WikiText
type: text/vnd.tiddlywiki
A [[macro|Macros]] is defined using a `\define` [[pragma|Pragma]]. Like any pragma, this can only appear at the start of a tiddler.
The first line of the definition specifies the macro name and any parameters. Each parameter has a name and, optionally, a default value that is used if no value is supplied on a particular call to the macro. The lines that follow contain the text of the macro text (i.e. the snippet represented by the macro name), until `\end` appears on a line by itself:
The first line of the definition specifies the macro name and any parameters. Each parameter has a name and, optionally, a default value that is used if no value is supplied on a particular call to the macro.
The lines that follow contain the text of the macro text (i.e. the snippet represented by the macro name), until `\end` appears on a line by itself:
<$codeblock code={{$:/editions/tw5.com/macro-examples/say-hi}}/>
@@ -17,6 +19,20 @@ Alternatively, the entire definition can be presented on a single line without a
\define sayhi(name:"Bugs Bunny") Hi, I'm $name$.
```
Macro definitions can be nested by specifying the name of the macro in the `\end` marker. For example:
<<wikitext-example-without-html src:"""\define special-button(caption:"Click me")
\define actions()
<$action-sendmessage $message="tm-notify" $param="HelloThere"/>
\end actions
<$button actions=<<actions>>>
$caption$
</$button>
\end special-button
<<special-button>>
""">>
A more formal [[presentation|Macro Definition Syntax]] of this syntax is also available.
!! Accessing variables and parameters

View File

@@ -1,3 +0,0 @@
title: $:/DefaultTiddlers
HelloThere

View File

@@ -1,3 +0,0 @@
title: HelloThere
{{$:/plugins/tiddlywiki/twitter-archivist/readme}}

View File

@@ -1,3 +0,0 @@
title: $:/SiteTitle
Get Your Tweets Into ~TiddlyWiki

View File

@@ -1,3 +0,0 @@
title: $:/SiteTitle
Twitter Archivist

View File

@@ -1,16 +0,0 @@
{
"description": "Twitter Archivist Edition",
"plugins": [
"tiddlywiki/twitter-archivist"
],
"languages": [
],
"themes": [
"tiddlywiki/vanilla",
"tiddlywiki/snowwhite"
],
"build": {
"index": [
"--rendertiddler","$:/core/save/all","index.html","text/plain"]
}
}

View File

@@ -4,13 +4,9 @@ caption: Support
~TiddlyWiki is an open source project with a vibrant community of users and developers. We're always happy to help new users get the most from ~TiddlyWiki.
Join the ~TiddlyWiki forum:
Join the ~TiddlyWiki mailing list:
https://talk.tiddlywiki.org/
For the convenience of existing users, we also continue to operate the original TiddlyWiki group (hosted on Google Groups since 2005):
https://groups.google.com/group/TiddlyWiki
http://groups.google.com/group/TiddlyWiki
Post bug reports to the ~TiddlyWiki ~GitHub repository:

View File

@@ -1,264 +0,0 @@
/*\
title: $:/plugins/tiddlywiki/twitter-archivist/archivist.js
type: application/javascript
module-type: utils
Utility class for manipulating Twitter archives
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
function TwitterArchivist(options) {
options = options || {};
this.source = options.source;
}
TwitterArchivist.prototype.loadArchive = async function(options) {
options = options || {};
const wiki = options.wiki;
await this.source.init();
// Process the manifest and profile
const manifestData = await this.loadTwitterJsData("data/manifest.js","window.__THAR_CONFIG = ",""),
profileData = await this.loadTwitterJsData("data/profile.js","window.YTD.profile.part0 = ",""),
accountData = await this.loadTwitterJsData("data/account.js","window.YTD.account.part0 = ",""),
username = manifestData.userInfo.userName,
user_id = manifestData.userInfo.accountId;
wiki.addTiddler({
title: "Twitter Archive for @" + username,
tags: "$:/tags/TwitterArchive",
user_id: user_id,
username: username,
displayname: manifestData.userInfo.displayName,
generation_date: $tw.utils.stringifyDate(new Date(manifestData.archiveInfo.generationDate)),
account_created_date: $tw.utils.stringifyDate(new Date(accountData[0].account.createdAt)),
bio: profileData[0].profile.description.bio,
website: profileData[0].profile.description.website,
location: profileData[0].profile.description.location
});
// Process the media
await this.source.processFiles("data/tweets_media","base64",function(mediaItem) {
var ext = mediaItem.filename.split(".").slice(-1)[0];
if("jpg png".split(" ").indexOf(ext) !== -1) {
var extensionInfo = $tw.utils.getFileExtensionInfo("." + ext),
type = extensionInfo ? extensionInfo.type : null;
wiki.addTiddler({
title: "Tweet Media - " + mediaItem.filename,
tags: "$:/tags/TweetMedia",
status_id: mediaItem.filename.split("-")[0],
text: mediaItem.contents,
type: type
});
}
});
// Process the favourites
const likeData = await this.loadTwitterJsData("data/like.js","window.YTD.like.part0 = ","");
$tw.utils.each(likeData,function(like) {
// Create the tweet tiddler
var tiddler = {
title: "Tweet - " + like.like.tweetId,
text: "\\rules only html entity extlink\n" + (like.like.fullText || "").replace("\n","<br>"),
status_id: like.like.tweetId,
liked_by: user_id,
tags: "$:/tags/Tweet"
};
wiki.addTiddler(tiddler);
});
// Process the tweets
const tweetData = await this.loadTwitterJsData("data/tweets.js","window.YTD.tweets.part0 = ","");
$tw.utils.each(tweetData,function(tweet) {
// Compile the tags for the tweet
var tags = ["$:/tags/Tweet"];
// Create tiddlers for each mentioned tweeter, and hyperlink the mention in the test
var rawText = tweet.tweet.full_text,
posText = 0,
text = "";
var mentions = [];
$tw.utils.each(tweet.tweet.entities.user_mentions,function(mention) {
var title = "Tweeter - " + mention.id_str;
tags.push(title);
wiki.addTiddler({
title: title,
screenname: "@" + mention.screen_name,
tags: "$:/tags/Tweeter",
user_id: mention.id_str,
name: mention.name
});
text = text +
$tw.utils.htmlEncode(rawText.substring(posText,mention.indices[0])) +
"<$link to=\"" + title + "\">" +
$tw.utils.htmlEncode(rawText.substring(mention.indices[0],mention.indices[1])) +
"</$link>";
posText = mention.indices[1];
mentions.push(mention.id_str);
});
if(posText < rawText.length) {
text = text + $tw.utils.htmlEncode(rawText.substring(posText));
}
text = text.replace("\n","<br>");
// Create the tweet tiddler
var tiddler = {
title: "Tweet - " + tweet.tweet.id_str,
text: "\\rules only html entity extlink\n" + text,
status_id: tweet.tweet.id_str,
user_id: user_id,
favorite_count: tweet.tweet.favorite_count,
retweet_count: tweet.tweet.retweet_count,
tags: tags,
created: $tw.utils.stringifyDate(new Date(tweet.tweet.created_at)),
modified: $tw.utils.stringifyDate(new Date(tweet.tweet.created_at))
};
if(tweet.tweet.in_reply_to_status_id_str) {
tiddler.in_reply_to_status_id = tweet.tweet.in_reply_to_status_id_str;
}
if(mentions.length > 0) {
tiddler.mention_user_ids = $tw.utils.stringifyList(mentions);
}
wiki.addTiddler(tiddler);
});
};
TwitterArchivist.prototype.loadTwitterJsData = async function(filePath,prefix,suffix) {
var tweetFileData = await this.source.loadTwitterJsData(filePath);
if(prefix) {
if(tweetFileData.slice(0,prefix.length) !== prefix) {
throw "Reading Twitter JS file " + filePath + " missing prefix '" + prefix + "'";
}
tweetFileData = tweetFileData.slice(prefix.length);
}
if(suffix) {
if(tweetFileData.slice(-suffix.length) !== suffix) {
throw "Reading Twitter JS file " + filePath + " missing suffix '" + suffix + "'";
}
tweetFileData = tweetFileData.slice(0,tweetFileData.length - suffix.length);
}
return JSON.parse(tweetFileData);
};
function TwitterArchivistSourceNodeJs(options) {
options = options || {};
this.archivePath = options.archivePath;
}
TwitterArchivistSourceNodeJs.prototype.init = async function() {
};
TwitterArchivistSourceNodeJs.prototype.processFiles = async function(dirPath,encoding,callback) {
var fs = require("fs"),
path = require("path"),
dirPath = path.resolve(this.archivePath,dirPath),
filenames = fs.readdirSync(dirPath);
$tw.utils.each(filenames,function(filename) {
callback({
filename: filename,
contents: fs.readFileSync(path.resolve(dirPath,filename),encoding)
});
});
};
TwitterArchivistSourceNodeJs.prototype.loadTwitterJsData = async function(filePath) {
var fs = require("fs"),
path = require("path");
return fs.readFileSync(path.resolve(this.archivePath,filePath),"utf8");
};
function TwitterArchivistSourceBrowser(options) {
options = options || {};
}
TwitterArchivistSourceBrowser.prototype.init = async function() {
// Open directory
this.rootDirHandle = await window.showDirectoryPicker();
};
TwitterArchivistSourceBrowser.prototype.processFiles = async function(dirPath,encoding,callback) {
const dirHandle = await this.walkDirectory(dirPath.split("/"));
for await (const [filename, fileHandle] of dirHandle.entries()) {
const contents = await fileHandle.getFile();
callback({
filename: filename,
contents: arrayBufferToBase64(await contents.arrayBuffer())
});
}
};
TwitterArchivistSourceBrowser.prototype.loadTwitterJsData = async function(filePath) {
const filePathParts = filePath.split("/");
const dirHandle = await this.walkDirectory(filePathParts.slice(0,-1));
const fileHandle = await dirHandle.getFileHandle(filePathParts.slice(-1)[0]);
const contents = await fileHandle.getFile();
return await contents.text();
};
TwitterArchivistSourceBrowser.prototype.walkDirectory = async function(arrayDirectoryEntries) {
var entries = arrayDirectoryEntries.slice(0),
dirHandle = this.rootDirHandle;
while(entries.length > 0) {
dirHandle = await dirHandle.getDirectoryHandle(entries[0]);
entries.shift();
}
return dirHandle;
};
// Thanks to MatheusFelipeMarinho
// https://github.com/MatheusFelipeMarinho/venom/blob/43ead0bfffa57a536a5cff67dd909e55da9f0915/src/lib/wapi/helper/array-buffer-to-base64.js#L55
function arrayBufferToBase64(arrayBuffer) {
var base64 = '';
var encodings =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
var bytes = new Uint8Array(arrayBuffer);
var byteLength = bytes.byteLength;
var byteRemainder = byteLength % 3;
var mainLength = byteLength - byteRemainder;
var a, b, c, d;
var chunk;
// Main loop deals with bytes in chunks of 3
for (var i = 0; i < mainLength; i = i + 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
// Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
d = chunk & 63; // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
}
// Deal with the remaining bytes and padding
if (byteRemainder == 1) {
chunk = bytes[mainLength];
a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4; // 3 = 2^2 - 1
base64 += encodings[a] + encodings[b] + '==';
} else if (byteRemainder == 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
b = (chunk & 1008) >> 4; // 1008 = (2^6 - 1) << 4
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2; // 15 = 2^4 - 1
base64 += encodings[a] + encodings[b] + encodings[c] + '=';
}
return base64;
}
exports.TwitterArchivist = TwitterArchivist;
exports.TwitterArchivistSourceNodeJs = TwitterArchivistSourceNodeJs;
exports.TwitterArchivistSourceBrowser = TwitterArchivistSourceBrowser;
})();

View File

@@ -1,2 +0,0 @@
title: $:/config/TiddlerInfo/Mode
text: sticky

View File

@@ -1,53 +0,0 @@
/*\
title: $:/plugins/tiddlywiki/twitter-archivist/loadtwitterarchive.js
type: application/javascript
module-type: command
Read tiddlers from an unzipped Twitter archive
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var widget = require("$:/core/modules/widgets/widget.js");
exports.info = {
name: "loadtwitterarchive",
synchronous: false
};
var Command = function(params,commander,callback) {
this.params = params;
this.commander = commander;
this.callback = callback;
};
Command.prototype.execute = function() {
var self = this;
if(this.params.length < 1) {
return "Missing path to Twitter archive";
}
var archivePath = this.params[0];
// Load tweets
var archiveSource = new $tw.utils.TwitterArchivistSourceNodeJs({
archivePath: archivePath
}),
archivist = new $tw.utils.TwitterArchivist({
source: archiveSource
});
archivist.loadArchive({
wiki: this.commander.wiki
}).then(function() {
self.callback(null);
}).catch(function(err) {
self.callback(err);
});
return null;
};
exports.Command = Command;
})();

View File

@@ -1,204 +0,0 @@
title: $:/plugins/tiddlywiki/twitter-archivist/macros
tags: $:/tags/Macro
\define skinny-tabs(tabNames,tabCaptions,defaultTab,state)
<$let
currTab={{{ [<__state__>get[text]else<__defaultTab__>] }}}
>
<div class="tc-tab-set">
<div class="tc-tab-buttons">
<$list filter="[enlist<__tabNames__>]" variable="tab" counter="tabCounter">
<$let
caption={{{ [enlist<__tabCaptions__>nth<tabCounter>] }}}
>
<$list filter="[<tab>match<currTab>]" variable="ignore">
<$button aria-checked="true" class="tc-tab-selected" role="switch">
<$action-setfield $tiddler=<<__state__>> $value=<<tab>>/>
<$text text=<<caption>>/>
</$button>
</$list>
<$list filter="[<tab>!match<currTab>]" variable="ignore">
<$button role="switch">
<$action-setfield $tiddler=<<__state__>> $value=<<tab>>/>
<$text text=<<caption>>/>
</$button>
</$list>
</$let>
</$list>
</div>
<div class="tc-tab-divider"></div>
<div class="tc-tab-content">
<$list filter="[enlist<__tabNames__>]" variable="tab" counter="tabCounter">
<$list filter="[<tab>match<currTab>]" variable="ignore">
<div class="tc-reveal">
<$macrocall $name=<<currTab>>/>
</div>
</$list>
<$list filter="[<tab>!match<currTab>]" variable="ignore">
<div class="tc-reveal" hidden="true"></div>
</$list>
</$list>
</div>
</div>
</$let>
\end
\define list-archives()
\whitespace trim
<ul>
<$list filter="[tag[$:/tags/TwitterArchive]sort[displayname]]">
<li>
<$link><$text text=<<currentTiddler>>/></$link>
</li>
</$list>
</ul>
\end
\define show-archive()
<$let
user_id={{!!user_id}}
>
<div class="tc-twitter-archive">
<table>
<tbody>
<<show-archive-attribute "Username" "username" prefix:"@">>
<<show-archive-attribute "Display Name" "displayname">>
<<show-archive-attribute "Bio" "bio">>
<<show-archive-attribute "Location" "location">>
<<show-archive-attribute "Website" "website">>
<<show-archive-calculated-attribute "Number of Tweets" "[tag[$:/tags/Tweet]field:user_id<user_id>count[]]">>
<<show-archive-calculated-attribute "Number of Favorites Received" "[tag[$:/tags/Tweet]field:user_id<user_id>] :reduce[<currentTiddler>get[favorite_count]else[0]add<accumulator>]">>
<<show-archive-calculated-attribute "Number of Retweets Received" "[tag[$:/tags/Tweet]field:user_id<user_id>] :reduce[<currentTiddler>get[retweet_count]else[0]add<accumulator>]">>
<<show-archive-calculated-attribute "Number of Tweeters Mentioned" "[tag[$:/tags/Tweeter]count[]]">>
<<show-archive-attribute "User ID" "user_id">>
<<show-archive-attribute "Account Creation Date" "account_created_date" format:"date" template:"DDth mmm YYYY 0hh:0mm:0ss">>
<<show-archive-attribute "Archive Generation Date" "generation_date" format:"date" template:"DDth mmm YYYY 0hh:0mm:0ss">>
</tbody>
</table>
<$macrocall $name="skinny-tabs" tabNames="show-archive-tweets show-favorited-tweets" tabCaptions="Tweets Favourites" defaultTab="show-archive-tweets" state=<<qualify "$:/state/skinny-tabs/archive">>/>
</div>
</$let>
\end
\define show-archive-tweets()
<$let user_id={{!!user_id}}>
<$list filter="[tag[$:/tags/Tweet]field:user_id<user_id>!sort[created]limit[50]]">
<<show-tweet>>
</$list>
</$let>
\end
\define show-favorited-tweets()
<$let user_id={{!!user_id}}>
<$list filter="[tag[$:/tags/Tweet]field:liked_by<user_id>limit[50]]">
<<show-tweet>>
</$list>
</$let>
\end
\define show-archive-attribute(caption,field,prefix,format:"text",template)
<tr>
<th>
<$text text=<<__caption__>>/>
</th>
<td>
<$text text={{{ [<__prefix__>] }}}/>
<$view field=<<__field__>> format=<<__format__>> template=<<__template__>>/>
</td>
</tr>
\end
\define show-archive-calculated-attribute(caption,filter)
<tr>
<th>
<$text text=<<__caption__>>/>
</th>
<td>
<$text text={{{ [subfilter<__filter__>] }}}/>
</td>
</tr>
\end
\define show-tweet()
<div class="tc-twitter-tweet">
<div class="tc-twitter-tweet-header">
<$let user_id={{{ [<__archive__>get[user_id]] }}}>
<$list filter="[{!user_id}match<user_id>]" variable="ignore">
<span class="tc-twitter-tweet-header-displayname">
<$text text={{{ [<__archive__>get[displayname]] }}}/>
</span>
<span class="tc-twitter-tweet-header-username">
@<$text text={{{ [<__archive__>get[username]] }}}/>
</span>
</$list>
</$let>
<$link to=<<currentTiddler>>>
<span class="tc-twitter-tweet-header-date">
<$view field="created" format="date" template="DDth mmm YYYY 0hh:0mm:0ss"/>
</span>
</$link>
</div>
<$list filter="[<__title__>get[in_reply_to_status_id]addprefix[Tweet - ]is[tiddler]]" variable="replyTo">
<div class="tc-twitter-tweet-reply-to">
Reply to <$link to=<<replyTo>>><$text text=<<replyTo>>/></$link>
</div>
</$list>
<div class="tc-twitter-tweet-body">
<$transclude field="text"/>
</div>
<div class="tc-twitter-tweet-media">
<$let status_id={{!!status_id}}>
<$list filter="[tag[$:/tags/TweetMedia]field:status_id<status_id>]" variable="mediaItem">
<$transclude tiddler=<<mediaItem>>/>
</$list>
</$let>
</div>
<div class="tc-twitter-tweet-footer">
<$list filter="[<currentTiddler>has[retweet_count]]" variable="ignore">
<span class="tc-twitter-tweet-footer-retweets">
Retweets: <$view field="retweet_count" format="text"/>
</span>
</$list>
<$list filter="[<currentTiddler>has[favorite_count]]" variable="ignore">
<span class="tc-twitter-tweet-footer-likes">
Likes: <$view field="favorite_count" format="text"/>
</span>
</$list>
<span class="tc-twitter-tweet-footer-twitter-link">
<a href={{{ [{!!status_id}addprefix[https://twitter.com/i/web/status/]] }}} rel="noopener noreferrer" target="_blank">View on Twitter</a>
</span>
</div>
</div>
\end
\define show-tweet-thread(archive)
<div class="tc-twitter-tweet-thread">
<$list filter="[<currentTiddler>has[in_reply_to_status_id]]" variable="ignore">
<div class="tc-twitter-tweet-reply">
<$tiddler tiddler={{{ [<currentTiddler>get[in_reply_to_status_id]addprefix[Tweet - ]] }}}>
<$macrocall $name="show-tweet"/>
</$tiddler>
</div>
</$list>
<$macrocall $name="show-tweet"/>
</div>
\end
\define show-tweeter()
<table>
<tbody>
<tr><th>Username</th><td><$text text={{!!screenname}}/></td></tr>
<tr><th>Display Name</th><td><$text text={{!!name}}/></td></tr>
<tr><th>User ID</th><td><$text text={{!!user_id}}/></td></tr>
</tbody>
</table>
<a href={{{ [{!!user_id}addprefix[https://twitter.com/intent/user?user_id=]] }}} rel="noopener noreferrer" target="_blank">View on Twitter</a>
<$macrocall $name="skinny-tabs" tabNames="show-tweeter-mentions" tabCaptions="Mentions" defaultTab="show-tweeter-mentions" state=<<qualify "$:/state/skinny-tabs/tweeter-mentions">>/>
\end
\define show-tweeter-mentions()
<$list filter="[tag[$:/tags/Tweet]tag<currentTiddler>]">
<$macrocall $name="show-tweet" archive=<<currentTiddler>> title=<<currentTiddler>>/>
</$list>
\end

View File

@@ -1,6 +0,0 @@
{
"title": "$:/plugins/tiddlywiki/twitter-archivist",
"name": "Twitter Archivist",
"description": "Twitter archiving tools",
"list": "readme"
}

View File

@@ -1,55 +0,0 @@
title: $:/plugins/tiddlywiki/twitter-archivist/readme
! Introduction
The Twitter Archivist imports the tweets and associated media from a [[Twitter Archive|https://help.twitter.com/en/managing-your-account/how-to-download-your-twitter-archive]] as individual tiddlers.
The Twitter Archivist plugin is available from the official plugin library for installation in your own wikis.
! Limitations
This initial version of the Twitter Archivist has several shortcomings that may be addressed in the future:
* Does not handle editable tweets
* Does not handle direct messages
! Limitations of Twitter Archives
The Twitter Archive format itself has many shortcomings which affect this tool:
* Retweets come through as old-school RTs, which means that they are often truncated
* Likes only have minimal information, lacking date, author and mentions
* External links go to the t.co shortener
* Twitter archives can be delivered in multiple parts, but this tool has only been tested with single archives. It is hoped that cumulatively importing each of the archives in turn should work
A future version of this tool may use the Twitter API to get around these restrictions.
! Getting Started
First, request your Tweet archive from Twitter. Once it is available, download and unzip it.
The Twitter Archivist can operate in the browser or under Node.js.
!! In the Browser
To import a Twitter archive in the browser, click the button below and navigate to the root of the archive:
<$button>
<$action-sendmessage $message="tm-load-twitter-archive"/>
Open Twitter archive
</$button>
!! Under Node.js
To import a Twitter archive under Node.js, use the `--loadtwitterarchive` command:
```
tiddlywiki editions/twitter-archivist/ --loadtwitterarchive '/path/to/archive' --build index
```
! Imported Archives
Any imported archives will show here:
<<list-archives>>

View File

@@ -1,38 +0,0 @@
/*\
title: $:/plugins/tiddlywiki/twitter-archivist/startup.js
type: application/javascript
module-type: startup
Twitter initialisation
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
// Export name and synchronous status
exports.name = "twitter-archivist";
exports.after = ["startup"];
exports.synchronous = true;
exports.startup = function() {
$tw.rootWidget.addEventListener("tm-load-twitter-archive",function(event) {
// Load tweets
var archiveSource = new $tw.utils.TwitterArchivistSourceBrowser({
}),
archivist = new $tw.utils.TwitterArchivist({
source: archiveSource
});
archivist.loadArchive({
wiki: $tw.wiki
}).then(function() {
alert("Archived tweets imported");
}).catch(function(err) {
alert("Error importing archived tweets: " + err);
});
});
};
})();

View File

@@ -1,47 +0,0 @@
title: $:/plugins/tiddlywiki/twitter-archivist/styles
tags: [[$:/tags/Stylesheet]]
code-body: yes
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
.tc-twitter-tweet {
border: 1px solid <<colour muted-foreground>>;
border-radius: 8px;
margin: 1em 0;
padding: 1em;
}
.tc-twitter-tweet-reply {
font-size: 0.7em;
}
.tc-twitter-tweet-reply .tc-twitter-tweet {
margin: 0.5em 0 0.5em 1em;
padding: 0.5em;
}
.tc-twitter-tweet-header-displayname {
font-weight: bold;
}
.tc-twitter-tweet-header-username,
.tc-twitter-tweet-header-date {
color: #536471;
}
.tc-twitter-tweet-reply-to {
font-size: 0.7em;
}
.tc-twitter-tweet-body {
margin: 0.25em 0;
line-height: 1.3;
}
.tc-twitter-tweet-reply .tc-twitter-tweet-body {
margin: 0.5em 0;
}
.tc-twitter-tweet-footer {
font-size: 0.8em;
}

View File

@@ -1,3 +0,0 @@
title: $:/plugins/tiddlywiki/twitter-archivist/template/archive
<<show-archive>>

View File

@@ -1,3 +0,0 @@
title: $:/plugins/tiddlywiki/twitter-archivist/template/tweet
<<show-tweet-thread>>

View File

@@ -1,3 +0,0 @@
title: $:/plugins/tiddlywiki/twitter-archivist/template/tweeter
<<show-tweeter>>

View File

@@ -1,7 +0,0 @@
title: $:/plugins/tiddlywiki/twitter-archivist/view-template-body-cascade
tags: $:/tags/ViewTemplateBodyFilter
list-before:
[tag[$:/tags/Tweet]then[$:/plugins/tiddlywiki/twitter-archivist/template/tweet]]
[tag[$:/tags/TwitterArchive]then[$:/plugins/tiddlywiki/twitter-archivist/template/archive]]
[tag[$:/tags/Tweeter]then[$:/plugins/tiddlywiki/twitter-archivist/template/tweeter]]