github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add embed functionality

Browse Source
pull/4827/head
Kamran Ahmed 12 months ago
parent 0fc28c482a
commit 5e80d9d4d8
5 changed files with 68 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      src/components/CustomRoadmap/RoadmapHeader.tsx
  2. 5
      src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
  3. 2
      src/components/Popup/Popup.astro
  4. 19
      src/components/ShareOptions/ShareSuccess.tsx
  5. 34
      src/components/ShareRoadmapButton.tsx

29
src/components/CustomRoadmap/RoadmapHeader.tsx
Unescape View File

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

5
src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
Unescape View File

@ -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]" />

2
src/components/Popup/Popup.astro
Unescape View File

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

19
src/components/ShareOptions/ShareSuccess.tsx
Unescape View File

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

34
src/components/ShareRoadmapButton.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save