diff --git a/index.html b/index.html index 989abca..5fd06ab 100644 --- a/index.html +++ b/index.html @@ -70,6 +70,7 @@ + diff --git a/models.js b/models.js index dc87869..c2001c8 100644 --- a/models.js +++ b/models.js @@ -99,6 +99,10 @@ class Post extends Record { return this.record.text; } + get facets() { + return this.record.facets; + } + get createdAt() { return new Date(this.record.createdAt); } diff --git a/post_component.js b/post_component.js index 92b35f8..2fe704f 100644 --- a/post_component.js +++ b/post_component.js @@ -100,8 +100,7 @@ class PostComponent { wrapper = content; } - let p = $tag('p.body', { text: this.post.text }); - this.linkifyPostBody(p); + let p = this.buildPostBody(); wrapper.appendChild(p); if (this.post.embed) { @@ -138,18 +137,6 @@ class PostComponent { return div; } - linkifyPostBody(p) { - let html = p.innerHTML; - - html = html.replace(/#((\p{Letter}|\p{Number})+)/gu, (match, tag) => { - let url = new URL(getLocation()); - url.searchParams.set('hash', tag); - return `${match}`; - }); - - p.innerHTML = html; - } - buildPostHeader(context) { let timeFormat = this.timeFormatForTimestamp; let formattedTime = this.post.createdAt.toLocaleString(window.dateLocale, timeFormat); @@ -197,6 +184,27 @@ class PostComponent { return avatar; } + buildPostBody() { + let p = $tag('p.body'); + let richText = new RichText({ text: this.post.text, facets: this.post.facets }); + + for (let seg of richText.segments()) { + if (seg.mention) { + p.append($tag('a', { href: `https://bsky.app/profile/${seg.mention.did}`, text: seg.text })); + } else if (seg.link) { + p.append($tag('a', { href: seg.link.uri, text: seg.text })); + } else if (seg.tag) { + let url = new URL(getLocation()); + url.searchParams.set('hash', seg.tag.tag); + p.append($tag('a', { href: url.toString(), text: seg.text })); + } else { + p.append(seg.text); + } + } + + return p; + } + buildStatsFooter() { let stats = $tag('p.stats');