From 2a819c6d0c56765361b6f7f56291b866acf02642 Mon Sep 17 00:00:00 2001 From: Shinigami92 Date: Mon, 12 Dec 2022 15:55:57 +0100 Subject: [PATCH] iterate --- .env.example | 2 + components/status/StatusPreviewCard.vue | 31 +-- nuxt.config.ts | 4 +- package.json | 1 + pnpm-lock.yaml | 260 ++++++++++++++++++++++++ server/api/og-image.ts | 19 +- 6 files changed, 297 insertions(+), 20 deletions(-) diff --git a/.env.example b/.env.example index b99ca071..e706b995 100644 --- a/.env.example +++ b/.env.example @@ -10,3 +10,5 @@ NUXT_STORAGE_DRIVER= NUXT_STORAGE_FS_BASE= NUXT_PUBLIC_DISABLE_VERSION_CHECK= + +NUXT_OPENGRAPH_API= diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue index b47a64e2..15044403 100644 --- a/components/status/StatusPreviewCard.vue +++ b/components/status/StatusPreviewCard.vue @@ -8,24 +8,31 @@ const props = defineProps<{ /** When it is root card in the list, not appear as a child card */ root?: boolean }>() -const image = ref(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() // 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 -if (image.value) { - $fetch('/api/og-image', { - params: { cardUrl: props.card.url }, - }).then((ogImageUrl) => { - // Only override if ogImageUrl is not empty - if (ogImageUrl) - image.value = ogImageUrl - }).catch(() => {}) -} +watch(cardImage, (image) => { + imageSrc.value = image + + if (image) { + $fetch('/api/og-image', { + params: { cardUrl: props.card.url }, + }).then((ogImageUrl) => { + console.log('ogImageUrl', ogImageUrl) + + // Only override if ogImageUrl is not empty + if (ogImageUrl) + imageSrc.value = ogImageUrl + }).catch(() => {}) + } +}, { immediate: true })