wip

packages/frontend/src/pages/embed/index.vue

@@ -1,13 +1,9 @@
 <template>
-	<div>
+<div></div>
-		$i: {{ JSON.stringify($i) }}
-	</div>
 </template>
 
 <script setup lang="ts">
-import { $i } from '@/account.js';
 </script>
 
-<style scoped>
+<style lang="scss" module>
-
 </style>

packages/frontend/src/scripts/post-message.ts

@@ -19,6 +19,7 @@ export type MiPostMessageEvent = {
  * 親フレームにイベントを送信
  */
 export function postMessageToParentWindow(type: PostMessageEventType, payload?: any): void {
+	if (_DEV_) console.log('postMessageToParentWindow', type, payload);
 	window.parent.postMessage({
 		type,
 		payload,

packages/frontend/src/style.scss

@@ -90,6 +90,10 @@ html {
 	&.useSystemFont {
 		font-family: system-ui;
 	}
+
+	&.embed {
+		background-color: transparent;
+	}
 }
 
 html._themeChanging_ {

packages/frontend/src/ui/minimum.vue

@@ -4,7 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="isEmbed ? $style.rootForEmbedPage : $style.root">
+<div
+	ref="rootEl"
+	:class="isEmbed ? [
+		$style.rootForEmbedPage,
+		{
+			[$style.rounded]: embedRounded,
+		}
+	] : [$style.root]"
+>
 	<div style="container-type: inline-size;">
 		<RouterView/>
 	</div>
@@ -14,17 +22,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, ref } from 'vue';
+import { computed, provide, ref, shallowRef, onMounted, onUnmounted } from 'vue';
 import XCommon from './_common_/common.vue';
 import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
 import { instanceName } from '@/config.js';
 import { mainRouter } from '@/router/main.js';
+import { isEmbedPage } from '@/scripts/embed-page.js';
+import { postMessageToParentWindow } from '@/scripts/post-message';
 
-const props = withDefaults(defineProps<{
+const isEmbed = isEmbedPage();
-	isEmbed?: boolean;
-}>(), {
-	isEmbed: false,
-});
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
@@ -44,7 +50,33 @@ provideMetadataReceiver((metadataGetter) => {
 });
 provideReactiveMetadata(pageMetadata);
 
-if (!props.isEmbed) {
+//#region Embed Style
+const params = new URLSearchParams(location.search);
+const embedRounded = ref(params.get('rounded') !== '0');
+//#endregion
+
+//#region Embed Resizer
+const rootEl = shallowRef<HTMLElement | null>(null);
+
+if (isEmbed) {
+	const resizeObserver = new ResizeObserver(async () => {
+		postMessageToParentWindow('misskey:embed:changeHeight', {
+			height: rootEl.value!.scrollHeight + 2, // border 上下1px
+		});
+	});
+	onMounted(() => {
+		resizeObserver.observe(rootEl.value!);
+	});
+	onUnmounted(() => {
+		resizeObserver.disconnect();
+	});
+}
+//#endregion
+
+if (isEmbed) {
+	document.documentElement.style.maxWidth = '500px';
+	document.documentElement.classList.add('embed');
+} else {
 	document.documentElement.style.overflowY = 'scroll';
 }
 </script>
@@ -57,5 +89,13 @@ if (!props.isEmbed) {
 
 .rootForEmbedPage {
 	box-sizing: border-box;
+	border: 1px solid var(--divider);
+	background-color: var(--bg);
+	overflow: hidden;
+	position: relative;
+
+	&.rounded {
+		border-radius: var(--radius);
+	}
 }
 </style>