From 9d81d068533aaddf8e8654f9e86374c6531766bb Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 26 Dec 2020 10:01:32 +0900 Subject: wip --- src/server/web/boot.js | 117 ++++++++++++++++++++++++++++++++++++++++++ src/server/web/style.css | 37 +++++++++++++ src/server/web/views/base.pug | 73 ++------------------------ 3 files changed, 158 insertions(+), 69 deletions(-) create mode 100644 src/server/web/boot.js create mode 100644 src/server/web/style.css (limited to 'src/server/web') diff --git a/src/server/web/boot.js b/src/server/web/boot.js new file mode 100644 index 0000000000..7131916427 --- /dev/null +++ b/src/server/web/boot.js @@ -0,0 +1,117 @@ +/** + * BOOT LOADER + * サーバーからレスポンスされるHTMLに埋め込まれるスクリプトで、以下の役割を持ちます。 + * - バージョンやユーザーの言語に基づいて適切なメインスクリプトを読み込む。 + * - キャッシュされたコンパイル済みテーマを適用する。 + * - クライアントの設定値に基づいて対応するHTMLクラスやCSS変数を設定する。 + * テーマやCSS変数をこの段階で設定するのは、メインスクリプトが読み込まれる間もテーマを適用したいためです。 + * 注: webpackは介さないため、このファイルではrequireやimportは使えません。 + */ + +'use strict'; + +//#region Script + +//#region Detect 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'; + } +} +//#endregion + +const ver = localStorage.getItem('v') || VERSION; + +const salt = localStorage.getItem('salt') + ? `?salt=${localStorage.getItem('salt')}` + : ''; + +const head = document.getElementsByTagName('head')[0]; + +const script = document.createElement('script'); +script.setAttribute('src', `/assets/app.${ver}.${lang}.js${salt}`); +script.setAttribute('async', 'true'); +script.setAttribute('defer', 'true'); +head.appendChild(script); + +// 3秒経ってもスクリプトがロードされない場合はバージョンが古くて +// 404になっているせいかもしれないので、バージョンを確認して古ければ更新する +// +// 読み込まれたスクリプトからこのタイマーを解除できるように、 +// グローバルにタイマーIDを代入しておく +window.mkBootTimer = window.setTimeout(async () => { + const res = await fetch('/api/meta', { + method: 'POST', + cache: 'no-cache' + }); + + const meta = await res.json(); + + if (meta.version != ver) { + localStorage.setItem('v', meta.version); + alert( + 'Misskeyの新しいバージョンがあります。ページを再度読み込みします。' + + '\n\n' + + 'New version of Misskey available. The page will be reloaded.'); + refresh(); + } +}, 3000); +//#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()); + + // 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; + } + } + } + } +} +//#endregion + +const fontSize = localStorage.getItem('fontSize'); +if (fontSize) { + document.documentElement.classList.add('f-' + fontSize); +} + +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})`; +} + +function refresh() { + // Random + localStorage.setItem('salt', Math.random().toString().substr(2, 8)); + + // 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(); +} diff --git a/src/server/web/style.css b/src/server/web/style.css new file mode 100644 index 0000000000..6ab2c2154a --- /dev/null +++ b/src/server/web/style.css @@ -0,0 +1,37 @@ +html { + background-color: var(--bg); + color: var(--fg); +} + +#ini { + position: fixed; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: wait; +} + +#ini > svg { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: 64px; + height: 64px; + animation: ini 0.6s infinite linear; + color: var(--accent); + fill: currentColor; +} + +@keyframes ini { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug index cbba6bd08a..1b053438dc 100644 --- a/src/server/web/views/base.pug +++ b/src/server/web/views/base.pug @@ -33,76 +33,11 @@ html block og meta(property='og:image' content=img) - style. - html { - background-color: var(--bg); - color: var(--fg); - } + style + include ../style.css - #ini { - position: fixed; - z-index: 1; - top: 0; - left: 0; - width: 100%; - height: 100%; - cursor: wait; - } - - #ini > svg { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - width: 64px; - height: 64px; - animation: ini 0.6s infinite linear; - color: var(--accent); - fill: currentColor; - } - - @keyframes ini { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - - script(src=`/assets/app.${version}.js` async defer) - script. - const theme = localStorage.getItem('theme'); - if (theme) { - for (const [k, v] of Object.entries(JSON.parse(theme))) { - document.documentElement.style.setProperty(`--${k}`, v.toString()); - 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 fontSize = localStorage.getItem('fontSize'); - if (fontSize) { - document.documentElement.classList.add('f-' + fontSize); - } - - 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})`; - } + script + include ../boot.js body noscript: p -- cgit v1.2.3-freya