malice

public

Star0

Fork 0

Watch0

4 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `b8ab00377c20`

tarball

atagen <boss@atagen.co>2026-10-22 13:19 UTC

6 files changed+229-16

web: add a rich link card fed by a link preview map

The card renders title, description and image when a preview exists and falls back to the url-only card otherwise, so the fetch can land later without touching the layout.

Added file: MACLTOK_URL_PREVIEW.md+49 additions@@ -0,0 +1,49 @@
+# macltok request, URL previews via the homeserver
+
+## Problem
+
+Malice's link cards only show the URL's host and path. It wants the page's title, description and image, the way other Matrix clients do. The client can't scrape pages itself. Browsers block it with CORS, and fetching from the malice server would leak its IP to every linked site.
+
+Matrix already solves this with `GET /_matrix/client/v1/media/preview_url?url=...&ts=...` (ruma `authenticated_media::get_media_preview`). The homeserver fetches the page, parses OpenGraph, re-hosts `og:image` as an mxc, and returns the `og:*` keys as a loose JSON map. Knowing that endpoint, which keys matter, and that `og:image` is an mxc is protocol work every consumer would repeat, so it belongs in macltok. Nothing in `ClientHandle` reaches it today.
+
+## Request
+
+```rust
+impl ClientHandle {
+    /// None when the server has no preview for the url (404, empty body, or no usable keys)
+    pub async fn url_preview(&self, url: &str) -> Result<Option<UrlPreview>, Error>;
+}
+
+pub struct UrlPreview {
+    pub url: String,
+    pub title: Option<String>,
+    pub description: Option<String>,
+    pub site_name: Option<String>,
+    pub image: Option<UrlPreviewImage>,
+}
+
+pub struct UrlPreviewImage {
+    /// og:image, already re-hosted by the server, usable with `media` / `media_source`
+    pub media_id: MediaId,
+    pub width: Option<u32>,
+    pub height: Option<u32>,
+    pub mimetype: Option<String>,
+    pub size: Option<u64>,
+}
+```
+
+Things that would help beyond the bare call.
+
+1. Fall back to the legacy `/_matrix/media/v3/preview_url` when the server lacks authenticated media, the same way `media` does.
+2. Cache results per url for a while, including negative ones. Synapse rate-limits this endpoint and a busy timeline repeats links.
+3. Clamp string lengths, since the server passes page text through unfiltered. Something like 256 chars for title and site name, 1024 for description.
+4. Treat `og:image` that isn't an `mxc://` uri as absent.
+5. Map 429 and 5xx to a distinct error, so hosts can tell "try later" from "no preview".
+
+## Optional, room level opt-out
+
+Element honours `org.matrix.room.preview_urls` room state (`{"disable": true}`, set by room admins) and the per-user `org.matrix.preview_urls` room account data. If macltok exposed those on `RoomSummary`, or as `url_previews_allowed(room_id) -> bool`, malice wouldn't need to know the event types.
+
+## Malice side, for context
+
+Malice will call this only in unencrypted rooms by default, with a user setting to also allow it in encrypted ones, because the homeserver sees every previewed url. The image goes through malice's existing bounded media endpoint by `media_id`.

