malice

<script lang="ts">

  import { messageMediaUrl } from './api';

  import EmojiText from './EmojiText.svelte';

  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"><EmojiText text={preview.site_name ?? link.hostname} /></span>

      {#if preview.title}<span class="link-title"><EmojiText text={preview.title} /></span>{/if}

      {#if preview.description}<span class="link-desc"><EmojiText text={preview.description} /></span>{/if}

    </span>

  {:else}

    <span class="body">

      <span class="link-host"><EmojiText text={link.hostname} /></span>

      {#if link.path}<span class="link-path"><EmojiText text={link.path} /></span>{/if}

      <span class="link-url"><EmojiText text={link.display} /></span>

    </span>

  {/if}

  {#if imageSrc}

    <img class="link-image" src={imageSrc} alt="" width={image?.width ?? undefined} height={image?.height ?? undefined} loading="lazy" on:error={() => (imageFailed = true)} />

  {/if}

</a>

<style>

  .link-card {

    display: flex; gap: 10px;

    border: 1px solid var(--border); border-radius: var(--r-md);

    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: var(--r-sm); }

  .banner .link-image { width: 100%; height: auto; max-height: 220px; }

</style>