Add embed functionality

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -11,6 +11,7 @@ import { RoadmapActionButton } from './RoadmapActionButton';
 import { Lock, Shapes } from 'lucide-react';
 import { Modal } from '../Modal';
 import { ShareSuccess } from '../ShareOptions/ShareSuccess';
+import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
 
 type RoadmapHeaderProps = {};
 
@@ -44,11 +45,11 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
         {
           resourceId: roadmapId,
           resourceType: 'roadmap',
-        }
+        },
       ));
     } else {
       ({ error, response } = await httpDelete<TeamResourceConfig>(
-        `${baseApiUrl}/v1-delete-roadmap/${roadmapId}`
+        `${baseApiUrl}/v1-delete-roadmap/${roadmapId}`,
       ));
     }
 
@@ -119,7 +120,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className="flex gap-1 sm:gap-2">
+          <div className="flex justify-stretch gap-1 sm:gap-2">
             <a
               href="/roadmaps"
               className="rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
@@ -128,14 +129,12 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               &larr;<span className="hidden sm:inline">&nbsp;All Roadmaps</span>
             </a>
 
-            <button
+            <ShareRoadmapButton
-              data-guest-required
+              roadmapId={roadmapId!}
-              data-popup="login-popup"
+              description={description!}
-              className="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"
+              pageUrl={`https://roadmap.sh/r?id=${roadmapId}`}
-              aria-label="Subscribe for Updates"
+              allowEmbed={true}
-            >
+            />
-              <span className="ml-2">Subscribe</span>
-            </button>
           </div>
           <div className="flex items-center gap-2">
             {$canManageCurrentRoadmap && (
@@ -162,9 +161,9 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                 )}
 
                 <a
-                  href={`${import.meta.env.PUBLIC_EDITOR_APP_URL}/${
+                  href={`${
-                    $currentRoadmap?._id
+                    import.meta.env.PUBLIC_EDITOR_APP_URL
-                  }`}
+                  }/${$currentRoadmap?._id}`}
                   target="_blank"
                   className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
                 >
@@ -183,7 +182,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                 <RoadmapActionButton
                   onDelete={() => {
                     const confirmation = window.confirm(
-                      'Are you sure you want to delete this roadmap?'
+                      'Are you sure you want to delete this roadmap?',
                     );
 
                     if (!confirmation) {

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -12,7 +12,10 @@ export function SkeletonRoadmapHeader() {
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
+          <div className='flex gap-1 sm:gap-2'>
+            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
+            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[85px]" />
+          </div>
           <div className="flex items-center gap-2">
             <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[139.71px]" />
             <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[100.34px]" />

src/components/Popup/Popup.astro

@@ -15,7 +15,7 @@ const { id, title, subtitle } = Astro.props;
 <div
   id={id}
   tabindex='-1'
-  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full items-center justify-center popup'
+  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] h-full items-center justify-center popup'
 >
   <div class='relative p-4 w-full max-w-md h-full md:h-auto'>
     <div class='relative bg-white rounded-lg shadow popup-body'>

src/components/ShareOptions/ShareSuccess.tsx

@@ -45,6 +45,8 @@ export function ShareSuccess(props: ShareSuccessProps) {
     },
   ];
 
+  const embedHtml = `<iframe src="${baseUrl}/r/embed?id=${roadmapId}" width="100%" height="500px" frameBorder="0"\n></iframe>`;
+
   return (
     <div className="flex grow flex-col justify-center">
       <div className="mt-5 flex grow flex-col items-center justify-center gap-1.5">
@@ -76,6 +78,23 @@ export function ShareSuccess(props: ShareSuccessProps) {
         </p>
       )}
 
+      <div className="mt-2 border-t pt-2">
+        <p className="text-sm text-gray-400">
+          You can also embed this roadmap on your website.
+        </p>
+        <div className="mt-2">
+          <input
+              onClick={(e) => {
+                e.currentTarget.select();
+                copyText(embedHtml);
+              }}
+              readOnly={true}
+              className="w-full resize-none rounded-md border bg-gray-50 p-2 text-sm"
+              value={embedHtml}
+          />
+        </div>
+      </div>
+
       {visibility === 'public' && (
         <>
           <div className="-mx-4 mt-4 flex items-center gap-1.5">

src/components/ShareRoadmapButton.tsx

@@ -1,4 +1,12 @@
-import { Check, Copy, Facebook, Linkedin, Share2, Twitter } from 'lucide-react';
+import {
+  Check,
+  Code,
+  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';
@@ -6,12 +14,14 @@ import { cn } from '../lib/classname.ts';
 import { TwitterIcon } from './ReactIcons/TwitterIcon.tsx';
 
 type ShareRoadmapButtonProps = {
+  roadmapId?: string;
   description: string;
   pageUrl: string;
+  allowEmbed?: boolean;
 };
 
 export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
-  const { description, pageUrl } = props;
+  const { description, pageUrl, allowEmbed = false, roadmapId } = props;
 
   const { isCopied, copyText } = useCopyText();
 
@@ -28,12 +38,14 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
     setIsDropdownOpen(false);
   });
 
+  const embedHtml = `<iframe src="https://roadmap.sh/r/embed?id=${roadmapId}" width="100%" height="500px" frameBorder="0"\n></iframe>`;
+
   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',
+          'inline-flex h-full 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,
@@ -56,7 +68,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
       </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="absolute left-0 z-[999] mt-1 w-48 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={() => {
@@ -70,6 +82,20 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
               </div>
               Copy Link
             </button>
+            {allowEmbed && roadmapId && (
+              <button
+                onClick={() => {
+                  copyText(embedHtml);
+                  setIsDropdownOpen(false);
+                }}
+                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              >
+                <div className="flex w-[20px] items-center justify-center">
+                  <Code size="15px" className="text-slate-400" />
+                </div>
+                Copy Embed Code
+              </button>
+            )}
             <a
               href={twitterUrl}
               target={'_blank'}