From 1a7337a170d8005274c6541d59112f3fadc3399c Mon Sep 17 00:00:00 2001
From: Amir <eslami.amir76@gmail.com>
Date: Fri, 23 Jul 2021 01:49:56 +0430
Subject: [PATCH] feat(hyperlinking): hyperlinking URLs in the channel
 descriptions

---
 src/components/Channel.vue |  2 +-
 src/main.js                | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 83862448..0bd9c06a 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -4,7 +4,7 @@
     <div v-if="channel" v-show="!channel.error">
         <h1 class="uk-text-center"><img height="48" width="48" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
         <img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
-        <p style="white-space: pre-wrap">{{ channel.description }}</p>
+        <p style="white-space: pre-wrap"><span v-html="urlify(channel.description)"></span></p>
 
         <button
             v-if="authenticated"
diff --git a/src/main.js b/src/main.js
index 87e96af0..aa24d5e6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -158,6 +158,16 @@ const mixin = {
         timeAgo(time) {
             return timeAgo.format(time);
         },
+        urlify(string) {
+            const regex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
+            if (!string) return '';
+            return string.replace(regex, (url) => {
+                if (!url.match('^https?:\\/\\/')) { // If URL does not have http(s), we're adding it manually.
+                    return `<a class="uk-button uk-button-text" href="http://${url}" target="_blank">${url}</a>`
+                }
+                return `<a class="uk-button uk-button-text" href="${url}" target="_blank">${url}</a>`
+            })
+        }
     },
     computed: {
         backgroundColor() {