From 90f29dce3d675f850e48ede2edb187e6c53b84da Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Mon, 2 Mar 2026 19:26:41 -0800 Subject: parse links --- src/components/ChatMessage.svelte | 87 +++++++++++++ src/components/Event.svelte | 2 + src/lib/parseContent.ts | 162 ++++++++++++++++++++++++ src/routes/(app)/messages/[pubkey]/+page.svelte | 7 +- src/routes/(app)/tag/[tag]/+page.svelte | 50 ++++++++ 5 files changed, 306 insertions(+), 2 deletions(-) create mode 100644 src/components/ChatMessage.svelte create mode 100644 src/lib/parseContent.ts create mode 100644 src/routes/(app)/tag/[tag]/+page.svelte (limited to 'src') diff --git a/src/components/ChatMessage.svelte b/src/components/ChatMessage.svelte new file mode 100644 index 00000000..7283430f --- /dev/null +++ b/src/components/ChatMessage.svelte @@ -0,0 +1,87 @@ + + +{#each parts as { type, value }} + {#if type === "text"} + {value} + {:else if type === "newline"} +
+ {:else if type === "link"} + {#if isImage(value.url)} + + + + {:else if isVideo(value.url)} + + + {:else if isAudio(value.url)} + + {:else} + {truncUrl(value.url)} + {/if} + {:else if type === "topic"} + #{value} + {:else if type.match(/^nostr:n(profile|pub)$/)} + {#await resolveName(value.pubkey)} + @{value.pubkey.slice(0, 8)}... + {:then name} + {name} + {/await} + {:else if type === "nostr:note"} + nostr:{value.entity?.slice(0, 16)}... + {:else if type === "nostr:nevent"} + nostr:{value.entity?.slice(0, 16)}... + {/if} +{/each} + + diff --git a/src/components/Event.svelte b/src/components/Event.svelte index 7a9c75d4..9d25e26e 100644 --- a/src/components/Event.svelte +++ b/src/components/Event.svelte @@ -70,6 +70,8 @@ {value} {:else if type === "link"} + {:else if type === "topic"} + #{value} {:else if type.match(/^nostr:np(rofile|ub)$/)} @{names[value.pubkey]} {/if} diff --git a/src/lib/parseContent.ts b/src/lib/parseContent.ts new file mode 100644 index 00000000..13f33b83 --- /dev/null +++ b/src/lib/parseContent.ts @@ -0,0 +1,162 @@ +import { nip19 } from "nostr-tools"; + +export const NEWLINE = "newline"; +export const TEXT = "text"; +export const TOPIC = "topic"; +export const LINK = "link"; +export const INVOICE = "invoice"; +export const NOSTR_NOTE = "nostr:note"; +export const NOSTR_NEVENT = "nostr:nevent"; +export const NOSTR_NPUB = "nostr:npub"; +export const NOSTR_NPROFILE = "nostr:nprofile"; +export const NOSTR_NADDR = "nostr:naddr"; + +const first = (list: any) => (list ? list[0] : undefined); + +export const fromNostrURI = (s: string) => s.replace(/^[\w+]+:\/?\/?/, ""); + +export const urlIsMedia = (url: string) => + !url.match(/\.(apk|docx|xlsx|csv|dmg)/) && url.split("://").pop()?.includes("/"); + +export type ParsedPart = { + type: string; + value: any; +}; + +export const isImage = (url: string) => url?.match(/^.*\.(jpg|jpeg|png|webp|gif|avif|svg)/gi); +export const isVideo = (url: string) => url?.match(/^.*\.(mov|mkv|mp4|avi|m4v|webm)/gi); +export const isAudio = (url: string) => url?.match(/^.*\.(ogg|mp3|wav)/gi); + +type ContentArgs = { + content: string; + tags?: Array<[string, string, string]>; +}; + +export const parseContent = ({ content, tags = [] }: ContentArgs): ParsedPart[] => { + const result: ParsedPart[] = []; + let text = content.trim(); + let buffer = ""; + + const parseNewline = () => { + const newline = first(text.match(/^\n+/)); + if (newline) { + return [NEWLINE, newline, newline]; + } + }; + + const parseMention = () => { + const mentionMatch = text.match(/^#\[(\d+)\]/i); + if (mentionMatch) { + const i = parseInt(mentionMatch[1]); + if (tags[i]) { + const [tag, value, url] = tags[i]; + const relays = url ? [url] : []; + + let type, data, entity; + try { + if (tag === "p") { + type = "nprofile"; + data = { pubkey: value, relays }; + entity = nip19.nprofileEncode(data); + } else { + type = "nevent"; + data = { id: value, relays, pubkey: null }; + entity = nip19.neventEncode(data); + } + } catch { + /**/ + } + + return [`nostr:${type}`, mentionMatch[0], { ...data, entity }]; + } + } + }; + + const parseTopic = () => { + const topic = first(text.match(/^#\w+/i)); + if (topic && !topic.match(/^#\d+$/)) { + return [TOPIC, topic, topic.slice(1)]; + } + }; + + const parseBech32 = () => { + const bech32 = first( + text.match(/^(web\+)?(nostr:)?\/?\/?n(event|ote|profile|pub|addr)1[\d\w]+/i), + ); + + if (bech32) { + try { + const entity = fromNostrURI(bech32); + const { type, data } = nip19.decode(entity) as { + type: string; + data: object; + }; + + let value = data; + if (type === "note") { + value = { id: data }; + } else if (type === "npub") { + value = { pubkey: data }; + } + + return [`nostr:${type}`, bech32, { ...value, entity }]; + } catch (e) { + console.log(e); + } + } + }; + + const parseUrl = () => { + const raw = first(text.match(/^([a-z+:]{2,30}:\/\/)?[^\s]+\.[a-z]{2,6}[^\s]*[^.!?,:\s]/gi)); + + if (raw) { + const prev = result[result.length - 1]; + + if (prev?.type === "text" && prev.value.endsWith("/")) { + return; + } + + let url = raw; + + if (url.match(/\.\./)) { + return; + } + + if (!url.match("://")) { + url = "https://" + url; + } + + return [LINK, raw, { url, isMedia: urlIsMedia(url) }]; + } + }; + + while (text) { + const part = + parseNewline() || + parseMention() || + parseTopic() || + parseBech32() || + parseUrl(); + + if (part) { + if (buffer) { + result.push({ type: "text", value: buffer }); + buffer = ""; + } + + const [type, raw, value] = part; + result.push({ type, value }); + text = text.slice(raw.length); + } else { + const match = first(text.match(/^[\w\d]+ ?/i)) || text[0]; + buffer += match; + text = text.slice(match.length); + } + } + + if (buffer) { + result.push({ type: TEXT, value: buffer }); + } + + return result; +}; diff --git a/src/routes/(app)/messages/[pubkey]/+page.svelte b/src/routes/(app)/messages/[pubkey]/+page.svelte index 6f0ad7f3..52e032be 100644 --- a/src/routes/(app)/messages/[pubkey]/+page.svelte +++ b/src/routes/(app)/messages/[pubkey]/+page.svelte @@ -9,6 +9,7 @@ import { pTagKeys } from "$lib/nostr"; import { t } from "$lib/translations"; import { theme } from "$lib/store"; + import ChatMessage from "$comp/ChatMessage.svelte"; const focus = (el: HTMLElement) => el.focus(); @@ -238,7 +239,7 @@
- {rumour.content} + {TIME.format(new Date(rumour.created_at * 1000))} @@ -259,7 +260,7 @@
- {rumour.content} + {TIME.format(new Date(rumour.created_at * 1000))} @@ -432,6 +433,8 @@ width: fit-content; max-width: 75%; border-radius: 10px; + overflow: hidden; + word-break: break-word; } .light-message { diff --git a/src/routes/(app)/tag/[tag]/+page.svelte b/src/routes/(app)/tag/[tag]/+page.svelte new file mode 100644 index 00000000..f2e50c6c --- /dev/null +++ b/src/routes/(app)/tag/[tag]/+page.svelte @@ -0,0 +1,50 @@ + + +
+

#{tag}

+ +
+ {#each events as event (event.id)} + + {/each} +
+
-- cgit v1.2.3