Added file: web/src/lib/LinkCard.stories.ts+76 additions@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/svelte-vite';
+import { expect, waitFor } from 'storybook/test';
+import LinkCard from './LinkCard.svelte';
+import { findUrls } from './urls';
+import type { LinkPreview } from './types';
+
+const BANNER = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630"><defs><linearGradient id="g" x2="1" y2="1"><stop offset="0" stop-color="#7c5cff"/><stop offset="1" stop-color="#ff7ab6"/></linearGradient></defs><rect width="1200" height="630" fill="url(#g)"/><circle cx="900" cy="200" r="120" fill="#fff" opacity=".35"/></svg>'
+)}`;
+const ICON = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="#2b2f3a"/><text x="100" y="128" font-size="96" text-anchor="middle" fill="#fff">🐇</text></svg>'
+)}`;
+
+const IMAGES: Record<string, string> = {
+  'mxc://example.org/banner': BANNER,
+  'mxc://example.org/icon': ICON
+};
+
+const [link] = findUrls('https://example.org/rabbit-hole/chapter-1?ref=matrix');
+
+function preview(overrides: Partial<LinkPreview> = {}): LinkPreview {
+  return {
+    url: link.href,
+    title: 'Down the Rabbit-Hole',
+    description:
+      'Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.',
+    site_name: 'Wonderland Press',
+    image: null,
+    ...overrides
+  };
+}
+
+const meta = {
+  title: 'Timeline/LinkCard',
+  component: LinkCard,
+  args: { link, preview: null, imageUrl: (id: string) => IMAGES[id] ?? `/missing/${encodeURIComponent(id)}` }
+} satisfies Meta<typeof LinkCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const UrlOnly: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole('link')).toHaveAttribute('href', link.href);
+    await expect(canvas.getByText('example.org')).toBeVisible();
+  }
+};
+export const TextOnly: Story = { args: { preview: preview() } };
+export const Thumbnail: Story = {
+  args: { preview: preview({ image: { media_id: 'mxc://example.org/icon', width: 200, height: 200 } }) }
+};
+export const Banner: Story = {
+  args: { preview: preview({ image: { media_id: 'mxc://example.org/banner', width: 1200, height: 630 } }) }
+};
+export const UnknownImageSize: Story = {
+  args: { preview: preview({ image: { media_id: 'mxc://example.org/banner', width: null, height: null } }) }
+};
+export const NoSiteName: Story = {
+  args: { preview: preview({ site_name: null, description: null }) },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('example.org')).toBeVisible();
+    await expect(canvas.getByText('Down the Rabbit-Hole')).toBeVisible();
+  }
+};
+export const ImageFails: Story = {
+  args: { preview: preview({ image: { media_id: 'mxc://example.org/gone', width: 1200, height: 630 } }) },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(canvasElement.querySelector('img')).toBeNull());
+  }
+};
+export const NoUsableText: Story = {
+  args: { preview: preview({ title: null, description: null }) },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText(link.display)).toBeVisible();
+  }
+};

