summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/frontend-embed/src/boot.ts37
-rw-r--r--packages/frontend-embed/src/pages/clip.vue2
-rw-r--r--packages/frontend-embed/src/pages/tag.vue2
-rw-r--r--packages/frontend-embed/src/pages/user-timeline.vue2
-rw-r--r--packages/frontend-embed/src/server-metadata.ts5
-rw-r--r--packages/frontend-embed/src/theme.ts8
-rw-r--r--packages/frontend-embed/src/ui.vue2
-rw-r--r--packages/frontend/src/components/MkEmbedCodeGenDialog.vue2
-rw-r--r--packages/frontend/src/scripts/theme.ts2
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;
}
}
</style>
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;
}
}
</style>
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;
}
}
</style>
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<string, unknown>): 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<string, string> {
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')"
>
- <template #header>{{ i18n.ts._embedCodeGen.title }}</template>
+ <template #header><i class="ti ti-code"></i> {{ i18n.ts._embedCodeGen.title }}</template>
<div :class="$style.embedCodeGenRoot">
<Transition
diff --git a/packages/frontend/src/scripts/theme.ts b/packages/frontend/src/scripts/theme.ts
index 9b9f1f030c..fc888c0908 100644
--- a/packages/frontend/src/scripts/theme.ts
+++ b/packages/frontend/src/scripts/theme.ts
@@ -52,7 +52,7 @@ export const getBuiltinThemes = () => 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 = () => {