From 487afd54e9b385559db050680fa1414f395800e7 Mon Sep 17 00:00:00 2001
From: David Ascanio <david.ascanio@sandinas.com.ar>
Date: Tue, 3 Mar 2026 12:23:12 -0300
Subject: [PATCH 1/3] shareSticky

---
 src/components/ShareSticky.vue | 177 +++++++++++++++++++++++++++++++++
 src/layouts/MainLayout.astro   |   7 +-
 2 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ShareSticky.vue

diff --git a/src/components/ShareSticky.vue b/src/components/ShareSticky.vue
new file mode 100644
index 0000000..dacae84
--- /dev/null
+++ b/src/components/ShareSticky.vue
@@ -0,0 +1,177 @@
+<template>
+  <!-- DESKTOP -->
+  <div class="hidden lg:block fixed left-0 top-1/2 -translate-y-1/2 z-[9999] group">
+    <div
+      class="
+        relative
+        -translate-x-[70%]
+        group-hover:translate-x-0
+        transition-all
+        duration-300
+        ease-out
+      "
+    >
+      <ul class="flex flex-col gap-4 bg-white/90 backdrop-blur-md py-4 px-4 rounded-r-2xl shadow-xl border border-gray-200">
+
+        <li class="border-b pb-3">
+          <a :href="twitterUrl" target="_blank">
+            <Icon icon="ph:x-logo-thin" class="text-2xl" />
+          </a>
+        </li>
+
+        <li class="border-b pb-3">
+          <a :href="facebookUrl" target="_blank">
+            <Icon icon="ph:facebook-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" />
+          </a>
+        </li>
+
+        <li class="border-b pb-3">
+          <a :href="linkedinUrl" target="_blank">
+            <Icon icon="ph:linkedin-logo-thin" class="text-2xl" />
+          </a>
+        </li>
+
+        <li>
+          <button @click="copyLink" class="cursor-pointer">
+            <Icon :icon="copied ? 'ph:check-thin' : 'ph:link-thin'" class="text-2xl" />
+          </button>
+        </li>
+
+      </ul>
+
+      <div class="absolute right-[-14px] top-1/2 -translate-y-1/2 bg-white shadow-md rounded-r-xl px-1 py-4 border border-gray-200">
+        <div class="w-1 h-6 bg-gray-400 rounded-full"></div>
+      </div>
+    </div>
+  </div>
+
+    <div class="lg:hidden fixed bottom-6 right-6 z-[9999]">
+      <!-- SPEED DIAL -->
+      <div class="flex flex-col items-end gap-2 mb-3">
+
+        <transition name="fade">
+          <div
+            v-if="open"
+            class="flex flex-col gap-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-gray-200"
+          >
+
+            <!-- X -->
+            <a
+              :href="twitterUrl"
+              target="_blank"
+              class="text-gray-600 hover:text-black transition border-b pb-3"
+            >
+              <Icon icon="ph:x-logo-thin" class="text-2xl" />
+            </a>
+
+            <!-- Facebook -->
+            <a
+              :href="facebookUrl"
+              target="_blank"
+              class="text-gray-600 hover:text-blue-600 transition border-b pb-3"
+            >
+              <Icon icon="ph:facebook-logo-thin" class="text-2xl" />
+            </a>
+
+            <!-- WhatsApp -->
+            <a
+              :href="whatsappUrl"
+              target="_blank"
+              class="text-gray-600 hover:text-green-600 transition border-b pb-3"
+            >
+              <Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
+            </a>
+
+            <!-- LinkedIn -->
+            <a
+              :href="linkedinUrl"
+              target="_blank"
+              class="text-gray-600 hover:text-blue-700 transition border-b pb-3"
+            >
+              <Icon icon="ph:linkedin-logo-thin" class="text-2xl" />
+            </a>
+
+            <!-- Copiar -->
+            <button
+              @click="copyLink"
+              class="text-gray-600 hover:text-emerald-600 transition"
+            >
+              <Icon
+                :icon="copied ? 'ph:check-thin' : 'ph:link-thin'"
+                class="text-2xl"
+              />
+            </button>
+
+          </div>
+       </transition>
+    </div>
+
+    <!-- FAB PRINCIPAL -->
+    <button
+      @click="toggle"
+      class="bg-white/90 backdrop-blur-md border border-gray-200 shadow-xl rounded-full p-3 text-gray-700 hover:text-black transition"
+    >
+      <Icon
+        :icon="open ? 'ph:x-thin' : 'ph:share-network-thin'"
+        class="text-2xl"
+      />
+    </button>
+</div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue"
+import { Icon } from "@iconify/vue"
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  }
+})
+const open = ref(false)
+
+const toggle = () => {
+  open.value = !open.value
+}
+
+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 {
+    await navigator.clipboard.writeText(props.url)
+    copied.value = true
+    setTimeout(() => copied.value = false, 1500)
+  } catch (err) {
+    console.error("No se pudo copiar")
+  }
+}
+
+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
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 47a67e6..685ee95 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -7,7 +7,7 @@ import "@fontsource/poppins/400.css";
 import "@fontsource/poppins/500.css";
 import "@fontsource/poppins/700.css";
 import "@fontsource-variable/kameron";
