Compare commits
No commits in common. "9468b0549d7ae2d91fd105d77adca931bf7e258d" and "4a6eb5ae94e76b1b89b0e20b1b5fe906cb2f5177" have entirely different histories.
9468b0549d
...
4a6eb5ae94
|
|
@ -1,127 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- DESKTOP -->
|
|
||||||
<div class="hidden md:block fixed left-0 top-1/2 -translate-y-1/2 z-[9999]">
|
|
||||||
<div
|
|
||||||
class="relative transition-all duration-300 ease-out"
|
|
||||||
:class="desktopOpen ? 'translate-x-0' : '-translate-x-[70%]'"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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 -->
|
|
||||||
<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 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 {
|
|
||||||
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 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>
|
|
||||||
|
|
@ -7,7 +7,7 @@ import "@fontsource/poppins/400.css";
|
||||||
import "@fontsource/poppins/500.css";
|
import "@fontsource/poppins/500.css";
|
||||||
import "@fontsource/poppins/700.css";
|
import "@fontsource/poppins/700.css";
|
||||||
import "@fontsource-variable/kameron";
|
import "@fontsource-variable/kameron";
|
||||||
import ShareSticky from "../components/ShareSticky.vue";
|
|
||||||
const { title } = Astro.props;
|
const { title } = Astro.props;
|
||||||
---
|
---
|
||||||
<style is:global>
|
<style is:global>
|
||||||
|
|
@ -29,9 +29,6 @@ const { title } = Astro.props;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<body class="font-primary">
|
<body class="font-primary">
|
||||||
{Astro.url.pathname.includes('/news/') && (
|
|
||||||
<ShareSticky client:load url={Astro.url.href} />
|
|
||||||
)}
|
|
||||||
<slot />
|
<slot />
|
||||||
<Footer />
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -16,18 +16,9 @@ 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 ?? ""}`;
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -39,27 +30,6 @@ const description = `${post.data.title} - ${post.data.city ?? ""} ${post.data.co
|
||||||
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue