add instagram
This commit is contained in:
David Ascanio
parent
487afd54e9
commit
1df0b024bc
|
|
@ -25,6 +25,12 @@
|
|||
</a>
|
||||
</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">
|
||||
<a :href="whatsappUrl" target="_blank">
|
||||
<Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
|
||||
|
|
@ -79,6 +85,14 @@
|
|||
<Icon icon="ph:facebook-logo-thin" class="text-2xl" />
|
||||
</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 -->
|
||||
<a
|
||||
:href="whatsappUrl"
|
||||
|
|
@ -142,14 +156,8 @@ const toggle = () => {
|
|||
}
|
||||
|
||||
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 () => {
|
||||
try {
|
||||
|
|
@ -160,18 +168,25 @@ const copyLink = async () => {
|
|||
console.error("No se pudo copiar")
|
||||
}
|
||||
}
|
||||
const BASE_URL = typeof window !== "undefined"
|
||||
? `${window.location.protocol}//${window.location.host}`
|
||||
: "";
|
||||
|
||||
const toggleMobile = async () => {
|
||||
// Si soporta Web Share API → usar nativo
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: document.title,
|
||||
url: props.url
|
||||
})
|
||||
} catch (err) {}
|
||||
} else {
|
||||
mobileOpen.value = !mobileOpen.value
|
||||
const fullUrl = computed(() => {
|
||||
if (props.url.startsWith("http")) {
|
||||
const url = new URL(props.url)
|
||||
return `${BASE_URL}${url.pathname}`
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
@ -28,7 +28,7 @@ const { title } = Astro.props;
|
|||
}
|
||||
});
|
||||
</script>
|
||||
<body class="font-primary">+
|
||||
<body class="font-primary">
|
||||
{Astro.url.pathname.includes('/news/') && (
|
||||
<ShareSticky client:load url={Astro.url.href} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,18 @@ export async function getStaticPaths() {
|
|||
props: { post },
|
||||
}));
|
||||
}
|
||||
// 2. For your template, you can get the entry directly from the prop
|
||||
const { post } = Astro.props;
|
||||
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>
|
||||
|
||||
<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">
|
||||
<Header />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue