feat: initial expanded quoted toot

components/status/StatusPreviewCard.vue

@@ -22,11 +22,15 @@ const isSquare = $computed(() => (
 const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
 
 const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCards))
+
+const isMastodonLink = true
+
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 </script>
 
 <template>
   <StatusPreviewGitHub v-if="gitHubCards && providerName === 'GitHub'" :card="card" />
+  <StatusPreviewMastodon v-else-if="isMastodonLink" :card="card" />
   <NuxtLink
     v-else
     block
@@ -69,6 +73,6 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
     >
       <div i-ri:profile-line w="30%" h="30%" text-secondary />
     </div>
-    <StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" />
+    <StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" :is-square="isSquare" />
   </NuxtLink>
 </template>

components/status/StatusPreviewCardInfo.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   root?: boolean
   /** For the preview image, only the small image mode is displayed */
   provider?: string
+  isSquare?: boolean
 }>()
 </script>
 
@@ -28,7 +29,7 @@ const props = defineProps<{
     >{{ card.title }}</strong>
     <p
       v-if="card.description"
-      line-clamp-1 break-all sm:break-words text-secondary ws-pre-wrap :class="[root ? 'sm:line-clamp-2' : '']"
+      line-clamp-1 break-all sm:break-normal text-secondary ws-pre-wrap sm:line-clamp-2
     >
       {{ card.description }}
     </p>

components/status/StatusPreviewMastodon.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Card } from 'masto'
+
+defineProps<{
+  card: Card
+}>()
+
+/**
+ *  TODO:
+ * - extract username
+ * - generate user profile link
+ * - quotation icon ?
+*/
+</script>
+
+<template>
+  <div
+    v-if="card.image"
+    flex flex-col
+    display-block of-hidden
+    bg-code
+    relative
+    border="base"
+    w-full min-h-50 md:min-h-60 border-b
+    justify-center
+    rounded-lg
+  >
+    <div p4 sm:px-8 flex flex-col justify-between min-h-50 md:min-h-60 h-full>
+      <div flex justify-between items-center gap-2 sm:gap-6 h-full mb-2 min-h-35 md:min-h-45>
+        <div flex flex-col gap-2>
+          <a flex gap-1 text-sm flex-wrap leading-none :href="card.url" target="_blank">
+            <span>{{ card.title }}</span>
+          </a>
+          <a sm:text-lg :href="card.url" target="_blank">
+            <span text-secondary leading-tight>{{ card.description }}</span>
+          </a>
+        </div>
+        <div>
+          <a :href="card.url" target="_blank">
+            <img w-30 aspect-square width="20" height="20" rounded-2 :src="card.image">
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>