Advanced bookmarking: combining LinkPreview API with TiddlyWIki?

[Odin]

Hello all!

For a project I am thinking of having a go at, I would like to have some sort of bookmarking. Where the user can add a URL of a newsarticle, and after pressing a button, a tiddler gets generated automatically with some info of that site.

https://www.linkpreview.net/ provided an API that generates a Json with info that would make it easy to create a tiddler I think. Here is an example:

{
   "title":"Google",
   "description":"Search webpages, images, videos and more.",
   "image":"https://www.google.com/images/logo.png",
   "url":"https://www.google.com"
}

The goal is to use the tiddler as a little card, just like when you paste a URL in a whatsapp or twitter message, it generates a preview. It would also open up possibilities as a bookmaker plugin where you don’t have to manually enter the info.

I mostly have experience with wikitext, some basic understanding of javascript and the documentation provides a sample script. I know that in tiddlywiki, you can’t manipulate the DOM with javascript. But is it possible to connect some javascript to a button widget? If so, do you have some pointers, of an example I can base it of?

Mostly trying to confirm if this idea is feasible before committing a weekend to it

[EricShulman]

The following is not actually an answer to your question, but is an example of a quick “bookmarker” using the $droppable widget.

\define make_bookmark()
[ext[$(actionTiddler)$]]<br>
<iframe src="$(actionTiddler)$" style="width:100%;height:70vh;"></iframe>
\end

<$droppable actions="<$action-createtiddler $basetitle=<<actionTiddler>> text=<<make_bookmark>> />">
   <span title="drop URL here to create a bookmark">{{$:/core/images/link}}</span>
</$droppable>

To use, just drag a URL from your browser’s address bar and drop it on the “link” icon.

It will automatically create a tiddler using the URL as the tiddler title and containing an external link to the URL as well as an iframe for embedding the site within the tiddler.

Note: many URLs block the use of iframes to display their site and will display “connection refused” instead of showing the site content.

[TW_Tones]

I am not sure but suggest you have a look at the richlinks plugin which may be in the direction you are after.

[telumire]

@Odin

But is it possible to connect some javascript to a button widget?

Yes, one way to do it is to create a javascript macro. Here’s an “hello world” example :

exports.name = "helloworld";

exports.params = [];

exports.run = function() {
 return "Hello World!";
};

In a tiddler with the type application/javascript and a field module-type set to macro.

Now you can use your macro in a button widget :

<$button set=<<unusedtitle baseName:"hello">> setTo=<<helloworld>> >

Create a new tiddler with the output of the macro helloworld

</$button>

There are probably much better ways to do this, so I hope someone more knowledgeable than me will provide some tips ^^

[Odin]

Thanks Eric and Tones for the reply! I am not looking for using Iframes. Instead, I want to use javascript to get a json with information with I want to create a tiddler from.

@telumire I copied your example to test, but the new tiddlers created are empty and titled ‘hello’, which should be ‘Hello World’ right? (i reloaded the entire wiki to load the new macro) Did we miss something?

[telumire]

Sometimes you need to reload the tab two times, try again.
You can test it out here : https://jstw.tiddlyhost.com/

[Mark_S]

Because the result is asynchronous, you can’t use a javascript macro. It would have to be a a widget. But it should be possible. Here’s code for a javascript macro that demonstrates the basic concept. Be sure to have a backup before trying:

/*\
title: link-info
type: application/javascript
module-type: macro

Macro to return a formatted version of the current time

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

/*
Information about this macro
*/

exports.name = "linkinfo";

exports.params = [
	{name: "url"}
];

/*
Run the macro
*/
exports.run = function(url) {
	return loadXMLDoc(url) ;
};

var xmlhttp;
function loadXMLDoc(url)
{
    xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
      xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
      xmlhttp.onreadystatechange=state_Change;
      xmlhttp.open("GET",url,true);
      xmlhttp.send(null);
      xmlhttp.responseTest ;
  }
else
  {
      alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{ //console.log(xmlhttp.readyState) ;
    if (xmlhttp.readyState==4)
      {// 4 = "loaded"
alert(xmlhttp.responseText) ;
          if (xmlhttp.status==200)
            {// 200 = OK
             //xmlhttp.data and shtuff
            // ...our code here...
        }
  else
        {
            alert("Problem retrieving data");
        }
  }
}


})();

You put this code in a tiddler with type application/javascript and module-type macro. Then save and reload. When Invoked like:

<<linkinfo "http://api.linkpreview.net/?key=123456&q=https://www.google.com">>

It pops up an alert showing you the JSON info. Maybe this will inspire someone with a more agile mind to write the widget

[Odin]

@Mark_S

Hey thanks! This is good inspiration

[Mark_S]

I have a widget now, just to demonstrate that it is possible. I have no idea how many sacred rules of TW development I have broken, or if it will scale.

Import this into your disposable TW file, save, and reload. In “Test Tiddler” click on the button. There will be an alert message which I forgot to get rid of, and a brand new tiddler will be created with the JSON string as contents.

