mirror of
https://github.com/TiddlyWiki/TiddlyWiki5.git
synced 2026-05-02 01:47:14 +00:00
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
This commit is contained in:
74
plugins/tiddlywiki/innerwiki/doc/examples.tid
Normal file
74
plugins/tiddlywiki/innerwiki/doc/examples.tid
Normal file
@@ -0,0 +1,74 @@
|
||||
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.
|
||||
Reference in New Issue
Block a user