LGCC
/
cdrdpyj
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

shared-news #19

Merged
esteban merged 3 commits from shared-news into main 2026-03-08 15:02:05 +00:00
Conversation 0 Commits 3 Files Changed 3 +65 -20
3 changed files with 65 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1df0b024bc - Show all commits

51
src/components/ShareSticky.vue
View File

@ -25,6 +25,12 @@
</a> </a>
</li> </li>
<li class="border-b pb-3">
<a :href="instagramUrl" target="_blank">
<Icon icon="ph:instagram-logo-thin" class="text-2xl" />
</a>
</li>
<li class="border-b pb-3"> <li class="border-b pb-3">
<a :href="whatsappUrl" target="_blank"> <a :href="whatsappUrl" target="_blank">
<Icon icon="ph:whatsapp-logo-thin" class="text-2xl" /> <Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
@ -79,6 +85,14 @@
<Icon icon="ph:facebook-logo-thin" class="text-2xl" /> <Icon icon="ph:facebook-logo-thin" class="text-2xl" />
</a> </a>
<!-- Instagram -->
<a
:href="instagramUrl"
target="_blank"
class="text-gray-600 hover:text-pink-600 transition border-b pb-3"
>
<Icon icon="ph:instagram-logo-thin" class="text-2xl" />
</a>
<!-- WhatsApp --> <!-- WhatsApp -->
<a <a
:href="whatsappUrl" :href="whatsappUrl"
@ -142,14 +156,8 @@ const toggle = () => {
} }
const copied = ref(false) const copied = ref(false)
const mobileOpen = ref(false)
const encodedUrl = computed(() => encodeURIComponent(props.url))
const twitterUrl = computed(() => `https://twitter.com/intent/tweet?url=${encodedUrl.value}`)
const facebookUrl = computed(() => `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl.value}`)
const whatsappUrl = computed(() => `https://api.whatsapp.com/send?text=${encodedUrl.value}`)
const linkedinUrl = computed(() => `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl.value}`)
const copyLink = async () => { const copyLink = async () => {
try { try {
@ -160,18 +168,25 @@ const copyLink = async () => {
console.error("No se pudo copiar") console.error("No se pudo copiar")
} }
} }
const BASE_URL = typeof window !== "undefined"
? `${window.location.protocol}//${window.location.host}`
: "";
const toggleMobile = async () => { const fullUrl = computed(() => {
// Si soporta Web Share API → usar nativo if (props.url.startsWith("http")) {
if (navigator.share) { const url = new URL(props.url)
try { return `${BASE_URL}${url.pathname}`
await navigator.share({
title: document.title,
url: props.url
})
} catch (err) {}
} else {
mobileOpen.value = !mobileOpen.value
} }
}
return `${BASE_URL}${props.url}`
})
const encodedUrl = computed(() =>
encodeURIComponent(fullUrl.value)
)
const twitterUrl = computed(() => `https://twitter.com/intent/tweet?url=${encodedUrl.value}`)
const facebookUrl = computed(() => `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl.value}`)
const whatsappUrl = computed(() => `https://api.whatsapp.com/send?text=${encodedUrl.value}`)
const linkedinUrl = computed(() => `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl.value}`)
const instagramUrl = computed(() => `https://www.instagram.com/centrodelreinodepazyjusticia`)
</script> </script>

2
src/layouts/MainLayout.astro
View File

@ -28,7 +28,7 @@ const { title } = Astro.props;
} }
}); });
</script> </script>
<body class="font-primary">+ <body class="font-primary">
{Astro.url.pathname.includes('/news/') && ( {Astro.url.pathname.includes('/news/') && (
<ShareSticky client:load url={Astro.url.href} /> <ShareSticky client:load url={Astro.url.href} />
)} )}

32
src/pages/news/[id].astro
View File

@ -16,9 +16,18 @@ export async function getStaticPaths() {
props: { post }, props: { post },
})); }));
} }
// 2. For your template, you can get the entry directly from the prop
const { post } = Astro.props; const { post } = Astro.props;
const { Content } = await render(post); const { Content } = await render(post);
const baseUrl = Astro.site ?? "https://mk8nrc8p-4321.brs.devtunnels.ms";
const pageUrl = new URL(`/es/news/${post.id}`, baseUrl).toString();
const imageUrl = post.data.thumbnail
? new URL(post.data.thumbnail.src, baseUrl).toString()
: null;
const description = `${post.data.title} - ${post.data.city ?? ""} ${post.data.country ?? ""}`;
--- ---
@ -30,6 +39,27 @@ const { Content } = await render(post);
</style> </style>
<MainLayout> <MainLayout>
<Fragment slot="head">
<!-- Título -->
<title>{post.data.title}</title>
<!-- Descripción SEO -->
<meta name="description" content={`${post.data.title} - ${post.data.city ?? ""} ${post.data.country ?? ""}`} />
<!-- Open Graph (Facebook / WhatsApp / LinkedIn) -->
<meta property="og:type" content="article" />
<meta property="og:title" content={post.data.title} />
<meta property="og:description" content={`${post.data.title} - ${post.data.city ?? ""} ${post.data.country ?? ""}`} />
<meta property="og:url" content={pageUrl} />
{post.data.gallery && post.data.gallery.length > 0 && post.data.gallery[0].image && (
<>
<meta property="og:image" content={new URL(post.data.gallery[0].image.src, baseUrl)} />
<meta property="og:image:width" />
<meta property="og:image:height" />
<meta property="og:image:type" content={`image/${post.data.gallery[0].image.format}`} />
</>
)}
</Fragment>
<div class="container mx-auto py-16"> <div class="container mx-auto py-16">
<Header /> <Header />
</div> </div>