Redirect user to local tag timeline when he clicks on a hashtag

src/api/posts.ts

@@ -46,6 +46,11 @@ export interface Mention {
   url: string;
 }
 
+export interface PostTag {
+  name: string;
+  url: string;
+}
+
 export interface Post {
   id: string;
   uri: string;
@@ -61,6 +66,7 @@ export interface Post {
   reblogs_count: number;
   media_attachments: Attachment[];
   mentions: Mention[];
+  tags: PostTag[];
   favourited: boolean;
   reblogged: boolean;
   ipfs_cid: string | null;

src/components/Post.vue

@@ -277,7 +277,7 @@ onMounted(() => {
   const mentions = postContentRef.getElementsByClassName("mention")
   for (const mentionElement of Array.from(mentions)) {
     const mention = props.post.mentions
-      .find((mention) => mention.url === mentionElement.getAttribute("href"))
+      .find((mention) => mentionElement.getAttribute("href") === mention.url)
     if (mention) {
       mentionElement.addEventListener("click", (event: Event) => {
         event.preventDefault()
@@ -285,6 +285,20 @@ onMounted(() => {
       })
     }
   }
+  const hashtags = postContentRef.getElementsByClassName("hashtag")
+  for (const hashtagElement of Array.from(hashtags)) {
+    const hashtag = props.post.tags
+      .find((tag) => {
+        const innerText = (hashtagElement as HTMLElement).innerText
+        return innerText.toLowerCase() === `#${tag.name}`
+      })
+    if (hashtag) {
+      hashtagElement.addEventListener("click", (event: Event) => {
+        event.preventDefault()
+        router.push({ name: "tag", params: { tagName: hashtag.name } })
+      })
+    }
+  }
   const quote = props.post.quote
   if (quote) {
     const quotes = postContentRef.querySelectorAll(".quote-inline a")