https://github.com/pengx17/logseq-plugin-link-preview

Preview links in logseq
https://github.com/pengx17/logseq-plugin-link-preview

logseq plugin

Last synced: about 2 months ago
JSON representation

Preview links in logseq

• Host: GitHub
• URL: https://github.com/pengx17/logseq-plugin-link-preview
• Owner: pengx17
• License: mit
• Created: 2021-08-18T09:47:20.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-03-25T02:02:18.000Z (9 months ago)
• Last Synced: 2024-10-12T19:13:45.315Z (2 months ago)
• Topics: logseq, plugin
• Language: TypeScript
• Homepage:
• Size: 9.39 MB
• Stars: 119
• Watchers: 3
• Forks: 17
• Open Issues: 26
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-logseq - logseq-plugin-link-prerview - add external link preview using OpenGraph metadata (🔌 Plugins)

README

        
# Logseq Plugin Link Preview

A simple plugin to show basic link information (based on [OpenGraph Protocol](https://ogp.me/)) for external links in Logseq.

By default when it is enabled, when you hovering any external link in Logseq, it will show the link preview.

Also this plugin will register a `Convert to Link Card` command for you to convert the link to a link card.

![](hover-demo.png)

## Features

- Show link preview when hovering any external link in Logseq

- Convert the link to a link card when you use the `Convert to Link Card` command

- Cache the results locally

- Light & dark theme

## Demo

![](./demo.gif)

## How does this plugin work?

There are two modes of this plugin:

- Hovering mode

- Macro mode

The two modes are working very differently, but they codes are mostly shared.

### Hovering Mode

It will register `mouseenter` and `mouseleave` events on all external links in the main document of Logseq. Note, in this step this plugin uses a unsafe `top` context of the main document, which might not work in the future.

In the listener, the plugin will extract the `href` attribute of the link and send a request to an API server to get the link information (the OpenGraph metadata).

Once the api returns with the link metadata (e.g., title, description, image), the plugin will

- render them in the plugin iframe

- resize the iframe and move its position to the hovering link

### Macro Mode

Typically, user will use slash command to create a custom renderer Marco `:linkpreview` with the URL as the argument

```html

{{renderer :linkpreview,https://google.com}}

```

When it is rendered, the `logseq.App.onMacroRendererSlotted` hook will fetch the link information from the API server and render it with `ReactDomServer.renderToString` method into the slot. The plugin will register the styles into the global context.