peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: linkify resolves '<platform>: @handle' social mentions

Browse Source 
Platform-prefixed handles (x/twitter/instagram/facebook/tiktok/youtube/twitch/threads/
telegram/soundcloud) now link to the platform's profile URL — only the @handle is
linked, the '<platform>:' label stays as text. A required colon/arrow separator + the
known-platform list keep false positives out; a bare @handle with no platform stays plain.
This commit is contained in:
peter
2026-07-19 21:05:00 +02:00
parent 36641b5bc0
commit 1fdc01c0cd
1 changed files with 59 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/linkify.tsx
+59 -29
View File
@@ -1,43 +1,73 @@
import { Fragment, type ReactNode } from "react"; import { Fragment, type ReactNode } from "react";
// Recognises three link shapes in plain text: // Known platform → profile base URL, for "<platform>: @handle" mentions in descriptions.
// 1. explicit http(s):// URLs const PLATFORMS: Record<string, string> = {
// 2. www.* bare hosts x: "https://x.com/",
// 3. domain.tld/path bare URLs — the required path AND a letters-only TLD keep false positives twitter: "https://x.com/",
// (version numbers like "3.2/x", file names like "index.html") from matching. instagram: "https://instagram.com/",
// The last matched char excludes trailing sentence punctuation, so "see foo.com/bar." links insta: "https://instagram.com/",
// "foo.com/bar" and leaves the period. Bare @handles are intentionally NOT linked — the platform ig: "https://instagram.com/",
// is ambiguous. facebook: "https://facebook.com/",
const URL_RE = fb: "https://facebook.com/",
/((?:https?:\/\/|www\.)[^\s<]+[^\s<.,!?;:)\]}"']|[a-z0-9-]+(?:\.[a-z0-9-]+)*\.[a-z]{2,}\/[^\s<]*[^\s<.,!?;:)\]}"'])/gi; tiktok: "https://www.tiktok.com/@",
youtube: "https://www.youtube.com/@",
yt: "https://www.youtube.com/@",
twitch: "https://www.twitch.tv/",
threads: "https://www.threads.net/@",
telegram: "https://t.me/",
soundcloud: "https://soundcloud.com/",
};
// Two link shapes, combined into one scanner:
// URL — explicit http(s):// URLs, www.* hosts, or domain.tld/path bare URLs (required path +
// letters-only TLD keep version numbers / file names out). Non-http gets an https:// href.
// MENTION — "<platform>: @handle" where <platform> is one of the known keys above. The colon/arrow
// separator is REQUIRED, so a stray "x" in prose won't match. Only the @handle is linked
// (to the platform's profile URL); the "<platform>: " label stays as text. Bare @handles
// with no platform, and #hashtags, are left plain.
const URL_SOURCE =
'(?:https?://|www\\.)[^\\s<]+[^\\s<.,!?;:)\\]}"\']|[a-z0-9-]+(?:\\.[a-z0-9-]+)*\\.[a-z]{2,}/[^\\s<]*[^\\s<.,!?;:)\\]}"\']';
const MENTION_SOURCE =
"\\b(" +
Object.keys(PLATFORMS).join("|") +
")\\b[ \\t]*[:：►▶▸]+[ \\t]*@([a-z0-9_](?:[a-z0-9_.]{0,28}[a-z0-9_])?)";
const TOKEN_RE = new RegExp("(" + URL_SOURCE + ")|" + MENTION_SOURCE, "gi");
/** /**
* Turn bare URLs (http(s), www, or domain.tld/path) inside a plain-text string into links that open * Turn links inside a plain-text string into clickable <a>s that open in a new tab (safe rel):
* in a new tab (safe rel). Non-http matches get an https:// prefix on the href, but keep their * bare URLs (http(s)/www/domain.tld/path) and "<platform>: @handle" social mentions. Everything
* original text. Everything else is returned as text, so it composes with `whitespace-pre-wrap`. * else is returned as text, so it composes with `whitespace-pre-wrap` (line breaks preserved).
*/ */
export function linkify(text: string): ReactNode[] { export function linkify(text: string): ReactNode[] {
const out: ReactNode[] = []; const out: ReactNode[] = [];
let last = 0; let last = 0;
let key = 0; let key = 0;
URL_RE.lastIndex = 0; TOKEN_RE.lastIndex = 0;
const link = (href: string, label: string) => (
<a
key={key++}
href={href}
target="_blank"
rel="noopener noreferrer"
className="text-accent hover:underline break-all"
>
{label}
</a>
);
let m: RegExpExecArray | null; let m: RegExpExecArray | null;
while ((m = URL_RE.exec(text)) !== null) { while ((m = TOKEN_RE.exec(text)) !== null) {
if (m.index > last) out.push(<Fragment key={key++}>{text.slice(last, m.index)}</Fragment>); if (m.index > last) out.push(<Fragment key={key++}>{text.slice(last, m.index)}</Fragment>);
const raw = m[0]; if (m[1]) {
const href = /^https?:\/\//i.test(raw) ? raw : `https://${raw}`; // Plain URL.
out.push( const raw = m[1];
<a out.push(link(/^https?:\/\//i.test(raw) ? raw : `https://${raw}`, raw));
key={key++} } else {
href={href} // "<platform>: @handle" — keep the "<platform>: " prefix as text, link only the handle.
target="_blank" const handle = m[3];
rel="noopener noreferrer" out.push(<Fragment key={key++}>{m[0].slice(0, m[0].length - handle.length - 1)}</Fragment>);
className="text-accent hover:underline break-all" out.push(link(PLATFORMS[m[2].toLowerCase()] + handle, "@" + handle));
> }
{raw} last = m.index + m[0].length;
</a>,
);
last = m.index + raw.length;
} }
if (last < text.length) out.push(<Fragment key={key++}>{text.slice(last)}</Fragment>); if (last < text.length) out.push(<Fragment key={key++}>{text.slice(last)}</Fragment>);
return out; return out;