diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue index a79aba94..716bb83d 100644 --- a/components/status/StatusPreviewCard.vue +++ b/components/status/StatusPreviewCard.vue @@ -8,30 +8,13 @@ const props = defineProps<{ /** When it is root card in the list, not appear as a child card */ root?: boolean }>() -const cardImage = computed(() => props.card.image) +const cardImage = $computed(() => props.card.image) const alt = $computed(() => `${props.card.title} - ${props.card.title}`) const isSquare = $computed(() => props.smallPictureOnly || props.card.width === props.card.height) const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname) -const imageSrc = ref() +const imageSrcset = $computed(() => props.card.image ? `${props.card.image}, /api/og-image/${encodeURIComponent(props.card.url)} 2x` : '') // TODO: handle card.type: 'photo' | 'video' | 'rich'; - -// Only try to fetch og:image if the card.image is already provided from mastodon -// We only want to improve the image quality -watch(cardImage, (image) => { - imageSrc.value = image - - if (image) { - $fetch(`/api/og-image/${encodeURIComponent(props.card.url)}`).then((ogImageUrl) => { - // eslint-disable-next-line no-console - console.log('ogImageUrl', ogImageUrl) - - // Only override if ogImageUrl is not empty - if (ogImageUrl) - imageSrc.value = ogImageUrl - }).catch(() => {}) - } -}, { immediate: true })