Enhancement: Fetch link metadata

[JakeCoxon]

Coming from Notion, one really good feature is the ability to convert a link into a 'bookmark'. What it does it fetches metadata from the page and fills in a title, image, summary and icon inline. I use this for collecting links extensively and most pages support this kind of thing.

On the UI side I see it as entirely opt in, so you would have to choose to promote a link into a bookmark, regular url links work as before.

Implementation wise there are libraries to fetch the metadata easily eg https://github.com/mozilla/page-metadata-parser

I'd love to have a go at implementing it if you think it's a welcome addition

[JakeCoxon]

I had a go this weekend, a bit rough around the edges but I think it works well. The only problem is I had to make a custom ckeditor build, and you have a bundle a html parser which is quite big

[zadam]

@JakeCoxon that looks very nice. 

Custom CKEditor build should not be a problem, Trilium also has custom build since it has a bunch of custom plugins.

I wonder why is HTML parser necessary? I mean you can parse HTML using DOM.

Is the metadata available offline? I usually try to be as independent from live internet connection as possible. Besides being useful for offline use this is also valuable for long term use - many websites disappear and with that metadata too ...

[JakeCoxon]

@zadam

I mean you can parse HTML using DOM.

To be honest it didn't really occur to me to do it all on the client. My approach was to make a backend API which you give a URL and it returns title, description, image etc. It uses https://github.com/microlinkhq/metascraper which has a good accuracy. It bundles parse5 as a dependency which seems a bit wasteful but the whole library is 770kb so I suppose it's not that much at the end of the day. Unfortunately metascaper is node js only

Is the metadata available offline?

Yep mostly, the data is stored in the note something like <bookmark title="example" url="example.com" description="..." image="example.com/image.jpg" /> so you can copy and paste it and do whatever. I'd like to also save a copy of the images and favicons locally, so they could either be added as a note under the page like regular images (I don't know if that makes sense), saved in some kind of repository outside the note, or even base 64 encoded directly in the note content (depends on filesize/performance). Any thoughts about that?

BTW where are the custom plugins are they in that repository somewhere?

[zadam]

I'd like to also save a copy of the images and favicons locally, so they could either be added as a note under the page like regular images (I don't know if that makes sense), saved in some kind of repository outside the note, or even base 64 encoded directly in the note content (depends on filesize/performance). Any thoughts about that?

So normally I try to save all images as image notes. For example the Web Clipper will create a note and extract all the images into the sub-notes. But sometimes these images just create "note noise" - e.g. just web design related images are not really useful as separate notes and there can be many of them. Creating too many useless image notes just creates information noise.

I wonder if that's a similar case here - the favicons are sort of low value and not really that useful as a separate note and then I think storing them as base64 inside the note's HTML would be more beneficial. I also expect they are probably very small ...

Custom plugins are in here: https://github.com/zadam/ckeditor5/tree/stable/packages/ckeditor5-build-balloon-block/src

[jgod]

Love this feature. This and emojis are big for me, also coming from Notion.