enhance(frontend): サーバーエラー画面の多言語対応 (#15549)
* enhance(frontend): サーバーエラー画面の多言語対応 * indent
This commit is contained in:
かっこかり
GitHub
parent
5dc99e6f89
commit
1b44954dcb
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
40
packages/backend/src/server/web/error.js
Normal file
40
packages/backend/src/server/web/error.js
Normal file
@ -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];
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
@ -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
|
||||
span.button-label-big(data-i18n-reload) Reload
|
||||
|
||||
p.dont-worry Don't worry, it's (probably) not your fault.
|
||||
|
||||
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
|
||||
|
||||
@ -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)));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user