Experiment: A WikiText Solution for Link Preview

[Mohammad]

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.

Version 0.1

This is an experimental procedure (*the CSS part will be moved to its own tiddler later*). (*See newer versions below*).

\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:

1. The id is used to create unique state tiddler, as qualify will create duplicate state if used several times in the same tiddler. How avoid this id and how to create unique state automatically? Or you may suggest better solution?

2. How improve the css to have nice looking preview windows on small and large screen?

3. How to use custom widget to overwrite the link widget and its shortcut [[..]] to add preview to links?

---

Version 0.2 - Updated on 2024.10.18

This is an improved version of first trial and called version 0.2.

Change Log

• It handles the popup correctly and there is no need to use id for state tiddler, when repeated link-preview to same tiddler is used.
• It also has separate stylesheet and works with dark theme
• It shows images and other elements correctly
• It shows subtitle/tags/body and all other elements added through user view template (so, it shows source for Utility, Node Explorer for Shiraz, …)

Screencast

Isues

• The popup window is bounded by host tiddler
• Users may confuse when click on links as they expect to navigate to the tiddler, they click on its link.

Give a try:

1. download Link-preview-0.2.json (2.5 KB)
2. amd import into https://tiddlywiki.com
3. and play with link-preview/exmp01

Please contribute and improve the code with:

• Better popup position
• Better window size and scaling the content
• Work on mouse hover using eventcatcher

[arunnbabu81]

Exploring default tiddler links hackability in V5.3.0

@TW_Tones I modified the custom link widget code shared by you in one of the earlier post to add a button next to the link to get popup preview of the tiddler - share demo Any suggestions to modify it so that it visible only in certain places like tiddler body, recents and in advanced search results ?

Here is a custom link widget which adds a pop up button also. This was done using an example given by @TW_Tones in that thread. Since this custom widget add an extra button, it may not be ideal.

[oeyoews]

Can it support hover pop-up ?

[Mohammad]

Thank you! I see you have used $genesis and modified the link widget!
There are some issues in the code like the popID which is not correct

<$let popupID=<<qualify """$:/temp/state/<currentTiddler>/<now>""">>>
<$button popup=<<popupID>>>{{$:/images/entypo/popup}}</$button>
<$reveal type="popup" state=<<popupID>> position="belowleft">
<div class="tc-drop-down tc-popup-keep" style="max-width:600px; width:100%; padding:1em;">
<$transclude mode="block" tiddler="$:/core/ui/ViewTemplate/body" />
</div>
</$reveal>

But this is a great start!

[Mohammad]

No, but it can be added! I just thought about how to use wikitext for this purpose.
It needs better CSS to correctly display the contents like images, headings, etc

[linonetwo]

@Mohammad

How improve the css to have nice looking preview windows on small and large screen

Usually you need to write media query for common screen sizes, simply drag the window small to know which width will cause problem and create a new media query for it.

@oeyoews

hover pop-up ?

I believe this can be using event catcher widget, the recent https://github.com/TiddlyWiki/TiddlyWiki5/pull/8663 is a good example of <$eventcatcher on mouce events.

[Mohammad]

Thank you for the hint!

[CodaCoder]

@Mohammad

this is a great start!

Tread carefully and be aware that, …

If you place <<now>> in the construction of the state tiddler title, it will be unique every time it is rendered. IOW, you’re making a new state tiddler each time it is used. That may be “okay” for one person, but the next person may want to manipulate the state tiddler, but can’t, because it cannot be determined. Some people may prefer to save state, but they will be disappointed because a <<now>> based title will be “there” but useless because it will be ignored/sidestepped by the next invocation/render.

Confession: I worked all this through last night as a solution for you, but then scratched it for the reasons stated above.

You may decide none of that matters, which is fine… but you should make people aware in the documentation: Warning: this solution uses single-use “state”. This means that…

[Mohammad]

@CodaCoder

If you place <<now>> in the construction of the state tiddler title

I did not used now as it cannot be used for popup. That was in @arunnbabu81 example code.
I welcome improvement suggestion for

• better popup position
• better window size and scaling the content
• work on mouse hover using eventcatcher

[Mohammad]

I have updated the code. See the first post in this thread.

Version 0.2 - Updated on 2024.10.18

This is an improved version of first trial and called version 0.2.

I have no more time to improve the code for the moment, so please share your improvement here. You may solve the CSS issue to not bound to host tiddler, add eventcatcher to react to mouse hover, or improve the popup positions.

Best wishes
Mohammad

[arunnbabu81]

@Mohammad @CodaCoder
What I shared previously was just a small experiment done by me some time back. I never used it in any of my wikis. That idea came to my mind when I was reading the posts created by @TW_Tones in Exploring default tiddler links hackability in V5.3.0

I was not good in wikitext related stuff during those times. So there will be many mistakes in that. Also the bulk of the code is taken from @TW_Tones code. I just modified the portion for the popup(including the one with now macro I guess). So obviously there will be scope for lot of improvement in that code to create the popup for links

[CodaCoder]

@arunnbabu81

I was not good in wikitext related stuff during those times. So there will be many mistakes in that.

Yes, I appreciate that. My concern was that the code is sitting there, subsequently followed by Mohammad saying “great start!”. Other users, perhaps even many years from now, might see that and think it’s truly great. And as I said, I had worked out a similar solution but immediately saw the pitfall, and dismissed it – I didn’t post it. For those reasons, I had to share my concerns, so that anyone reading in the future might see there is a potential downside to the concept as it stands.

And really, it is not a “mistake”. It’s a design choice I myself chose and then dismissed, for reasons mentioned above.