vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(posts): show link preview card in the X and Threads editors

Browse source 
X and Threads auto-generate link cards server-side from the URL's meta tags, so no publish-side work is needed. Reuse the shared useLinkCard composable to render the card in their editor previews, gated on no attached media.
This commit is contained in:
Paulo Castellano 2026-07-17 14:32:40 -03:00
parent 8648ed9720
commit f84c6f818a
2 changed files with 30 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/js/components/posts/previews/ThreadsPreview.vue
View file

@ -1,7 +1,9 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed, toRef } from 'vue';
import LinkCard from "@/components/posts/previews/LinkCard.vue";
import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
import { useLinkCard } from '@/composables/useLinkCard';
import { isVideoMedia } from '@/composables/useMedia';
import type { MediaItem } from '@/types/media';
@ -22,6 +24,11 @@ interface Props {
const props = defineProps<Props>();
const username = computed(() => props.socialAccount.username || props.socialAccount.display_name);
const { card: linkCard, loading: linkCardLoading } = useLinkCard(
toRef(props, 'content'),
toRef(props, 'media'),
);
</script>
<template>
@ -108,6 +115,13 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
</div>
</div>
<!-- Link preview card -->
<div
v-if="media.length === 0 && linkCardLoading"
class="mt-3 h-24 animate-pulse rounded-2xl border border-[#e0e0e0] bg-neutral-100 dark:border-[#262626] dark:bg-[#181818]"
></div>
<LinkCard v-else-if="media.length === 0 && linkCard" :card="linkCard" />
<!-- Location (after media) -->
<div v-if="media.length > 0" class="mt-2 flex items-center gap-1">
<svg class="h-4 w-4 text-[#999999]" viewBox="0 0 24 24" fill="none" stroke="currentColor"

16
resources/js/components/posts/previews/XPreview.vue
View file

@ -1,7 +1,9 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed, toRef } from 'vue';
import LinkCard from "@/components/posts/previews/LinkCard.vue";
import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
import { useLinkCard } from '@/composables/useLinkCard';
import { isVideoMedia } from '@/composables/useMedia';
import type { MediaItem } from '@/types/media';
@ -22,6 +24,11 @@ interface Props {
const props = defineProps<Props>();
const username = computed(() => props.socialAccount.username || 'username');
const { card: linkCard, loading: linkCardLoading } = useLinkCard(
toRef(props, 'content'),
toRef(props, 'media'),
);
</script>
<template>
@ -111,6 +118,13 @@ const username = computed(() => props.socialAccount.username || 'username');
</div>
</div>
<!-- Link preview card -->
<div
v-if="media.length === 0 && linkCardLoading"
class="mt-3 h-24 animate-pulse rounded-2xl border border-[#cfd9de] bg-[#f7f9f9] dark:border-[#2f3336] dark:bg-[#16181c]"
></div>
<LinkCard v-else-if="media.length === 0 && linkCard" :card="linkCard" />
<!-- Timestamp & Views -->
<div class="mt-3 text-[15px] text-[#536471] dark:text-[#71767b]">
<span>4:21 PM · Jan 20, 2026</span>