From 2ebe003b93d21aea1b4adff9d04d0773fb764791 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 10 Nov 2024 16:27:36 +0900
Subject: [PATCH 1/7] =?UTF-8?q?enhance(frontend):=20bluesky=E3=81=AE?=
 =?UTF-8?q?=E6=8A=95=E7=A8=BF=E5=9F=8B=E3=82=81=E8=BE=BC=E3=81=BF=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=AB=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  2 +-
 locales/ja-JP.yml                             |  2 +-
 .../frontend/src/components/MkUrlPreview.vue  | 93 ++++++++++++++++---
 packages/frontend/src/index.html              |  2 +-
 4 files changed, 83 insertions(+), 16 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 440f24ac8472..c984f2a8c89d 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -2585,7 +2585,7 @@ export interface Locale extends ILocale {
     /**
      * ポストを展開する
      */
-    "expandTweet": string;
+    "expandPost": string;
     /**
      * テーマエディター
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 5d8e1a5e7256..5aa72f602e18 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -641,7 +641,7 @@ poll: "アンケート"
 useCw: "内容を隠す"
 enablePlayer: "プレイヤーを開く"
 disablePlayer: "プレイヤーを閉じる"
-expandTweet: "ポストを展開する"
+expandPost: "ポストを展開する"
 themeEditor: "テーマエディター"
 description: "説明"
 describeFile: "キャプションを付ける"
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index f0da8fd3f2bb..437cb0e57f21 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -27,9 +27,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </template>
 <template v-else-if="tweetId && tweetExpanded">
-	<div ref="twitter">
+	<div>
 		<iframe
-			ref="tweet"
 			allow="fullscreen;web-share"
 			sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-same-origin"
 			scrolling="no"
@@ -43,6 +42,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkButton>
 	</div>
 </template>
+<template v-else-if="bskyDid && bskyPostRecordKey && bskyPostExpanded">
+	<div>
+		<iframe
+			allow="fullscreen;web-share"
+			sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-same-origin"
+			scrolling="no"
+			:style="{ position: 'relative', width: '100%', height: `${bskyPostHeight}px`, border: 0 }"
+			:src="`https://embed.bsky.app/embed/${bskyDid}/app.bsky.feed.post/${bskyPostRecordKey}?id=${embedId}`"
+		></iframe>
+	</div>
+	<div :class="$style.action">
+		<MkButton :small="true" inline @click="bskyPostExpanded = false">
+			<i class="ti ti-x"></i> {{ i18n.ts.close }}
+		</MkButton>
+	</div>
+</template>
 <div v-else>
 	<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substring(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 		<div v-if="thumbnail && !sensitive" :class="$style.thumbnail" :style="defaultStore.state.dataSaver.urlPreview ? '' : `background-image: url('${thumbnail}')`">
@@ -67,7 +82,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template v-if="showActions">
 		<div v-if="tweetId" :class="$style.action">
 			<MkButton :small="true" inline @click="tweetExpanded = true">
-				<i class="ti ti-brand-x"></i> {{ i18n.ts.expandTweet }}
+				<i class="ti ti-brand-x"></i> {{ i18n.ts.expandPost }}
+			</MkButton>
+		</div>
+		<div v-if="bskyPostRecordKey" :class="$style.action">
+			<MkButton :small="true" inline @click="openBskyEmbed">
+				<i class="ti ti-brand-bluesky"></i> {{ i18n.ts.expandPost }}
 			</MkButton>
 		</div>
 		<div v-if="!playerEnabled && player.url" :class="$style.action">
@@ -126,10 +146,19 @@ const player = ref({
 	height: null,
 } as SummalyResult['player']);
 const playerEnabled = ref(false);
+
+const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
+
 const tweetId = ref<string | null>(null);
 const tweetExpanded = ref(props.detail);
-const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
 const tweetHeight = ref(150);
+
+const bskyHandleOrDid = ref<string | null>(null);
+const bskyDid = ref<string | null>(null);
+const bskyPostRecordKey = ref<string | null>(null);
+const bskyPostExpanded = ref(props.detail);
+const bskyPostHeight = ref(150);
+
 const unknownUrl = ref(false);
 
 onDeactivated(() => {
@@ -144,6 +173,19 @@ if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twi
 	if (m) tweetId.value = m[1];
 }
 
+if (requestUrl.hostname === 'bsky.app') {
+	const bskyPostPageUrl = requestUrl.pathname.slice(1).split('/');
+
+	if (bskyPostPageUrl[0] === 'profile' && bskyPostPageUrl[1] && bskyPostPageUrl[2] === 'post' && bskyPostPageUrl[3]) {
+		bskyHandleOrDid.value = bskyPostPageUrl[1];
+		bskyPostRecordKey.value = bskyPostPageUrl[3];
+
+		if (bskyPostExpanded.value) {
+			openBskyEmbed();
+		}
+	}
+}
+
 if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
 	requestUrl.hostname = 'www.youtube.com';
 }
@@ -180,13 +222,23 @@ window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLa
 		sensitive.value = info.sensitive ?? false;
 	});
 
-function adjustTweetHeight(message: MessageEvent) {
-	if (message.origin !== 'https://platform.twitter.com') return;
-	const embed = message.data?.['twttr.embed'];
-	if (embed?.method !== 'twttr.private.resize') return;
-	if (embed?.id !== embedId) return;
-	const height = embed?.params[0]?.height;
-	if (height) tweetHeight.value = height;
+async function openBskyEmbed() {
+	if (bskyHandleOrDid.value == null || bskyPostRecordKey.value == null) return;
+
+	if (bskyDid.value == null) {
+		if (bskyHandleOrDid.value.startsWith('did:')) {
+			bskyDid.value = bskyHandleOrDid.value;
+		} else {
+			// handleで来ている場合はdidに変換
+			const bskyApiRes = await window.fetch(`https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=${bskyHandleOrDid.value}`);
+			if (bskyApiRes.ok) {
+				const bskyApiData = await bskyApiRes.json() as { did: string };
+				bskyDid.value = bskyApiData.did;
+			}
+		}
+	}
+
+	bskyPostExpanded.value = true;
 }
 
 function openPlayer(): void {
@@ -199,10 +251,25 @@ function openPlayer(): void {
 	});
 }
 
-window.addEventListener('message', adjustTweetHeight);
+function adjustSocialsEmbedHeight(message: MessageEvent) {
+	if (message.origin === 'https://platform.twitter.com') {
+		const embed = message.data?.['twttr.embed'];
+		if (embed?.method === 'twttr.private.resize' && embed?.id === embedId) {
+			const height = embed?.params[0]?.height;
+			if (height) tweetHeight.value = height;
+		}
+	} else if (message.origin === 'https://embed.bsky.app') {
+		if (message.data?.id === embedId) {
+			const height = message.data?.height;
+			if (height) bskyPostHeight.value = height;
+		}
+	}
+}
+
+window.addEventListener('message', adjustSocialsEmbedHeight);
 
 onUnmounted(() => {
-	window.removeEventListener('message', adjustTweetHeight);
+	window.removeEventListener('message', adjustSocialsEmbedHeight);
 });
 </script>
 
diff --git a/packages/frontend/src/index.html b/packages/frontend/src/index.html
index 08ff0c58dd3a..14dfe62dbafe 100644
--- a/packages/frontend/src/index.html
+++ b/packages/frontend/src/index.html
@@ -22,7 +22,7 @@
 			style-src 'self' 'unsafe-inline';
 			img-src 'self' data: blob: www.google.com xn--931a.moe localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
 			media-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
-			connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com;
+			connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com https://public.api.bsky.app;
 			frame-src *;"
 	/>
 	<meta property="og:site_name" content="[DEV BUILD] Misskey" />

From 9bd7af57e37db0b9eb700a0cf6ac6eca7712bf7c Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 10 Nov 2024 16:28:00 +0900
Subject: [PATCH 2/7] Update Changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f428c1c1546..c109fcd25b70 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 - Enhance: Self-XSS防止用の警告を追加
 - Enhance: カタルーニャ語 (ca-ES) に対応
 - Enhance: 個別お知らせページではMetaタグを出力するように
+- Enhance: Blueskyの投稿埋め込みプレビューに対応
 - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)

From 438cb633036d785f4637a17a5c2362b6d13e2a17 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 17 Nov 2024 10:44:59 +0900
Subject: [PATCH 3/7] unify *postExpanded

---
 packages/frontend/src/components/MkUrlPreview.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 437cb0e57f21..794ca6963c6f 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkButton>
 	</div>
 </template>
-<template v-else-if="tweetId && tweetExpanded">
+<template v-else-if="tweetId && postExpanded">
 	<div>
 		<iframe
 			allow="fullscreen;web-share"
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkButton>
 	</div>
 </template>
-<template v-else-if="bskyDid && bskyPostRecordKey && bskyPostExpanded">
+<template v-else-if="bskyDid && bskyPostRecordKey && postExpanded">
 	<div>
 		<iframe
 			allow="fullscreen;web-share"
@@ -81,7 +81,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</component>
 	<template v-if="showActions">
 		<div v-if="tweetId" :class="$style.action">
-			<MkButton :small="true" inline @click="tweetExpanded = true">
+			<MkButton :small="true" inline @click="postExpanded = true">
 				<i class="ti ti-brand-x"></i> {{ i18n.ts.expandPost }}
 			</MkButton>
 		</div>
@@ -148,15 +148,14 @@ const player = ref({
 const playerEnabled = ref(false);
 
 const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
+const postExpanded = ref(props.detail);
 
 const tweetId = ref<string | null>(null);
-const tweetExpanded = ref(props.detail);
 const tweetHeight = ref(150);
 
 const bskyHandleOrDid = ref<string | null>(null);
 const bskyDid = ref<string | null>(null);
 const bskyPostRecordKey = ref<string | null>(null);
-const bskyPostExpanded = ref(props.detail);
 const bskyPostHeight = ref(150);
 
 const unknownUrl = ref(false);
@@ -238,7 +237,7 @@ async function openBskyEmbed() {
 		}
 	}
 
-	bskyPostExpanded.value = true;
+	postExpanded.value = true;
 }
 
 function openPlayer(): void {

From 6df2a747472ea90e321d8b302d580c149d6daa68 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 17 Nov 2024 11:54:27 +0900
Subject: [PATCH 4/7] fix

---
 packages/frontend/src/components/MkUrlPreview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 794ca6963c6f..e2f94b351adb 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -53,7 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		></iframe>
 	</div>
 	<div :class="$style.action">
-		<MkButton :small="true" inline @click="bskyPostExpanded = false">
+		<MkButton :small="true" inline @click="postExpanded = false">
 			<i class="ti ti-x"></i> {{ i18n.ts.close }}
 		</MkButton>
 	</div>

From eaaeeb1018c2514e8fce4f36cdfd0f4063d402c1 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: Mon, 18 Nov 2024 20:31:48 +0900
Subject: [PATCH 5/7] Update MkUrlPreview.vue

---
 packages/frontend/src/components/MkUrlPreview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index e2f94b351adb..c6fed474f645 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -179,7 +179,7 @@ if (requestUrl.hostname === 'bsky.app') {
 		bskyHandleOrDid.value = bskyPostPageUrl[1];
 		bskyPostRecordKey.value = bskyPostPageUrl[3];
 
-		if (bskyPostExpanded.value) {
+		if (postExpanded.value) {
 			openBskyEmbed();
 		}
 	}

From 23610e8c323acf83d1b4c82fd21c8411f31769c2 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:09:15 +0900
Subject: [PATCH 6/7] unify postHeight

---
 packages/frontend/src/components/MkUrlPreview.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index e2f94b351adb..e91297cc8ce2 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			allow="fullscreen;web-share"
 			sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-same-origin"
 			scrolling="no"
-			:style="{ position: 'relative', width: '100%', height: `${tweetHeight}px`, border: 0 }"
+			:style="{ position: 'relative', width: '100%', height: `${postHeight}px`, border: 0 }"
 			:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"
 		></iframe>
 	</div>
@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			allow="fullscreen;web-share"
 			sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-same-origin"
 			scrolling="no"
-			:style="{ position: 'relative', width: '100%', height: `${bskyPostHeight}px`, border: 0 }"
+			:style="{ position: 'relative', width: '100%', height: `${postHeight}px`, border: 0 }"
 			:src="`https://embed.bsky.app/embed/${bskyDid}/app.bsky.feed.post/${bskyPostRecordKey}?id=${embedId}`"
 		></iframe>
 	</div>
@@ -149,14 +149,13 @@ const playerEnabled = ref(false);
 
 const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
 const postExpanded = ref(props.detail);
+const postHeight = ref(150);
 
 const tweetId = ref<string | null>(null);
-const tweetHeight = ref(150);
 
 const bskyHandleOrDid = ref<string | null>(null);
 const bskyDid = ref<string | null>(null);
 const bskyPostRecordKey = ref<string | null>(null);
-const bskyPostHeight = ref(150);
 
 const unknownUrl = ref(false);
 
@@ -255,12 +254,12 @@ function adjustSocialsEmbedHeight(message: MessageEvent) {
 		const embed = message.data?.['twttr.embed'];
 		if (embed?.method === 'twttr.private.resize' && embed?.id === embedId) {
 			const height = embed?.params[0]?.height;
-			if (height) tweetHeight.value = height;
+			if (height) postHeight.value = height;
 		}
 	} else if (message.origin === 'https://embed.bsky.app') {
 		if (message.data?.id === embedId) {
 			const height = message.data?.height;
-			if (height) bskyPostHeight.value = height;
+			if (height) postHeight.value = height;
 		}
 	}
 }

From 3bc46908d609b5d609fb7a92966c496db56b00ba 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: Sat, 23 Nov 2024 15:27:22 +0900
Subject: [PATCH 7/7] Update CHANGELOG.md

---
 CHANGELOG.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc218fdda139..bde010c105d2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 -
 
 ### Client
--
+- Enhance: Blueskyの投稿埋め込みプレビューに対応
 
 ### Server
 -
@@ -43,7 +43,6 @@
 - Enhance: サイドバーを簡単に展開・折りたたみできるように ( #14981 )
 - Enhance: リノートメニューに「リノートの詳細」を追加
 - Enhance: 非ログイン状態でMisskeyを開いた際のパフォーマンスを向上
-- Enhance: Blueskyの投稿埋め込みプレビューに対応
 - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)