From 4309344d8a937979cd339534443219bfeb2c8dcc Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Mon, 15 Apr 2024 07:27:35 +0900
Subject: [PATCH] add embed

---
 public/index.html |  1 +
 src/App.vue       | 54 +++++++++++++++++++++++------------------------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/public/index.html b/public/index.html
index f8b9bb2..a7b59fb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,7 @@
 		<div id="app"></div>
 		<script src="chunk-vendors.js"></script>
 		<script src="app.js"></script>
+		<script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
 	</body>
 	<footer>© syui</footer>
 </html>
diff --git a/src/App.vue b/src/App.vue
index ef95859..290ccab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,36 +58,26 @@
 		</div>
 
 		<div class="comment" v-if="loc === ''">
-			<div class="bsky_comment" v-if="comment_open == false">
-
-				<span class="comment">
-					<p class="comment-body" v-if="comment_first">
-						<img :src="'/icon/' + comment_first.did.replace('did:plc:', '') + '.jpg'" v-if="comment_first.avatar" class="comment"/>  <span class="comment-time" v-if="comment_first.updated_at"><a :href="comment_first.bsky_url" v-if="comment_first.bsky_url">{{ moment(comment_first.updated_at) }}</a></span> <span class="comment-handle" v-if="comment_first.handle"><a :href="'https://' + comment_first.bsky_url.split('/').slice(2,5).join('/')" v-if="comment_first.bsky_url">@{{ comment_first.handle }}</a></span>
-					<span class="comment-text" v-if="comment_first.text">{{ comment_first.text }}</span>
-				</p>
-			</span>
-
-			<div class="comment_open" v-if="comment_first">
-				<p>
-					<a :href="comment_first.bsky_url" target="_blank" v-if="comment_first.bsky_url">post</a>
-				</p>
-				<p>
-					<button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button>
-				</p>
-
+			<div class="bsky_comment_embed">
+				<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:4hqjfn7m6n5hno3doamuhgef/app.bsky.feed.post/3kp5qn72s232q" data-bluesky-cid="bafyreiewdfyh6rywpkdzpmf5markqa6tavc5smc32q7cw2wpwbqik5hnfm"><p lang="ja">comment</p>&mdash; ai (<a href="https://bsky.app/profile/did:plc:4hqjfn7m6n5hno3doamuhgef?ref_src=embed">@yui.syui.ai</a>) <a href="https://bsky.app/profile/did:plc:4hqjfn7m6n5hno3doamuhgef/post/3kp5qn72s232q?ref_src=embed">Apr 2, 2024 at 23:09</a></blockquote>
+				<button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button>
 			</div>
 		</div>
 
-		<div class="bsky_comment" v-else-if="api_json">
-			<span v-for="i in api_json.data" class="comment">
-				<p class="comment-body" v-if="i">
-					{{ axios_check('/icon/' + i.did.replace('did:plc:', '') + '.jpg') }}
-					<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="url_check" class="comment"/><img :src="i.avatar" v-else-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.updated_at"><a :href="i.bsky_url" v-if="i.bsky_url">{{ moment(i.updated_at) }}</a></span> <span class="comment-handle" v-if="i.handle"><a :href="'https://' + i.bsky_url.split('/').slice(2,5).join('/')" v-if="i.bsky_url">@{{ i.handle.replace('.bsky.social', '') }}</a></span>
-				<span class="comment-text" v-if="i.text">{{ i.text }}</span>
-			</p>
-		</span>
-		<div class="comment_open"><button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-up"></i></button></div>
-	</div>
+		<div class="comment" v-if="loc === ''">
+			<div class="bsky_comment" v-if="comment_open == false">
+			</div>
+
+			<div class="bsky_comment" v-else-if="api_json">
+				<span v-for="i in api_json.data" class="comment">
+					<p class="comment-body" v-if="i">
+						{{ axios_check('/icon/' + i.did.replace('did:plc:', '') + '.jpg') }}
+						<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="url_check" class="comment"/><img :src="i.avatar" v-else-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.updated_at"><a :href="i.bsky_url" v-if="i.bsky_url">{{ moment(i.updated_at) }}</a></span> <span class="comment-handle" v-if="i.handle"><a :href="'https://' + i.bsky_url.split('/').slice(2,5).join('/')" v-if="i.bsky_url">@{{ i.handle.replace('.bsky.social', '') }}</a></span>
+					<span class="comment-text" v-if="i.text">{{ i.text }}</span>
+				</p>
+			</span>
+			<div class="comment_open"><button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-up"></i></button></div>
+		</div>
 	</div>
 
 	<div class="page_title" v-if="loc === ''" >
@@ -382,6 +372,13 @@ button.comment_open:hover {
 	border: solid 1px #eee;
 }
 
+.bsky_comment_embed {
+	background-color: #fff;
+	width: 600px;
+	margin: 0px auto;
+	border: none;
+}
+
 .comment {
 	background-color: #fff;
 }
@@ -393,6 +390,9 @@ button.comment_open:hover {
 	.bsky_comment {
 		width:auto;
 	}
+	.bsky_comment_embed {
+		width:auto;
+	}
 	.page_title a img {
 		width:100%;
 	}