info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-12 12:13:58 +02:00
Code Issues Releases Wiki Activity

Add share icons

Browse Source
This commit is contained in:
Kamran Ahmed
2022-12-31 19:42:00 +04:00
parent 10883454f5
commit 0932f36953
2 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/InteractiveRoadmap/InteractiveRoadmap.astro
View File

@@ -29,6 +29,10 @@ const { roadmapId, jsonUrl, dimensions, description, roadmapPermalink } =
<div class='bg-gray-50 py-4 sm:py-10'>
<div class="max-w-[1000px] container relative">
<ShareIcons
description={description}
pageUrl={`https://roadmap.sh/${roadmapId}`}
/>
<div
id="roadmap-svg"
style={`--aspect-ratio:${dimensions.width}/${dimensions.height}`}

39
src/components/ShareIcons.astro
View File

@@ -14,15 +14,30 @@ const hnUrl = `https://news.ycombinator.com/submitlink?t=${description}&u=${page
const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${pageUrl}`;
---
<a href={twitterUrl} target="_blank" class="text-gray-500 hover:text-gray-700">
<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
class="absolute left-[-18px] top-[110px] h-full hidden"
id="page-share-icons"
>
<div class="flex sticky top-[100px] flex-col gap-1.5">
<a
href={twitterUrl}
target="_blank"
class="text-gray-500 hover:text-gray-700"
>
<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>