1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-10-31 15:16:18 +00:00
TiddlyWiki5/plugins/tiddlywiki/innerwiki/doc/examples.tid
Jermolene ca7b62a5f6 Introduce "innerwiki" plugin
From the readme:

This plugin enables TiddlyWiki to embed a modified copy of itself (an "innerwiki"). The primary motivation is to be able to produce screenshot illustrations that are automatically up-to-date with the appearance of TiddlyWiki as it changes over time, or to produce the same screenshot in different languages
2019-01-27 10:57:56 +00:00

75 lines
3.3 KiB
Plaintext

title: $:/plugins/tiddlywiki/innerwiki/examples
\define example(text)
<$codeblock code=<<__text__>>/>
Renders as:
$text$
\end
!! Browser
The innerwiki widget specifies the dimensions of the virtual screen used to render the wiki (in pixels) and CSS styles to apply to it. Nested `<$data>` widgets are used to specify individual payload tiddlers to be loaded into the wiki. In this example, we initialise the innerwiki with two tiddlers "HelloThere" and "$:/DefaultTiddlers":
<<example """<$innerwiki width="1200" height="400" style="width:100%;" filename="screenshot-1">
<$data title="HelloThere" text="This tiddler is inside a wiki"/>
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
</$innerwiki>""">>
Note that the "screenshot" is a shrunken but fully interactive TiddlyWiki.
!! Node.js
To render these examples as a PNG bitmap under Node.js, execute the following at the command prompt:
```
tiddlywiki mywiki --screenshot $:/plugins/tiddlywiki/innerwiki/examples
```
The screenshots will be saved as `screenshot-1.png` etc in the `./output` folder of the wiki.
!! Clipping
A clipping rectangle can be applied to limit the area of the wiki that is displayed. For example:
<<example """<$innerwiki width="1200" height="400" style="width:100%;" clipLeft="500" clipTop="100" clipWidth="600" clipHeight="300" filename="screenshot-2">
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
</$innerwiki>""">>
!! Transcluding payload tiddlers
This example shows how the `<$data>` widget can be transcluded from other tiddlers (see $:/plugins/tiddlywiki/innerwiki/example-data):
<<example """<$innerwiki width="600" height="400" style="width:100%;" filename="screenshot-3">
{{$:/plugins/tiddlywiki/innerwiki/example-data}}
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
</$innerwiki>""">>
!! Customising the wiki state
By injecting the right payload tiddlers, the innerwiki can be initialised to any desired state. In this example we inject a configuration tiddler to make the "more" page control button visible, and a state tiddler to cause the dropdown to appear:
<<example """<$innerwiki template="$:/plugins/tiddlywiki/innerwiki/template" filename="screenshot-4" width="1200" height="400" clipLeft="500" clipTop="100" clipWidth="600" clipHeight="300" style="width:100%;">
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
<$data title="$:/DefaultTiddlers" text="HelloThere"/>
<$data title="$:/config/PageControlButtons/Visibility/$:/core/ui/Buttons/more-page-actions" text="show"/>
<$data title="$:/state/popup/more--1600698846" text="(151,144,21,25)"/>
</$innerwiki>""">>
!! Inception
An innerwiki can itself contain an inner-innerwiki:
<<example """<$innerwiki width="1200" height="600" style="width:100%;" filename="screenshot-5">
<$data title="HelloThere" text="! This tiddler is inside a wiki that is inside a wiki"/>
<$data title="$:/DefaultTiddlers" text="HelloThere $:/plugins/tiddlywiki/innerwiki/inner-example"/>
<$data $tiddler="$:/plugins/tiddlywiki/innerwiki"/>
</$innerwiki>""">>
(You can see the innerwiki here: $:/plugins/tiddlywiki/innerwiki/inner-example)
Note the way that the innerwiki plugin has to be explicitly added to the innerwiki.