Added file: web/src/lib/LinkCard.svelte+69 additions@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { messageMediaUrl } from './api';
+  import type { LinkPreview } from './types';
+  import type { UrlPreview } from './urls';
+
+  export let link: UrlPreview;
+  export let preview: LinkPreview | null = null;
+  export let imageUrl: (mediaId: string) => string = (mediaId) => messageMediaUrl(mediaId, 'Thumbnail');
+
+  const BANNER_MIN_WIDTH = 320;
+  const BANNER_MIN_ASPECT = 1.3;
+
+  let imageFailed = false;
+
+  $: image = preview?.image && !imageFailed ? preview.image : null;
+  $: imageSrc = image ? imageUrl(image.media_id) : null;
+  $: banner =
+    image !== null &&
+    image.width !== null &&
+    image.height !== null &&
+    image.width >= BANNER_MIN_WIDTH &&
+    image.width / image.height >= BANNER_MIN_ASPECT;
+  $: rich = Boolean(preview && (preview.title || preview.description));
+  $: if (preview) imageFailed = false;
+</script>
+
+<a class="link-card" class:rich class:banner href={link.href} target="_blank" rel="noopener noreferrer">
+  {#if rich && preview}
+    <span class="body">
+      <span class="link-host">{preview.site_name ?? link.hostname}</span>
+      {#if preview.title}<span class="link-title">{preview.title}</span>{/if}
+      {#if preview.description}<span class="link-desc">{preview.description}</span>{/if}
+    </span>
+  {:else}
+    <span class="body">
+      <span class="link-host">{link.hostname}</span>
+      {#if link.path}<span class="link-path">{link.path}</span>{/if}
+      <span class="link-url">{link.display}</span>
+    </span>
+  {/if}
+  {#if imageSrc}
+    <img class="link-image" src={imageSrc} alt="" loading="lazy" on:error={() => (imageFailed = true)} />
+  {/if}
+</a>
+
+<style>
+  .link-card {
+    display: flex; gap: 10px;
+    border: 1px solid var(--border); border-radius: 8px;
+    background: var(--bg-soft); padding: 8px 10px;
+    text-decoration: none; color: var(--text);
+    overflow: hidden;
+  }
+  .link-card.rich { border-left: 3px solid var(--accent); }
+  .link-card.banner { flex-direction: column; }
+  .link-card:hover { border-color: var(--accent); }
+  .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+  .link-host { font-size: 12.5px; font-weight: 650; }
+  .rich .link-host { font-size: 11.5px; font-weight: 600; color: var(--muted); }
+  .link-title { font-size: 14px; font-weight: 650; color: var(--accent); overflow-wrap: anywhere; }
+  .link-desc {
+    font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere;
+    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+  }
+  .link-path { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+  .link-url { font-size: 11.5px; color: var(--accent); overflow-wrap: anywhere; }
+  .link-image { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
+  .banner .link-image { width: 100%; height: auto; max-height: 220px; }
+</style>

Modified file: web/src/lib/MessageRow.stories.ts+18 additions@@ -82,6 +82,24 @@ export const PickerFromToolbar: Story = {
 };
 export const Continuation: Story = { args: { showSender: false } };
 export const WithLink: Story = { args: { event: event(text('Notes are at https://example.org/rabbit-hole')) } };
+export const WithRichLink: Story = {
+  args: {
+    event: event(text('Notes are at https://example.org/rabbit-hole and https://example.net/tea')),
+    linkPreviews: {
+      'https://example.org/rabbit-hole': {
+        url: 'https://example.org/rabbit-hole',
+        title: 'Down the Rabbit-Hole',
+        description: 'Alice was beginning to get very tired of sitting by her sister on the bank.',
+        site_name: 'Wonderland Press',
+        image: null
+      }
+    }
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('Down the Rabbit-Hole')).toBeVisible();
+    await expect(canvas.getByText('example.net')).toBeVisible();
+  }
+};
 export const Reactions: Story = {
   args: {
     event: event(text('Tea party at six'), {

Modified file: web/src/lib/MessageRow.svelte+4 additions−16 deletions@@ -4,8 +4,9 @@
   import Emoji from './Emoji.svelte';
   import EmojiText from './EmojiText.svelte';
   import ReactionPicker from './ReactionPicker.svelte';
+  import LinkCard from './LinkCard.svelte';
   import { mediaUrl } from './api';
-  import type { ImagePack, QuickReaction, SendState, TimelineContent, TimelineEvent } from './types';
+  import type { ImagePack, LinkPreview, QuickReaction, SendState, TimelineContent, TimelineEvent } from './types';
   import { senderLabel } from './types';
   import { formatClock, formatDay, initialsOf, senderHue } from './format';
   import { findUrls } from './urls';
@@ -19,6 +20,7 @@
   export let quickReactions: QuickReaction[] = [];
   export let packs: ImagePack[] = [];
   export let onQuickChange: (list: QuickReaction[]) => void = () => {};
+  export let linkPreviews: Record<string, LinkPreview> = {};
 
   const PICKER_WIDTH = 320;
   const PICKER_HEIGHT = 380;
@@ -266,11 +268,7 @@
       {#if previews.length > 0}
         <div class="link-previews">
           {#each previews as preview (preview.href)}
-            <a class="link-card" href={preview.href} target="_blank" rel="noopener noreferrer">
-              <span class="link-host">{preview.hostname}</span>
-              {#if preview.path}<span class="link-path">{preview.path}</span>{/if}
-              <span class="link-url">{preview.display}</span>
-            </a>
+            <LinkCard link={preview} preview={linkPreviews[preview.href] ?? null} />
           {/each}
         </div>
       {/if}
@@ -327,16 +325,6 @@
   .sendstate { font-size: 11px; color: var(--muted); }
   .sendstate.failed { color: var(--danger); }
   .link-previews { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 420px; }
-  .link-card {
-    display: flex; flex-direction: column; gap: 1px;
-    border: 1px solid var(--border); border-radius: 8px;
-    background: var(--bg-soft); padding: 8px 10px;
-    text-decoration: none; color: var(--text);
-  }
-  .link-card:hover { border-color: var(--accent); }
-  .link-host { font-size: 12.5px; font-weight: 650; }
-  .link-path { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
-  .link-url { font-size: 11.5px; color: var(--accent); overflow-wrap: anywhere; }
   .avatar {
     flex: none;
     width: 34px; height: 34px;

Modified file: web/src/lib/types.ts+13 additions@@ -667,3 +667,16 @@ export interface QuickReaction {
   key: string;
   shortcode: string | null;
 }
+
+export interface LinkPreviewImage {
+  media_id: string;
+  width: number | null;
+  height: number | null;
+}
+export interface LinkPreview {
+  url: string;
+  title: string | null;
+  description: string | null;
+  site_name: string | null;
+  image: LinkPreviewImage | null;
+}

malice

Commit b8ab00377c20

Commit `b8ab00377c20`