Enable opening links defined in item

package.json

@@ -6,6 +6,8 @@
   "description": "",
   "dependencies": {
     "js-levenshtein": "^1.1.6",
+    "linkify-string": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "lit-html": "^3.1.4",
     "qrcode-svg": "^1.1.0",
     "unique-names-generator": "^4.7.1"

straw/closed/enable_opening_links_defined_in_item.md

@@ -0,0 +1,7 @@
+# Enable opening links defined in item
+
+As a user
+I want to click on URL-like strings
+So that I can open links directly from the text.
+
+  #feature

toplist.mjs

@@ -1,4 +1,6 @@
 import { html, render } from "lit-html";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+import linkify from "linkify-string";
 import emojiMap from "./emoji.json";
 import levenshtein from "js-levenshtein";
 import { version } from "./package.json";
@@ -132,7 +134,14 @@ const onListItemClick = (value, isTopList, index) => (event) => {
 const listItem = (isTopList) => (value, index) =>
   html` <li class="list-item">
     <form @submit=${onListItemClick(value, isTopList, index)}>
-      <button>${value} ${someEmoji(value)}</button>
+      <button>
+        ${unsafeHTML(
+          linkify(value, {
+            target: "_blank",
+          }),
+        )}
+        ${someEmoji(value)}
+      </button>
     </form>
   </li>`;