176 lines
6.1 KiB
Plaintext
176 lines
6.1 KiB
Plaintext
---
|
|
export interface Props {
|
|
title: string;
|
|
url: string;
|
|
class?: string;
|
|
}
|
|
|
|
const { title, url, class: className = '' } = Astro.props;
|
|
const encodedTitle = encodeURIComponent(title);
|
|
const encodedUrl = encodeURIComponent(url);
|
|
---
|
|
|
|
<div class={`flex items-center gap-4 mt-8 ${className}`}>
|
|
<span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Share:</span>
|
|
<div class="flex gap-2">
|
|
<a
|
|
href={`https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
|
|
aria-label="Share on Twitter"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
><path
|
|
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
|
|
></path></svg
|
|
>
|
|
</a>
|
|
<a
|
|
href={`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
|
|
aria-label="Share on Facebook"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg
|
|
>
|
|
</a>
|
|
<a
|
|
href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedTitle}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
|
|
aria-label="Share on LinkedIn"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
|
|
></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"
|
|
></circle></svg
|
|
>
|
|
</a>
|
|
<button
|
|
id="copy-link-button"
|
|
class="relative rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
|
|
aria-label="Copy link"
|
|
title="Copy link to clipboard"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path
|
|
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg
|
|
>
|
|
<span
|
|
id="copy-tooltip"
|
|
class="absolute -top-8 left-1/2 -translate-x-1/2 transform whitespace-nowrap rounded bg-zinc-800 px-2 py-1 text-xs text-white opacity-0 transition-opacity duration-300 dark:bg-zinc-700"
|
|
>
|
|
Copied!
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Function to handle copy link button
|
|
function setupCopyLinkButton() {
|
|
const copyButtons = document.querySelectorAll('#copy-link-button');
|
|
|
|
copyButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
// Get the current URL
|
|
const url = window.location.href;
|
|
|
|
// Copy to clipboard
|
|
navigator.clipboard
|
|
.writeText(url)
|
|
.then(() => {
|
|
// Show tooltip
|
|
const tooltip = button.querySelector('#copy-tooltip');
|
|
if (tooltip) {
|
|
tooltip.classList.add('opacity-100');
|
|
|
|
// Hide tooltip after 2 seconds
|
|
setTimeout(() => {
|
|
tooltip.classList.remove('opacity-100');
|
|
}, 2000);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error('Failed to copy: ', err);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// Set up the copy link button when the DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', setupCopyLinkButton);
|
|
|
|
// Also set up when the page content is updated via SPA navigation
|
|
document.addEventListener('astro:page-load', setupCopyLinkButton);
|
|
|
|
// For compatibility with the custom page transition system
|
|
document.addEventListener('page-transition-complete', setupCopyLinkButton);
|
|
|
|
// Handle SPA transitions for share links
|
|
function setupSpaTransitions() {
|
|
// Get all share links
|
|
const shareLinks = document.querySelectorAll('a[target="_blank"][rel="noopener noreferrer"]');
|
|
|
|
// Make sure external share links don't trigger page transitions
|
|
shareLinks.forEach((link) => {
|
|
link.setAttribute('data-spa-external', 'true');
|
|
});
|
|
}
|
|
|
|
// Initialize SPA transitions
|
|
document.addEventListener('DOMContentLoaded', setupSpaTransitions);
|
|
document.addEventListener('astro:page-load', setupSpaTransitions);
|
|
document.addEventListener('page-transition-complete', setupSpaTransitions);
|
|
|
|
// Dispatch custom event when share action is completed
|
|
function notifyShareComplete() {
|
|
document.dispatchEvent(new CustomEvent('share-action-complete'));
|
|
}
|
|
|
|
// Add analytics tracking for share actions if needed
|
|
function trackShareAction(platform) {
|
|
// You can implement analytics tracking here
|
|
console.log(`Shared on ${platform}`);
|
|
|
|
// Notify other components that share action is complete
|
|
notifyShareComplete();
|
|
}
|
|
</script>
|