From d0e995639bd54c754b414d1e9c06f632251f54d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antoine=C3=90?= Date: Mon, 27 Nov 2023 17:22:03 +0100 Subject: [PATCH] fix boot.js color with new branding --- packages/backend/src/server/web/boot.js | 314 +++++++++--------- .../backend/src/server/web/views/base.pug | 2 - 2 files changed, 157 insertions(+), 159 deletions(-) diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 5437d6702..2444c4592 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -13,130 +13,130 @@ // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので (async () => { - window.onerror = (e) => { - console.error(e); - renderError("SOMETHING_HAPPENED", e); - }; - window.onunhandledrejection = (e) => { - console.error(e); - renderError("SOMETHING_HAPPENED_IN_PROMISE", e); - }; + window.onerror = (e) => { + console.error(e); + renderError("SOMETHING_HAPPENED", e); + }; + window.onunhandledrejection = (e) => { + console.error(e); + renderError("SOMETHING_HAPPENED_IN_PROMISE", e); + }; - //#region Detect language & fetch translations - const v = localStorage.getItem("v") || VERSION; + //#region Detect language & fetch translations + const v = localStorage.getItem("v") || VERSION; - const supportedLangs = LANGS; - let lang = localStorage.getItem("lang"); - if (lang == null || !supportedLangs.includes(lang)) { - if (supportedLangs.includes(navigator.language)) { - lang = navigator.language; - } else { - lang = supportedLangs.find((x) => x.split("-")[0] === navigator.language); + const supportedLangs = LANGS; + let lang = localStorage.getItem("lang"); + if (lang == null || !supportedLangs.includes(lang)) { + if (supportedLangs.includes(navigator.language)) { + lang = navigator.language; + } else { + lang = supportedLangs.find((x) => x.split("-")[0] === navigator.language); - // Fallback - if (lang == null) lang = "en-US"; - } - } + // Fallback + if (lang == null) lang = "en-US"; + } + } - const res = await fetch(`/assets/locales/${lang}.${v}.json`); - if (res.status === 200) { - localStorage.setItem("lang", lang); - localStorage.setItem("locale", await res.text()); - localStorage.setItem("localeVersion", v); - } else { - await checkUpdate(); - renderError("LOCALE_FETCH"); - return; - } - //#endregion + const res = await fetch(`/assets/locales/${lang}.${v}.json`); + if (res.status === 200) { + localStorage.setItem("lang", lang); + localStorage.setItem("locale", await res.text()); + localStorage.setItem("localeVersion", v); + } else { + await checkUpdate(); + renderError("LOCALE_FETCH"); + return; + } + //#endregion - //#region Script - function importAppScript() { - import(`/assets/${CLIENT_ENTRY}`).catch(async (e) => { - await checkUpdate(); - console.error(e); - renderError("APP_IMPORT", e); - }); - } + //#region Script + function importAppScript() { + import(`/assets/${CLIENT_ENTRY}`).catch(async (e) => { + await checkUpdate(); + console.error(e); + renderError("APP_IMPORT", e); + }); + } - // タイミングによっては、この時点でDOMの構築が済んでいる場合とそうでない場合とがある - if (document.readyState !== "loading") { - importAppScript(); - } else { - window.addEventListener("DOMContentLoaded", () => { - importAppScript(); - }); - } - //#endregion + // タイミングによっては、この時点でDOMの構築が済んでいる場合とそうでない場合とがある + if (document.readyState !== "loading") { + importAppScript(); + } else { + window.addEventListener("DOMContentLoaded", () => { + importAppScript(); + }); + } + //#endregion - //#region Theme - const theme = localStorage.getItem("theme"); - if (theme) { - for (const [k, v] of Object.entries(JSON.parse(theme))) { - document.documentElement.style.setProperty(`--${k}`, v.toString()); + //#region Theme + const theme = localStorage.getItem("theme"); + if (theme) { + for (const [k, v] of Object.entries(JSON.parse(theme))) { + document.documentElement.style.setProperty(`--${k}`, v.toString()); - // HTMLの theme-color 適用 - if (k === "htmlThemeColor") { - for (const tag of document.head.children) { - if ( - tag.tagName === "META" && - tag.getAttribute("name") === "theme-color" - ) { - tag.setAttribute("content", v); - break; - } - } - } - } - } - const colorSchema = localStorage.getItem("colorSchema"); - if (colorSchema) { - document.documentElement.style.setProperty("color-schema", colorSchema); - } - //#endregion + // HTMLの theme-color 適用 + if (k === "htmlThemeColor") { + for (const tag of document.head.children) { + if ( + tag.tagName === "META" && + tag.getAttribute("name") === "theme-color" + ) { + tag.setAttribute("content", v); + break; + } + } + } + } + } + const colorSchema = localStorage.getItem("colorSchema"); + if (colorSchema) { + document.documentElement.style.setProperty("color-schema", colorSchema); + } + //#endregion - let fontSize = localStorage.getItem("fontSize"); - if (fontSize) { - if (fontSize < 10) { - // need to do this for now, as values before were 1, 2, 3 depending on the option - localStorage.setItem("fontSize", null); - fontSize = localStorage.getItem("fontSize"); - } - document.documentElement.style.fontSize = `${fontSize}px`; - } + let fontSize = localStorage.getItem("fontSize"); + if (fontSize) { + if (fontSize < 10) { + // need to do this for now, as values before were 1, 2, 3 depending on the option + localStorage.setItem("fontSize", null); + fontSize = localStorage.getItem("fontSize"); + } + document.documentElement.style.fontSize = `${fontSize}px`; + } - if (["ja-JP", "ja-KS", "ko-KR", "zh-CN", "zh-TW"].includes(lang)) { - document.documentElement.classList.add("useCJKFont"); - } + if (["ja-JP", "ja-KS", "ko-KR", "zh-CN", "zh-TW"].includes(lang)) { + document.documentElement.classList.add("useCJKFont"); + } - const useSystemFont = localStorage.getItem("useSystemFont"); - if (useSystemFont) { - document.documentElement.classList.add("useSystemFont"); - } + const useSystemFont = localStorage.getItem("useSystemFont"); + if (useSystemFont) { + document.documentElement.classList.add("useSystemFont"); + } - const wallpaper = localStorage.getItem("wallpaper"); - if (wallpaper) { - document.documentElement.style.backgroundImage = `url(${wallpaper})`; - } + const wallpaper = localStorage.getItem("wallpaper"); + if (wallpaper) { + document.documentElement.style.backgroundImage = `url(${wallpaper})`; + } - const customCss = localStorage.getItem("customCss"); - if (customCss && customCss.length > 0) { - const style = document.createElement("style"); - style.innerHTML = customCss; - document.head.appendChild(style); - } + const customCss = localStorage.getItem("customCss"); + if (customCss && customCss.length > 0) { + const style = document.createElement("style"); + style.innerHTML = customCss; + document.head.appendChild(style); + } - async function addStyle(styleText) { - const css = document.createElement("style"); - css.appendChild(document.createTextNode(styleText)); - document.head.appendChild(css); - } + async function addStyle(styleText) { + const css = document.createElement("style"); + css.appendChild(document.createTextNode(styleText)); + document.head.appendChild(css); + } - function renderError(code, details) { - let errorsElement = document.getElementById("errors"); + function renderError(code, details) { + let errorsElement = document.getElementById("errors"); - if (!errorsElement) { - document.body.innerHTML = ` + if (!errorsElement) { + document.body.innerHTML = ` @@ -170,19 +170,19 @@
`; - errorsElement = document.getElementById("errors"); - } - const detailsElement = document.createElement("details"); - detailsElement.innerHTML = ` + errorsElement = document.getElementById("errors"); + } + const detailsElement = document.createElement("details"); + detailsElement.innerHTML = `
ERROR CODE: ${code} ${JSON.stringify(details)}`; - errorsElement.appendChild(detailsElement); - addStyle(` + errorsElement.appendChild(detailsElement); + addStyle(` * { - font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; + font-family: Roboto,HelveticaNeue,Arial,sans-serif; } #iceshrimp_app, @@ -192,8 +192,8 @@ body, html { - background-color: #191724; - color: #e0def4; + background-color: #3b364c; + color: rgb(231, 237, 255); justify-content: center; margin: auto; padding: 10px; @@ -209,38 +209,38 @@ } .button-big { - background: linear-gradient(-45deg, rgb(196, 167, 231), rgb(235, 188, 186)); + background: linear-gradient(-45deg, rgb(154, 146, 255), rgb(131, 114, 245)); line-height: 50px; } .button-big:hover { - background: rgb(49, 116, 143); + background: rgb(201, 197, 255); } .button-small { - background: #444; + background: #544d77; line-height: 40px; } .button-small:hover { - background: #555; + background: #504967; } .button-label-big { - color: #191724; + color: #3b364c; font-weight: bold; font-size: 20px; padding: 12px; } .button-label-small { - color: rgb(156, 207, 216); + color: rgb(231, 237, 255); font-size: 16px; padding: 12px; } a { - color: rgb(156, 207, 216); + color: rgb(255, 123, 114); text-decoration: none; } @@ -255,7 +255,7 @@ } .icon-warning { - color: #f6c177; + color: rgb(236, 182, 55); height: 4rem; padding-top: 2rem; } @@ -269,7 +269,7 @@ } details { - background: #1f1d2e; + background: #423c55; margin-bottom: 2rem; padding: 0.5rem 1rem; width: 40rem; @@ -291,39 +291,39 @@ width: 50%; } `); - } + } - async function checkUpdate() { - try { - const res = await fetch("/api/meta", { - method: "POST", - cache: "no-cache", - }); + async function checkUpdate() { + try { + const res = await fetch("/api/meta", { + method: "POST", + cache: "no-cache", + }); - const meta = await res.json(); + const meta = await res.json(); - if (meta.version != v) { - localStorage.setItem("v", meta.version); - refresh(); - } - } catch (e) { - console.error(e); - renderError("UPDATE_CHECK", e); - throw e; - } - } + if (meta.version != v) { + localStorage.setItem("v", meta.version); + refresh(); + } + } catch (e) { + console.error(e); + renderError("UPDATE_CHECK", e); + throw e; + } + } - function refresh() { - // Clear cache (service worker) - try { - navigator.serviceWorker.controller.postMessage("clear"); - navigator.serviceWorker.getRegistrations().then((registrations) => { - registrations.forEach((registration) => registration.unregister()); - }); - } catch (e) { - console.error(e); - } + function refresh() { + // Clear cache (service worker) + try { + navigator.serviceWorker.controller.postMessage("clear"); + navigator.serviceWorker.getRegistrations().then((registrations) => { + registrations.forEach((registration) => registration.unregister()); + }); + } catch (e) { + console.error(e); + } - location.reload(); - } -})(); + location.reload(); + } +})(); \ No newline at end of file diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug index 1e9e97ed3..8fac9499e 100644 --- a/packages/backend/src/server/web/views/base.pug +++ b/packages/backend/src/server/web/views/base.pug @@ -67,8 +67,6 @@ html body noscript: p - | JavaScriptを有効にしてください - br | Please turn on your JavaScript div#splash img#splashIcon(src= splashIcon || `/static-assets/splash.png?${ timestamp }`)