From f393b6b898d146fbd1c88d9713fba94c8b2f1284 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Tue, 10 Sep 2024 16:14:02 +0900 Subject: [PATCH] =?UTF-8?q?fix(frontend/frontend-embed):=20=E3=82=A4?= =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=88=E3=83=91=E3=82=B9=E3=83=BB?= =?UTF-8?q?=E3=83=86=E3=83=BC=E3=83=9E=E3=81=BE=E3=82=8F=E3=82=8A=E3=81=AA?= =?UTF-8?q?=E3=81=A9=E3=81=AE=E4=BF=AE=E6=AD=A3=20(#14535)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend/frontend-embed): wrong imports * enhance(frontend-embed): サーバーデフォルトのテーマがある場合はそちらを利用するように * :art: * :art: * :art: --- packages/frontend-embed/src/boot.ts | 37 ++++++++++++++----- packages/frontend-embed/src/pages/clip.vue | 2 +- packages/frontend-embed/src/pages/tag.vue | 2 +- .../src/pages/user-timeline.vue | 2 +- .../frontend-embed/src/server-metadata.ts | 5 ++- packages/frontend-embed/src/theme.ts | 8 ++-- packages/frontend-embed/src/ui.vue | 2 +- .../src/components/MkEmbedCodeGenDialog.vue | 2 +- packages/frontend/src/scripts/theme.ts | 2 +- 9 files changed, 42 insertions(+), 20 deletions(-) diff --git a/packages/frontend-embed/src/boot.ts b/packages/frontend-embed/src/boot.ts index 4676baa905..6c73fecd76 100644 --- a/packages/frontend-embed/src/boot.ts +++ b/packages/frontend-embed/src/boot.ts @@ -10,23 +10,42 @@ import '@tabler/icons-webfont/dist/tabler-icons.scss'; import '@/style.scss'; import { createApp, defineAsyncComponent } from 'vue'; -import lightTheme from '@@/themes/l-light.json5'; -import darkTheme from '@@/themes/d-dark.json5'; +import defaultLightTheme from '@@/themes/l-light.json5'; +import defaultDarkTheme from '@@/themes/d-dark.json5'; import { MediaProxy } from '@@/js/media-proxy.js'; -import { applyTheme } from './theme.js'; -import { fetchCustomEmojis } from './custom-emojis.js'; -import { DI } from './di.js'; -import { serverMetadata } from './server-metadata.js'; -import { url } from './config.js'; +import { applyTheme, assertIsTheme } from '@/theme.js'; +import { fetchCustomEmojis } from '@/custom-emojis.js'; +import { DI } from '@/di.js'; +import { serverMetadata } from '@/server-metadata.js'; +import { url } from '@/config.js'; import { parseEmbedParams } from '@@/js/embed-page.js'; import { postMessageToParentWindow, setIframeId } from '@/post-message.js'; -console.info('Misskey Embed'); +import type { Theme } from '@/theme.js'; + +console.log('Misskey Embed'); const params = new URLSearchParams(location.search); const embedParams = parseEmbedParams(params); -console.info(embedParams); +if (_DEV_) console.log(embedParams); + +function parseThemeOrNull(theme: string | null): Theme | null { + if (theme == null) return null; + try { + const parsed = JSON.parse(theme); + if (assertIsTheme(parsed)) { + return parsed; + } else { + return null; + } + } catch (err) { + return null; + } +} + +const lightTheme = parseThemeOrNull(serverMetadata.defaultLightTheme) ?? defaultLightTheme; +const darkTheme = parseThemeOrNull(serverMetadata.defaultDarkTheme) ?? defaultDarkTheme; if (embedParams.colorMode === 'dark') { applyTheme(darkTheme); diff --git a/packages/frontend-embed/src/pages/clip.vue b/packages/frontend-embed/src/pages/clip.vue index 28bd0ab772..29b5480c35 100644 --- a/packages/frontend-embed/src/pages/clip.vue +++ b/packages/frontend-embed/src/pages/clip.vue @@ -135,7 +135,7 @@ misskeyApi('clips/show', { .instanceIcon { height: 24px; - border-radius: 4px; + border-radius: 3px; } } diff --git a/packages/frontend-embed/src/pages/tag.vue b/packages/frontend-embed/src/pages/tag.vue index d69555287a..ea45d7129e 100644 --- a/packages/frontend-embed/src/pages/tag.vue +++ b/packages/frontend-embed/src/pages/tag.vue @@ -119,7 +119,7 @@ function top(ev: MouseEvent) { .instanceIcon { height: 24px; - border-radius: 4px; + border-radius: 3px; } } diff --git a/packages/frontend-embed/src/pages/user-timeline.vue b/packages/frontend-embed/src/pages/user-timeline.vue index d590f6e650..431577d04b 100644 --- a/packages/frontend-embed/src/pages/user-timeline.vue +++ b/packages/frontend-embed/src/pages/user-timeline.vue @@ -132,7 +132,7 @@ misskeyApi('users/show', { .instanceIcon { height: 24px; - border-radius: 4px; + border-radius: 3px; } } diff --git a/packages/frontend-embed/src/server-metadata.ts b/packages/frontend-embed/src/server-metadata.ts index 2bd57a0990..6c94aacd48 100644 --- a/packages/frontend-embed/src/server-metadata.ts +++ b/packages/frontend-embed/src/server-metadata.ts @@ -3,13 +3,14 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +import * as Misskey from 'misskey-js'; import { misskeyApi } from '@/misskey-api.js'; const providedMetaEl = document.getElementById('misskey_meta'); -const _serverMetadata = (providedMetaEl && providedMetaEl.textContent) ? JSON.parse(providedMetaEl.textContent) : null; +const _serverMetadata: Misskey.entities.MetaDetailed | null = (providedMetaEl && providedMetaEl.textContent) ? JSON.parse(providedMetaEl.textContent) : null; // NOTE: devモードのときしか _serverMetadata が null になることは無い -export const serverMetadata = _serverMetadata ?? await misskeyApi('meta', { +export const serverMetadata: Misskey.entities.MetaDetailed = _serverMetadata ?? await misskeyApi('meta', { detail: true, }); diff --git a/packages/frontend-embed/src/theme.ts b/packages/frontend-embed/src/theme.ts index 050d8cf63b..ee633fae94 100644 --- a/packages/frontend-embed/src/theme.ts +++ b/packages/frontend-embed/src/theme.ts @@ -26,6 +26,10 @@ export type Theme = { let timeout: number | null = null; +export function assertIsTheme(theme: Record): theme is Theme { + return typeof theme === 'object' && theme !== null && 'id' in theme && 'name' in theme && 'author' in theme && 'props' in theme; +} + export function applyTheme(theme: Theme, persist = true) { if (timeout) window.clearTimeout(timeout); @@ -35,8 +39,6 @@ export function applyTheme(theme: Theme, persist = true) { document.documentElement.classList.remove('_themeChanging_'); }, 1000); - const colorScheme = theme.base === 'dark' ? 'dark' : 'light'; - // Deep copy const _theme = JSON.parse(JSON.stringify(theme)); @@ -58,7 +60,7 @@ export function applyTheme(theme: Theme, persist = true) { document.documentElement.style.setProperty(`--${k}`, v.toString()); } - document.documentElement.style.setProperty('color-scheme', colorScheme); + // iframeを正常に透過させるために、cssのcolor-schemeは `light dark;` 固定にしてある。style.scss参照 } function compile(theme: Theme): Record { diff --git a/packages/frontend-embed/src/ui.vue b/packages/frontend-embed/src/ui.vue index 3b8449dac8..35d9946b12 100644 --- a/packages/frontend-embed/src/ui.vue +++ b/packages/frontend-embed/src/ui.vue @@ -40,7 +40,7 @@ import XNotFound from '@/pages/not-found.vue'; const page = location.pathname.split('/')[2]; const contentId = location.pathname.split('/')[3]; -console.log(page, contentId); +if (_DEV_) console.log(page, contentId); const embedParams = inject(DI.embedParams, defaultEmbedParams); diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue index 51630c427c..c1de803007 100644 --- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue +++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue @@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only @close="cancel()" @closed="$emit('closed')" > - +
Promise.all( 'd-cherry', 'd-ice', 'd-u0', - ].map(name => import(`@/themes/${name}.json5`).then(({ default: _default }): Theme => _default)), + ].map(name => import(`@@/themes/${name}.json5`).then(({ default: _default }): Theme => _default)), ); export const getBuiltinThemesRef = () => {