feat: improve status image quality

.env.example

@@ -10,3 +10,5 @@ NUXT_STORAGE_DRIVER=
 NUXT_STORAGE_FS_BASE=
 
 NUXT_PUBLIC_DISABLE_VERSION_CHECK=
+
+NUXT_OPENGRAPH_API=

components/common/CommonBlurhash.ts

@@ -17,7 +17,7 @@ export default defineComponent({
       required: false,
     },
   },
-  setup(props, { attrs }) {
+  setup(props, { attrs, emit }) {
     const placeholderSrc = ref<string>()
     const isLoaded = ref(false)
 
@@ -26,6 +26,9 @@ export default defineComponent({
       img.onload = () => {
         isLoaded.value = true
       }
+      img.onerror = (ev) => {
+        emit('onerror', ev)
+      }
       img.src = props.src
       if (props.srcset)
         img.srcset = props.srcset

components/status/StatusPreviewCard.vue

@@ -8,9 +8,15 @@ 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 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 useFallback = ref(false)
+const imageSrcset = $computed(() => props.card.image
+  ? `${props.card.image}${useFallback.value ? '' : `, /api/og-image/${encodeURIComponent(props.card.url)} 2x`}`
+  : '',
+)
 
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 </script>
@@ -29,7 +35,7 @@ const providerName = $computed(() => props.card.providerName ? props.card.provid
     target="_blank"
   >
     <div
-      v-if="card.image"
+      v-if="cardImage"
       flex flex-col
       display-block of-hidden
       border="base"
@@ -41,11 +47,14 @@ const providerName = $computed(() => props.card.providerName ? props.card.provid
     >
       <CommonBlurhash
         :blurhash="card.blurhash"
-        :src="card.image"
+        :src="cardImage"
+        :srcset="imageSrcset"
         :width="card.width"
         :height="card.height"
         :alt="alt"
-        w-full h-full object-cover
+        w-full
+        h-full object-cover
+        @onerror="useFallback = true"
       />
     </div>
     <div

nuxt.config.ts

@@ -65,6 +65,7 @@ export default defineNuxtConfig({
       namespaceId: '',
       apiToken: '',
     },
+    opengraphApi: '',
     public: {
       env: isCI ? isPreview ? 'staging' : 'production' : 'local',
       translateApi: '',
@@ -86,6 +87,14 @@ export default defineNuxtConfig({
       crawlLinks: false,
       routes: ['/', '/200.html'],
     },
+    routeRules: {
+      '/api/og-image/**': {
+        static: isCI,
+        cache: !isCI
+          ? { maxAge: 86400 } // 1 day
+          : {},
+      },
+    },
   },
   app: {
     keepalive: true,

opengraph-io.d.ts

@@ -0,0 +1,21 @@
+// TODO @Shinigami92 2022-12-12: @Shinigami92 might add @types/opengraph-io to DefinitelyTyped
+// Or directly to the repo
+
+declare module 'opengraph-io' {
+    function opengraph(options: {
+        appId: string
+        fullRender?: boolean
+    }): {
+        getSiteInfo(url: string): Promise<{
+            hybridGraph: {
+                image: string
+            },
+            openGraph: {
+                image: {
+                    url: string
+                }
+            }
+        }>
+    }
+    export = opengraph
+}

package.json

@@ -68,6 +68,7 @@
     "lru-cache": "^7.14.1",
     "masto": "^4.7.5",
     "nuxt": "^3.0.0",
+    "opengraph-io": "~2.0.0",
     "pinia": "^2.0.27",
     "postcss-nested": "^6.0.0",
     "prettier": "^2.8.0",