埋め込みコード生成機能

packages/frontend/src/scripts/get-embed-code.ts

@@ -0,0 +1,103 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { v4 as uuid } from 'uuid';
+import { url } from '@/config.js';
+import { MOBILE_THRESHOLD } from '@/const.js';
+import * as os from '@/os.js';
+import copy from '@/scripts/copy-to-clipboard.js';
+import MkEmbedCodeGenDialog from '@/components/MkEmbedCodeGenDialog.vue';
+
+// 埋め込みの対象となるエンティティ（/embed/xxx の xxx の部分と対応させる）
+const embeddableEntities = [
+	'notes',
+	'user-timeline',
+	'clip',
+	'tag',
+] as const;
+
+export type EmbeddableEntity = typeof embeddableEntities[number];
+
+// 内部でスクロールがあるページ
+export const embedRouteWithScrollbar: EmbeddableEntity[] = [
+	'clip',
+	'tag',
+	'user-timeline'
+];
+
+export type EmbedParams = {
+	maxHeight?: number;
+	colorMode?: 'light' | 'dark';
+	rounded?: boolean;
+	border?: boolean;
+	autoload?: boolean;
+	header?: boolean;
+};
+
+export function normalizeEmbedParams(params: EmbedParams): Record<string, string> {
+	// paramsのvalueをすべてstringに変換。undefinedやnullはプロパティごと消す
+	const normalizedParams: Record<string, string> = {};
+	for (const key in params) {
+		if (params[key] == null) {
+			continue;
+		}
+		switch (typeof params[key]) {
+			case 'number':
+				normalizedParams[key] = params[key].toString();
+				break;
+			case 'boolean':
+				normalizedParams[key] = params[key] ? 'true' : 'false';
+				break;
+			default:
+				normalizedParams[key] = params[key];
+				break;
+		}
+	}
+	return normalizedParams;
+}
+
+/**
+ * 埋め込みコードを生成（iframe IDの発番もやる）
+ */
+export function getEmbedCode(path: string, params?: EmbedParams): string {
+	const iframeId = 'v1_' + uuid(); // 将来embed.jsのバージョンが上がったとき用にv1_を付けておく
+
+	let paramString = '';
+	if (params) {
+		const searchParams = new URLSearchParams(normalizeEmbedParams(params));
+		paramString = '?' + searchParams.toString();
+	}
+
+	const iframeCode = [
+		`<iframe src="${url + path + paramString}" data-misskey-embed-id="${iframeId}" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>`,
+		`<script defer src="${url}/embed.js"></script>`,
+	];
+	return iframeCode.join('\n');
+}
+
+/**
+ * 埋め込みコードを生成してコピーする（カスタマイズ機能つき）
+ *
+ * カスタマイズ機能がいらない場合（事前にパラメータを指定する場合）は getEmbedCode を直接使ってください
+ */
+export function copyEmbedCode(entity: EmbeddableEntity, idOrUsername: string, params?: EmbedParams) {
+	const _params = { ...params };
+
+	if (embedRouteWithScrollbar.includes(entity) && _params.maxHeight == null) {
+		_params.maxHeight = 700;
+	}
+
+	// PCじゃない場合はコードカスタマイズ画面を出さずにそのままコピー
+	if (window.innerWidth < MOBILE_THRESHOLD) {
+		const _idOrUsername = entity === 'user-timeline' ? `@${idOrUsername}` : idOrUsername;
+		copy(getEmbedCode(`/embed/${entity}/${_idOrUsername}`, _params));
+		os.success();
+	} else {
+		os.popup(MkEmbedCodeGenDialog, {
+			entity,
+			idOrUsername,
+			params: _params,
+		});
+	}
+}

packages/frontend/src/scripts/get-note-menu.ts

@@ -20,6 +20,7 @@ import { clipsCache, favoritedChannelsCache } from '@/cache.js';
 import { MenuItem } from '@/types/menu.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { isSupportShare } from '@/scripts/navigator.js';
+import { copyEmbedCode } from '@/scripts/get-embed-code.js';
 
 export async function getNoteClipMenu(props: {
 	note: Misskey.entities.Note;
@@ -321,6 +322,13 @@ export function getNoteMenu(props: {
 				text: i18n.ts.share,
 				action: share,
 			}] : []),
+			(!appearNote.url && !appearNote.uri) ? {
+				icon: 'ti ti-code',
+				text: i18n.ts.copyEmbedCode,
+				action: () => {
+					copyEmbedCode('notes', appearNote.id);
+				},
+			} : undefined,
 			$i && $i.policies.canUseTranslator && instance.translatorAvailable ? {
 				icon: 'ti ti-language-hiragana',
 				text: i18n.ts.translate,

packages/frontend/src/scripts/get-user-menu.ts

@@ -16,6 +16,7 @@ import { $i, iAmModerator } from '@/account.js';
 import { IRouter } from '@/nirax.js';
 import { antennasCache, rolesCache, userListsCache } from '@/cache.js';
 import { mainRouter } from '@/router/main.js';
+import { copyEmbedCode } from '@/scripts/get-embed-code.js';
 
 export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter = mainRouter) {
 	const meId = $i ? $i.id : null;
@@ -177,7 +178,17 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter
 			if (user.url == null) return;
 			window.open(user.url, '_blank', 'noopener');
 		},
-	}] : []), {
+	}] : [{
+		icon: 'ti ti-code',
+		text: i18n.ts.copyEmbedCode,
+		type: 'parent' as const,
+		children: [{
+			text: i18n.ts.noteOfThisUser,
+			action: () => {
+				copyEmbedCode('user-timeline', user.username);
+			},
+		}], // TODO: ユーザーカードの埋め込みなど
+	}]), {
 		icon: 'ti ti-share',
 		text: i18n.ts.copyProfileUrl,
 		action: () => {

packages/frontend/src/scripts/theme.ts

@@ -11,6 +11,7 @@ import { globalEvents } from '@/events.js';
 import lightTheme from '@/themes/_light.json5';
 import darkTheme from '@/themes/_dark.json5';
 import { miLocalStorage } from '@/local-storage.js';
+import { isEmbedPage } from '@/scripts/embed-page.js';
 
 export type Theme = {
 	id: string;
@@ -95,7 +96,9 @@ export function applyTheme(theme: Theme, persist = true) {
 		document.documentElement.style.setProperty(`--${k}`, v.toString());
 	}
 
-	document.documentElement.style.setProperty('color-scheme', colorScheme);
+	if (!isEmbedPage()) {
+		document.documentElement.style.setProperty('color-scheme', colorScheme);
+	}
 
 	if (persist) {
 		miLocalStorage.setItem('theme', JSON.stringify(props));