enhance(frontend): サーバーエラー画面の多言語対応 (#15549)

* enhance(frontend): サーバーエラー画面の多言語対応

* indent

packages/backend/src/server/web/error.css

@@ -52,7 +52,7 @@ button {
 .button-label-big {
 	color: #222;
 	font-weight: bold;
-    font-size: 20px;
+	font-size: 1.2em;
 	padding: 12px;
 }
 
@@ -72,11 +72,6 @@ li {
 	font-size: 16px;
 }
 
-.dont-worry,
-#msg {
-    font-size: 18px;
-}
-
 .icon-warning {
 	color: #dec340;
 	height: 4rem;
@@ -84,7 +79,8 @@ li {
 }
 
 h1 {
-    font-size: 32px;
+	font-size: 1.5em;
+	margin: 1em;
 }
 
 code {
@@ -100,17 +96,16 @@ code {
 	word-break: break-word;
 }
 
-summary {
+#errorInfo summary {
 	cursor: pointer;
 }
 
-summary > * {
+#errorInfo summary>* {
 	display: inline;
-    white-space: pre-wrap;
 }
 
 @media screen and (max-width: 500px) {
-    details {
+	#errorInfo {
 		width: 50%;
 	}
 }

packages/backend/src/server/web/error.js

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+'use strict';
+
+(() => {
+	document.addEventListener('DOMContentLoaded', () => {
+		const locale = JSON.parse(localStorage.getItem('locale') || '{}');
+
+		const messages = Object.assign({
+			title: 'Failed to initialize Misskey',
+			serverError: 'If reloading after a period of time does not resolve the problem, contact the server administrator with the following ERROR ID.',
+			solution: 'The following actions may solve the problem.',
+			solution1: 'Update your os and browser',
+			solution2: 'Disable an adblocker',
+			solution3: 'Clear the browser cache',
+			solution4: '(Tor Browser) Set dom.webaudio.enabled to true',
+			otherOption: 'Other options',
+			otherOption1: 'Clear preferences and cache',
+			otherOption2: 'Start the simple client',
+			otherOption3: 'Start the repair tool',
+		}, locale?._bootErrors || {});
+		const reload = locale?.reload || 'Reload';
+
+		const reloadEls = document.querySelectorAll('[data-i18n-reload]');
+		for (const el of reloadEls) {
+			el.textContent = reload;
+		}
+
+		const i18nEls = document.querySelectorAll('[data-i18n]');
+		for (const el of i18nEls) {
+			const key = el.dataset.i18n;
+			if (key && messages[key]) {
+				el.textContent = messages[key];
+			}
+		}
+	});
+})();

packages/backend/src/server/web/views/error.pug

@@ -27,39 +27,45 @@ html
 		style
 			include ../error.css
 
+		script
+			include ../error.js
+
 body
 	svg.icon-warning(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 24 24", stroke-width="2", stroke="currentColor", fill="none", stroke-linecap="round", stroke-linejoin="round")
 		path(stroke="none", d="M0 0h24v24H0z", fill="none")
 		path(d="M12 9v2m0 4v.01")
 		path(d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75")
 
-	h1 An error has occurred!
+	h1(data-i18n="title") Failed to initialize Misskey
 
 	button.button-big(onclick="location.reload();")
-		span.button-label-big Refresh
+		span.button-label-big(data-i18n-reload) Reload
 
-	p.dont-worry Don't worry, it's (probably) not your fault.
+	p(data-i18n="serverError") If reloading after a period of time does not resolve the problem, contact the server administrator with the following ERROR ID.
-
-	p If reloading after a period of time does not resolve the problem, contact the server administrator with the following ERROR ID.
 
 	div#errors
 		code.
 			ERROR CODE: #{code}
 			ERROR ID: #{id}
 
-	p You may also try the following options:
+	p
+		b(data-i18n="solution") The following actions may solve the problem.
 
-	p Update your os and browser.
+	p(data-i18n="solution1") Update your os and browser
-	p Disable an adblocker.
+	p(data-i18n="solution2") Disable an adblocker
+	p(data-i18n="solution3") Clear your browser cache
+	p(data-i18n="solution4") (Tor Browser) Set dom.webaudio.enabled to true
 
+	details(style="color: #86b300;")
+		summary(data-i18n="otherOption") Other options
 		a(href="/flush")
 			button.button-small
-			span.button-label-small Clear preferences and cache
+				span.button-label-small(data-i18n="otherOption1") Clear preferences and cache
 		br
 		a(href="/cli")
 			button.button-small
-			span.button-label-small Start the simple client
+				span.button-label-small(data-i18n="otherOption2") Start the simple client
 		br
 		a(href="/bios")
 			button.button-small
-			span.button-label-small Start the repair tool
+				span.button-label-small(data-i18n="otherOption3") Start the repair tool

scripts/build-assets.mjs

@@ -60,7 +60,8 @@ async function buildBackendScript() {
     './packages/backend/src/server/web/boot.js',
     './packages/backend/src/server/web/boot.embed.js',
     './packages/backend/src/server/web/bios.js',
-    './packages/backend/src/server/web/cli.js'
+    './packages/backend/src/server/web/cli.js',
+    './packages/backend/src/server/web/error.js',
   ]) {
     let source = await fs.readFile(file, { encoding: 'utf-8' });
     source = source.replaceAll('LANGS', JSON.stringify(Object.keys(locales)));