From 7162e1ff89fe454ebb184e6aafff52f48a893a36 Mon Sep 17 00:00:00 2001
From: tamo-morita <morita@mynet.co.jp>
Date: Sat, 6 May 2023 18:02:08 +0900
Subject: [PATCH] =?UTF-8?q?OGP=E3=83=97=E3=83=AC=E3=83=93=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkNotePreview.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
index 6786f8b256..ce10262255 100644
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -8,6 +8,7 @@
 		<div>
 			<div>
 				<Mfm :text="text.trim()" :author="$i" :i="$i"/>
+				<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
 			</div>
 		</div>
 	</div>
@@ -17,10 +18,14 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import { $i } from '@/account';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
+import * as mfm from 'mfm-js';
 
 const props = defineProps<{
 	text: string;
 }>();
+const urls = props.text ? extractUrlFromMfm(mfm.parse(props.text)) : null;
 </script>
 
 <style lang="scss" module>
@@ -55,6 +60,11 @@ const props = defineProps<{
     text-overflow: ellipsis;
 }
 
+.urlPreview {
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
 @container (min-width: 350px) {
 	.avatar {
 		margin: 0 10px 0 0 !important;