ewancroft.uk / website
my website at ewancroft.uk
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

adjust the copy text

Ewan Croft 526c6b5b 839669f3

+20 -25
+20 -25
src/lib/components/icons/social/ShareIcons.svelte
··· 9 9 // Props 10 10 export let title: string; 11 11 export let showInHeader: boolean = false; 12 - export let profile: { handle: string; displayName?: string }; 12 + export let profile: { handle: string; displayName?: string; did?: string }; 13 13 export let mastodonInstance: string = "mastodon.social"; 14 - // Add fediverseCreator prop for Mastodon tagging 15 14 let fediverseCreator: string | undefined = env.PUBLIC_ACTIVITYPUB_USER; 16 15 17 16 $: mastodonUserTag = ··· 23 22 ? fediverseCreator 24 23 : `@${fediverseCreator}`; 25 24 26 - // Define specific share texts for each platform 25 + // Share texts 27 26 $: blueskyShareText = `${title} by @${profile?.handle} - ${$page.url.href}`; 28 27 $: mastodonShareText = 29 28 mastodonUserTag ··· 33 32 : `${title} by ${mastodonUserTag} - ${$page.url.href}` 34 33 : `${title} - ${$page.url.href}`; 35 34 35 + // Clipboard copy text with DID fallback to handle 36 + $: clipboardShareText = `${title} by https://bsky.app/profile/${profile?.did || profile?.handle} - ${$page.url.href}`; 37 + 36 38 // Truncate for character limits 37 39 $: truncatedBlueskyText = 38 40 blueskyShareText.length > 300 ··· 44 46 ? mastodonShareText.substring(0, 497) + "..." 45 47 : mastodonShareText); 46 48 47 - 48 - // Encode the share texts for use in URLs 49 + // Encode share texts 49 50 $: encodedBlueskyText = encodeURIComponent(truncatedBlueskyText); 50 51 $: encodedMastodonText = 51 52 mastodonShareText && encodeURIComponent(truncatedMastodonText); 52 53 53 - // Construct the Bluesky share URL 54 + // Share URLs 54 55 $: blueskyShareUrl = `https://bsky.app/intent/compose?text=${encodedBlueskyText}`; 55 - 56 - // Construct the Mastodon share URL 57 56 $: mastodonShareUrl = 58 57 mastodonShareText && 59 58 `https://${mastodonInstance}/share?text=${encodedMastodonText}`; 60 59 61 - // Reactive statement to open Mastodon share URL when mastodonInstance changes 60 + // Trigger Mastodon share 62 61 let mastodonShareTrigger = false; 63 62 $: if (mastodonShareTrigger && mastodonInstance && mastodonShareUrl) { 64 63 window.open(mastodonShareUrl, "_blank", "noopener,noreferrer"); 65 - mastodonShareTrigger = false; // Reset trigger 64 + mastodonShareTrigger = false; 66 65 } 67 66 68 - // Copy Link 69 - let copyLinkText = "Copy Link"; 67 + // Copy Link button logic 68 + let copyLinkText = "Get Link"; 70 69 let showCopyFeedback = false; 71 70 72 71 const copyLink = async () => { 73 72 try { 74 - await navigator.clipboard.writeText($page.url.href); 75 - copyLinkText = "Copied!"; 73 + await navigator.clipboard.writeText(clipboardShareText); 74 + copyLinkText = "Sorted!"; 76 75 showCopyFeedback = true; 77 76 setTimeout(() => { 78 77 showCopyFeedback = false; 79 - copyLinkText = "Copy Link"; 78 + copyLinkText = "Get Link"; 80 79 }, 2000); 81 80 } catch (err) { 82 81 console.error("Failed to copy: ", err); 83 - copyLinkText = "Failed!"; 82 + copyLinkText = "Couldn’t Copy"; 84 83 showCopyFeedback = true; 85 84 setTimeout(() => { 86 85 showCopyFeedback = false; 87 - copyLinkText = "Copy Link"; 86 + copyLinkText = "Get Link"; 88 87 }, 2000); 89 88 } 90 89 }; ··· 146 145 on:click={copyLink} 147 146 class="icon-button p-2 rounded-full transition-all duration-300 hover:scale-110" 148 147 style="background-color: var(--card-bg);" 149 - aria-label="Copy Link" 150 - title="Copy Link" 148 + aria-label="Get Link" 149 + title="Get Link" 151 150 > 152 151 <CopyLinkIcon /> 153 152 </button> 154 153 {#if showCopyFeedback} 155 154 <span 156 155 class="copy-feedback absolute left-full ml-2 text-sm font-medium" 157 - class:copied={copyLinkText === 'Copied!'} 158 - class:failed={copyLinkText === 'Failed!'} 156 + class:copied={copyLinkText === 'Sorted!'} 157 + class:failed={copyLinkText === 'Couldn’t Copy'} 159 158 > 160 159 {copyLinkText} 161 160 </span> ··· 164 163 </div> 165 164 166 165 <style> 167 - /* Common icon styling - this will match ThemeToggle.svelte */ 168 166 .icon-button { 169 167 color: var(--text-color); 170 168 } ··· 173 171 background-color: var(--button-hover-bg) !important; 174 172 } 175 173 176 - /* Responsive adjustments */ 177 174 @media (max-width: 640px) { 178 175 .share-icons { 179 176 gap: 0.5rem; 180 177 } 181 - 182 - /* Hide copy feedback text on mobile */ 183 178 .copy-feedback { 184 179 display: none; 185 180 }