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

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

* indent

3 files changed, 120 insertions, 79 deletions

diff --git a/packages/backend/src/server/web/error.css b/packages/backend/src/server/web/error.css
index f2b63296eb..803bd1b4b5 100644
--- a/packages/backend/src/server/web/error.css
+++ b/packages/backend/src/server/web/error.css
@@ -5,112 +5,107 @@
  */
 
 * {
-    font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
+	font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
 }
 
 #misskey_app,
 #splash {
-    display: none !important;
+	display: none !important;
 }
 
 body,
 html {
-    background-color: #222;
-    color: #dfddcc;
-    justify-content: center;
-    margin: auto;
-    padding: 10px;
-    text-align: center;
+	background-color: #222;
+	color: #dfddcc;
+	justify-content: center;
+	margin: auto;
+	padding: 10px;
+	text-align: center;
 }
 
 button {
-    border-radius: 999px;
-    padding: 0px 12px 0px 12px;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 12px;
+	border-radius: 999px;
+	padding: 0px 12px 0px 12px;
+	border: none;
+	cursor: pointer;
+	margin-bottom: 12px;
 }
 
 .button-big {
-    background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0));
-    line-height: 50px;
+	background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0));
+	line-height: 50px;
 }
 
 .button-big:hover {
-    background: rgb(153, 204, 0);
+	background: rgb(153, 204, 0);
 }
 
 .button-small {
-    background: #444;
-    line-height: 40px;
+	background: #444;
+	line-height: 40px;
 }
 
 .button-small:hover {
-    background: #555;
+	background: #555;
 }
 
 .button-label-big {
-    color: #222;
-    font-weight: bold;
-    font-size: 20px;
-    padding: 12px;
+	color: #222;
+	font-weight: bold;
+	font-size: 1.2em;
+	padding: 12px;
 }
 
 .button-label-small {
-    color: rgb(153, 204, 0);
-    font-size: 16px;
-    padding: 12px;
+	color: rgb(153, 204, 0);
+	font-size: 16px;
+	padding: 12px;
 }
 
 a {
-    color: rgb(134, 179, 0);
-    text-decoration: none;
+	color: rgb(134, 179, 0);
+	text-decoration: none;
 }
 
 p,
 li {
-    font-size: 16px;
-}
-
-.dont-worry,
-#msg {
-    font-size: 18px;
+	font-size: 16px;
 }
 
 .icon-warning {
-    color: #dec340;
-    height: 4rem;
-    padding-top: 2rem;
+	color: #dec340;
+	height: 4rem;
+	padding-top: 2rem;
 }
 
 h1 {
-    font-size: 32px;
+	font-size: 1.5em;
+	margin: 1em;
 }
 
 code {
-    display: block;
-    font-family: Fira, FiraCode, monospace;
-    background: #333;
-    padding: 0.5rem 1rem;
-    max-width: 40rem;
-    border-radius: 10px;
-    justify-content: center;
-    margin: auto;
-    white-space: pre-wrap;
-    word-break: break-word;
+	display: block;
+	font-family: Fira, FiraCode, monospace;
+	background: #333;
+	padding: 0.5rem 1rem;
+	max-width: 40rem;
+	border-radius: 10px;
+	justify-content: center;
+	margin: auto;
+	white-space: pre-wrap;
+	word-break: break-word;
 }
 
-summary {
-    cursor: pointer;
+#errorInfo summary {
+	cursor: pointer;
 }
 
-summary > * {
-    display: inline;
-    white-space: pre-wrap;
+#errorInfo summary>* {
+	display: inline;
 }
 
 @media screen and (max-width: 500px) {
-    details {
-        width: 50%;
-    }
+	#errorInfo {
+		width: 50%;
+	}
 }
diff --git a/packages/backend/src/server/web/error.js b/packages/backend/src/server/web/error.js
new file mode 100644
index 0000000000..4838dd6ef3
--- /dev/null
+++ b/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];
+			}
+		}
+	});
+})();
diff --git a/packages/backend/src/server/web/views/error.pug b/packages/backend/src/server/web/views/error.pug
index 44ebf53cf7..6a78d1878c 100644
--- a/packages/backend/src/server/web/views/error.pug
+++ b/packages/backend/src/server/web/views/error.pug
@@ -2,15 +2,15 @@ doctype html
 
 //
 	-
-	  _____ _         _           
-	 |     |_|___ ___| |_ ___ _ _ 
+	  _____ _         _
+	 |     |_|___ ___| |_ ___ _ _
 	 | | | | |_ -|_ -| '_| -_| | |
 	 |_|_|_|_|___|___|_,_|___|_  |
-							 |___|
+	                         |___|
 	 Thank you for using Misskey!
 	 If you are reading this message... how about joining the development?
 	 https://github.com/misskey-dev/misskey
-	 
+
 
 html
 
@@ -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
-
-	p.dont-worry Don't worry, it's (probably) not your fault.
+		span.button-label-big(data-i18n-reload) Reload
 
-	p If reloading after a period of time does not resolve the problem, contact the server administrator with the following ERROR ID.
+	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.
 
 	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 Disable an adblocker.
+	p(data-i18n="solution1") Update your os and browser
+	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
 
-	a(href="/flush")
-		button.button-small
-			span.button-label-small Clear preferences and cache
-	br
-	a(href="/cli")
-		button.button-small
-			span.button-label-small Start the simple client
-	br
-	a(href="/bios")
-		button.button-small
-			span.button-label-small Start the repair tool
+	details(style="color: #86b300;")
+		summary(data-i18n="otherOption") Other options
+		a(href="/flush")
+			button.button-small
+				span.button-label-small(data-i18n="otherOption1") Clear preferences and cache
+		br
+		a(href="/cli")
+			button.button-small
+				span.button-label-small(data-i18n="otherOption2") Start the simple client
+		br
+		a(href="/bios")
+			button.button-small
+				span.button-label-small(data-i18n="otherOption3") Start the repair tool