-
+import ShareSticky from "../components/ShareSticky.vue"; 
 const { title } = Astro.props;
 ---
 <style is:global>
@@ -28,7 +28,10 @@ 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} />
+    )}
     <slot />
     <Footer />
   </body>

From 1df0b024bc984b89fe92e398a797d8142f629145 Mon Sep 17 00:00:00 2001
From: David Ascanio <david.ascanio@sandinas.com.ar>
Date: Tue, 3 Mar 2026 13:36:01 -0300
Subject: [PATCH 2/3] add instagram

---
 src/components/ShareSticky.vue | 51 ++++++++++++++++++++++------------
 src/layouts/MainLayout.astro   |  2 +-
 src/pages/news/[id].astro      | 32 ++++++++++++++++++++-
 3 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/src/components/ShareSticky.vue b/src/components/ShareSticky.vue
index dacae84..c6661fd 100644
--- a/src/components/ShareSticky.vue
+++ b/src/components/ShareSticky.vue
@@ -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>
\ No newline at end of file
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 685ee95..43431ac 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -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} />
     )}
diff --git a/src/pages/news/[id].astro b/src/pages/news/[id].astro
index 31723b3..8c79145 100644
--- a/src/pages/news/[id].astro
+++ b/src/pages/news/[id].astro
@@ -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>

From 75cca7e48fdd578225f5292229f395b9c41d17fd Mon Sep 17 00:00:00 2001
From: David Ascanio <david.ascanio@sandinas.com.ar>
Date: Tue, 3 Mar 2026 14:19:08 -0300
Subject: [PATCH 3/3] only click desktop share news

---
 src/components/ShareSticky.vue | 157 ++++++++++-----------------------
 1 file changed, 46 insertions(+), 111 deletions(-)

diff --git a/src/components/ShareSticky.vue b/src/components/ShareSticky.vue
index c6661fd..04c19a6 100644
--- a/src/components/ShareSticky.vue
+++ b/src/components/ShareSticky.vue
@@ -1,129 +1,79 @@
 <template>
   <!-- DESKTOP -->
-  <div class="hidden lg:block fixed left-0 top-1/2 -translate-y-1/2 z-[9999] group">
+  <div class="hidden md:block fixed left-0 top-1/2 -translate-y-1/2 z-[9999]">
     <div
-      class="
-        relative
-        -translate-x-[70%]
-        group-hover:translate-x-0
-        transition-all
-        duration-300
-        ease-out
-      "
+      class="relative transition-all duration-300 ease-out"
+      :class="desktopOpen ? 'translate-x-0' : '-translate-x-[70%]'"
     >
-      <ul class="flex flex-col gap-4 bg-white/90 backdrop-blur-md py-4 px-4 rounded-r-2xl shadow-xl border border-gray-200">
+      <div
+        class="absolute right-[-14px] top-1/2 -translate-y-1/2 bg-white shadow-md rounded-r-xl px-1 py-4 border border-gray-200 cursor-pointer"
+        @click="desktopOpen = !desktopOpen"
+      >
+        <div class="w-1 h-6 bg-gray-400 rounded-full"></div>
+      </div>
 
+      <ul class="flex flex-col gap-4 bg-white/90 backdrop-blur-md py-4 px-4 rounded-r-2xl shadow-xl border border-gray-200">
         <li class="border-b pb-3">
           <a :href="twitterUrl" target="_blank">
             <Icon icon="ph:x-logo-thin" class="text-2xl" />
           </a>
         </li>
-
         <li class="border-b pb-3">
           <a :href="facebookUrl" target="_blank">
             <Icon icon="ph:facebook-logo-thin" class="text-2xl" />
           </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" />
           </a>
         </li>
-
         <li class="border-b pb-3">
           <a :href="linkedinUrl" target="_blank">
             <Icon icon="ph:linkedin-logo-thin" class="text-2xl" />
           </a>
         </li>
-
         <li>
           <button @click="copyLink" class="cursor-pointer">
             <Icon :icon="copied ? 'ph:check-thin' : 'ph:link-thin'" class="text-2xl" />
           </button>
         </li>
-
       </ul>
