OGPプレビュー追加

packages/frontend/src/components/MkNotePreview.vue

@@ -8,6 +8,7 @@
 		<div>
 			<div :class="$style.content">
 				<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;