エラー画像URLを設定可能に (#10959)

* エラー画像URLを設定可能に

* Update CHANGELOG.md

* 設定したエラーアイコンをprefetchするようにbase.pugを変更

* 不足していたデータを追加

* enhance(frontend): デザイン調整

5 files changed, 65 insertions, 41 deletions

diff --git a/packages/backend/src/server/api/endpoints/admin/meta.ts b/packages/backend/src/server/api/endpoints/admin/meta.ts
index 87a2d22ac2..4cc1b6011f 100644
--- a/packages/backend/src/server/api/endpoints/admin/meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/meta.ts
@@ -61,10 +61,17 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
-			errorImageUrl: {
+			serverErrorImageUrl: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
+			infoImageUrl: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
+			notFoundImageUrl: {
 				type: 'string',
 				optional: false, nullable: true,
-				default: 'https://xn--931a.moe/aiart/yubitun.png',
 			},
 			iconUrl: {
 				type: 'string',
@@ -305,7 +312,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				themeColor: instance.themeColor,
 				mascotImageUrl: instance.mascotImageUrl,
 				bannerUrl: instance.bannerUrl,
-				errorImageUrl: instance.errorImageUrl,
+				serverErrorImageUrl: instance.serverErrorImageUrl,
+				notFoundImageUrl: instance.notFoundImageUrl,
+				infoImageUrl: instance.infoImageUrl,
 				iconUrl: instance.iconUrl,
 				backgroundImageUrl: instance.backgroundImageUrl,
 				logoImageUrl: instance.logoImageUrl,
diff --git a/packages/backend/src/server/api/endpoints/admin/update-meta.ts b/packages/backend/src/server/api/endpoints/admin/update-meta.ts
index 0e94f56cfd..1de5e9efd3 100644
--- a/packages/backend/src/server/api/endpoints/admin/update-meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/update-meta.ts
@@ -32,7 +32,9 @@ export const paramDef = {
 		themeColor: { type: 'string', nullable: true, pattern: '^#[0-9a-fA-F]{6}$' },
 		mascotImageUrl: { type: 'string', nullable: true },
 		bannerUrl: { type: 'string', nullable: true },
-		errorImageUrl: { type: 'string', nullable: true },
+		serverErrorImageUrl: { type: 'string', nullable: true },
+		infoImageUrl: { type: 'string', nullable: true },
+		notFoundImageUrl: { type: 'string', nullable: true },
 		iconUrl: { type: 'string', nullable: true },
 		backgroundImageUrl: { type: 'string', nullable: true },
 		logoImageUrl: { type: 'string', nullable: true },
@@ -149,6 +151,18 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				set.iconUrl = ps.iconUrl;
 			}
 
+			if (ps.serverErrorImageUrl !== undefined) {
+				set.serverErrorImageUrl = ps.serverErrorImageUrl;
+			}
+
+			if (ps.infoImageUrl !== undefined) {
+				set.infoImageUrl = ps.infoImageUrl;
+			}
+
+			if (ps.notFoundImageUrl !== undefined) {
+				set.notFoundImageUrl = ps.notFoundImageUrl;
+			}
+
 			if (ps.backgroundImageUrl !== undefined) {
 				set.backgroundImageUrl = ps.backgroundImageUrl;
 			}
@@ -281,10 +295,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				set.smtpPass = ps.smtpPass;
 			}
 
-			if (ps.errorImageUrl !== undefined) {
-				set.errorImageUrl = ps.errorImageUrl;
-			}
-
 			if (ps.enableServiceWorker !== undefined) {
 				set.enableServiceWorker = ps.enableServiceWorker;
 			}
diff --git a/packages/backend/src/server/api/endpoints/meta.ts b/packages/backend/src/server/api/endpoints/meta.ts
index fe68467a64..3b3c5caa00 100644
--- a/packages/backend/src/server/api/endpoints/meta.ts
+++ b/packages/backend/src/server/api/endpoints/meta.ts
@@ -124,10 +124,17 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: false,
 			},
-			errorImageUrl: {
+			serverErrorImageUrl: {
 				type: 'string',
-				optional: false, nullable: false,
-				default: 'https://xn--931a.moe/aiart/yubitun.png',
+				optional: false, nullable: true,
+			},
+			infoImageUrl: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
+			notFoundImageUrl: {
+				type: 'string',
+				optional: false, nullable: true,
 			},
 			iconUrl: {
 				type: 'string',
@@ -288,7 +295,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				themeColor: instance.themeColor,
 				mascotImageUrl: instance.mascotImageUrl,
 				bannerUrl: instance.bannerUrl,
-				errorImageUrl: instance.errorImageUrl,
+				infoImageUrl: instance.infoImageUrl,
+				serverErrorImageUrl: instance.serverErrorImageUrl,
+				notFoundImageUrl: instance.notFoundImageUrl,
 				iconUrl: instance.iconUrl,
 				backgroundImageUrl: instance.backgroundImageUrl,
 				logoImageUrl: instance.logoImageUrl,
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index f780280c1f..07ba2731c3 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -26,7 +26,7 @@ import { PageEntityService } from '@/core/entities/PageEntityService.js';
 import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
 import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
 import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
-import type { ChannelsRepository, ClipsRepository, FlashsRepository, GalleryPostsRepository, NotesRepository, PagesRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import type { ChannelsRepository, ClipsRepository, FlashsRepository, GalleryPostsRepository, Meta, NotesRepository, PagesRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
 import type Logger from '@/logger.js';
 import { deepClone } from '@/misc/clone.js';
 import { bindThis } from '@/decorators.js';
@@ -118,6 +118,18 @@ export class ClientServerService {
 	}
 
 	@bindThis
+	private generateCommonPugData(meta: Meta) {
+		return {
+			instanceName: meta.name ?? 'Misskey',
+			icon: meta.iconUrl,
+			themeColor: meta.themeColor,
+			serverErrorImageUrl: meta.serverErrorImageUrl ?? 'https://xn--931a.moe/assets/error.jpg',
+			infoImageUrl: meta.infoImageUrl ?? 'https://xn--931a.moe/assets/info.jpg',
+			notFoundImageUrl: meta.notFoundImageUrl ?? 'https://xn--931a.moe/assets/not-found.jpg',
+		};
+	}
+
+	@bindThis
 	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
 		fastify.register(fastifyCookie, {});
 
@@ -341,12 +353,10 @@ export class ClientServerService {
 			reply.header('Cache-Control', 'public, max-age=30');
 			return await reply.view('base', {
 				img: meta.bannerUrl,
-				title: meta.name ?? 'Misskey',
-				instanceName: meta.name ?? 'Misskey',
 				url: this.config.url,
+				title: meta.name ?? 'Misskey',
 				desc: meta.description,
-				icon: meta.iconUrl,
-				themeColor: meta.themeColor,
+				...this.generateCommonPugData(meta),
 			});
 		};
 
@@ -431,9 +441,7 @@ export class ClientServerService {
 					user, profile, me,
 					avatarUrl: user.avatarUrl ?? this.userEntityService.getIdenticonUrl(user),
 					sub: request.params.sub,
-					instanceName: meta.name ?? 'Misskey',
-					icon: meta.iconUrl,
-					themeColor: meta.themeColor,
+					...this.generateCommonPugData(meta),
 				});
 			} else {
 				// リモートユーザーなので
@@ -481,9 +489,7 @@ export class ClientServerService {
 					avatarUrl: _note.user.avatarUrl,
 					// TODO: Let locale changeable by instance setting
 					summary: getNoteSummary(_note),
-					instanceName: meta.name ?? 'Misskey',
-					icon: meta.iconUrl,
-					themeColor: meta.themeColor,
+					...this.generateCommonPugData(meta),
 				});
 			} else {
 				return await renderBase(reply);
@@ -522,9 +528,7 @@ export class ClientServerService {
 					page: _page,
 					profile,
 					avatarUrl: _page.user.avatarUrl,
-					instanceName: meta.name ?? 'Misskey',
-					icon: meta.iconUrl,
-					themeColor: meta.themeColor,
+					...this.generateCommonPugData(meta),
 				});
 			} else {
 				return await renderBase(reply);
@@ -550,9 +554,7 @@ export class ClientServerService {
 					flash: _flash,
 					profile,
 					avatarUrl: _flash.user.avatarUrl,
-					instanceName: meta.name ?? 'Misskey',
-					icon: meta.iconUrl,
-					themeColor: meta.themeColor,
+					...this.generateCommonPugData(meta),
 				});
 			} else {
 				return await renderBase(reply);
@@ -578,9 +580,7 @@ export class ClientServerService {
 					clip: _clip,
 					profile,
 					avatarUrl: _clip.user.avatarUrl,
-					instanceName: meta.name ?? 'Misskey',
-					icon: meta.iconUrl,
-					themeColor: meta.themeColor,
+					...this.generateCommonPugData(meta),
 				});
 			} else {
 				return await renderBase(reply);
@@ -604,9 +604,7 @@ export class ClientServerService {
 					post: _post,
 					profile,
 					avatarUrl: _post.user.avatarUrl,
-					instanceName: meta.name ?? 'Misskey',
-					icon: meta.iconUrl,
-					themeColor: meta.themeColor,
+					...this.generateCommonPugData(meta),
 				});
 			} else {
 				return await renderBase(reply);
@@ -625,9 +623,7 @@ export class ClientServerService {
 				reply.header('Cache-Control', 'public, max-age=15');
 				return await reply.view('channel', {
 					channel: _channel,
-					instanceName: meta.name ?? 'Misskey',
-					icon: meta.iconUrl,
-					themeColor: meta.themeColor,
+					...this.generateCommonPugData(meta),
 				});
 			} else {
 				return await renderBase(reply);
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 69b3f68e05..1216fc73f7 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -31,9 +31,9 @@ html
 		link(rel='apple-touch-icon' href= icon || '/apple-touch-icon.png')
 		link(rel='manifest' href='/manifest.json')
 		link(rel='search' type='application/opensearchdescription+xml' title=(title || "Misskey") href=`${url}/opensearch.xml`)
-		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
-		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
-		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
+		link(rel='prefetch' href=serverErrorImageUrl)
+		link(rel='prefetch' href=infoImageUrl)
+		link(rel='prefetch' href=notFoundImageUrl)
 		//- https://github.com/misskey-dev/misskey/issues/9842
 		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.min.css?v2.21.0')
 		link(rel='modulepreload' href=`/vite/${clientEntry.file}`)