Add sharing buttons in header

public/images/hackernews.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
+    <path fill="#94a3b8" d="M5 5v22h22V5zm2 2h18v18H7zm4.5 4l3.5 6v5h2v-5l3.5-6h-2L16 15.281L13.5 11z"></path>
+</svg>

public/images/reddit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="#94a3b8" d="M288 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm338.7 119.7c-23.1 18.2-68.9 37.8-114.7 37.8s-91.6-19.6-114.7-37.8c-14.4-11.3-35.3-8.9-46.7 5.5s-8.9 35.3 5.5 46.7C396.3 771.6 457.5 792 512 792s115.7-20.4 155.9-52.1a33.25 33.25 0 1 0-41.2-52.2zM960 456c0-61.9-50.1-112-112-112c-42.1 0-78.7 23.2-97.9 57.6c-57.6-31.5-127.7-51.8-204.1-56.5L612.9 195l127.9 36.9c11.5 32.6 42.6 56.1 79.2 56.1c46.4 0 84-37.6 84-84s-37.6-84-84-84c-32 0-59.8 17.9-74 44.2L603.5 123a33.2 33.2 0 0 0-39.6 18.4l-90.8 203.9c-74.5 5.2-142.9 25.4-199.2 56.2A111.94 111.94 0 0 0 176 344c-61.9 0-112 50.1-112 112c0 45.8 27.5 85.1 66.8 102.5c-7.1 21-10.8 43-10.8 65.5c0 154.6 175.5 280 392 280s392-125.4 392-280c0-22.6-3.8-44.5-10.8-65.5C932.5 541.1 960 501.8 960 456zM820 172.5a31.5 31.5 0 1 1 0 63a31.5 31.5 0 0 1 0-63zM120 456c0-30.9 25.1-56 56-56a56 56 0 0 1 50.6 32.1c-29.3 22.2-53.5 47.8-71.5 75.9a56.23 56.23 0 0 1-35.1-52zm392 381.5c-179.8 0-325.5-95.6-325.5-213.5S332.2 410.5 512 410.5S837.5 506.1 837.5 624S691.8 837.5 512 837.5zM868.8 508c-17.9-28.1-42.2-53.7-71.5-75.9c9-18.9 28.3-32.1 50.6-32.1c30.9 0 56 25.1 56 56c.1 23.5-14.5 43.7-35.1 52zM624 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0z"></path></svg>

src/components/RoadmapHeader.astro

@@ -10,6 +10,9 @@ import { MarkFavorite } from './FeaturedItems/MarkFavorite';
 import { TeamVersions } from './TeamVersions/TeamVersions';
 import { CreateVersion } from './CreateVersion/CreateVersion';
 import { type RoadmapFrontmatter } from '../lib/roadmap';
+import { ShareRoadmapButton } from './ShareRoadmapButton';
+import { Share2 } from 'lucide-react';
+import ShareIcons from './ShareIcons/ShareIcons.astro';
 
 export interface Props {
   title: string;
@@ -96,6 +99,12 @@ const hasTnsBanner = !!tnsBannerLink;
                 &larr;<span class='hidden sm:inline'>&nbsp;All Roadmaps</span>
               </a>
 
+              <ShareRoadmapButton
+                description={description}
+                pageUrl={`https://roadmap.sh/${roadmapId}`}
+                client:idle
+              />
+
               {isRoadmapReady && (
                 <>
                   <button
@@ -120,16 +129,6 @@ const hasTnsBanner = !!tnsBannerLink;
                   </a>
                 </>
               )}
-
-              <button
-                data-guest-required
-                data-popup='login-popup'
-                class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
-                aria-label='Subscribe for Updates'
-              >
-                <Icon icon='email' />
-                <span class='ml-2'>Subscribe</span>
-              </button>
             </>
           )
         }

src/components/ShareRoadmapButton.tsx

@@ -0,0 +1,135 @@
+import { Check, Copy, Facebook, Linkedin, Share2, Twitter } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { useOutsideClick } from '../hooks/use-outside-click.ts';
+import { useCopyText } from '../hooks/use-copy-text.ts';
+import { cn } from '../lib/classname.ts';
+
+type ShareRoadmapButtonProps = {
+  description: string;
+  pageUrl: string;
+};
+
+export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
+  const { description, pageUrl } = props;
+
+  const { isCopied, copyText } = useCopyText();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  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 linkedinUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${pageUrl}&title=${description}`;
+
+  useOutsideClick(containerRef, () => {
+    setIsDropdownOpen(false);
+  });
+
+  return (
+    <div className="relative" ref={containerRef}>
+      <button
+        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        className={cn(
+          'inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm',
+          {
+            'bg-yellow-500': isDropdownOpen,
+            'bg-green-400': isCopied,
+          },
+        )}
+        aria-label="Share Roadmap"
+      >
+        {!isCopied && (
+          <>
+            <Share2 size="15px" />
+            <span className="ml-2 hidden sm:inline">Share</span>
+          </>
+        )}
+        {isCopied && (
+          <>
+            <Check size="15px" />
+            <span className="ml-2 hidden sm:inline">Copied</span>
+          </>
+        )}
+      </button>
+
+      {isDropdownOpen && (
+        <div className="absolute left-0 z-50 mt-1 w-44 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5">
+          <div className="flex flex-col px-1 py-1">
+            <button
+              onClick={() => {
+                copyText(pageUrl);
+                setIsDropdownOpen(false);
+              }}
+              className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+            >
+              <div className="flex w-[20px] items-center justify-center">
+                <Copy size="15px" className="text-slate-400" />
+              </div>
+              Copy Link
+            </button>
+            <a
+              href={twitterUrl}
+              target={'_blank'}
+              className="mt-1 flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+            >
+              <div className="flex w-[20px] items-center justify-center">
+                <Twitter size="16px" className="text-slate-400" />
+              </div>
+              Share on Twitter
+            </a>
+            <a
+              href={fbUrl}
+              target={'_blank'}
+              className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+            >
+              <div className="flex w-[20px] items-center justify-center">
+                <Facebook size="16px" className="text-slate-400" />
+              </div>
+              Facebook
+            </a>
+            <a
+              href={hnUrl}
+              target={'_blank'}
+              className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+            >
+              <div className="flex w-[20px] items-center justify-center">
+                <img
+                  alt={'hackernews logo'}
+                  src={'/images/hackernews.svg'}
+                  className="h-5 w-5"
+                />
+              </div>
+              Hacker News
+            </a>
+            <a
+              href={redditUrl}
+              target={'_blank'}
+              className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+            >
+              <div className="flex w-[20px] items-center justify-center">
+                <img
+                  alt={'reddit logo'}
+                  src={'/images/reddit.svg'}
+                  className="h-5 w-5"
+                />
+              </div>
+              Reddit
+            </a>
+            <a
+              href={linkedinUrl}
+              target={'_blank'}
+              className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+            >
+              <div className="flex w-[20px] items-center justify-center">
+                <Linkedin size="16px" className="text-slate-400" />
+              </div>
+              LinkedIn
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}