Kamran Ahmed
1 year ago
parent
a48d39a863
commit
8fb778337d
19 changed files with 1310 additions and 987 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,42 @@ |
||||
import { useCopyText } from '../../hooks/use-copy-text'; |
||||
import CopyIcon from '../../icons/copy.svg'; |
||||
|
||||
type EditorProps = { |
||||
title: string; |
||||
text: string; |
||||
}; |
||||
|
||||
export function Editor(props: EditorProps) { |
||||
const { text, title } = props; |
||||
|
||||
const { isCopied, copyText } = useCopyText(); |
||||
|
||||
return ( |
||||
<div className="flex w-full flex-grow flex-col overflow-hidden rounded border border-gray-300 bg-gray-50"> |
||||
<div className="flex items-center justify-between gap-2 border-b border-gray-300 px-3 py-2"> |
||||
<span className="text-xs uppercase leading-none text-gray-400"> |
||||
{title} |
||||
</span> |
||||
<button className="flex items-center" onClick={() => copyText(text)}> |
||||
{isCopied && ( |
||||
<span className="mr-1 text-xs leading-none text-gray-700"> |
||||
Copied! |
||||
</span> |
||||
)} |
||||
|
||||
<img src={CopyIcon} alt="Copy" className="inline-block h-4 w-4" /> |
||||
</button> |
||||
</div> |
||||
<textarea |
||||
className="no-scrollbar block h-12 w-full overflow-x-auto whitespace-nowrap bg-gray-200/70 p-3 text-sm text-gray-900 focus:bg-gray-50 focus:outline-0" |
||||
readOnly |
||||
onClick={(e: any) => { |
||||
e.target.select(); |
||||
copyText(e.target.value); |
||||
}} |
||||
> |
||||
{text} |
||||
</textarea> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
export function GitHubReadmeBanner() { |
||||
return ( |
||||
<p className="mt-3 rounded-md border p-2 text-sm w-full bg-yellow-100 border-yellow-400 text-yellow-900"> |
||||
Add this badge to your{' '} |
||||
<a |
||||
href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
className="text-blue-600 underline hover:text-blue-800" |
||||
> |
||||
GitHub profile readme. |
||||
</a> |
||||
</p> |
||||
); |
||||
} |
||||
@ -0,0 +1,172 @@ |
||||
import { useState } from 'preact/hooks'; |
||||
|
||||
import { useCopyText } from '../../hooks/use-copy-text'; |
||||
import { useAuth } from '../../hooks/use-auth'; |
||||
import CopyIcon from '../../icons/copy.svg'; |
||||
import { RoadmapSelect } from './RoadmapSelect'; |
||||
import { GitHubReadmeBanner } from './GitHubReadmeBanner'; |
||||
import { downloadImage } from '../../helper/download-image'; |
||||
import { SelectionButton } from './SelectionButton'; |
||||
import { StepCounter } from './StepCounter'; |
||||
import { Editor } from './Editor'; |
||||
|
||||
type StepLabelProps = { |
||||
label: string; |
||||
}; |
||||
function StepLabel(props: StepLabelProps) { |
||||
const { label } = props; |
||||
|
||||
return ( |
||||
<span className="mb-3 flex items-center gap-2 text-sm leading-none text-gray-400"> |
||||
{label} |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
export function RoadCardPage() { |
||||
const { isCopied, copyText } = useCopyText(); |
||||
const [roadmaps, setRoadmaps] = useState<string[]>([]); |
||||
const [version, setVersion] = useState<'tall' | 'wide'>('tall'); |
||||
const [variant, setVariant] = useState<'dark' | 'light'>('dark'); |
||||
const user = useAuth(); |
||||
if (!user) { |
||||
return null; |
||||
} |
||||
|
||||
const badgeUrl = new URL( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-badge/${version}/${user?.id}` |
||||
); |
||||
|
||||
badgeUrl.searchParams.set('variant', variant); |
||||
if (roadmaps.length > 0) { |
||||
badgeUrl.searchParams.set('roadmaps', roadmaps.join(',')); |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<div className="mb-5 flex items-start gap-4 pt-2"> |
||||
<StepCounter step={1} /> |
||||
<div> |
||||
<StepLabel label="Pick progress to show (Max. 4)" /> |
||||
|
||||
<div className="flex min-h-[30px] flex-wrap"> |
||||
<RoadmapSelect |
||||
selectedRoadmaps={roadmaps} |
||||
setSelectedRoadmaps={setRoadmaps} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className="mb-5 flex items-start gap-4"> |
||||
<StepCounter step={2} /> |
||||
<div> |
||||
<StepLabel label="Select Mode (Dark vs Light)" /> |
||||
|
||||
<div className="flex gap-2"> |
||||
<SelectionButton |
||||
text={'Dark'} |
||||
isDisabled={false} |
||||
isSelected={variant === 'dark'} |
||||
onClick={() => { |
||||
setVariant('dark'); |
||||
}} |
||||
/> |
||||
|
||||
<SelectionButton |
||||
text={'Light'} |
||||
isDisabled={false} |
||||
isSelected={variant === 'light'} |
||||
onClick={() => { |
||||
setVariant('light'); |
||||
}} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className="mb-5 flex items-start gap-4"> |
||||
<StepCounter step={3} /> |
||||
<div> |
||||
<StepLabel label="Select Version" /> |
||||
|
||||
<div className="flex gap-2"> |
||||
<SelectionButton |
||||
text={'Tall'} |
||||
isDisabled={false} |
||||
isSelected={version === 'tall'} |
||||
onClick={() => { |
||||
setVersion('tall'); |
||||
}} |
||||
/> |
||||
<SelectionButton |
||||
text={'Wide'} |
||||
isDisabled={false} |
||||
isSelected={version === 'wide'} |
||||
onClick={() => { |
||||
setVersion('wide'); |
||||
}} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className="mb-5 flex items-start gap-4"> |
||||
<StepCounter step={4} /> |
||||
<div class="flex-grow"> |
||||
<StepLabel label="Share your #RoadCard with others" /> |
||||
<div className={'rounded-md border bg-gray-50 p-2 text-center'}> |
||||
<a |
||||
href={badgeUrl.toString()} |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
className={`relative block hover:cursor-pointer ${ |
||||
version === 'tall' ? ' max-w-[270px] ' : ' w-full ' |
||||
}`}
|
||||
> |
||||
<img src={badgeUrl.toString()} alt="RoadCard" /> |
||||
</a> |
||||
</div> |
||||
|
||||
<div className="mt-3 grid grid-cols-2 gap-2"> |
||||
<button |
||||
className="flex items-center justify-center rounded border border-gray-300 p-1.5 px-2 text-sm font-medium" |
||||
onClick={() => |
||||
downloadImage({ |
||||
url: badgeUrl.toString(), |
||||
name: 'road-card', |
||||
scale: 4, |
||||
}) |
||||
} |
||||
> |
||||
Download |
||||
</button> |
||||
<button |
||||
disabled={isCopied} |
||||
className="flex cursor-pointer items-center justify-center rounded border border-gray-300 p-1.5 px-2 text-sm font-medium disabled:bg-blue-50" |
||||
onClick={() => copyText(badgeUrl.toString())} |
||||
> |
||||
<img alt="Copy" src={CopyIcon} className="mr-1" /> |
||||
|
||||
{isCopied ? 'Copied!' : 'Copy Link'} |
||||
</button> |
||||
</div> |
||||
|
||||
<div className="mt-3 flex flex-col gap-3"> |
||||
<Editor |
||||
title={'HTML'} |
||||
text={`<a href="https://roadmap.sh"><img src="${badgeUrl}" alt="roadmap.sh"/></a>`.trim()} |
||||
/> |
||||
|
||||
<Editor |
||||
title={'Markdown'} |
||||
text={`[](https://roadmap.sh)`.trim()} |
||||
/> |
||||
</div> |
||||
|
||||
<GitHubReadmeBanner /> |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,69 @@ |
||||
import { httpGet } from '../../lib/http'; |
||||
import { useEffect, useState } from 'preact/hooks'; |
||||
import { pageProgressMessage } from '../../stores/page'; |
||||
import type { UserProgressResponse } from '../HeroSection/FavoriteRoadmaps'; |
||||
import { SelectionButton } from './SelectionButton'; |
||||
|
||||
type RoadmapSelectProps = { |
||||
selectedRoadmaps: string[]; |
||||
setSelectedRoadmaps: (updatedRoadmaps: string[]) => void; |
||||
}; |
||||
|
||||
export function RoadmapSelect(props: RoadmapSelectProps) { |
||||
const { selectedRoadmaps, setSelectedRoadmaps } = props; |
||||
|
||||
const [progressList, setProgressList] = useState<UserProgressResponse>(); |
||||
|
||||
const fetchProgress = async () => { |
||||
const { response, error } = await httpGet<UserProgressResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress` |
||||
); |
||||
|
||||
if (error || !response) { |
||||
return; |
||||
} |
||||
|
||||
setProgressList(response); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
fetchProgress().finally(() => { |
||||
pageProgressMessage.set(''); |
||||
}); |
||||
}, []); |
||||
|
||||
const canSelectMore = selectedRoadmaps.length < 4; |
||||
|
||||
return ( |
||||
<div className="flex flex-wrap gap-1"> |
||||
{progressList |
||||
?.filter((progress) => progress.resourceType === 'roadmap') |
||||
.map((progress) => { |
||||
const isSelected = selectedRoadmaps.includes(progress.resourceId); |
||||
const canSelect = isSelected || canSelectMore; |
||||
|
||||
return ( |
||||
<SelectionButton |
||||
text={progress.resourceTitle} |
||||
isDisabled={!canSelect} |
||||
isSelected={isSelected} |
||||
onClick={() => { |
||||
if (isSelected) { |
||||
setSelectedRoadmaps( |
||||
selectedRoadmaps.filter( |
||||
(roadmap) => roadmap !== progress.resourceId |
||||
) |
||||
); |
||||
} else if (selectedRoadmaps.length < 4) { |
||||
setSelectedRoadmaps([ |
||||
...selectedRoadmaps, |
||||
progress.resourceId, |
||||
]); |
||||
} |
||||
}} |
||||
/> |
||||
); |
||||
})} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,23 @@ |
||||
type SelectionButtonProps = { |
||||
text: string; |
||||
isDisabled: boolean; |
||||
isSelected: boolean; |
||||
onClick: () => void; |
||||
}; |
||||
|
||||
export function SelectionButton(props: SelectionButtonProps) { |
||||
const { text, isDisabled, isSelected, onClick } = props; |
||||
|
||||
return ( |
||||
<button |
||||
className={`rounded-md border p-1 px-2 text-sm ${ |
||||
isSelected ? ' border-gray-500 bg-gray-300 ' : '' |
||||
} ${ |
||||
!isDisabled ? ' cursor-pointer ' : ' cursor-not-allowed opacity-40 ' |
||||
}`}
|
||||
onClick={onClick} |
||||
> |
||||
{text} |
||||
</button> |
||||
); |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
type StepCounterProps = { |
||||
step: number; |
||||
}; |
||||
|
||||
export function StepCounter(props: StepCounterProps) { |
||||
const { step } = props; |
||||
|
||||
return ( |
||||
<span |
||||
className={ |
||||
'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-300 text-white' |
||||
} |
||||
> |
||||
{step} |
||||
</span> |
||||
); |
||||
} |
||||
@ -0,0 +1,36 @@ |
||||
type DownloadImageProps = { |
||||
url: string; |
||||
name: string; |
||||
extension?: 'png' | 'jpg'; |
||||
scale?: number; |
||||
}; |
||||
|
||||
export async function downloadImage({ |
||||
url, |
||||
name, |
||||
extension = 'png', |
||||
scale = 1, |
||||
}: DownloadImageProps) { |
||||
try { |
||||
const res = await fetch(url); |
||||
const svg = await res.text(); |
||||
|
||||
const image = `data:image/svg+xml;base64,${window.btoa(svg)}`; |
||||
const img = new Image(); |
||||
img.src = image; |
||||
img.onload = () => { |
||||
const canvas = document.createElement('canvas'); |
||||
canvas.width = img.width * scale; |
||||
canvas.height = img.height * scale; |
||||
const ctx = canvas.getContext('2d'); |
||||
ctx?.drawImage(img, 0, 0, canvas.width, canvas.height); |
||||
const png = canvas.toDataURL('image/png', 1.0); // Increase the quality by setting a higher value (0.0 - 1.0)
|
||||
const a = document.createElement('a'); |
||||
a.href = png; |
||||
a.download = `${name}.${extension}`; |
||||
a.click(); |
||||
}; |
||||
} catch (error) { |
||||
alert('Error downloading image'); |
||||
} |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
import Cookies from 'js-cookie'; |
||||
import { TOKEN_COOKIE_NAME, decodeToken } from '../lib/jwt'; |
||||
|
||||
export function useAuth() { |
||||
const token = Cookies.get(TOKEN_COOKIE_NAME); |
||||
if (!token) { |
||||
return null; |
||||
} |
||||
const user = decodeToken(token); |
||||
|
||||
return user; |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
import { useEffect, useState } from 'preact/hooks'; |
||||
|
||||
export function useCopyText() { |
||||
const [isCopied, setIsCopied] = useState(false); |
||||
|
||||
const copyText = (text: string) => { |
||||
navigator.clipboard.writeText(text).then(); |
||||
setIsCopied(true); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
let timeout: ReturnType<typeof setTimeout>; |
||||
if (isCopied) { |
||||
timeout = setTimeout(() => { |
||||
setIsCopied(false); |
||||
}, 2000); |
||||
} |
||||
return () => clearTimeout(timeout); |
||||
}, [isCopied]); |
||||
|
||||
return { isCopied, copyText }; |
||||
} |
||||
|
After Width: | Height: | Size: 571 B |
|
After Width: | Height: | Size: 419 B |
|
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 331 B |
@ -0,0 +1,15 @@ |
||||
--- |
||||
import AccountSidebar from '../../components/AccountSidebar.astro'; |
||||
import AccountLayout from '../../layouts/AccountLayout.astro'; |
||||
import { RoadCardPage } from '../../components/RoadCard/RoadCardPage'; |
||||
--- |
||||
|
||||
<AccountLayout |
||||
title='Road Card' |
||||
noIndex={true} |
||||
initialLoadingMessage='Preparing card..' |
||||
> |
||||
<AccountSidebar activePageId='road-card' activePageTitle='Road Card'> |
||||
<RoadCardPage client:load /> |
||||
</AccountSidebar> |
||||
</AccountLayout> |
||||
Loading…
Reference in new issue