Arik Chakma
2 days ago
parent
68597d58d2
commit
6decf1eb70
9 changed files with 170 additions and 94 deletions
@ -0,0 +1,20 @@ |
||||
import { cn } from '../../lib/classname'; |
||||
|
||||
interface HackerNewsIconProps { |
||||
className?: string; |
||||
} |
||||
|
||||
export function HackerNewsIcon(props: HackerNewsIconProps) { |
||||
const { className } = props; |
||||
|
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
viewBox="0 0 448 512" |
||||
fill="currentColor" |
||||
className={cn('h-[26px] w-[26px]', className)} |
||||
> |
||||
<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM21.2 229.2H21c.1-.1.2-.3.3-.4 0 .1 0 .3-.1.4zm218 53.9V384h-31.4V281.3L128 128h37.3c52.5 98.3 49.2 101.2 59.3 125.6 12.3-27 5.8-24.4 60.6-125.6H320l-80.8 155.1z" /> |
||||
</svg> |
||||
); |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
import { cn } from '../../lib/classname'; |
||||
|
||||
interface RedditIconProps { |
||||
className?: string; |
||||
} |
||||
|
||||
export function RedditIcon(props: RedditIconProps) { |
||||
const { className } = props; |
||||
|
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
viewBox="0 0 448 512" |
||||
fill="currentColor" |
||||
className={cn('h-[26px] w-[26px]', className)} |
||||
> |
||||
<path d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8a26.67 26.67 0 0 0-26.8 26.8c0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5a26.67 26.67 0 0 0-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8s-11.9-26.8-26.8-26.8c-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z" /> |
||||
</svg> |
||||
); |
||||
} |
||||
@ -1,34 +0,0 @@ |
||||
--- |
||||
import Icon from '../AstroIcon.astro'; |
||||
|
||||
export interface Props { |
||||
pageUrl: string; |
||||
description: string; |
||||
} |
||||
|
||||
const { pageUrl, description } = Astro.props; |
||||
|
||||
const twitterUrl = `https://twitter.com/intent/tweet?text=${description}&url=${pageUrl}`; |
||||
const fbUrl = `https://www.facebook.com/sharer/sharer.php?quote=${description}&u=${pageUrl}`; |
||||
const hnUrl = `https://news.ycombinator.com/submitlink?t=${description}&u=${pageUrl}`; |
||||
const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${pageUrl}`; |
||||
--- |
||||
|
||||
<div class='absolute left-[-18px] top-[110px] h-full hidden' id='page-share-icons'> |
||||
<div class='flex sticky top-[100px] flex-col gap-1.5 items-center'> |
||||
<a href={twitterUrl} target='_blank' class='text-gray-500 hover:text-gray-700 mb-0.5'> |
||||
<Icon icon='twitter' /> |
||||
</a> |
||||
<a href={fbUrl} target='_blank' class='text-gray-500 hover:text-gray-700'> |
||||
<Icon icon='facebook' /> |
||||
</a> |
||||
<a href={hnUrl} target='_blank' class='text-gray-500 hover:text-gray-700'> |
||||
<Icon icon='hackernews' /> |
||||
</a> |
||||
<a href={redditUrl} target='_blank' class='text-gray-500 hover:text-gray-700'> |
||||
<Icon icon='reddit' /> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src='./sharer.js'></script> |
||||
@ -0,0 +1,99 @@ |
||||
import { useEffect, useRef } from 'react'; |
||||
import { cn } from '../../lib/classname'; |
||||
import { FacebookIcon } from '../ReactIcons/FacebookIcon'; |
||||
import { HackerNewsIcon } from '../ReactIcons/HackerNewsIcon'; |
||||
import { RedditIcon } from '../ReactIcons/RedditIcon'; |
||||
import { TwitterIcon } from '../ReactIcons/TwitterIcon'; |
||||
|
||||
type ShareIconsProps = { |
||||
pageUrl: string; |
||||
description: string; |
||||
}; |
||||
|
||||
export function ShareIcons(props: ShareIconsProps) { |
||||
const { pageUrl, description } = props; |
||||
|
||||
const shareIconsRef = useRef<HTMLDivElement>(null); |
||||
|
||||
const twitterUrl = `https://twitter.com/intent/tweet?text=${description}&url=${pageUrl}`; |
||||
const fbUrl = `https://www.facebook.com/sharer/sharer.php?quote=${description}&u=${pageUrl}`; |
||||
const hnUrl = `https://news.ycombinator.com/submitlink?t=${description}&u=${pageUrl}`; |
||||
const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${pageUrl}`; |
||||
|
||||
const icons = [ |
||||
{ |
||||
url: twitterUrl, |
||||
icon: ( |
||||
<TwitterIcon |
||||
className="size-[24px] [&>path]:fill-[#E5E5E5]" |
||||
boxColor="currentColor" |
||||
/> |
||||
), |
||||
}, |
||||
{ |
||||
url: fbUrl, |
||||
icon: <FacebookIcon className="size-[26px]" />, |
||||
}, |
||||
{ |
||||
url: hnUrl, |
||||
icon: <HackerNewsIcon className="size-[26px]" />, |
||||
}, |
||||
{ |
||||
url: redditUrl, |
||||
icon: <RedditIcon className="size-[26px]" />, |
||||
}, |
||||
]; |
||||
|
||||
useEffect(() => { |
||||
const shareIcons = shareIconsRef.current; |
||||
if (!shareIcons) { |
||||
return; |
||||
} |
||||
|
||||
const onScroll = () => { |
||||
if (window.scrollY < 100 || window.innerWidth < 1050) { |
||||
shareIcons.classList.add('hidden'); |
||||
return null; |
||||
} |
||||
|
||||
shareIcons.classList.remove('hidden'); |
||||
}; |
||||
|
||||
onScroll(); |
||||
|
||||
window.addEventListener('scroll', onScroll); |
||||
return () => { |
||||
window.removeEventListener('scroll', onScroll); |
||||
}; |
||||
}, []); |
||||
|
||||
return ( |
||||
<div |
||||
className="absolute left-[-18px] top-[110px] hidden h-full" |
||||
ref={shareIconsRef} |
||||
> |
||||
<div className="sticky top-[100px] flex flex-col items-center gap-1.5"> |
||||
{icons.map((icon, index) => ( |
||||
<a |
||||
key={index} |
||||
href={icon.url} |
||||
target="_blank" |
||||
className={cn( |
||||
'text-gray-500 hover:text-gray-700', |
||||
index === 0 && 'mt-0.5', |
||||
)} |
||||
onClick={() => { |
||||
window.fireEvent({ |
||||
category: 'RoadmapShareLink', |
||||
action: 'Roadmap Share Link Clicked', |
||||
label: icon.url, |
||||
}); |
||||
}} |
||||
> |
||||
{icon.icon} |
||||
</a> |
||||
))} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,32 +0,0 @@ |
||||
export class Sharer { |
||||
constructor() { |
||||
this.init = this.init.bind(this); |
||||
this.onScroll = this.onScroll.bind(this); |
||||
|
||||
this.shareIconsId = 'page-share-icons'; |
||||
} |
||||
|
||||
get shareIconsEl() { |
||||
return document.getElementById(this.shareIconsId); |
||||
} |
||||
|
||||
onScroll() { |
||||
if (window.scrollY < 100 || window.innerWidth < 1050) { |
||||
this.shareIconsEl.classList.add('hidden'); |
||||
return null; |
||||
} |
||||
|
||||
this.shareIconsEl.classList.remove('hidden'); |
||||
} |
||||
|
||||
init() { |
||||
if (!this.shareIconsEl) { |
||||
return; |
||||
} |
||||
|
||||
window.addEventListener('scroll', this.onScroll, { passive: true }); |
||||
} |
||||
} |
||||
|
||||
const sharer = new Sharer(); |
||||
sharer.init(); |
||||
Loading…
Reference in new issue