Refactor about page and improve icons

src/components/user/AboutTab.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { getSetting } from '@/settingsManager'
+import type { Social } from '@/types';
+import type { PropType } from 'vue';
+
+export default {
+    props: {
+        socials: {
+            type: Object as PropType<Social[]>
+        },
+        about: {
+            type: String
+        }
+    },
+    methods: {
+        getSetting,
+        getIconName(iconType: string) {
+            console.log(iconType)
+            const icons = ["Twitter", "instagram", "discord", "youtube", "tiktok", "reddit"]
+            if (icons.includes(iconType)) {
+                return "bi-" + iconType
+            } else {
+                return "bi-link-45deg"
+            }
+        }   
+    }
+}
+</script>
+
+<template>
+    <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
+        <div class="inline-flex w-full">
+            <span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
+        </div>
+
+        <p class="mb-5">{{ about || "No about provided" }}</p>
+
+        <hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
+
+        <ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
+            <li v-if="socials" v-for="link in socials" :key="link.url">
+                <a :href="link.url" class="text-white hover:text-gray-400 mr-4 flex">
+                    <v-icon :name="getIconName(link.type)"  class="w-6 h-6 mr-1"></v-icon>
+                    <span>{{ link.name }}</span>
+                </a>
+            </li>
+            <p v-else> No socials provided </p>
+        </ul>
+    </div>
+</template>

src/main.ts

@@ -24,13 +24,14 @@ import {
   IoSearchOutline,
   BiHeadphones,
   BiCameraVideoFill,
-  IoLink,
+  BiLink45Deg,
   FaCircleNotch,
   BiTwitter,
   BiInstagram,
   BiDiscord,
   BiYoutube,
   BiTiktok,
+  BiReddit,
   BiHeartFill,
   IoPerson
 } from 'oh-vue-icons/icons'
@@ -39,13 +40,14 @@ addIcons(
   IoSearchOutline,
   BiHeadphones,
   BiCameraVideoFill,
-  IoLink,
+  BiLink45Deg,
   FaCircleNotch,
   BiTwitter,
   BiInstagram,
   BiDiscord,
   BiYoutube,
   BiTiktok,
+  BiReddit,
   BiHeartFill,
   IoPerson
 )

src/types/Streamer.ts

@@ -1,5 +1,5 @@
 export interface Social {
-  type: string | null
+  type: string
   name: string
   url: string
 }

src/views/ClipView.vue

@@ -7,6 +7,7 @@ import TwitchChat from '@/components/TwitchChat.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
+import AboutTab from '@/components/user/AboutTab.vue'
 
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -71,7 +72,8 @@ export default {
     TwitchChat,
     ErrorMessage,
     FollowButton,
-    LoadingScreen
+    LoadingScreen,
+    AboutTab
   },
   methods: {
     truncate,
@@ -131,24 +133,7 @@ export default {
       </div>
 
       <!-- ABOUT TAB -->
-      <div class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
+      <about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>     
-        <div class="inline-flex w-full">
-          <span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
-        </div>
-
-        <p class="mb-5">{{ data.streamer.about }}</p>
-
-        <hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
-
-        <ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
-          <li v-for="link in data.streamer.socials" :key="link.url">
-            <a :href="link.url" class="text-white hover:text-gray-400 mr-4">
-              <v-icon :name="`bi-${link.type}`" class="w-6 h-6 mr-1"></v-icon>
-              <span>{{ link.name }}</span>
-            </a>
-          </li>
-        </ul>
-      </div>
     </div>
 
     <!--

src/views/UserView.vue

@@ -9,6 +9,7 @@ import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 import VideoTab from '@/components/user/VideoTab.vue'
 import AudioPlayer from '@/components/AudioPlayer.vue'
+import AboutTab from '@/components/user/AboutTab.vue'
 
 import type { StreamerData } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -66,7 +67,8 @@ export default {
     FollowButton,
     LoadingScreen,
     VideoTab,
-    AudioPlayer
+    AudioPlayer,
+    AboutTab
   },
   methods: {
     truncate,
@@ -170,24 +172,7 @@ export default {
       <video-tab class="mb-4"></video-tab>
 
       <!-- ABOUT TAB -->
-      <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
+      <about-tab :socials="data.socials" :about="data.about"></about-tab>
-        <div class="inline-flex w-full">
-          <span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
-        </div>
-
-        <p class="mb-5">{{ data.about }}</p>
-
-        <hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
-
-        <ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
-          <li v-for="link in data.socials" :key="link.url">
-            <a :href="link.url" class="text-white hover:text-gray-400 mr-4">
-              <v-icon :name="`bi-${link.type}`" class="w-6 h-6 mr-1"></v-icon>
-              <span>{{ link.name }}</span>
-            </a>
-          </li>
-        </ul>
-      </div>
     </div>
 
     <twitch-chat

src/views/VodView.vue

@@ -7,6 +7,7 @@ import TwitchChat from '@/components/TwitchChat.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
+import AboutTab from '@/components/user/AboutTab.vue'
 
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -58,7 +59,8 @@ export default {
     TwitchChat,
     ErrorMessage,
     FollowButton,
-    LoadingScreen
+    LoadingScreen,
+    AboutTab
   },
   methods: {
     truncate,
@@ -119,24 +121,7 @@ export default {
       </div>
 
       <!-- ABOUT TAB -->
-      <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
+      <about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>
-        <div class="inline-flex w-full">
-          <span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
-        </div>
-
-        <p class="mb-5">{{ data.streamer.about }}</p>
-
-        <hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
-
-        <ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
-          <li v-for="link in data.streamer.socials" :key="link.url">
-            <a :href="link.url" class="text-white hover:text-gray-400 mr-4">
-              <v-icon :name="`bi-${link.type}`" class="w-6 h-6 mr-1"></v-icon>
-              <span>{{ link.name }}</span>
-            </a>
-          </li>
-        </ul>
-      </div>
     </div>
 
     <twitch-chat

vite.config.ts

@@ -28,6 +28,9 @@ export default defineConfig({
   build: {
     cssCodeSplit: true
   },
+  optimizeDeps: {
+    exclude: ["oh-vue-icons/icons"]
+  },
   envPrefix: 'SAFETWITCH_',
 })