Extract urls in person.about

src/relay/index.js

@@ -1,9 +1,8 @@
 import {liveQuery} from 'dexie'
-import extractUrls from 'extract-urls'
 import {get} from 'svelte/store'
 import {uniq, pluck, intersection, sortBy, propEq, uniqBy, groupBy, concat, without, prop, isNil, identity} from 'ramda'
-import {ensurePlural, first, createMap, ellipsize} from 'hurdak/lib/hurdak'
-import {escapeHtml} from 'src/util/html'
+import {ensurePlural, createMap, ellipsize} from 'hurdak/lib/hurdak'
+import {renderContent} from 'src/util/html'
 import {filterTags, displayPerson, getTagValues, findReply, findRoot} from 'src/util/nostr'
 import {db} from 'src/relay/db'
 import pool from 'src/relay/pool'
@@ -155,23 +154,8 @@ const renderNote = async (note, {showEntire = false}) => {
   // Ellipsize
   content = shouldEllipsize ? ellipsize(note.content, 500) : note.content
 
-  // Escape html
-  content = escapeHtml(content)
-
-  // Extract urls
-  for (const url of extractUrls(content) || []) {
-    const $a = document.createElement('a')
-
-    $a.href = url
-    $a.target = "_blank noopener"
-    $a.className = "underline"
-
-    /* eslint no-useless-escape: 0 */
-    $a.innerText = first(url.replace(/https?:\/\/(www\.)?/, '').split(/[\/\?#]/))
-
-    // If the url is on its own line, remove it entirely. Otherwise, replace it with the link
-    content = content.replace(url, $a.outerHTML)
-  }
+  // Escape html, replace urls
+  content = renderContent(content)
 
   // Mentions
   content = content

src/routes/Person.svelte

@@ -4,6 +4,7 @@
   import {fly} from 'svelte/transition'
   import {navigate} from 'svelte-routing'
   import {now} from 'src/util/misc'
+  import {renderContent} from 'src/util/html'
   import {displayPerson} from 'src/util/nostr'
   import Tabs from "src/partials/Tabs.svelte"
   import Button from "src/partials/Button.svelte"
@@ -67,7 +68,7 @@
             <i class="fa-solid fa-sliders cursor-pointer" on:click={openAdvanced} />
           {/if}
         </div>
-        <p>{getPerson().about || ''}</p>
+        <p>{@html renderContent(getPerson().about || '')}</p>
       </div>
       <div class="whitespace-nowrap">
         {#if $user?.pubkey === pubkey}

src/util/html.js

@@ -1,3 +1,6 @@
+import extractUrls from 'extract-urls'
+import {first} from 'hurdak/lib/hurdak'
+
 export const copyToClipboard = text => {
   const {activeElement} = document
   const input = document.createElement("textarea")
@@ -84,3 +87,25 @@ export const fromParentOffset = (element, offset) => {
     offset -= child.textContent.length
   }
 }
+
+export const renderContent = content => {
+  // Escape html
+  content = escapeHtml(content)
+
+  // Extract urls
+  for (const url of extractUrls(content) || []) {
+    const $a = document.createElement('a')
+
+    $a.href = url
+    $a.target = "_blank noopener"
+    $a.className = "underline"
+
+    /* eslint no-useless-escape: 0 */
+    $a.innerText = first(url.replace(/https?:\/\/(www\.)?/, '').split(/[\/\?#]/))
+
+    // If the url is on its own line, remove it entirely. Otherwise, replace it with the link
+    content = content.replace(url, $a.outerHTML)
+  }
+
+  return content
+}

src/views/SearchPeople.svelte

@@ -1,7 +1,9 @@
 <script>
   import {prop} from 'ramda'
   import {fly} from 'svelte/transition'
+  import {ellipsize} from 'hurdak/lib/hurdak'
   import {fuzzy} from "src/util/misc"
+  import {renderContent} from "src/util/html"
   import {displayPerson} from "src/util/nostr"
   import {user, people} from 'src/relay'
 
@@ -23,7 +25,7 @@
           style="background-image: url({p.picture})" />
         <div class="flex-grow">
           <h1 class="text-2xl">{displayPerson(p)}</h1>
-          <p>{p.about || ''}</p>
+          <p>{@html renderContent(ellipsize(p.about || '', 140))}</p>
         </div>
       </a>
     <li>