mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-27 22:38:34 +09:00
Code

OGPプレビュー追加

Browse Source
This commit is contained in:
tamo-morita 2023-05-06 18:02:08 +09:00 committed by NoriDev
parent d3f0ab901c
commit 7162e1ff89
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/frontend/src/components/MkNotePreview.vue
View File

@ -8,6 +8,7 @@
<div> <div>
<div> <div>
<Mfm :text="text.trim()" :author="$i" :i="$i"/> <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> </div>
</div> </div>
@ -17,10 +18,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import { $i } from '@/account'; 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<{ const props = defineProps<{
text: string; text: string;
}>(); }>();
const urls = props.text ? extractUrlFromMfm(mfm.parse(props.text)) : null;
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@ -55,6 +60,11 @@ const props = defineProps<{
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.urlPreview {
margin-top: 8px;
margin-bottom: 8px;
}
@container (min-width: 350px) { @container (min-width: 350px) {
.avatar { .avatar {
margin: 0 10px 0 0 !important; margin: 0 10px 0 0 !important;