Add embed functionality

2025-08-29 20:21:50 +02:00 · 2023-12-05 15:32:17 +00:00
parent 0fc28c482a
commit 5e80d9d4d8
5 changed files with 68 additions and 21 deletions
--- a/src/components/CustomRoadmap/RoadmapHeader.tsx
+++ b/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
-              data-guest-required
-              data-popup="login-popup"
-              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"
-              aria-label="Subscribe for Updates"
-            >
-              <span className="ml-2">Subscribe</span>
-            </button>
+            <ShareRoadmapButton
+              roadmapId={roadmapId!}
+              description={description!}
+              pageUrl={`https://roadmap.sh/r?id=${roadmapId}`}
+              allowEmbed={true}
+            />
          </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}/${
-                    $currentRoadmap?._id
-                  }`}
+                  href={`${
+                    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) {
--- a/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
+++ b/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='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]" />
--- a/src/components/Popup/Popup.astro
+++ b/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'>
--- a/src/components/ShareOptions/ShareSuccess.tsx
+++ b/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">
--- a/src/components/ShareRoadmapButton.tsx
+++ b/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'}