mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-10-31 15:42:59 +00:00
ca7b62a5f6
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
75 lines
3.3 KiB
Plaintext
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.
|