2022-12-07 18:55:45 +03:00
|
|
|
<script setup lang="ts">
|
|
|
|
import type { Card } from 'masto'
|
|
|
|
|
2022-12-10 00:13:59 +03:00
|
|
|
const props = defineProps<{
|
2022-12-07 18:55:45 +03:00
|
|
|
card: Card
|
2022-12-10 00:13:59 +03:00
|
|
|
/** For the preview image, only the small image mode is displayed */
|
|
|
|
smallPictureOnly?: boolean
|
|
|
|
/** When it is root card in the list, not appear as a child card */
|
|
|
|
root?: boolean
|
2022-12-07 18:55:45 +03:00
|
|
|
}>()
|
2022-12-12 17:55:57 +03:00
|
|
|
const cardImage = computed(() => props.card.image)
|
2022-12-10 00:13:59 +03:00
|
|
|
const alt = $computed(() => `${props.card.title} - ${props.card.title}`)
|
|
|
|
const isSquare = $computed(() => props.smallPictureOnly || props.card.width === props.card.height)
|
2022-12-11 13:52:36 +03:00
|
|
|
const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
|
2022-12-12 17:55:57 +03:00
|
|
|
const imageSrc = ref<string | null>()
|
2022-12-07 18:55:45 +03:00
|
|
|
|
|
|
|
// TODO: handle card.type: 'photo' | 'video' | 'rich';
|
2022-12-11 01:09:11 +03:00
|
|
|
|
2022-12-11 01:27:06 +03:00
|
|
|
// Only try to fetch og:image if the card.image is already provided from mastodon
|
|
|
|
// We only want to improve the image quality
|
2022-12-12 17:55:57 +03:00
|
|
|
watch(cardImage, (image) => {
|
|
|
|
imageSrc.value = image
|
|
|
|
|
|
|
|
if (image) {
|
|
|
|
$fetch<string>('/api/og-image', {
|
|
|
|
params: { cardUrl: props.card.url },
|
|
|
|
}).then((ogImageUrl) => {
|
2022-12-12 18:07:24 +03:00
|
|
|
// eslint-disable-next-line no-console
|
2022-12-12 17:55:57 +03:00
|
|
|
console.log('ogImageUrl', ogImageUrl)
|
|
|
|
|
|
|
|
// Only override if ogImageUrl is not empty
|
|
|
|
if (ogImageUrl)
|
|
|
|
imageSrc.value = ogImageUrl
|
|
|
|
}).catch(() => {})
|
|
|
|
}
|
|
|
|
}, { immediate: true })
|
2022-12-07 18:55:45 +03:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2022-12-10 00:13:59 +03:00
|
|
|
<NuxtLink
|
|
|
|
block
|
|
|
|
of-hidden
|
|
|
|
hover:bg-active
|
|
|
|
:to="card.url"
|
|
|
|
:class="{
|
|
|
|
'flex': isSquare,
|
|
|
|
'p-4': root,
|
|
|
|
'rounded-lg border border-base': !root,
|
|
|
|
}"
|
|
|
|
target="_blank"
|
2022-12-07 18:55:45 +03:00
|
|
|
>
|
2022-12-10 00:13:59 +03:00
|
|
|
<div
|
2022-12-12 17:55:57 +03:00
|
|
|
v-if="imageSrc"
|
2022-12-10 00:13:59 +03:00
|
|
|
flex flex-col
|
|
|
|
display-block of-hidden
|
|
|
|
border="base"
|
|
|
|
:class="{
|
2022-12-11 13:52:36 +03:00
|
|
|
'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': isSquare,
|
2022-12-10 00:13:59 +03:00
|
|
|
'w-full aspect-[1.91] border-b': !isSquare,
|
|
|
|
'rounded-lg': root,
|
|
|
|
}"
|
|
|
|
>
|
2022-12-07 18:55:45 +03:00
|
|
|
<CommonBlurhash
|
|
|
|
:blurhash="card.blurhash"
|
2022-12-12 17:55:57 +03:00
|
|
|
:src="imageSrc"
|
2022-12-07 18:55:45 +03:00
|
|
|
:width="card.width"
|
|
|
|
:height="card.height"
|
|
|
|
:alt="alt"
|
2022-12-10 00:13:59 +03:00
|
|
|
w-full h-full object-cover
|
2022-12-07 18:55:45 +03:00
|
|
|
/>
|
2022-12-10 00:13:59 +03:00
|
|
|
</div>
|
2022-12-11 13:52:36 +03:00
|
|
|
<div
|
|
|
|
v-else
|
|
|
|
min-w-22 w-22 h-22 sm="min-w-32 w-32 h-32" bg="slate-500/10" flex justify-center items-center
|
|
|
|
:class="[
|
|
|
|
root ? 'rounded-lg' : '',
|
|
|
|
]"
|
|
|
|
>
|
2022-12-10 00:13:59 +03:00
|
|
|
<div i-ri:profile-line w="30%" h="30%" text-secondary />
|
|
|
|
</div>
|
|
|
|
<div
|
2022-12-11 13:52:36 +03:00
|
|
|
px3 max-h-2xl
|
2022-12-10 00:13:59 +03:00
|
|
|
flex flex-col
|
2022-12-11 13:52:36 +03:00
|
|
|
:class="[
|
|
|
|
root ? 'flex-gap-1 py1 sm:py3' : 'py3 justify-center sm:justify-start',
|
|
|
|
]"
|
2022-12-10 00:13:59 +03:00
|
|
|
>
|
2022-12-11 13:52:36 +03:00
|
|
|
<p
|
|
|
|
text-secondary ws-pre-wrap break-all
|
|
|
|
:class="[
|
|
|
|
!card.description || root
|
|
|
|
? 'line-clamp-1'
|
|
|
|
: 'hidden sm:line-clamp-1',
|
|
|
|
]"
|
|
|
|
>
|
|
|
|
{{ providerName }}
|
2022-12-10 00:13:59 +03:00
|
|
|
</p>
|
2022-12-11 13:52:36 +03:00
|
|
|
<strong
|
|
|
|
v-if="card.title" font-normal sm:font-medium line-clamp-1
|
|
|
|
break-all ws-pre-wrap
|
|
|
|
>{{ card.title }}</strong>
|
|
|
|
<p
|
|
|
|
v-if="card.description"
|
|
|
|
line-clamp-1 break-all sm:line-clamp-2 sm:break-words text-secondary ws-pre-wrap
|
|
|
|
>
|
|
|
|
{{ card.description }}
|
2022-12-10 00:13:59 +03:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</NuxtLink>
|
2022-12-07 18:55:45 +03:00
|
|
|
</template>
|