From 468592f59a9e7494a5a891f3efcdb274b80db2f3 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Thu, 8 Dec 2022 15:57:52 +0100
Subject: [PATCH] fix(ui): display hostname instead of full url (#376)

---
 components/status/StatusPreviewCard.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue
index 1c0403fc..f271f89f 100644
--- a/components/status/StatusPreviewCard.vue
+++ b/components/status/StatusPreviewCard.vue
@@ -6,6 +6,7 @@ const prop = defineProps<{
 }>()
 const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
 const isSquare = $computed(() => prop.card.width === prop.card.height)
+const description = $computed(() => prop.card.description ? prop.card.description : new URL(prop.card.url).hostname)
 
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 </script>
@@ -39,11 +40,8 @@ const isSquare = $computed(() => prop.card.width === prop.card.height)
           {{ card.providerName }}
         </p>
         <strong v-if="card.title" line-clamp-1 text-ellipsis>{{ card.title }}</strong>
-        <p v-if="card.description" text-secondary line-clamp-2 text-ellipsis>
-          {{ card.description }}
-        </p>
-        <p v-else text-secondary line-clamp-2 text-ellipsis>
-          {{ card.url }}
+        <p v-if="description" text-secondary line-clamp-2 text-ellipsis>
+          {{ description }}
         </p>
       </div>
     </NuxtLink>