From ef25f28c19246bfcf7d0eb192c8e9f3699803693 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E5=91=A8=E9=83=A8=E8=90=BD?=
 <laozhoubuluo@gmail.com>
Date: Wed, 6 Mar 2024 08:35:08 +0800
Subject: [PATCH] feat: instance ticker fallback and url preview image fallback

---
 packages/backend/assets/resource-unknown.svg  | 21 +++++++++++++++++++
 .../src/components/MkInstanceCardMini.vue     |  6 +++++-
 .../src/components/MkInstanceTicker.vue       |  6 +++++-
 .../client/src/components/MkUrlPreview.vue    | 17 +++++++++++++--
 .../src/ui/_common_/statusbar-federation.vue  |  5 +++++
 packages/client/src/widgets/federation.vue    |  6 +++++-
 .../client/src/widgets/instance-cloud.vue     |  5 +++++
 7 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 packages/backend/assets/resource-unknown.svg

diff --git a/packages/backend/assets/resource-unknown.svg b/packages/backend/assets/resource-unknown.svg
new file mode 100644
index 0000000000..5351960066
--- /dev/null
+++ b/packages/backend/assets/resource-unknown.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="resource-unknown" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FE7E01;stroke-width:10;stroke-miterlimit:10;}
+	.st1{fill:#FE7E01;}
+</style>
+<path class="st0" d="M350,450H150c-27.61,0-50-22.39-50-50V100c0-27.61,22.39-50,50-50h200c27.61,0,50,22.39,50,50v300
+	C400,427.61,377.61,450,350,450z"/>
+<g>
+	<path class="st1" d="M230.62,279.62c-1.17-8-0.59-14.96,1.75-20.88c2.33-5.91,5.5-11.12,9.5-15.62s8.12-8.71,12.38-12.62
+		c4.25-3.91,7.88-7.88,10.88-11.88s4.5-8.5,4.5-13.5c0-6.83-2-12.12-6-15.88s-9.67-5.62-17-5.62c-5.84,0-11.25,1.29-16.25,3.88
+		c-5,2.59-9.92,6.54-14.75,11.88l-20.5-19c7-8,15.16-14.41,24.5-19.25c9.33-4.83,19.75-7.25,31.25-7.25
+		c10.5,0,19.79,1.79,27.88,5.38c8.08,3.59,14.46,8.92,19.12,16c4.66,7.09,7,15.96,7,26.62c0,7.5-1.54,13.92-4.62,19.25
+		c-3.09,5.34-6.84,10.09-11.25,14.25c-4.42,4.17-8.75,8.29-13,12.38c-4.25,4.09-7.67,8.62-10.25,13.62
+		c-2.59,5-3.54,11.09-2.88,18.25H230.62z M246.88,346.12c-6.34,0-11.59-2.04-15.75-6.12c-4.17-4.08-6.25-9.38-6.25-15.88
+		c0-6.66,2.12-12.04,6.38-16.12c4.25-4.08,9.46-6.12,15.62-6.12c6.33,0,11.58,2.04,15.75,6.12c4.16,4.09,6.25,9.46,6.25,16.12
+		c0,6.5-2.09,11.79-6.25,15.88C258.46,344.08,253.21,346.12,246.88,346.12z"/>
+</g>
+</svg>
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
index afb64a2389..a11c33e576 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -10,7 +10,7 @@
 			},
 		]"
 	>
-		<img class="icon" :src="getInstanceIcon(instance)" alt="" />
+		<img class="icon" :src="getInstanceIcon(instance)" @error="getInstanceIconErrorEvent($event)" alt="" />
 		<div class="body">
 			<span class="host">{{ instance.name ?? instance.host }}</span>
 			<span class="sub _monospace"
@@ -37,6 +37,10 @@ function getInstanceIcon(instance: entities.Instance): string {
 		"/client-assets/dummy.png"
 	);
 }
+
+function getInstanceIconErrorEvent($event) {
+	$event.target.src = "/client-assets/dummy.png";
+}
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index 549a7bf38f..78eda25b8f 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -9,7 +9,7 @@
 		class="hpaizdrt"
 		:style="bg"
 	>
-		<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true" />
+		<img class="icon" :src="getInstanceIcon(instance)" @error="getInstanceIconErrorEvent($event)" aria-hidden="true" />
 		<span class="name">{{ instance.name }}</span>
 	</div>
 </template>
@@ -84,6 +84,10 @@ function getInstanceIcon(instance): string {
 		"/client-assets/dummy.png"
 	);
 }
+
+function getInstanceIconErrorEvent($event) {
+	$event.target.src = "/client-assets/dummy.png";
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index ba1f91d1cf..6cb412f6d3 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -17,7 +17,11 @@
 				}"
 			>
 				<div v-if="thumbnail" class="thumbnail">
-					<img :src="thumbnail" loading="lazy" />
+					<img
+						:src="thumbnail"
+						loading="lazy"
+						@error="imageErrorEvent($event)"
+					/>
 					<button
 						v-if="tweetId"
 						v-tooltip="
@@ -55,7 +59,12 @@
 					<p :title="description">
 						<span>
 							<span :title="sitename || undefined">
-								<img v-if="icon" class="icon" :src="icon" />
+								<img
+									v-if="icon"
+									class="icon"
+									:src="icon"
+									@error="imageErrorEvent($event)"
+								/>
 								{{ sitename }}
 							</span>
 							{{ description }}
@@ -181,6 +190,10 @@ function adjustTweetHeight(message: any) {
 	if (height) tweetHeight.value = height;
 }
 
+function imageErrorEvent($event) {
+	$event.target.src = "/static-assets/resource-unknown.svg";
+}
+
 window.addEventListener("message", adjustTweetHeight);
 
 onUnmounted(() => {
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index 5d244f1256..37c817401d 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -19,6 +19,7 @@
 						<img
 							class="icon"
 							:src="getInstanceIcon(instance)"
+							@error="getInstanceIconErrorEvent($event)"
 							alt=""
 						/>
 						<MkA
@@ -82,6 +83,10 @@ function getInstanceIcon(instance): string {
 		"/client-assets/dummy.png"
 	);
 }
+
+function getInstanceIconErrorEvent($event) {
+	$event.target.src = "/client-assets/dummy.png";
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index 043d5f6432..b8fad23b4d 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -23,7 +23,7 @@
 					:key="instance.id"
 					class="instance"
 				>
-					<img :src="getInstanceIcon(instance)" alt="" />
+					<img :src="getInstanceIcon(instance)" @error="getInstanceIconErrorEvent($event)" alt="" />
 					<div class="body">
 						<a
 							class="a"
@@ -111,6 +111,10 @@ function getInstanceIcon(instance): string {
 	);
 }
 
+function getInstanceIconErrorEvent($event) {
+	$event.target.src = "/client-assets/dummy.png";
+}
+
 defineExpose<WidgetComponentExpose>({
 	name,
 	configure,
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
index 461e3f02a6..c28f9c525d 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -11,6 +11,7 @@
 						<img
 							style="inline-size: 32px"
 							:src="getInstanceIcon(instance)"
+							@error="getInstanceIconErrorEvent($event)"
 						/>
 					</a>
 				</li>
@@ -88,6 +89,10 @@ function getInstanceIcon(instance): string {
 	);
 }
 
+function getInstanceIconErrorEvent($event) {
+	$event.target.src = "/client-assets/dummy.png";
+}
+
 defineExpose<WidgetComponentExpose>({
 	name,
 	configure,