link-card-preview

KO | EN

gitlite — search

#swift #reactjs #dotnet #vue #c #artificial-intelligence #claude #macos #kubernetes #cross-platform

link-card-preview

(★ 9)

Apple-style rich link cards for Obsidian — in Reading view, Live Preview, and Canvas. Adaptive layouts, dominant-color tinting, offline image caching.

File Explorer

ZIP Download

.gitignore
LICENSE
main.js
manifest.json
README.md
styles.css
versions.json

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Turn bare URLs into Apple-style rich link cards — in Reading view, Live Preview, and Canvas.

Inspired by the link previews in Apple Freeform, Notes, and Bear: clean cards with adaptive layouts, dominant-color tinting, and offline image caching.

Interface available in **English** and **繁體中文** (follows your Obsidian language setting).

## Features

### Three adaptive layouts (like Apple's LinkPresentation)

The card layout is chosen automatically from the fetched image:

- **Large card** — big images render on top (1.91:1, portrait images crop to square), title and domain below
- **Compact card** — small images and icons render as a square thumbnail on the right
- **Text card** — no image at all: a slim row with favicon, title, and domain. No broken-image placeholders, ever.

![Three adaptive card layouts](https://github.com/user-attachments/assets/9dbb8459-5cca-445b-a196-e9e259bfd4b0)

### Canvas support

Pasting a URL onto a Canvas no longer embeds a live web page. The native link node is kept intact in the `.canvas` file (fully portable — disable the plugin and the native behavior returns), but its rendering is replaced with a card:

- Large images fill the node, Freeform-style
- Icon-only sites get an **icon card**: the dominant color fills the whole node, the icon floats in the center, and text color adapts (white on dark colors, dark on light)
- Double-click a card to open the link; single click/drag keeps the native select-and-move behavior
- The bare-URL node label is hidden (the card already shows title and domain)

![Link cards on Canvas](https://github.com/user-attachments/assets/01ce02ca-3483-4921-8b0b-0fd91696c4e1)

### Live Preview support

Cards render in the editor too, with embed-like ergonomics:

- **Click** a card to open the link
- **Hover** shows a pencil button (always visible on mobile) that reveals and selects the raw URL for editing — `Cmd/Ctrl+click` does the same
- Moving the cursor onto the line also reveals the raw URL; moving away restores the card
- While drag-selecting text, revealed URLs stay as plain text — no layout jumping mid-selection

### Dominant-color tinting

Each card extracts the representative color of its image (near-white/near-black filtered out, saturation-weighted) and applies it as a subtle 12% tint to the card background and border — adapting automatically to light and dark themes.

### Robust metadata fetching

- Five-level image resolution: `og:image` → `twitter:image` → `link[rel=image_src]` → lazy-load-aware content image scan (`data-src`, `srcset`, …) → `apple-touch-icon`
- Two-pass User-Agent retry for JavaScript-heavy sites
- Hotlink-protected CDN images (Instagram/Facebook/Twitter) are downloaded and stored locally as base64 — cards keep working offline and after CDN URLs expire
- Images over 300 KB are downscaled before caching
- Metadata, image data, dimensions, and tint colors are cached persistently; each URL is fetched once

### Threads (threads.net / threads.com) extras

- Dedicated fetch chain: oEmbed → Open Graph → JSON-LD → CDN scan
- Post text is shown on the card (for Threads, the description *is* the content)
- Pasting a Threads link in the editor auto-inserts the post text on the next line

### Clean links

Share buttons wrap URLs in tracking parameters. This strips them, so what lands in your notes is the link itself:

```
https://www.instagram.com/p/Da2_-acDG3R/?utm_source=ig_web_copy_link&igsh=NTc4MTIwNjQ2YQ==
→ https://www.instagram.com/p/Da2_-acDG3R/
```

- **On paste** — cleaned the moment you paste, so tracking codes never enter the note. Rich content copied from a web page is left alone, so Obsidian's HTML→Markdown conversion still works
- **Editor right-click** — clean the link under the cursor, the selection, or the whole note (one undo step, cursor and scroll position preserved)
- **Card right-click** — clean or copy the link straight from a card, which also works in Reading view where there is no editor menu
- **Blacklist-based** — only known tracking parameters are removed (`utm_*`, `xmt`, `slof`, `fbclid`, `igsh`, `gclid`, `msclkid`, …). Functional parameters are never touched: YouTube's `?v=`, a store's `?id=`, and signed CDN image URLs all survive. Ambiguous names like `s`, `t`, `si`, and `ref` are only removed on the specific sites where they are tracking
- **Configurable** — add your own parameters to remove, or pin parameters that must always be kept

Threads and Instagram **share links** hide the tracking code in the path rather than the query string, so stripping parameters cannot help:

```
https://www.threads.com/share/BAUTjlwYmA/
→ https://www.threads.com/@cwc1234567/post/DbXureED7MC
```

Restoring these asks the site for the post's canonical URL, so it is the one part of this feature that uses the network — it has its own setting and can be turned off. When a card for that link has already been rendered, the answer is reused from cache and no extra request is made.

## Usage

Paste a URL on its own line (Reading view / Live Preview), or paste a URL onto a Canvas. That's it — the card renders automatically.

**Commands:**

- `Clear link card cache` — wipes cached metadata and images (useful after a site changes its preview image)
- `Clean tracking links in this note` — strips tracking parameters from every URL in the note
- `Restore share links in this note` — expands every Threads/Instagram share link to its original post URL

## Settings

- **Auto-insert Threads post text** (default: on) — when pasting a Threads link in the editor, the post text is fetched and inserted on the line below the link. Turn this off if you prefer the bare link only.
- **Embed YouTube in Canvas** (default: off) — keep the native embedded player for YouTube links on Canvas instead of showing a link card. Other links are unaffected.
- **Enable clean links** (default: on) — master switch for tracking-parameter removal.
- **Clean links on paste** (default: on) — strip tracking parameters at paste time.
- **Restore Threads / Instagram share links** (default: on) — the only part of clean links that uses the network. Turn it off to keep the feature fully offline.
- **Extra parameters to remove** — comma separated, added to the built-in blacklist.
- **Parameters to always keep** — comma separated, never removed. Wins over everything else.

## Network usage disclosure

This plugin makes network requests only for the features below. Nothing is collected, tracked, or sent anywhere else; there is no telemetry.

1. **The URL you paste** (and, for Threads links, the public Threads oEmbed endpoint) — to read page metadata and download the preview image
2. **Google's favicon service** (`www.google.com/s2/favicons`) — to display the site's favicon on the card
3. **Threads / Instagram share links** (clean links, on by default, can be turned off) — a request for the `threads.com/share/…` or `instagram.com/share/…` link being restored, to read its canonical URL

Removing tracking parameters is pure string processing and never touches the network. Fetched metadata is stored locally in the plugin folder, and cached images are written as separate files under `images/`.

## Installation

### From the Community plugin directory

Search for "Link Card Preview" in Settings → Community plugins.

### Manual

Copy `main.js`, `manifest.json`, and `styles.css` into `<your vault>/.obsidian/plugins/link-card-preview/`, then enable the plugin in Settings.

## Notes & limitations

- Sites that render entirely client-side and expose no metadata in their HTML will fall back to a text card (the same limit applies to Apple's own link previews without a logged-in session)
- Inside fenced code blocks, a bare URL on its own line will currently still render as a card in Live Preview
- Dominant-color tinting on directly-linked (non-cached) images requires the host to allow cross-origin reads; otherwise the card stays untinted

## License

MIT

link-card-preview

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README