The next steps would be to get rid of the alert, parse the JSON into fields, and change the url input so you don’t have to enter the “preview” part by hand. But I have to do other things for awhile.

tiddlylink2021-12-18.json (6.0 KB)

[Mark_S]

This version creates a tiddler with fields preview-title, url, description, and image. That’s enough that someone could create a template to view the tiddler as a site preview, like we get when quoting sites in Discourse.

It uses the returned title as the tiddler title by default, but you can specify your own base title if you prefer (the widget is based on ActionCreateTiddler and mostly works the same). You need to set up an account with LinkPreview to get a key. The supplied key 123456 just works with google (maybe youtube?).

tiddlylink2021-12-19.json (7.2 KB)

[Mark_S]

I’ve updated the launch screen, adapted the drag/drop from Eric, and added my own template for displaying links. I’m sure someone else could do much better with the aesthetics. Sadly, our own TiddlyWiki.com doesn’t return an image or a description.

[Odin]

Hi @Mark_S !

here’s my take on a template for showing bookmarks:

Each card has a little growing animation on hover. Clicking the card opens the link in a new tab. Clicking the little info icon opens the tiddler where the bookmark is stored in.

Try it on tiddlywiki.com with this json: bookmark template example.json (2.9 KB)
Feel free to use it!

[Mark_S]

That’s a really nice template! I’m sure most people will prefer that to my “Best HTML Practices (1990 ed.)” approach.

You might consider using “preview-title” instead of title for the display title. If you click the button or drag/drop the same URL a second time the process avoids overwriting the old tiddler by making a new tiddler with a number affixed. But the ‘preview-title’ field keeps the original, complete title.

[Mark_S]

This packages up Eric’s adapted drag/drop zone, gives you a choice to view items with Odin’s template or mine, and includes sample previews.

I’m not sure if the widget can be used from node or that will cause a cross-domain conflict. The error-catching part needs work. But maybe this can useful to someone.

tiddlylink2021-12-22.json (12.5 KB)

[joshuafontany]

Neat. On Node, you could have the server fetch the preview data. I was experimenting with similar things with Bob before I started re-writing a real-time backend. Will come back and check this one out.

[hoelzro]

Sorry if this is hijacking the thread, but I wanted to chime in about a plugin I wrote to do something like this last year, in case any of you find it helpful in terms of looking at the code or the general ideas behind it. I called it “First Class URLs”: GitHub - hoelzro/tiddlywiki-first-class-urls: An experimental plugin to make importing tiddlers easier

The name is a bit of a misnomer - all I use it for is dragging or pasting URLs into my wiki and creating tiddlers with information automatically populated from metadata in the target URL’s HTML via some Node-side code as @joshuafontany suggested. The code is…not great, but I’m happy to answer any questions about it, and I hope it proves useful!

[TW_Tones]

@hoelzro I will have to install node to look, can you share a short video example please?

I am very interested and currently use bob.exe to host node wikis so may need a separate install.

• I recently also started using chrome as follows; chrome:favicon/https://domainname to extract icon files, but there are other methods, but this would help in your solution to make the links graphically meaningful as well (If you are not already doing this.
• I would be keen to know if your solution can pull additional html data see this topic Thinking outside the box, well outside TiddlyWiki - wiki tags to allow rich links to other tiddlywikis.

[hoelzro]

@TW_Tones Sure, here’s an example of the plugin in action: first class urls example - YouTube

It might work with bob as long as bob can load custom route modules and import Node modules; I’m not sure if this is the case or not! I have a goal of removing the Node-side route if I can, since I have to drag in a bunch of npm dependencies for the HTML processing

I originally wanted to have custom/nice rendering of links brought in via this plugin, but I have focused almost entirely on the import and metadata extraction stuff - I think it wouldn’t be super hard to add extra metadata to at least allow other plugins akin to richlinks to display a domain’s favicon.

Regarding your second question, I’ll have to read your thread when I have a little more time, but one of the current weaknesses of the plugin is, ironically, importing data from other TiddlyWikis! I’d like to fix that in a new release, but I sadly haven’t had a lot of time for this plugin lately.

[TW_Tones]

@hoelzro when or if you do look at recognising tw do ask. We can do quite a bit with the raw tags or even alter the html file via the save template.

Ps looks great in the video.

[linonetwo]

Nice viewtemplate, I can see you have created a mark/previewlink-template tiddler, but how did you make these tiddler rendered by the template? I try delete all the tags, but it still rendered using your template.

---

P.S. you may interested in GitHub - cbroms/link-previews: Link previews everywhere. , which write a aws worker that can run in GitHub - cloudflare/miniflare: 🔥 Fully-local simulator for Cloudflare Workers . And you can open his website to try his aws worker (don’t abuse it). And I made a link preview plugin based on this worker tiddlywiki-plugins/plugins/linonetwo/preview-website at master · tiddly-gittly/tiddlywiki-plugins · GitHub