feat(frontend): ノート・ユーザータイムライン埋め込み

locales/index.d.ts

@@ -4984,6 +4984,10 @@ export interface Locale extends ILocale {
      * お問い合わせ
      */
     "inquiry": string;
+    /**
+     * {x}から
+     */
+    "fromX": ParameterizedString<"x">;
     "_delivery": {
         /**
          * 配信状態

locales/ja-JP.yml

@@ -1242,6 +1242,7 @@ keepOriginalFilenameDescription: "この設定をオフにすると、アップ
 noDescription: "説明文はありません"
 alwaysConfirmFollow: "フォローの際常に確認する"
 inquiry: "お問い合わせ"
+fromX: "{x}から"
 
 _delivery:
   status: "配信状態"

packages/backend/src/server/web/ClientServerService.ts

@@ -751,7 +751,7 @@ export class ClientServerService {
 		});
 		//#endregion
 
-		//region noindex pages
+		//#region noindex pages
 		// Tags
 		fastify.get<{ Params: { clip: string; } }>('/tags/:tag', async (request, reply) => {
 			return await renderBase(reply, { noindex: true });
@@ -761,7 +761,13 @@ export class ClientServerService {
 		fastify.get<{ Params: { clip: string; } }>('/user-tags/:tag', async (request, reply) => {
 			return await renderBase(reply, { noindex: true });
 		});
-		//endregion
+		//#endregion
+
+		//#region embed pages
+		fastify.get('/embed/*', async (request, reply) => {
+			reply.removeHeader('X-Frame-Options');
+			return await renderBase(reply, { noindex: true, embed: true });
+		});
 
 		fastify.get('/_info_card_', async (request, reply) => {
 			const meta = await this.metaService.fetch(true);
@@ -776,6 +782,7 @@ export class ClientServerService {
 				originalNotesCount: await this.notesRepository.countBy({ userHost: IsNull() }),
 			});
 		});
+		//#endregion
 
 		fastify.get('/bios', async (request, reply) => {
 			return await reply.view('bios', {

packages/backend/src/server/web/boot.js

@@ -174,7 +174,7 @@
 			<p>Update your os and browser / ブラウザおよびOSを最新バージョンに更新する</p>
 			<p>Disable an adblocker / アドブロッカーを無効にする</p>
 	 		<p>&#40;Tor Browser&#41; Set dom.webaudio.enabled to true / dom.webaudio.enabledをtrueに設定する</p>
-			<details style="color: #86b300;">
+			<details class="hide-when-embed" style="color: #86b300;">
 				<summary>Other options / その他のオプション</summary>
 				<a href="/flush">
 					<button class="button-small">
@@ -228,6 +228,10 @@
 			text-align: center;
 		}
 
+		html.embed .hide-when-embed {
+			display: none;
+		}
+
 		button {
 			border-radius: 999px;
 			padding: 0px 12px 0px 12px;

packages/backend/src/server/web/style.css

@@ -9,6 +9,12 @@ html {
 	color: var(--fg);
 }
 
+html.embed {
+	box-sizing: border-box;
+	background-color: transparent;
+	max-width: 500px;
+}
+
 #splash {
 	position: fixed;
 	z-index: 10000;
@@ -22,6 +28,13 @@ html {
 	transition: opacity 0.5s ease;
 }
 
+html.embed #splash {
+	box-sizing: border-box;
+	min-height: 300px;
+	border-radius: var(--radius, 12px);
+	border: 1px solid var(--divider);
+}
+
 #splashIcon {
 	position: absolute;
 	top: 0;

packages/backend/src/server/web/views/base.pug

@@ -17,7 +17,7 @@ doctype html
 	 https://github.com/misskey-dev/misskey
 
 
-html
+html(class=embed && 'embed')
 
 	head
 		meta(charset='utf-8')

packages/frontend/src/_boot_.ts

@@ -7,12 +7,33 @@
 import 'vite/modulepreload-polyfill';
 
 import '@/style.scss';
+import type { CommonBootOptions } from '@/boot/common.js';
 import { mainBoot } from '@/boot/main-boot.js';
 import { subBoot } from '@/boot/sub-boot.js';
+import { isEmbedPage } from '@/scripts/embed-page.js';
+import { setIframeId, postMessageToParentWindow } from '@/scripts/post-message.js';
 
 const subBootPaths = ['/share', '/auth', '/miauth', '/signup-complete'];
 
-if (subBootPaths.some(i => location.pathname === i || location.pathname.startsWith(i + '/'))) {
+if (isEmbedPage()) {
+	const bootOptions: Partial<CommonBootOptions> = {};
+
+	const params = new URLSearchParams(location.search);
+	const color = params.get('colorMode');
+	if (color && ['light', 'dark'].includes(color)) {
+		bootOptions.forceColorMode = color as 'light' | 'dark';
+	}
+
+	window.addEventListener('message', event => {
+		if (event.data?.type === 'misskey:embedParent:registerIframeId' && event.data.payload?.iframeId != null) {
+			setIframeId(event.data.payload.iframeId);
+		}
+	});
+
+	subBoot(bootOptions, true).then(() => {
+		postMessageToParentWindow('misskey:embed:ready');
+	});
+} else if (subBootPaths.some(i => location.pathname === i || location.pathname.startsWith(i + '/'))) {
 	subBoot();
 } else {
 	mainBoot();

packages/frontend/src/account.ts

@@ -14,15 +14,22 @@ import { apiUrl } from '@/config.js';
 import { waiting, popup, popupMenu, success, alert } from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { unisonReload, reloadChannel } from '@/scripts/unison-reload.js';
+import { isEmbedPage } from '@/scripts/embed-page.js';
 
 // TODO: 他のタブと永続化されたstateを同期
 
 type Account = Misskey.entities.MeDetailed & { token: string };
 
 const accountData = miLocalStorage.getItem('account');
 
+function initAccount() {
+	if (isEmbedPage()) return null;
+	if (accountData) return reactive(JSON.parse(accountData) as Account);
+	return null;
+}
+
 // TODO: 外部からはreadonlyに
-export const $i = accountData ? reactive(JSON.parse(accountData) as Account) : null;
+export const $i = initAccount();
 
 export const iAmModerator = $i != null && ($i.isAdmin === true || $i.isModerator === true);
 export const iAmAdmin = $i != null && $i.isAdmin;
@@ -78,10 +85,14 @@ export async function signout() {
 }
 
 export async function getAccounts(): Promise<{ id: Account['id'], token: Account['token'] }[]> {
+	if (isEmbedPage()) return [];
+
 	return (await get('accounts')) || [];
 }
 
 export async function addAccount(id: Account['id'], token: Account['token']) {
+	if (isEmbedPage()) return;
+
 	const accounts = await getAccounts();
 	if (!accounts.some(x => x.id === id)) {
 		await set('accounts', accounts.concat([{ id, token }]));
@@ -183,6 +194,8 @@ export async function refreshAccount() {
 }
 
 export async function login(token: Account['token'], redirect?: string) {
+	if (isEmbedPage()) return;
+
 	const showing = ref(true);
 	popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
 		success: false,

packages/frontend/src/boot/common.ts

@@ -24,7 +24,17 @@ import { miLocalStorage } from '@/local-storage.js';
 import { fetchCustomEmojis } from '@/custom-emojis.js';
 import { setupRouter } from '@/router/definition.js';
 
-export async function common(createVue: () => App<Element>) {
+export type CommonBootOptions = {
+	forceColorMode: 'dark' | 'light' | 'auto';
+};
+
+const defaultCommonBootOptions: CommonBootOptions = {
+	forceColorMode: 'auto',
+};
+
+export async function common(createVue: () => App<Element>, partialOptions?: Partial<CommonBootOptions>) {
+	const bootOptions = Object.assign(defaultCommonBootOptions, partialOptions);
+
 	console.info(`Misskey v${version}`);
 
 	if (_DEV_) {
@@ -166,15 +176,19 @@ export async function common(createVue: () => App<Element>) {
 	});
 
 	//#region Sync dark mode
-	if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+	if (ColdDeviceStorage.get('syncDeviceDarkMode') && bootOptions.forceColorMode === 'auto') {
 		defaultStore.set('darkMode', isDeviceDarkmode());
 	}
 
 	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (mql) => {
-		if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+		if (ColdDeviceStorage.get('syncDeviceDarkMode') && bootOptions.forceColorMode === 'auto') {
 			defaultStore.set('darkMode', mql.matches);
 		}
 	});
+
+	if (bootOptions.forceColorMode !== 'auto') {
+		defaultStore.set('darkMode', bootOptions.forceColorMode === 'dark');
+	}
 	//#endregion
 
 	fetchInstanceMetaPromise.then(() => {

packages/frontend/src/boot/sub-boot.ts

@@ -5,9 +5,10 @@
 
 import { createApp, defineAsyncComponent } from 'vue';
 import { common } from './common.js';
+import type { CommonBootOptions } from './common.js';
 
-export async function subBoot() {
+export async function subBoot(options?: Partial<CommonBootOptions>, isEmbedPage?: boolean) {
 	const { isClientUpdated } = await common(() => createApp(
-		defineAsyncComponent(() => import('@/ui/minimum.vue')),
-	));
+		defineAsyncComponent(() => isEmbedPage ? import('@/ui/embed.vue') : import('@/ui/minimum.vue')),
+	), options);
 }

packages/frontend/src/components/MkMediaImage.vue

@@ -14,6 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			title: image.name,
 			class: $style.imageContainer,
 			href: image.url,
+			target: '_blank',
+			rel: 'noopener',
 			style: 'cursor: zoom-in;'
 		}"
 	>

packages/frontend/src/components/MkMediaList.vue

@@ -5,7 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div>
-	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
+	<div v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :class="$style.banner">
+		<XBanner :media="media"/>
+		<a v-if="inEmbedPage && originalEntityUrl" :href="originalEntityUrl" target="_blank" rel="noopener" :class="$style.mediaLinkForEmbed"></a>
+	</div>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container">
 		<div
 			ref="gallery"
@@ -18,17 +21,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 				}] : count === 2 ? $style.n2 : count === 3 ? $style.n3 : count === 4 ? $style.n4 : $style.nMany,
 			]"
 		>
-			<template v-for="media in mediaList.filter(media => previewable(media))">
-				<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :class="$style.media" :video="media"/>
-				<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/>
-			</template>
+			<div v-for="media in mediaList.filter(media => previewable(media))" :class="$style.media">
+				<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :video="media" :class="$style.mediaInner"/>
+				<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.mediaInner" class="image" :data-id="media.id" :image="media" :raw="raw"/>
+				<a v-if="inEmbedPage && originalEntityUrl" :href="originalEntityUrl" target="_blank" rel="noopener" :class="$style.mediaLinkForEmbed"></a>
+			</div>
 		</div>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, shallowRef } from 'vue';
+import { computed, onMounted, onUnmounted, shallowRef, inject } from 'vue';
 import * as Misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@@ -43,8 +47,13 @@ import { defaultStore } from '@/store.js';
 const props = defineProps<{
 	mediaList: Misskey.entities.DriveFile[];
 	raw?: boolean;
+
+	/** 埋め込みページ用 親要素の正規URL */
+	originalEntityUrl?: string;
 }>();
 
+const inEmbedPage = inject<boolean>('EMBED_PAGE', false);
+
 const gallery = shallowRef<HTMLDivElement>();
 const pswpZIndex = os.claimZIndex('middle');
 document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
@@ -90,6 +99,7 @@ async function calcAspectRatio() {
 
 onMounted(() => {
 	calcAspectRatio();
+	if (defaultStore.state.imageNewTab || inEmbedPage) return;
 
 	lightbox = new PhotoSwipeLightbox({
 		dataSource: props.mediaList
@@ -284,6 +294,26 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => {
 .media {
 	overflow: hidden; // clipにするとバグる
 	border-radius: 8px;
+	position: relative;
+
+	>.mediaInner {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.banner {
+	position: relative;
+}
+
+.mediaLinkForEmbed::after {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1;
+	content: '';
 }
 
 :global(.pswp) {