Tobias Beer Preview plugin lets preview a link to tiddler before opening it. It is a very useful tool; however, it is in JS and hard to customize. Here is an experiment to reproduce it in WikiText.
This is an experimental procedure (the CSS part will be moved to its own tiddler later).
\procedure link-preview(tiddler, id:0)
<style>
.kk-popup{
padding:25px;
max-height:400px;
max-width:40vw;
overflow-y:scroll;
}
</style>
<$let stateTid={{{ [<qualify $:/state/link-preview>addsuffix<id>] }}} >
<$button class="tc-btn-invisible tc-tiddlylink" popup=<<stateTid>> >
<$text text=<<tiddler>> />
</$button>
<$reveal type="popup" state=<<stateTid>> >
<div class="tc-drop-down kk-popup">
<$link to=<<tiddler>> />
<$transclude $tiddler=<<tiddler>> $mode=block/>
</div>
</$reveal>
</$let>
\end link-preview
and here is an example on https://tiddlywiki.com
Hello, this is a test for <<link-preview "A Gentle Guide to TiddlyWiki">> and it works as expected.
Another example <<link-preview "Examples" 1>>
and the is the screenshot:
To give a try download link-preview.json (931 Bytes) and import to https://tiddlywiki.com and change the example as you like.
Questions:
-
The
idis used to create unique state tiddler, as qualify will create duplicate state if used several times in the same tiddler. How avoid thisidand how to create unique state automatically? Or you may suggest better solution? -
How improve the css to have nice looking preview windows on small and large screen?
-
How to use custom widget to overwrite the link widget and its shortcut
[[..]]to add preview to links?