From b70473ed60f64d97c0758f864043b850a5728770 Mon Sep 17 00:00:00 2001 From: tamaina Date: Mon, 20 Jun 2022 00:33:46 +0900 Subject: feat: Add Badge Image to Push Notification (#8012) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * :v: * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * :v: * clean up config * typesを戻した * backend/src/web/index.ts * notification-badges * add scripts * change create-notification.ts * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo * clean up * clean up * refactor * キャッシュ対策 * Truncate push notification message * fix * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * fix * i18n.ts * update * :v: * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * pollEnded * URLをsw.jsに戻す * clean up * fix lint * changelog * alpha-test * also with twemoji * add isMimeImage function * catch * Colour => Color * char2file => char2filePath * Update autocomplete.vue * remove clone? Co-authored-by: Acid Chicken (硫酸鶏) Co-authored-by: syuilo --- packages/backend/src/server/web/index.ts | 44 ++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) (limited to 'packages/backend/src/server/web') diff --git a/packages/backend/src/server/web/index.ts b/packages/backend/src/server/web/index.ts index 2feee72be7..be95becb68 100644 --- a/packages/backend/src/server/web/index.ts +++ b/packages/backend/src/server/web/index.ts @@ -11,6 +11,7 @@ import Router from '@koa/router'; import send from 'koa-send'; import favicon from 'koa-favicon'; import views from 'koa-views'; +import sharp from 'sharp'; import { createBullBoard } from '@bull-board/api'; import { BullAdapter } from '@bull-board/api/bullAdapter.js'; import { KoaAdapter } from '@bull-board/koa'; @@ -140,6 +141,49 @@ router.get('/twemoji/(.*)', async ctx => { }); }); +router.get('/twemoji-badge/(.*)', async ctx => { + const path = ctx.path.replace('/twemoji-badge/', ''); + + if (!path.match(/^[0-9a-f-]+\.png$/)) { + ctx.status = 404; + return; + } + + const mask = await sharp( + `${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/${path.replace('.png', '')}.svg`, + { density: 1000 }, + ) + .resize(488, 488) + .greyscale() + .normalise() + .linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast + .flatten({ background: '#000' }) + .extend({ + top: 12, + bottom: 12, + left: 12, + right: 12, + background: '#000', + }) + .toColorspace('b-w') + .png() + .toBuffer(); + + const buffer = await sharp({ + create: { width: 512, height: 512, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } }, + }) + .pipelineColorspace('b-w') + .boolean(mask, 'eor') + .resize(96, 96) + .png() + .toBuffer(); + + ctx.set('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\''); + ctx.set('Cache-Control', 'max-age=2592000'); + ctx.set('Content-Type', 'image/png'); + ctx.body = buffer; +}); + // ServiceWorker router.get(`/sw.js`, async ctx => { await send(ctx as any, `/sw.js`, { -- cgit v1.2.3-freya From 2366f568b996dc7d09c66d768fa52d3aa38630bd Mon Sep 17 00:00:00 2001 From: tamaina Date: Sun, 26 Jun 2022 12:47:43 +0900 Subject: enhance(client): Enhance boot error display (#8879) * Change boot error message * fix * :v: * fix --- packages/backend/src/server/web/boot.js | 35 ++++++++++++++++++++------------- 1 file changed, 21 insertions(+), 14 deletions(-) (limited to 'packages/backend/src/server/web') diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 94329e11c9..9fc536555a 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -14,10 +14,10 @@ // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので (async () => { window.onerror = (e) => { - renderError('SOMETHING_HAPPENED', e.toString()); + renderError('SOMETHING_HAPPENED', e); }; window.onunhandledrejection = (e) => { - renderError('SOMETHING_HAPPENED_IN_PROMISE', e.toString()); + renderError('SOMETHING_HAPPENED_IN_PROMISE', e); }; const v = localStorage.getItem('v') || VERSION; @@ -57,7 +57,7 @@ import(`/assets/${CLIENT_ENTRY}`) .catch(async e => { await checkUpdate(); - renderError('APP_FETCH_FAILED', JSON.stringify(e)); + renderError('APP_FETCH_FAILED', e); }) //#endregion @@ -104,20 +104,27 @@ // eslint-disable-next-line no-inner-declarations function renderError(code, details) { - document.documentElement.innerHTML = ` -

⚠エラーが発生しました

-

問題が解決しない場合は管理者までお問い合わせください。以下のオプションを試すこともできます:

+ let errorsElement = document.getElementById('errors'); + if (!errorsElement) { + document.documentElement.innerHTML = ` +

⚠ An error has occurred. ⚠

+

If the problem persists, please contact the administrator. You may also try the following options:

- ERROR CODE: ${code} -
- ${details} -
- `; +
+ `; + + errorsElement = document.getElementById('errors'); + } + + const detailsElement = document.createElement('details'); + detailsElement.innerHTML = `ERROR CODE: ${code}${JSON.stringify(details)}`; + + errorsElement.appendChild(detailsElement); } // eslint-disable-next-line no-inner-declarations -- cgit v1.2.3-freya From 40656e3ee2ece0df754bad612f92449f40c43e1d Mon Sep 17 00:00:00 2001 From: Kainoa Kanter <44733677+ThatOneCalculator@users.noreply.github.com> Date: Tue, 5 Jul 2022 01:44:05 -0700 Subject: feat: styled error screen (#8930) * Styled error screen * Make details margin auto * Update boot.css * Replace fontawesome with tabler svg * Remove hr * Add new style to flush screen * Rename to `error.css` --- packages/backend/src/server/web/boot.js | 43 ++++++++--- packages/backend/src/server/web/error.css | 98 +++++++++++++++++++++++++ packages/backend/src/server/web/views/base.pug | 2 +- packages/backend/src/server/web/views/flush.pug | 6 ++ 4 files changed, 138 insertions(+), 11 deletions(-) create mode 100644 packages/backend/src/server/web/error.css (limited to 'packages/backend/src/server/web') diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 9fc536555a..124f25f5e8 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -106,15 +106,39 @@ function renderError(code, details) { let errorsElement = document.getElementById('errors'); if (!errorsElement) { + document.getElementsByTagName("head")[0].insertAdjacentHTML( + "beforeend", + ``); document.documentElement.innerHTML = ` -

⚠ An error has occurred. ⚠

-

If the problem persists, please contact the administrator. You may also try the following options:

- -
+ + + + + +

An error has occurred!

+ +

Don't worry, it's (probably) not your fault.

+

If the problem persists after refreshing, please contact your instance's administrator.
You may also try the following options:

+ + + +
+ + + +
+ + + +
`; @@ -122,8 +146,7 @@ } const detailsElement = document.createElement('details'); - detailsElement.innerHTML = `ERROR CODE: ${code}${JSON.stringify(details)}`; - + detailsElement.innerHTML = `
ERROR CODE: ${code}${JSON.stringify(details)}`; errorsElement.appendChild(detailsElement); } diff --git a/packages/backend/src/server/web/error.css b/packages/backend/src/server/web/error.css new file mode 100644 index 0000000000..9f8f905017 --- /dev/null +++ b/packages/backend/src/server/web/error.css @@ -0,0 +1,98 @@ +* { + font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; +} + +body, +html { + background-color: #222; + color: #dfddcc; + justify-content: center; + margin: auto; + width: 80%; + padding: 10px; + text-align: center; +} + +button { + 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; +} + +.button-big:hover { + background: rgb(153, 204, 0); +} + +.button-small { + background: #444; + line-height: 40px; +} + +.button-small:hover { + background: #555; +} + +.button-label-big { + color: #222; + font-weight: bold; + font-size: 20px; + padding: 12px; +} + +.button-label-small { + color: rgb(153, 204, 0); + font-size: 16px; + padding: 12px; +} + +a { + color: rgb(134, 179, 0); + text-decoration: none; +} + +p, +li { + font-size: 16px; +} + +.dont-worry, +#msg { + font-size: 18px; +} + +.icon-warning { + color: #dec340; + height: 4rem; +} + +h1 { + font-size: 32px; +} + +code { + font-family: Fira, FiraCode, monospace; +} + +details { + background: #333; + margin-bottom: 2rem; + padding: 0.5rem 1rem; + border-radius: 5px; + justify-content: center; + margin: auto; +} + +summary { + cursor: pointer; +} + +summary > * { + display: inline; +} diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug index 5bb156f0f4..32499aa452 100644 --- a/packages/backend/src/server/web/views/base.pug +++ b/packages/backend/src/server/web/views/base.pug @@ -53,7 +53,7 @@ html block meta block og - meta(property='og:title' content= title || 'Misskey') + meta(property='og:title' content= title || 'Misskey') meta(property='og:description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨') meta(property='og:image' content= img) diff --git a/packages/backend/src/server/web/views/flush.pug b/packages/backend/src/server/web/views/flush.pug index ec585a34db..b08f61c73a 100644 --- a/packages/backend/src/server/web/views/flush.pug +++ b/packages/backend/src/server/web/views/flush.pug @@ -1,6 +1,12 @@ doctype html html + head + meta(charset='utf-8') + meta(name='application-name' content='Misskey') + title Flushing Misskey + style + include ../error.css #msg script. const msg = document.getElementById('msg'); -- cgit v1.2.3-freya From cb246d3459508bcd25cd29e9c6d38ab637425b42 Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 5 Jul 2022 17:46:17 +0900 Subject: rename: BIOS -> Repair Tool --- packages/backend/src/server/web/boot.js | 2 +- packages/backend/src/server/web/views/bios.pug | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/backend/src/server/web') diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 124f25f5e8..e82de8e14d 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -135,7 +135,7 @@

diff --git a/packages/backend/src/server/web/views/bios.pug b/packages/backend/src/server/web/views/bios.pug index d81a3ee67f..39a151a29b 100644 --- a/packages/backend/src/server/web/views/bios.pug +++ b/packages/backend/src/server/web/views/bios.pug @@ -5,7 +5,7 @@ html head meta(charset='utf-8') meta(name='application-name' content='Misskey') - title Misskey BIOS + title Misskey Repair Tool style include ../bios.css script @@ -13,7 +13,7 @@ html body header - h1 Misskey BIOS #{version} + h1 Misskey Repair Tool #{version} main div.tabs button#ls edit local storage -- cgit v1.2.3-freya From b35c3114c80855e4eb5e208f088200f995460b3a Mon Sep 17 00:00:00 2001 From: syuilo Date: Wed, 6 Jul 2022 06:36:14 +0900 Subject: revert: feat: styled error screen (#8930) --- packages/backend/src/server/web/boot.js | 43 +++-------- packages/backend/src/server/web/error.css | 98 ------------------------- packages/backend/src/server/web/views/base.pug | 2 +- packages/backend/src/server/web/views/flush.pug | 6 -- 4 files changed, 11 insertions(+), 138 deletions(-) delete mode 100644 packages/backend/src/server/web/error.css (limited to 'packages/backend/src/server/web') diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index e82de8e14d..9fc536555a 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -106,39 +106,15 @@ function renderError(code, details) { let errorsElement = document.getElementById('errors'); if (!errorsElement) { - document.getElementsByTagName("head")[0].insertAdjacentHTML( - "beforeend", - ``); document.documentElement.innerHTML = ` - - - - - -

An error has occurred!

- -

Don't worry, it's (probably) not your fault.

-

If the problem persists after refreshing, please contact your instance's administrator.
You may also try the following options:

- - - -
- - - -
- - - -
+

⚠ An error has occurred. ⚠

+

If the problem persists, please contact the administrator. You may also try the following options:

+ +
`; @@ -146,7 +122,8 @@ } const detailsElement = document.createElement('details'); - detailsElement.innerHTML = `
ERROR CODE: ${code}${JSON.stringify(details)}`; + detailsElement.innerHTML = `ERROR CODE: ${code}${JSON.stringify(details)}`; + errorsElement.appendChild(detailsElement); } diff --git a/packages/backend/src/server/web/error.css b/packages/backend/src/server/web/error.css deleted file mode 100644 index 9f8f905017..0000000000 --- a/packages/backend/src/server/web/error.css +++ /dev/null @@ -1,98 +0,0 @@ -* { - font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; -} - -body, -html { - background-color: #222; - color: #dfddcc; - justify-content: center; - margin: auto; - width: 80%; - padding: 10px; - text-align: center; -} - -button { - 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; -} - -.button-big:hover { - background: rgb(153, 204, 0); -} - -.button-small { - background: #444; - line-height: 40px; -} - -.button-small:hover { - background: #555; -} - -.button-label-big { - color: #222; - font-weight: bold; - font-size: 20px; - padding: 12px; -} - -.button-label-small { - color: rgb(153, 204, 0); - font-size: 16px; - padding: 12px; -} - -a { - color: rgb(134, 179, 0); - text-decoration: none; -} - -p, -li { - font-size: 16px; -} - -.dont-worry, -#msg { - font-size: 18px; -} - -.icon-warning { - color: #dec340; - height: 4rem; -} - -h1 { - font-size: 32px; -} - -code { - font-family: Fira, FiraCode, monospace; -} - -details { - background: #333; - margin-bottom: 2rem; - padding: 0.5rem 1rem; - border-radius: 5px; - justify-content: center; - margin: auto; -} - -summary { - cursor: pointer; -} - -summary > * { - display: inline; -} diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug index 32499aa452..5bb156f0f4 100644 --- a/packages/backend/src/server/web/views/base.pug +++ b/packages/backend/src/server/web/views/base.pug @@ -53,7 +53,7 @@ html block meta block og - meta(property='og:title' content= title || 'Misskey') + meta(property='og:title' content= title || 'Misskey') meta(property='og:description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨') meta(property='og:image' content= img) diff --git a/packages/backend/src/server/web/views/flush.pug b/packages/backend/src/server/web/views/flush.pug index b08f61c73a..ec585a34db 100644 --- a/packages/backend/src/server/web/views/flush.pug +++ b/packages/backend/src/server/web/views/flush.pug @@ -1,12 +1,6 @@ doctype html html - head - meta(charset='utf-8') - meta(name='application-name' content='Misskey') - title Flushing Misskey - style - include ../error.css #msg script. const msg = document.getElementById('msg'); -- cgit v1.2.3-freya From a23f59b996de5f8a47614dd99ce2b7a319b3fad4 Mon Sep 17 00:00:00 2001 From: Kainoa Kanter <44733677+ThatOneCalculator@users.noreply.github.com> Date: Thu, 7 Jul 2022 01:35:56 -0700 Subject: enhance: Styled error screen (#8946) * Styled error screen * Make details margin auto * Update boot.css * Replace fontawesome with tabler svg * Remove hr * Add new style to flush screen * Rename to `error.css` * Fix * Update base.pug * Finally fix! * Wrap details in `` * Add style to flush * Fix * BIOS -> Repair tool * Fix * Typo * Adjust style * Adjust text * Flush -> Clear * Revert flush changes * Responsive * Also hide splash --- packages/backend/src/server/web/boot.js | 166 +++++++++++++++++++++++++++++--- 1 file changed, 153 insertions(+), 13 deletions(-) (limited to 'packages/backend/src/server/web') diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 9fc536555a..0a5cc0e0dc 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -102,29 +102,169 @@ document.head.appendChild(style); } - // eslint-disable-next-line no-inner-declarations + async function addStyle(styleText) { + let css = document.createElement('style'); + css.appendChild(document.createTextNode(styleText)); + document.head.appendChild(css); + } + function renderError(code, details) { let errorsElement = document.getElementById('errors'); + if (!errorsElement) { document.documentElement.innerHTML = ` -

⚠ An error has occurred. ⚠

-

If the problem persists, please contact the administrator. You may also try the following options:

- -
+ + + + + +

An error has occurred!

+ +

Don't worry, it's (probably) not your fault.

+

If the problem persists after refreshing, please contact your instance's administrator.
You may also try the following options:

+ + + +
+ + + +
+ + + +
`; - errorsElement = document.getElementById('errors'); } - const detailsElement = document.createElement('details'); - detailsElement.innerHTML = `ERROR CODE: ${code}${JSON.stringify(details)}`; - + detailsElement.innerHTML = ` +
+ + ERROR CODE: ${code} + + ${JSON.stringify(details)}`; errorsElement.appendChild(detailsElement); + addStyle(` + * { + font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; + } + + #misskey_app, + #splash { + display: none !important; + } + + body, + html { + 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; + } + + .button-big { + background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0)); + line-height: 50px; + } + + .button-big:hover { + background: rgb(153, 204, 0); + } + + .button-small { + background: #444; + line-height: 40px; + } + + .button-small:hover { + background: #555; + } + + .button-label-big { + color: #222; + font-weight: bold; + font-size: 20px; + padding: 12px; + } + + .button-label-small { + color: rgb(153, 204, 0); + font-size: 16px; + padding: 12px; + } + + a { + color: rgb(134, 179, 0); + text-decoration: none; + } + + p, + li { + font-size: 16px; + } + + .dont-worry, + #msg { + font-size: 18px; + } + + .icon-warning { + color: #dec340; + height: 4rem; + padding-top: 2rem; + } + + h1 { + font-size: 32px; + } + + code { + font-family: Fira, FiraCode, monospace; + } + + details { + background: #333; + margin-bottom: 2rem; + padding: 0.5rem 1rem; + width: 40rem; + border-radius: 10px; + justify-content: center; + margin: auto; + } + + summary { + cursor: pointer; + } + + summary > * { + display: inline; + } + + @media screen and (max-width: 500px) { + details { + width: 50%; + } + `) } // eslint-disable-next-line no-inner-declarations -- cgit v1.2.3-freya