Add share icons

src/components/InteractiveRoadmap/InteractiveRoadmap.astro

@@ -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}`}

src/components/ShareIcons.astro

@@ -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>