Linkify messages

components/buffer.js

@@ -1,4 +1,5 @@
 import { html, Component } from "/lib/index.js";
+import linkify from "/lib/linkify.js";
 
 function djb2(s) {
 	var hash = 5381;
@@ -45,10 +46,10 @@ function LogLine(props) {
 			var action = text.slice(actionPrefix.length, -1);
 
 			lineClass = "me-tell";
-			content = html`* <${Nick} nick=${msg.prefix.name}/> ${action}`;
+			content = html`* <${Nick} nick=${msg.prefix.name}/> ${linkify(action)}`;
 		} else {
 			lineClass = "talk";
-			content = html`${"<"}<${Nick} nick=${msg.prefix.name}/>${">"} ${text}`;
+			content = html`${"<"}<${Nick} nick=${msg.prefix.name}/>${">"} ${linkify(text)}`;
 		}
 		break;
 	case "JOIN":
@@ -70,7 +71,7 @@ function LogLine(props) {
 	case "TOPIC":
 		var topic = msg.params[1];
 		content = html`
-			<${Nick} nick=${msg.prefix.name}/> changed the topic to: ${topic}
+			<${Nick} nick=${msg.prefix.name}/> changed the topic to: ${linkify(topic)}
 		`;
 		break;
 	default:

lib/index.js

@@ -3,3 +3,6 @@ export * from "/node_modules/preact/dist/preact.module.js";
 import { h } from "/node_modules/preact/dist/preact.module.js";
 import htm from "/node_modules/htm/dist/htm.module.js";
 export const html = htm.bind(h);
+
+import "/node_modules/anchorme/dist/browser/anchorme.min.js";
+export const anchorme = window.anchorme;

lib/linkify.js

@@ -0,0 +1,28 @@
+import { anchorme, html } from "/lib/index.js";
+
+export default function linkify(text) {
+	var links = anchorme.list(text);
+
+	var children = [];
+	var last = 0;
+	links.forEach((match) => {
+		children.push(text.substring(last, match.start));
+
+		var proto = match.protocol || "https://";
+		if (match.isEmail) {
+			proto = "mailto:";
+		}
+
+		var url = match.string;
+		if (!url.startsWith(proto)) {
+			url = proto + url;
+		}
+
+		children.push(html`<a href=${url} target="_blank" rel="noreferrer noopener">${match.string}</a>`);
+
+		last = match.end;
+	});
+	children.push(text.substring(last));
+
+	return children;
+}

package-lock.json

@@ -3,6 +3,11 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
+    "anchorme": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/anchorme/-/anchorme-2.1.2.tgz",
+      "integrity": "sha512-2iPY3kxDDZvtRzauqKDb4v7a5sTF4GZ+esQTY8nGYvmhAtGTeFPMn4cRnvyWS1qmtPTP0Mv8hyLOp9l3ZzWMKg=="
+    },
     "async": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",

package.json

@@ -1,6 +1,7 @@
 {
   "name": "gamja",
   "dependencies": {
+    "anchorme": "^2.1.2",
     "htm": "^3.0.4",
     "preact": "^10.4.4"
   },