-
-      <div class="absolute right-[-14px] top-1/2 -translate-y-1/2 bg-white shadow-md rounded-r-xl px-1 py-4 border border-gray-200">
-        <div class="w-1 h-6 bg-gray-400 rounded-full"></div>
-      </div>
     </div>
   </div>
 
-    <div class="lg:hidden fixed bottom-6 right-6 z-[9999]">
-      <!-- SPEED DIAL -->
-      <div class="flex flex-col items-end gap-2 mb-3">
-
-        <transition name="fade">
-          <div
-            v-if="open"
-            class="flex flex-col gap-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-gray-200"
-          >
-
-            <!-- X -->
-            <a
-              :href="twitterUrl"
-              target="_blank"
-              class="text-gray-600 hover:text-black transition border-b pb-3"
-            >
-              <Icon icon="ph:x-logo-thin" class="text-2xl" />
-            </a>
-
-            <!-- Facebook -->
-            <a
-              :href="facebookUrl"
-              target="_blank"
-              class="text-gray-600 hover:text-blue-600 transition border-b pb-3"
-            >
-              <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"
-              target="_blank"
-              class="text-gray-600 hover:text-green-600 transition border-b pb-3"
-            >
-              <Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
-            </a>
-
-            <!-- LinkedIn -->
-            <a
-              :href="linkedinUrl"
-              target="_blank"
-              class="text-gray-600 hover:text-blue-700 transition border-b pb-3"
-            >
-              <Icon icon="ph:linkedin-logo-thin" class="text-2xl" />
-            </a>
-
-            <!-- Copiar -->
-            <button
-              @click="copyLink"
-              class="text-gray-600 hover:text-emerald-600 transition"
-            >
-              <Icon
-                :icon="copied ? 'ph:check-thin' : 'ph:link-thin'"
-                class="text-2xl"
-              />
-            </button>
-
-          </div>
-       </transition>
+  <div class="md:hidden fixed bottom-6 right-6 z-[9999]">
+    <div class="flex flex-col items-end gap-2 mb-3">
+      <transition name="fade">
+        <div
+          v-if="open"
+          class="flex flex-col gap-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-gray-200"
+        >
+          <a :href="twitterUrl" target="_blank" class="text-gray-600 hover:text-black transition border-b pb-3">
+            <Icon icon="ph:x-logo-thin" class="text-2xl" />
+          </a>
+          <a :href="facebookUrl" target="_blank" class="text-gray-600 hover:text-blue-600 transition border-b pb-3">
+            <Icon icon="ph:facebook-logo-thin" class="text-2xl" />
+          </a>
+          <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>
+          <a :href="whatsappUrl" target="_blank" class="text-gray-600 hover:text-green-600 transition border-b pb-3">
+            <Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
+          </a>
+          <a :href="linkedinUrl" target="_blank" class="text-gray-600 hover:text-blue-700 transition border-b pb-3">
+            <Icon icon="ph:linkedin-logo-thin" class="text-2xl" />
+          </a>
+          <button @click="copyLink" class="text-gray-600 hover:text-emerald-600 transition">
+            <Icon :icon="copied ? 'ph:check-thin' : 'ph:link-thin'" class="text-2xl" />
+          </button>
+        </div>
+      </transition>
     </div>
 
     <!-- FAB PRINCIPAL -->
@@ -131,59 +81,44 @@
       @click="toggle"
       class="bg-white/90 backdrop-blur-md border border-gray-200 shadow-xl rounded-full p-3 text-gray-700 hover:text-black transition"
     >
-      <Icon
-        :icon="open ? 'ph:x-thin' : 'ph:share-network-thin'"
-        class="text-2xl"
-      />
+      <Icon :icon="open ? 'ph:x-thin' : 'ph:share-network-thin'" class="text-2xl" />
     </button>
-</div>
+  </div>
 </template>
 
 <script setup>
 import { ref, computed } from "vue"
 import { Icon } from "@iconify/vue"
 
-const props = defineProps({
-  url: {
-    type: String,
-    required: true
-  }
-})
+const props = defineProps({ url: { type: String, required: true } })
 const open = ref(false)
+const toggle = () => (open.value = !open.value)
 
-const toggle = () => {
-  open.value = !open.value
-}
+const desktopOpen = ref(false) // controla el panel desktop
 
 const copied = ref(false)
-
-
-
 const copyLink = async () => {
   try {
     await navigator.clipboard.writeText(props.url)
     copied.value = true
-    setTimeout(() => copied.value = false, 1500)
-  } catch (err) {
+    setTimeout(() => (copied.value = false), 1500)
+  } catch {
     console.error("No se pudo copiar")
   }
 }
 const BASE_URL = typeof window !== "undefined"
   ? `${window.location.protocol}//${window.location.host}`
-  : "";
+  : ""
 
 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 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}`)