feat: implement project status (#6513)
* wip * wip * wip * fix: button width * Add stepper component * Refactor project stepper * Refactor stepper * Refactor stepper * Update clicker * Refactor project stepper * Add projects tip popup * Add start project modal * Submission requirement modalg * Requirement verification functionality * Update project submission * Voting and active timeline * Finalize project solution stepper * Update empty project page * Add user avatars * Solutions listing page * Update tab design * Fix styles for loading and pagination * Redesign project page header * Make project page responsive * Make project pages responsive * Update the leaving roadmap page * Start project modal updates --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/6627/head
Arik Chakma
3 months ago
committed by
GitHub
parent
8a5c0eeb5f
commit
1981568501
24 changed files with 1633 additions and 162 deletions
@ -0,0 +1,29 @@ |
||||
import { Blocks, CodeXml } from 'lucide-react'; |
||||
|
||||
type EmptySolutionsProps = { |
||||
projectId: string; |
||||
}; |
||||
|
||||
export function EmptySolutions(props: EmptySolutionsProps) { |
||||
const { projectId } = props; |
||||
|
||||
return ( |
||||
<div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl px-5 py-3 sm:px-0 sm:py-20"> |
||||
<Blocks className="mb-4 opacity-10 h-14 w-14" /> |
||||
<h2 className="mb-1 text-lg font-semibold sm:text-xl"> |
||||
No solutions submitted yet |
||||
</h2> |
||||
<p className="mb-3 text-balance text-center text-xs text-gray-400 sm:text-sm"> |
||||
Be the first to submit a solution for this project |
||||
</p> |
||||
<div className="flex flex-col items-center gap-1 sm:flex-row sm:gap-1.5"> |
||||
<a |
||||
href={`/projects/${projectId}`} |
||||
className="flex w-full items-center gap-1.5 rounded-md bg-gray-900 px-3 py-1.5 text-xs text-white sm:w-auto sm:text-sm" |
||||
> |
||||
View Project Details |
||||
</a> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,64 @@ |
||||
import { ArrowUpRight, X } from 'lucide-react'; |
||||
import { Modal } from '../Modal'; |
||||
import { SubmissionRequirement } from './SubmissionRequirement.tsx'; |
||||
|
||||
type LeavingRoadmapWarningModalProps = { |
||||
onClose: () => void; |
||||
onContinue: () => void; |
||||
}; |
||||
|
||||
export function LeavingRoadmapWarningModal( |
||||
props: LeavingRoadmapWarningModalProps, |
||||
) { |
||||
const { onClose, onContinue } = props; |
||||
|
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||
<h2 className="mb-1.5 text-2xl font-semibold">Leaving roadmap.sh</h2> |
||||
<p className="text-sm text-gray-500"> |
||||
You are about to visit the project solution on GitHub. We recommend you |
||||
to follow these tips before you leave. |
||||
</p> |
||||
|
||||
<div className="my-3"> |
||||
<p className="rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
Make sure to come back and{' '} |
||||
<span className="font-medium text-purple-600">leave an upvote</span>{' '} |
||||
if you liked the solution. It helps the author and the community. |
||||
</p> |
||||
|
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
If you have feedback on the solution, open an issue or a pull request |
||||
on the{' '} |
||||
<span className="font-medium text-purple-600"> |
||||
solution repository |
||||
</span> |
||||
. |
||||
</p> |
||||
|
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
Downvote the solution if it is{' '} |
||||
<span className="font-medium text-purple-600"> |
||||
incorrect or misleading |
||||
</span> |
||||
. It helps the community. It helps the community. |
||||
</p> |
||||
</div> |
||||
|
||||
<button |
||||
className="inline-flex w-full items-center gap-2 rounded-lg bg-black px-3 py-2.5 text-sm text-white" |
||||
onClick={onContinue} |
||||
> |
||||
<ArrowUpRight className="h-5 w-5" /> |
||||
Continue to Solution |
||||
</button> |
||||
|
||||
<button |
||||
className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black" |
||||
onClick={onClose} |
||||
> |
||||
<X className="h-5 w-5" /> |
||||
</button> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,327 @@ |
||||
import { useEffect, useState } from 'react'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { httpGet, httpPost } from '../../lib/http'; |
||||
import { LoadingSolutions } from './LoadingSolutions'; |
||||
import { EmptySolutions } from './EmptySolutions'; |
||||
import { ThumbsDown, ThumbsUp } from 'lucide-react'; |
||||
import { getRelativeTimeString } from '../../lib/date'; |
||||
import { Pagination } from '../Pagination/Pagination'; |
||||
import { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser'; |
||||
import { pageProgressMessage } from '../../stores/page'; |
||||
import { LeavingRoadmapWarningModal } from './LeavingRoadmapWarningModal'; |
||||
import { isLoggedIn } from '../../lib/jwt'; |
||||
import { showLoginPopup } from '../../lib/popup'; |
||||
import { VoteButton } from './VoteButton.tsx'; |
||||
import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx'; |
||||
import { cn } from '../../lib/classname.ts'; |
||||
|
||||
export interface ProjectStatusDocument { |
||||
_id?: string; |
||||
|
||||
userId: string; |
||||
projectId: string; |
||||
|
||||
startedAt?: Date; |
||||
submittedAt?: Date; |
||||
repositoryUrl?: string; |
||||
|
||||
upvotes: number; |
||||
downvotes: number; |
||||
|
||||
isVisible?: boolean; |
||||
|
||||
updated1t: Date; |
||||
} |
||||
|
||||
const allowedVoteType = ['upvote', 'downvote'] as const; |
||||
export type AllowedVoteType = (typeof allowedVoteType)[number]; |
||||
|
||||
type ListProjectSolutionsResponse = { |
||||
data: (ProjectStatusDocument & { |
||||
user: { |
||||
id: string; |
||||
name: string; |
||||
avatar: string; |
||||
}; |
||||
voteType?: AllowedVoteType | 'none'; |
||||
})[]; |
||||
totalCount: number; |
||||
totalPages: number; |
||||
currPage: number; |
||||
perPage: number; |
||||
}; |
||||
|
||||
type QueryParams = { |
||||
p?: string; |
||||
}; |
||||
|
||||
type PageState = { |
||||
currentPage: number; |
||||
}; |
||||
|
||||
const VISITED_SOLUTIONS_KEY = 'visited-project-solutions'; |
||||
|
||||
type ListProjectSolutionsProps = { |
||||
projectId: string; |
||||
}; |
||||
|
||||
const submittedAlternatives = [ |
||||
'submitted their solution', |
||||
'got it done', |
||||
'submitted their take', |
||||
'finished the project', |
||||
'submitted their work', |
||||
'completed the project', |
||||
'got it done', |
||||
'delivered their project', |
||||
'handed in their solution', |
||||
'provided their deliverables', |
||||
'submitted their approach', |
||||
'sent in their project', |
||||
'presented their take', |
||||
'shared their completed task', |
||||
'submitted their approach', |
||||
'completed it', |
||||
'finalized their solution', |
||||
'delivered their approach', |
||||
'turned in their project', |
||||
'submitted their final draft', |
||||
'delivered their solution', |
||||
]; |
||||
|
||||
export function ListProjectSolutions(props: ListProjectSolutionsProps) { |
||||
const { projectId } = props; |
||||
|
||||
const toast = useToast(); |
||||
const [pageState, setPageState] = useState<PageState>({ |
||||
currentPage: 0, |
||||
}); |
||||
|
||||
const [isLoading, setIsLoading] = useState(true); |
||||
const [solutions, setSolutions] = useState<ListProjectSolutionsResponse>(); |
||||
const [alreadyVisitedSolutions, setAlreadyVisitedSolutions] = useState< |
||||
Record<string, boolean> |
||||
>({}); |
||||
const [showLeavingRoadmapModal, setShowLeavingRoadmapModal] = useState< |
||||
ListProjectSolutionsResponse['data'][number] | null |
||||
>(null); |
||||
|
||||
const loadSolutions = async (page = 1) => { |
||||
const { response, error } = await httpGet<ListProjectSolutionsResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-list-project-solutions/${projectId}`, |
||||
{ |
||||
currPage: page, |
||||
}, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
toast.error(error?.message || 'Failed to load project solutions'); |
||||
setIsLoading(false); |
||||
return; |
||||
} |
||||
|
||||
setSolutions(response); |
||||
}; |
||||
|
||||
const handleSubmitVote = async ( |
||||
solutionId: string, |
||||
voteType: AllowedVoteType, |
||||
) => { |
||||
if (!isLoggedIn()) { |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
pageProgressMessage.set('Submitting vote...'); |
||||
const { response, error } = await httpPost( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-vote-project/${solutionId}`, |
||||
{ |
||||
voteType, |
||||
}, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
toast.error(error?.message || 'Failed to submit vote'); |
||||
pageProgressMessage.set(''); |
||||
return; |
||||
} |
||||
|
||||
pageProgressMessage.set(''); |
||||
setSolutions((prev) => { |
||||
if (!prev) { |
||||
return prev; |
||||
} |
||||
|
||||
return { |
||||
...prev, |
||||
data: prev.data.map((solution) => { |
||||
if (solution._id === solutionId) { |
||||
return { |
||||
...solution, |
||||
upvotes: response?.upvotes || 0, |
||||
downvotes: response?.downvotes || 0, |
||||
voteType, |
||||
}; |
||||
} |
||||
|
||||
return solution; |
||||
}), |
||||
}; |
||||
}); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
const queryParams = getUrlParams() as QueryParams; |
||||
const alreadyVisitedSolutions = JSON.parse( |
||||
localStorage.getItem(VISITED_SOLUTIONS_KEY) || '{}', |
||||
); |
||||
|
||||
setAlreadyVisitedSolutions(alreadyVisitedSolutions); |
||||
setPageState({ |
||||
currentPage: +(queryParams.p || '1'), |
||||
}); |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
setIsLoading(true); |
||||
if (!pageState.currentPage) { |
||||
return; |
||||
} |
||||
|
||||
if (pageState.currentPage !== 1) { |
||||
setUrlParams({ |
||||
p: String(pageState.currentPage), |
||||
}); |
||||
} else { |
||||
deleteUrlParam('p'); |
||||
} |
||||
|
||||
loadSolutions(pageState.currentPage).finally(() => { |
||||
setIsLoading(false); |
||||
}); |
||||
}, [pageState]); |
||||
|
||||
if (isLoading) { |
||||
return <LoadingSolutions />; |
||||
} |
||||
|
||||
const isEmpty = solutions?.data.length === 0; |
||||
if (isEmpty) { |
||||
return <EmptySolutions projectId={projectId} />; |
||||
} |
||||
|
||||
const leavingRoadmapModal = showLeavingRoadmapModal ? ( |
||||
<LeavingRoadmapWarningModal |
||||
onClose={() => setShowLeavingRoadmapModal(null)} |
||||
onContinue={() => { |
||||
const visitedSolutions = { |
||||
...alreadyVisitedSolutions, |
||||
[showLeavingRoadmapModal._id!]: true, |
||||
}; |
||||
localStorage.setItem( |
||||
VISITED_SOLUTIONS_KEY, |
||||
JSON.stringify(visitedSolutions), |
||||
); |
||||
|
||||
window.open(showLeavingRoadmapModal.repositoryUrl, '_blank'); |
||||
}} |
||||
/> |
||||
) : null; |
||||
|
||||
return ( |
||||
<section> |
||||
{leavingRoadmapModal} |
||||
|
||||
<div className="flex min-h-[500px] flex-col divide-y divide-gray-100"> |
||||
{solutions?.data.map((solution, counter) => { |
||||
const isVisited = alreadyVisitedSolutions[solution._id!]; |
||||
const avatar = solution.user.avatar || ''; |
||||
|
||||
return ( |
||||
<div |
||||
key={solution._id} |
||||
className={ |
||||
'flex flex-col justify-between gap-2 py-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:gap-0' |
||||
} |
||||
> |
||||
<div className="flex items-center gap-1.5"> |
||||
<img |
||||
src={ |
||||
avatar |
||||
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}` |
||||
: '/images/default-avatar.png' |
||||
} |
||||
alt={solution.user.name} |
||||
className="mr-0.5 h-7 w-7 rounded-full" |
||||
/> |
||||
<span className="font-medium text-black"> |
||||
{solution.user.name} |
||||
</span> |
||||
<span className="hidden sm:inline"> |
||||
{submittedAlternatives[ |
||||
counter % submittedAlternatives.length |
||||
] || 'submitted their solution'} |
||||
</span>{' '} |
||||
<span className="flex-grow text-right text-gray-400 sm:flex-grow-0 sm:text-left sm:font-medium sm:text-black"> |
||||
{getRelativeTimeString(solution?.submittedAt!)} |
||||
</span> |
||||
</div> |
||||
|
||||
<div className="flex items-center justify-end gap-1"> |
||||
<span className="flex items-center overflow-hidden rounded-full border"> |
||||
<VoteButton |
||||
icon={ThumbsUp} |
||||
isActive={solution?.voteType === 'upvote'} |
||||
count={solution.upvotes || 0} |
||||
onClick={() => { |
||||
handleSubmitVote(solution._id!, 'upvote'); |
||||
}} |
||||
/> |
||||
|
||||
<VoteButton |
||||
icon={ThumbsDown} |
||||
isActive={solution?.voteType === 'downvote'} |
||||
count={solution.downvotes || 0} |
||||
onClick={() => { |
||||
handleSubmitVote(solution._id!, 'downvote'); |
||||
}} |
||||
/> |
||||
</span> |
||||
|
||||
<a |
||||
className="ml-1 flex items-center gap-1 rounded-full border px-2 py-1 text-xs text-black transition-colors hover:border-black hover:bg-black hover:text-white" |
||||
onClick={(e) => { |
||||
e.preventDefault(); |
||||
setShowLeavingRoadmapModal(solution); |
||||
}} |
||||
target="_blank" |
||||
href={solution.repositoryUrl} |
||||
> |
||||
<GitHubIcon className="h-4 w-4 text-current" /> |
||||
Visit Solution |
||||
</a> |
||||
</div> |
||||
</div> |
||||
); |
||||
})} |
||||
</div> |
||||
|
||||
{(solutions?.totalPages || 0) > 1 && ( |
||||
<div className="mt-4"> |
||||
<Pagination |
||||
totalPages={solutions?.totalPages || 1} |
||||
currPage={solutions?.currPage || 1} |
||||
perPage={solutions?.perPage || 21} |
||||
totalCount={solutions?.totalCount || 0} |
||||
onPageChange={(page) => { |
||||
setPageState({ |
||||
...pageState, |
||||
currentPage: page, |
||||
}); |
||||
}} |
||||
/> |
||||
</div> |
||||
)} |
||||
</section> |
||||
); |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
import { isMobileScreen } from '../../lib/is-mobile.ts'; |
||||
|
||||
export function LoadingSolutions() { |
||||
const totalCount = isMobileScreen() ? 3 : 11; |
||||
|
||||
const loadingRow = ( |
||||
<li className="flex min-h-[78px] animate-pulse flex-wrap items-center justify-between overflow-hidden rounded-md bg-gray-200 sm:min-h-[44px] sm:animate-none sm:rounded-none sm:bg-transparent"> |
||||
<span className="flex items-center"> |
||||
<span className="block h-[28px] w-[28px] animate-pulse rounded-full bg-gray-200"></span> |
||||
<span |
||||
className={`ml-2 block h-[26px] w-[350px] animate-pulse rounded-full bg-gray-200`} |
||||
></span> |
||||
</span> |
||||
<span className="flex items-center gap-2"> |
||||
<span |
||||
className={ |
||||
'animated-pulse h-[26px] w-[80px] rounded-full bg-gray-200' |
||||
} |
||||
></span> |
||||
<span |
||||
className={ |
||||
'animated-pulse h-[26px] w-[113px] rounded-full bg-gray-200' |
||||
} |
||||
></span> |
||||
</span> |
||||
</li> |
||||
); |
||||
|
||||
return ( |
||||
<ul className="flex min-h-[500px] flex-col gap-2 divide-y sm:gap-0"> |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
</ul> |
||||
); |
||||
} |
||||
@ -0,0 +1,69 @@ |
||||
import { cn } from '../../lib/classname'; |
||||
import { |
||||
Blocks, |
||||
BoxSelect, |
||||
type LucideIcon, |
||||
StickyNote, |
||||
Text, |
||||
} from 'lucide-react'; |
||||
|
||||
export const allowedProjectTabs = ['details', 'solutions'] as const; |
||||
export type AllowedProjectTab = (typeof allowedProjectTabs)[number]; |
||||
|
||||
type TabButtonProps = { |
||||
text: string; |
||||
icon: LucideIcon; |
||||
smText?: string; |
||||
isActive?: boolean; |
||||
href: string; |
||||
}; |
||||
|
||||
function TabButton(props: TabButtonProps) { |
||||
const { text, icon: ButtonIcon, smText, isActive, href } = props; |
||||
|
||||
return ( |
||||
<a |
||||
href={href} |
||||
className={cn('relative flex items-center gap-1 p-2', { |
||||
'text-black': isActive, |
||||
'opacity-40 hover:opacity-90': !isActive, |
||||
})} |
||||
> |
||||
{ButtonIcon && <ButtonIcon className="mr-1 inline-block h-4 w-4" />} |
||||
<span className="hidden sm:inline">{text}</span> |
||||
{smText && <span className="sm:hidden">{smText}</span>} |
||||
|
||||
{isActive && ( |
||||
<span className="absolute bottom-0 left-0 right-0 h-0.5 translate-y-1/2 bg-black rounded-t-md"></span> |
||||
)} |
||||
</a> |
||||
); |
||||
} |
||||
|
||||
type ProjectTabsProps = { |
||||
activeTab: AllowedProjectTab; |
||||
projectId: string; |
||||
}; |
||||
|
||||
export function ProjectTabs(props: ProjectTabsProps) { |
||||
const { activeTab, projectId } = props; |
||||
|
||||
return ( |
||||
<div className="my-3 flex flex-row flex-wrap items-center gap-1.5 rounded-md border bg-white px-2.5 text-sm"> |
||||
<TabButton |
||||
text={'Project Detail'} |
||||
icon={Text} |
||||
smText={'Details'} |
||||
isActive={activeTab === 'details'} |
||||
href={`/projects/${projectId}`} |
||||
/> |
||||
<TabButton |
||||
text={'Community Solutions'} |
||||
icon={Blocks} |
||||
smText={'Solutions'} |
||||
isActive={activeTab === 'solutions'} |
||||
href={`/projects/${projectId}/solutions`} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,169 @@ |
||||
import { Check, CopyIcon, ServerCrash } from 'lucide-react'; |
||||
import { Modal } from '../Modal'; |
||||
import { getRelativeTimeString } from '../../lib/date'; |
||||
import { useEffect, useState } from 'react'; |
||||
import { Spinner } from '../ReactIcons/Spinner.tsx'; |
||||
import { httpPost } from '../../lib/http.ts'; |
||||
import { CheckIcon } from '../ReactIcons/CheckIcon.tsx'; |
||||
import { useCopyText } from '../../hooks/use-copy-text.ts'; |
||||
|
||||
type StepLabelProps = { |
||||
label: string; |
||||
}; |
||||
|
||||
function StepLabel(props: StepLabelProps) { |
||||
const { label } = props; |
||||
|
||||
return ( |
||||
<span className="flex-shrink-0 rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-600"> |
||||
{label} |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
type StartProjectModalProps = { |
||||
projectId: string; |
||||
onClose: () => void; |
||||
startedAt?: Date; |
||||
onStarted: (startedAt: Date) => void; |
||||
}; |
||||
|
||||
export function StartProjectModal(props: StartProjectModalProps) { |
||||
const { onClose, startedAt, onStarted, projectId } = props; |
||||
|
||||
const [isStartingProject, setIsStartingProject] = useState(true); |
||||
const [error, setError] = useState<string | null>(); |
||||
|
||||
const { isCopied, copyText } = useCopyText(); |
||||
|
||||
const projectUrl = `${import.meta.env.PUBLIC_APP_URL}/projects/${projectId}`; |
||||
|
||||
const formattedStartedAt = startedAt ? getRelativeTimeString(startedAt) : ''; |
||||
|
||||
async function handleStartProject() { |
||||
if (!projectId || startedAt) { |
||||
return; |
||||
} |
||||
|
||||
setIsStartingProject(true); |
||||
const { response, error } = await httpPost<{ |
||||
startedAt: Date; |
||||
}>(`${import.meta.env.PUBLIC_API_URL}/v1-start-project/${projectId}`, {}); |
||||
|
||||
if (error || !response) { |
||||
setError(error?.message || 'Failed to start project'); |
||||
setIsStartingProject(false); |
||||
return; |
||||
} |
||||
|
||||
onStarted(response.startedAt); |
||||
} |
||||
|
||||
useEffect(() => { |
||||
handleStartProject().finally(() => setIsStartingProject(false)); |
||||
}, []); |
||||
|
||||
if (error) { |
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto text-red-500"> |
||||
<div className="flex flex-col items-center justify-center gap-2 pb-10 pt-12"> |
||||
<ServerCrash className={'h-6 w-6'} /> |
||||
<p className="font-medium">{error}</p> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
|
||||
if (isStartingProject) { |
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto"> |
||||
<div className="flex flex-col items-center justify-center gap-4 pb-10 pt-12"> |
||||
<Spinner className={'h-6 w-6'} isDualRing={false} /> |
||||
<p className="font-medium">Starting project ..</p> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<Modal |
||||
onClose={onClose} |
||||
bodyClassName="h-auto p-4 relative overflow-hidden" |
||||
wrapperClassName={'max-w-md'} |
||||
> |
||||
<p className="-mx-4 -mt-4 flex items-center bg-yellow-200 px-3 py-2 text-sm text-yellow-900"> |
||||
<CheckIcon additionalClasses="mr-1.5 w-[15px] text-yellow-800 h-[15px]" /> |
||||
<span className="mr-1.5 font-normal">Project started</span>{' '} |
||||
<span className="font-semibold">{formattedStartedAt}</span> |
||||
</p> |
||||
<h2 className="mb-1 mt-5 text-2xl font-semibold text-gray-800"> |
||||
Start Building |
||||
</h2> |
||||
<p className="text-gray-700"> |
||||
Follow these steps to complete the project. |
||||
</p> |
||||
|
||||
<div className="my-5 space-y-1.5 marker:text-gray-400"> |
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
1. Create a new public repository on GitHub. |
||||
</p> |
||||
|
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
2. Complete the project according to the requirements and push your code |
||||
to the GitHub repository. |
||||
</p> |
||||
|
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
3. Add a README file with instructions to run the project and the{' '} |
||||
<button |
||||
onClick={() => { |
||||
copyText(projectUrl); |
||||
}} |
||||
className="font-semibold" |
||||
> |
||||
{!isCopied && ( |
||||
<span className="text-purple-600"> |
||||
project page URL |
||||
<CopyIcon |
||||
className="relative -top-px ml-1 inline-block h-4 w-4" |
||||
strokeWidth={2.5} |
||||
/> |
||||
</span> |
||||
)} |
||||
{isCopied && ( |
||||
<> |
||||
copied URL |
||||
<Check className="inline-block h-4 w-4" strokeWidth={2.5} /> |
||||
</> |
||||
)} |
||||
</button> |
||||
</p> |
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
4. Once done, submit your solution to help the others learn and get feedback |
||||
from the community. |
||||
</p> |
||||
</div> |
||||
|
||||
<div className="mb-5"> |
||||
<p className='text-sm'> |
||||
If you get stuck, you can always ask for help in the community{' '} |
||||
<a |
||||
href="https://roadmap.sh/discord" |
||||
target="_blank" |
||||
className="font-medium underline underline-offset-2" |
||||
> |
||||
chat on discord |
||||
</a> |
||||
. |
||||
</p> |
||||
</div> |
||||
|
||||
<button |
||||
className="w-full rounded-md bg-black py-2 text-sm font-medium text-white hover:bg-gray-900" |
||||
onClick={onClose} |
||||
> |
||||
Close |
||||
</button> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,37 @@ |
||||
import { Check, type LucideIcon } from 'lucide-react'; |
||||
|
||||
type MilestoneStepProps = { |
||||
icon: LucideIcon; |
||||
text: string; |
||||
isCompleted?: boolean; |
||||
isActive?: boolean; |
||||
}; |
||||
|
||||
export function MilestoneStep(props: MilestoneStepProps) { |
||||
const { icon: DisplayIcon, text, isActive = false, isCompleted } = props; |
||||
|
||||
if (isActive) { |
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 rounded-md border border-dashed border-current px-1.5 py-0.5 text-sm font-medium text-gray-400"> |
||||
<DisplayIcon size={14} /> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
if (isCompleted) { |
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 text-sm font-medium text-green-600"> |
||||
<Check size={14} strokeWidth={3} /> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 text-sm text-gray-400"> |
||||
<DisplayIcon size={14} /> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
@ -0,0 +1,245 @@ |
||||
import { Flag, Play, Send } from 'lucide-react'; |
||||
import { useEffect, useRef, useState } from 'react'; |
||||
import { cn } from '../../../lib/classname.ts'; |
||||
import { useStickyStuck } from '../../../hooks/use-sticky-stuck.tsx'; |
||||
import { StepperAction } from './StepperAction.tsx'; |
||||
import { StepperStepSeparator } from './StepperStepSeparator.tsx'; |
||||
import { MilestoneStep } from './MilestoneStep.tsx'; |
||||
import { httpGet } from '../../../lib/http.ts'; |
||||
import { StartProjectModal } from '../StartProjectModal.tsx'; |
||||
import { getRelativeTimeString } from '../../../lib/date.ts'; |
||||
import { isLoggedIn } from '../../../lib/jwt.ts'; |
||||
import { showLoginPopup } from '../../../lib/popup.ts'; |
||||
import { SubmitProjectModal } from '../SubmitProjectModal.tsx'; |
||||
|
||||
type ProjectStatusResponse = { |
||||
id?: string; |
||||
|
||||
startedAt?: Date; |
||||
submittedAt?: Date; |
||||
repositoryUrl?: string; |
||||
|
||||
upvotes: number; |
||||
downvotes: number; |
||||
}; |
||||
|
||||
type ProjectStepperProps = { |
||||
projectId: string; |
||||
}; |
||||
|
||||
export function ProjectStepper(props: ProjectStepperProps) { |
||||
const { projectId } = props; |
||||
|
||||
const stickyElRef = useRef<HTMLDivElement>(null); |
||||
const isSticky = useStickyStuck(stickyElRef, 8); |
||||
|
||||
const [isStartingProject, setIsStartingProject] = useState(false); |
||||
const [isSubmittingProject, setIsSubmittingProject] = useState(false); |
||||
|
||||
const [error, setError] = useState<string | null>(null); |
||||
const [activeStep, setActiveStep] = useState<number>(0); |
||||
const [isLoadingStatus, setIsLoadingStatus] = useState(true); |
||||
const [projectStatus, setProjectStatus] = useState<ProjectStatusResponse>({ |
||||
upvotes: 0, |
||||
downvotes: 0, |
||||
}); |
||||
|
||||
async function loadProjectStatus() { |
||||
setIsLoadingStatus(true); |
||||
|
||||
const { response, error } = await httpGet<ProjectStatusResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-project-status/${projectId}`, |
||||
{}, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
setError(error?.message || 'Error loading project status'); |
||||
setIsLoadingStatus(false); |
||||
return; |
||||
} |
||||
|
||||
const { startedAt, submittedAt, upvotes } = response; |
||||
|
||||
if (upvotes >= 10) { |
||||
setActiveStep(4); |
||||
} else if (upvotes >= 5) { |
||||
setActiveStep(3); |
||||
} else if (submittedAt) { |
||||
setActiveStep(2); |
||||
} else if (startedAt) { |
||||
setActiveStep(1); |
||||
} |
||||
|
||||
setProjectStatus(response); |
||||
setIsLoadingStatus(false); |
||||
} |
||||
|
||||
useEffect(() => { |
||||
loadProjectStatus().finally(() => {}); |
||||
}, []); |
||||
|
||||
return ( |
||||
<div |
||||
ref={stickyElRef} |
||||
className={cn( |
||||
'relative sm:sticky top-0 my-5 -mx-4 sm:mx-0 overflow-hidden rounded-none border-x-0 sm:border-x sm:rounded-lg border bg-white transition-all', |
||||
{ |
||||
'sm:-mx-5 sm:rounded-none sm:border-x-0 sm:border-t-0 sm:bg-gray-50': isSticky, |
||||
}, |
||||
)} |
||||
> |
||||
{isSubmittingProject && ( |
||||
<SubmitProjectModal |
||||
onClose={() => setIsSubmittingProject(false)} |
||||
projectId={projectId} |
||||
onSubmit={(response) => { |
||||
const { repositoryUrl, submittedAt } = response; |
||||
|
||||
setProjectStatus({ |
||||
...projectStatus, |
||||
repositoryUrl, |
||||
submittedAt, |
||||
}); |
||||
|
||||
setActiveStep(2); |
||||
}} |
||||
repositoryUrl={projectStatus.repositoryUrl} |
||||
/> |
||||
)} |
||||
{isStartingProject && ( |
||||
<StartProjectModal |
||||
projectId={projectId} |
||||
onStarted={(startedAt) => { |
||||
setProjectStatus({ |
||||
...projectStatus, |
||||
startedAt, |
||||
}); |
||||
setActiveStep(1); |
||||
}} |
||||
startedAt={projectStatus?.startedAt} |
||||
onClose={() => setIsStartingProject(false)} |
||||
/> |
||||
)} |
||||
|
||||
{error && ( |
||||
<div className="absolute inset-0 bg-red-100 p-2 text-sm text-red-500"> |
||||
{error} |
||||
</div> |
||||
)} |
||||
{isLoadingStatus && ( |
||||
<div className={cn('striped-loader absolute inset-0 z-10 bg-white')} /> |
||||
)} |
||||
<div |
||||
className={cn( |
||||
'px-4 py-2 text-sm text-gray-500 transition-colors bg-gray-100', |
||||
{ |
||||
'bg-purple-600 text-white': isSticky, |
||||
}, |
||||
)} |
||||
> |
||||
{activeStep === 0 && ( |
||||
<> |
||||
Start building, submit solution and get feedback from the community. |
||||
</> |
||||
)} |
||||
{activeStep === 1 && ( |
||||
<> |
||||
Started working{' '} |
||||
<span |
||||
className={cn('font-medium text-gray-800', { |
||||
'text-purple-200': isSticky, |
||||
})} |
||||
> |
||||
{getRelativeTimeString(projectStatus.startedAt!)} |
||||
</span> |
||||
. Follow{' '} |
||||
<button |
||||
className={cn('underline underline-offset-2 hover:text-black', { |
||||
'text-purple-100 hover:text-white': isSticky, |
||||
})} |
||||
onClick={() => { |
||||
setIsStartingProject(true); |
||||
}} |
||||
> |
||||
these tips |
||||
</button>{' '} |
||||
to get most out of it. |
||||
</> |
||||
)} |
||||
{activeStep >= 2 && ( |
||||
<> |
||||
Congrats on submitting your solution.{' '} |
||||
<button |
||||
className={cn('underline underline-offset-2 hover:text-black', { |
||||
'text-purple-100 hover:text-white': isSticky, |
||||
})} |
||||
onClick={() => { |
||||
setIsSubmittingProject(true); |
||||
}} |
||||
> |
||||
View or update your submission. |
||||
</button> |
||||
</> |
||||
)} |
||||
</div> |
||||
|
||||
<div className="flex flex-col sm:flex-row min-h-[60px] items-start sm:items-center justify-between gap-2 sm:gap-3 px-4 py-4 sm:py-0"> |
||||
<StepperAction |
||||
isActive={activeStep === 0} |
||||
isCompleted={activeStep > 0} |
||||
icon={Play} |
||||
text={activeStep > 0 ? 'Started Working' : 'Start Working'} |
||||
number={1} |
||||
onClick={() => { |
||||
if (!isLoggedIn()) { |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
setIsStartingProject(true); |
||||
}} |
||||
/> |
||||
<StepperStepSeparator isActive={activeStep > 0} /> |
||||
<StepperAction |
||||
isActive={activeStep === 1} |
||||
isCompleted={activeStep > 1} |
||||
icon={Send} |
||||
onClick={() => { |
||||
if (!isLoggedIn()) { |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
setIsSubmittingProject(true); |
||||
}} |
||||
text={activeStep > 1 ? 'Submitted' : 'Submit Solution'} |
||||
number={2} |
||||
/> |
||||
<StepperStepSeparator isActive={activeStep > 1} /> |
||||
<MilestoneStep |
||||
isActive={activeStep === 2} |
||||
isCompleted={activeStep > 2} |
||||
icon={Flag} |
||||
text={ |
||||
activeStep == 2 |
||||
? `${projectStatus.upvotes} / 5 upvotes` |
||||
: `5 upvotes` |
||||
} |
||||
/> |
||||
<StepperStepSeparator isActive={activeStep > 2} /> |
||||
<MilestoneStep |
||||
isActive={activeStep === 3} |
||||
isCompleted={activeStep > 3} |
||||
icon={Flag} |
||||
text={ |
||||
activeStep == 3 |
||||
? `${projectStatus.upvotes} / 10 upvotes` |
||||
: activeStep > 3 |
||||
? `${projectStatus.upvotes} upvotes` |
||||
: `10 upvotes` |
||||
} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,51 @@ |
||||
import { Check, type LucideIcon } from 'lucide-react'; |
||||
|
||||
type StepperActionProps = { |
||||
isActive?: boolean; |
||||
isCompleted?: boolean; |
||||
onClick?: () => void; |
||||
icon: LucideIcon; |
||||
text: string; |
||||
number: number; |
||||
}; |
||||
|
||||
export function StepperAction(props: StepperActionProps) { |
||||
const { |
||||
isActive, |
||||
onClick = () => null, |
||||
isCompleted, |
||||
icon: DisplayIcon, |
||||
text, |
||||
number, |
||||
} = props; |
||||
|
||||
if (isActive) { |
||||
return ( |
||||
<button |
||||
onClick={onClick} |
||||
className="flex items-center gap-1.5 rounded-full bg-purple-600 py-1 pl-2 pr-2.5 text-sm text-white hover:bg-purple-700" |
||||
> |
||||
<DisplayIcon size={13} /> |
||||
<span>{text}</span> |
||||
</button> |
||||
); |
||||
} |
||||
|
||||
if (isCompleted) { |
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 text-sm font-medium text-green-600"> |
||||
<Check size={14} strokeWidth={3} /> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 text-sm text-gray-400"> |
||||
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-400/70 text-xs text-white"> |
||||
{number} |
||||
</span> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
import { cn } from '../../../lib/classname.ts'; |
||||
|
||||
type StepperStepSeparatorProps = { |
||||
isActive: boolean; |
||||
}; |
||||
|
||||
export function StepperStepSeparator(props: StepperStepSeparatorProps) { |
||||
const { isActive } = props; |
||||
|
||||
return ( |
||||
<hr |
||||
className={cn('flex-grow hidden sm:flex border border-gray-300', { |
||||
'border-green-500': isActive, |
||||
})} |
||||
/> |
||||
); |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
import type { ReactNode } from 'react'; |
||||
import { cn } from '../../lib/classname.ts'; |
||||
import { CheckIcon, CircleDashed, Loader, Loader2, X } from 'lucide-react'; |
||||
import { Spinner } from '../ReactIcons/Spinner.tsx'; |
||||
|
||||
type SubmissionRequirementProps = { |
||||
status: 'pending' | 'success' | 'error'; |
||||
children: ReactNode; |
||||
isLoading?: boolean; |
||||
}; |
||||
|
||||
export function SubmissionRequirement(props: SubmissionRequirementProps) { |
||||
const { status, isLoading = false, children } = props; |
||||
|
||||
return ( |
||||
<div |
||||
className={cn(`flex items-center rounded-lg p-2 text-sm text-gray-900`, { |
||||
'bg-gray-200': status === 'pending', |
||||
'bg-green-200': status === 'success', |
||||
'bg-red-200': status === 'error', |
||||
})} |
||||
> |
||||
{!isLoading && ( |
||||
<> |
||||
{status === 'pending' ? ( |
||||
<CircleDashed className="h-4 w-4 flex-shrink-0 text-gray-400" /> |
||||
) : status === 'success' ? ( |
||||
<CheckIcon className="h-4 w-4 flex-shrink-0 text-green-800" /> |
||||
) : ( |
||||
<X className="h-4 w-4 flex-shrink-0 text-yellow-800" /> |
||||
)} |
||||
</> |
||||
)} |
||||
|
||||
{isLoading && ( |
||||
<Loader2 |
||||
className={'h-4 w-4 animate-spin text-gray-400'} |
||||
strokeWidth={3} |
||||
/> |
||||
)} |
||||
<span className="ml-2">{children}</span> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,299 @@ |
||||
import { CheckIcon, CopyIcon, X } from 'lucide-react'; |
||||
import { CheckIcon as ReactCheckIcon } from '../ReactIcons/CheckIcon.tsx'; |
||||
import { Modal } from '../Modal'; |
||||
import { type FormEvent, useState } from 'react'; |
||||
import { httpPost } from '../../lib/http'; |
||||
import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx'; |
||||
import { SubmissionRequirement } from './SubmissionRequirement.tsx'; |
||||
import { useCopyText } from '../../hooks/use-copy-text.ts'; |
||||
|
||||
type SubmitProjectResponse = { |
||||
repositoryUrl: string; |
||||
submittedAt: Date; |
||||
}; |
||||
|
||||
type VerificationChecksType = { |
||||
repositoryExists: 'pending' | 'success' | 'error'; |
||||
readmeExists: 'pending' | 'success' | 'error'; |
||||
projectUrlExists: 'pending' | 'success' | 'error'; |
||||
}; |
||||
|
||||
type SubmitProjectModalProps = { |
||||
onClose: () => void; |
||||
projectId: string; |
||||
repositoryUrl?: string; |
||||
onSubmit: (response: SubmitProjectResponse) => void; |
||||
}; |
||||
|
||||
export function SubmitProjectModal(props: SubmitProjectModalProps) { |
||||
const { |
||||
onClose, |
||||
projectId, |
||||
onSubmit, |
||||
repositoryUrl: defaultRepositoryUrl = '', |
||||
} = props; |
||||
|
||||
const { isCopied, copyText } = useCopyText(); |
||||
const [isLoading, setIsLoading] = useState(false); |
||||
const [error, setError] = useState(''); |
||||
const [successMessage, setSuccessMessage] = useState(''); |
||||
const [repoUrl, setRepoUrl] = useState(defaultRepositoryUrl); |
||||
const [verificationChecks, setVerificationChecks] = |
||||
useState<VerificationChecksType>({ |
||||
repositoryExists: defaultRepositoryUrl ? 'success' : 'pending', |
||||
readmeExists: defaultRepositoryUrl ? 'success' : 'pending', |
||||
projectUrlExists: defaultRepositoryUrl ? 'success' : 'pending', |
||||
}); |
||||
|
||||
const projectUrl = `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/projects/${projectId}`; |
||||
|
||||
const handleSubmit = async (e: FormEvent) => { |
||||
e.preventDefault(); |
||||
try { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'pending', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
setIsLoading(true); |
||||
setError(''); |
||||
setSuccessMessage(''); |
||||
|
||||
if (!repoUrl) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'error', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Repository URL is required'); |
||||
} |
||||
|
||||
const repoUrlParts = repoUrl |
||||
.replace(/https?:\/\/(www\.)?github\.com/, '') |
||||
.split('/'); |
||||
const username = repoUrlParts[1]; |
||||
const repoName = repoUrlParts[2]; |
||||
|
||||
if (!username || !repoName) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'error', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Invalid GitHub repository URL'); |
||||
} |
||||
|
||||
const mainApiUrl = `https://api.github.com/repos/${username}/${repoName}`; |
||||
|
||||
const allContentsUrl = `${mainApiUrl}/contents`; |
||||
const allContentsResponse = await fetch(allContentsUrl); |
||||
if (!allContentsResponse.ok) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'error', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
if (allContentsResponse?.status === 404) { |
||||
throw new Error( |
||||
'Repository not found. Make sure it exists and is public.', |
||||
); |
||||
} |
||||
|
||||
throw new Error('Failed to fetch repository contents'); |
||||
} |
||||
|
||||
const allContentsData = await allContentsResponse.json(); |
||||
if (!Array.isArray(allContentsData)) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'error', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Failed to fetch repository contents'); |
||||
} |
||||
|
||||
const readmeFile = allContentsData.find( |
||||
(file) => file.name.toLowerCase() === 'readme.md', |
||||
); |
||||
if (!readmeFile || !readmeFile.url) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'error', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Readme file not found'); |
||||
} |
||||
|
||||
const readmeUrl = readmeFile.url; |
||||
const response = await fetch(readmeUrl); |
||||
if (!response.ok || response.status === 404) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'error', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Readme file not found'); |
||||
} |
||||
|
||||
const data = await response.json(); |
||||
if (!data.content) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'error', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Readme file not found'); |
||||
} |
||||
|
||||
const readmeContent = window.atob(data.content); |
||||
if (!readmeContent.includes(projectUrl)) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'success', |
||||
projectUrlExists: 'error', |
||||
}); |
||||
|
||||
throw new Error('Add the project page URL to the readme file'); |
||||
} |
||||
|
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'success', |
||||
projectUrlExists: 'success', |
||||
}); |
||||
|
||||
const submitProjectUrl = `${import.meta.env.PUBLIC_API_URL}/v1-submit-project/${projectId}`; |
||||
const { response: submitResponse, error } = |
||||
await httpPost<SubmitProjectResponse>(submitProjectUrl, { |
||||
repositoryUrl: repoUrl, |
||||
}); |
||||
|
||||
if (error || !submitResponse) { |
||||
throw new Error( |
||||
error?.message || 'Error submitting project. Please try again!', |
||||
); |
||||
} |
||||
|
||||
setSuccessMessage('Solution submitted successfully!'); |
||||
setIsLoading(false); |
||||
|
||||
onSubmit(submitResponse); |
||||
} catch (error: any) { |
||||
console.error(error); |
||||
setError(error?.message || 'Failed to verify repository'); |
||||
setIsLoading(false); |
||||
} |
||||
}; |
||||
|
||||
if (successMessage) { |
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||
<div className="flex flex-col items-center justify-center gap-4 pb-10 pt-12"> |
||||
<ReactCheckIcon additionalClasses={'h-12 text-green-500 w-12'} /> |
||||
<p className="text-lg font-medium">{successMessage}</p> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||
<h2 className="mb-2 flex items-center gap-2.5 text-xl font-semibold"> |
||||
<GitHubIcon className="h-6 w-6 text-black" /> Submit Solution URL |
||||
</h2> |
||||
<p className="text-sm text-gray-500"> |
||||
Submit the URL of your GitHub repository with the solution. |
||||
</p> |
||||
|
||||
<div className="my-4 flex flex-col gap-1"> |
||||
<SubmissionRequirement |
||||
isLoading={isLoading} |
||||
status={verificationChecks.repositoryExists} |
||||
> |
||||
URL must point to a public GitHub repository |
||||
</SubmissionRequirement> |
||||
<SubmissionRequirement |
||||
isLoading={isLoading} |
||||
status={verificationChecks.readmeExists} |
||||
> |
||||
Repository must contain a README file |
||||
</SubmissionRequirement> |
||||
<SubmissionRequirement |
||||
isLoading={isLoading} |
||||
status={verificationChecks.projectUrlExists} |
||||
> |
||||
README file must contain the{' '} |
||||
<button |
||||
className={ |
||||
'font-medium underline underline-offset-2 hover:text-purple-700' |
||||
} |
||||
onClick={() => { |
||||
copyText(projectUrl); |
||||
}} |
||||
> |
||||
{!isCopied && ( |
||||
<> |
||||
project URL{' '} |
||||
<CopyIcon |
||||
className="relative -top-0.5 inline-block h-3 w-3" |
||||
strokeWidth={2.5} |
||||
/> |
||||
</> |
||||
)} |
||||
{isCopied && ( |
||||
<> |
||||
copied URL{' '} |
||||
<CheckIcon |
||||
className="relative -top-0.5 inline-block h-3 w-3" |
||||
strokeWidth={2.5} |
||||
/> |
||||
</> |
||||
)} |
||||
</button> |
||||
</SubmissionRequirement> |
||||
</div> |
||||
|
||||
<form className="mt-4" onSubmit={handleSubmit}> |
||||
<input |
||||
type="text" |
||||
className="w-full rounded-lg border border-gray-300 p-2 text-sm focus:border-gray-500 focus:outline-none" |
||||
placeholder="https://github.com/you/solution-repo" |
||||
value={repoUrl} |
||||
onChange={(e) => setRepoUrl(e.target.value)} |
||||
/> |
||||
|
||||
<button |
||||
type="submit" |
||||
className="mt-2 w-full rounded-lg bg-black p-2 font-medium text-white disabled:opacity-50 text-sm" |
||||
disabled={isLoading} |
||||
> |
||||
{isLoading ? 'Verifying...' : 'Verify and Submit'} |
||||
</button> |
||||
{error && ( |
||||
<p className="mt-2 text-sm font-medium text-red-500">{error}</p> |
||||
)} |
||||
|
||||
{successMessage && ( |
||||
<p className="mt-2 text-sm font-medium text-green-500"> |
||||
{successMessage} |
||||
</p> |
||||
)} |
||||
</form> |
||||
|
||||
<button |
||||
className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black" |
||||
onClick={onClose} |
||||
> |
||||
<X className="h-5 w-5" /> |
||||
</button> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,30 @@ |
||||
import { cn } from '../../lib/classname.ts'; |
||||
import { type LucideIcon, ThumbsUp } from 'lucide-react'; |
||||
|
||||
type VoteButtonProps = { |
||||
icon: LucideIcon; |
||||
isActive: boolean; |
||||
count: number; |
||||
onClick: () => void; |
||||
}; |
||||
export function VoteButton(props: VoteButtonProps) { |
||||
const { icon: VoteIcon, isActive, count, onClick } = props; |
||||
return ( |
||||
<button |
||||
className={cn( |
||||
'flex items-center gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-none', |
||||
{ |
||||
'bg-gray-100 text-orange-600 hover:text-orange-700': isActive, |
||||
'bg-transparent text-gray-500 hover:text-black': !isActive, |
||||
}, |
||||
)} |
||||
disabled={isActive} |
||||
onClick={onClick} |
||||
> |
||||
<VoteIcon className={cn('size-3.5 stroke-[2.5px]')} /> |
||||
<span className="relative -top-[0.5px] text-xs font-medium tabular-nums"> |
||||
{count} |
||||
</span> |
||||
</button> |
||||
); |
||||
} |
||||
@ -0,0 +1,29 @@ |
||||
import { type RefObject, useEffect, useState } from 'react'; |
||||
import { isMobileScreen } from '../lib/is-mobile.ts'; |
||||
|
||||
// Checks if the sticky element is stuck or not
|
||||
export function useStickyStuck<T extends HTMLElement>( |
||||
ref: RefObject<T>, |
||||
offset: number = 0, |
||||
): boolean { |
||||
const [isSticky, setIsSticky] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
if (isMobileScreen()) { |
||||
return; |
||||
} |
||||
|
||||
const handleScroll = () => { |
||||
if (ref.current) { |
||||
setIsSticky(ref.current.getBoundingClientRect().top <= offset); |
||||
} |
||||
}; |
||||
|
||||
window.addEventListener('scroll', handleScroll); |
||||
return () => { |
||||
window.removeEventListener('scroll', handleScroll); |
||||
}; |
||||
}, [ref, offset]); |
||||
|
||||
return isSticky; |
||||
} |
||||
@ -1,129 +0,0 @@ |
||||
--- |
||||
import { EditorRoadmap } from '../../components/EditorRoadmap/EditorRoadmap'; |
||||
import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro'; |
||||
import RelatedRoadmaps from '../../components/RelatedRoadmaps.astro'; |
||||
import RoadmapHeader from '../../components/RoadmapHeader.astro'; |
||||
import ShareIcons from '../../components/ShareIcons/ShareIcons.astro'; |
||||
import { TopicDetail } from '../../components/TopicDetail/TopicDetail'; |
||||
import { UserProgressModal } from '../../components/UserProgress/UserProgressModal'; |
||||
import BaseLayout from '../../layouts/BaseLayout.astro'; |
||||
import { Badge } from '../../components/Badge'; |
||||
import { |
||||
generateArticleSchema, |
||||
generateFAQSchema, |
||||
} from '../../lib/jsonld-schema'; |
||||
import { getOpenGraphImageUrl } from '../../lib/open-graph'; |
||||
import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap'; |
||||
import RoadmapNote from '../../components/RoadmapNote.astro'; |
||||
import { RoadmapTitleQuestion } from '../../components/RoadmapTitleQuestion'; |
||||
import ResourceProgressStats from '../../components/ResourceProgressStats.astro'; |
||||
import { |
||||
getAllProjects, |
||||
getProjectById, |
||||
getProjectsByRoadmapId, |
||||
ProjectFrontmatter, |
||||
} from '../../lib/project'; |
||||
import AstroIcon from '../../components/AstroIcon.astro'; |
||||
import MarkdownFile from '../../components/MarkdownFile.astro'; |
||||
import Github from '../github.astro'; |
||||
|
||||
export async function getStaticPaths() { |
||||
const projects = await getAllProjects(); |
||||
|
||||
return projects |
||||
.map((project) => project.id) |
||||
.map((projectId) => ({ |
||||
params: { projectId }, |
||||
})); |
||||
} |
||||
|
||||
interface Params extends Record<string, string | undefined> { |
||||
projectId: string; |
||||
} |
||||
|
||||
const { projectId } = Astro.params as Params; |
||||
|
||||
const project = await getProjectById(projectId); |
||||
const projectData = project.frontmatter as ProjectFrontmatter; |
||||
|
||||
let jsonLdSchema = []; |
||||
|
||||
const ogImageUrl = projectData?.seo?.ogImageUrl || '/images/og-img.png'; |
||||
const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/projects/${projectId}.md`; |
||||
--- |
||||
|
||||
<BaseLayout |
||||
permalink={`/projects/${projectId}`} |
||||
title={projectData?.seo?.title} |
||||
briefTitle={projectData.title} |
||||
ogImageUrl={ogImageUrl} |
||||
description={projectData.seo.description} |
||||
keywords={projectData.seo.keywords} |
||||
jsonLd={jsonLdSchema} |
||||
resourceId={projectId} |
||||
resourceType='project' |
||||
> |
||||
<div class='bg-gray-50'> |
||||
<div class='container'> |
||||
<div |
||||
class='my-3 flex flex-wrap flex-row items-center gap-1.5 rounded-md border bg-white px-2 py-2 text-sm' |
||||
> |
||||
<AstroIcon icon='map' class='h-4 w-4' /> |
||||
Relevant roadmaps <span class='flex flex-row flex-wrap gap-1'> |
||||
{ |
||||
project.roadmaps.map((roadmap) => ( |
||||
<a |
||||
class='bg-gray-500 text-white text-sm px-1.5 rounded hover:bg-black transition-colors' |
||||
href={`/${roadmap.id}`} |
||||
> |
||||
{roadmap.frontmatter?.briefTitle} |
||||
</a> |
||||
)) |
||||
} |
||||
</span> |
||||
</div> |
||||
|
||||
<div class='mb-3 overflow-hidden rounded-lg border bg-white p-5'> |
||||
<div class='relative -mx-2 -mt-2 mb-5 rounded-lg bg-gray-100/70 p-5'> |
||||
<div class='absolute right-2 top-2'> |
||||
<Badge variant='yellow' text={projectData.difficulty} /> |
||||
</div> |
||||
<div class='mb-5'> |
||||
<h1 class='mb-1.5 text-3xl font-semibold'>{projectData.title}</h1> |
||||
<p class='text-gray-500'>{projectData.description}</p> |
||||
</div> |
||||
|
||||
<div class='mt-4'> |
||||
<div class='flex flex-row gap-1.5 flex-wrap'> |
||||
{ |
||||
projectData.skills.map((skill) => ( |
||||
<Badge variant='green' text={skill} /> |
||||
)) |
||||
} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div |
||||
class='prose max-w-full prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-h2:mb-3 prose-h2:mt-5 prose-h3:mb-1 prose-h3:mt-5 prose-p:mb-2 prose-pre:my-3 prose-ul:my-3.5 prose-hr:my-5 [&>ul>li]:my-1' |
||||
> |
||||
<project.Content /> |
||||
</div> |
||||
|
||||
<div |
||||
class='mt-5 flex flex-wrap items-center justify-center rounded-lg bg-yellow-100 p-2.5 text-sm' |
||||
> |
||||
<AstroIcon class='mr-2 inline-block h-5 w-5' icon='github' /> |
||||
Found a mistake? |
||||
<a |
||||
class='ml-1 underline underline-offset-2' |
||||
href={githubUrl} |
||||
target='_blank' |
||||
> |
||||
Help us improve this page |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</BaseLayout> |
||||
@ -0,0 +1,94 @@ |
||||
--- |
||||
import BaseLayout from '../../../layouts/BaseLayout.astro'; |
||||
import { Badge } from '../../../components/Badge'; |
||||
import { |
||||
getAllProjects, |
||||
getProjectById, |
||||
type ProjectFrontmatter, |
||||
} from '../../../lib/project'; |
||||
import AstroIcon from '../../../components/AstroIcon.astro'; |
||||
import { ProjectStepper } from '../../../components/Projects/StatusStepper/ProjectStepper'; |
||||
import { ProjectTabs } from '../../../components/Projects/ProjectTabs'; |
||||
|
||||
export async function getStaticPaths() { |
||||
const projects = await getAllProjects(); |
||||
|
||||
return projects |
||||
.map((project) => project.id) |
||||
.map((projectId) => ({ |
||||
params: { projectId }, |
||||
})); |
||||
} |
||||
|
||||
interface Params extends Record<string, string | undefined> { |
||||
projectId: string; |
||||
} |
||||
|
||||
const { projectId } = Astro.params as Params; |
||||
|
||||
const project = await getProjectById(projectId); |
||||
const projectData = project.frontmatter as ProjectFrontmatter; |
||||
|
||||
let jsonLdSchema: any[] = []; |
||||
|
||||
const ogImageUrl = projectData?.seo?.ogImageUrl || '/images/og-img.png'; |
||||
const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/projects/${projectId}.md`; |
||||
--- |
||||
|
||||
<BaseLayout |
||||
permalink={`/projects/${projectId}`} |
||||
title={projectData?.seo?.title} |
||||
briefTitle={projectData.title} |
||||
ogImageUrl={ogImageUrl} |
||||
description={projectData.seo.description} |
||||
keywords={projectData.seo.keywords} |
||||
jsonLd={jsonLdSchema} |
||||
resourceId={projectId} |
||||
> |
||||
<div class='bg-gray-50'> |
||||
<div class='container'> |
||||
<ProjectTabs projectId={projectId} activeTab='details' /> |
||||
|
||||
<div class='mb-4 rounded-lg border bg-gradient-to-b from-gray-100 to-white to-10% py-2 p-4 sm:p-5'> |
||||
<div class='relative'> |
||||
<div class='mb-4 hidden sm:flex items-center justify-between'> |
||||
<div class='flex flex-row flex-wrap gap-1.5'> |
||||
{ |
||||
projectData.skills.map((skill) => ( |
||||
<Badge variant='green' text={skill} /> |
||||
)) |
||||
} |
||||
</div> |
||||
<Badge variant='yellow' text={projectData.difficulty} /> |
||||
</div> |
||||
<div class="my-2 sm:my-7"> |
||||
<h1 class='mb-1 sm:mb-2 text-xl sm:text-3xl font-semibold'>{projectData.title}</h1> |
||||
<p class='text-balance text-sm text-gray-500'>{projectData.description}</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<ProjectStepper projectId={projectId} client:load /> |
||||
|
||||
<div |
||||
class='prose max-w-full prose-h2:mb-3 prose-h2:mt-5 prose-h3:mb-1 prose-h3:mt-5 prose-p:mb-2 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-pre:my-3 prose-ul:my-3.5 prose-hr:my-5 [&>ul>li]:my-1' |
||||
> |
||||
<project.Content /> |
||||
</div> |
||||
|
||||
<div |
||||
class='mt-5 flex flex-wrap items-center justify-center rounded-lg p-2.5 text-sm' |
||||
> |
||||
<AstroIcon class='mr-2 inline-block h-5 w-5' icon='github' /> |
||||
Found a mistake? |
||||
<a |
||||
class='ml-1 underline underline-offset-2' |
||||
href={githubUrl} |
||||
target='_blank' |
||||
> |
||||
Help us improve. |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</BaseLayout> |
||||
@ -0,0 +1,66 @@ |
||||
--- |
||||
import BaseLayout from '../../../layouts/BaseLayout.astro'; |
||||
import { Badge } from '../../../components/Badge'; |
||||
import { |
||||
getAllProjects, |
||||
getProjectById, |
||||
type ProjectFrontmatter, |
||||
} from '../../../lib/project'; |
||||
import AstroIcon from '../../../components/AstroIcon.astro'; |
||||
import { ProjectTabs } from '../../../components/Projects/ProjectTabs'; |
||||
import { ListProjectSolutions } from '../../../components/Projects/ListProjectSolutions'; |
||||
|
||||
export async function getStaticPaths() { |
||||
const projects = await getAllProjects(); |
||||
|
||||
return projects |
||||
.map((project) => project.id) |
||||
.map((projectId) => ({ |
||||
params: { projectId }, |
||||
})); |
||||
} |
||||
|
||||
interface Params extends Record<string, string | undefined> { |
||||
projectId: string; |
||||
} |
||||
|
||||
const { projectId } = Astro.params as Params; |
||||
|
||||
const project = await getProjectById(projectId); |
||||
const projectData = project.frontmatter as ProjectFrontmatter; |
||||
|
||||
let jsonLdSchema: any[] = []; |
||||
|
||||
const ogImageUrl = projectData?.seo?.ogImageUrl || '/images/og-img.png'; |
||||
const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/projects/${projectId}.md`; |
||||
--- |
||||
|
||||
<BaseLayout |
||||
permalink={`/projects/${projectId}`} |
||||
title={projectData?.seo?.title} |
||||
briefTitle={projectData.title} |
||||
ogImageUrl={ogImageUrl} |
||||
description={projectData.seo.description} |
||||
keywords={projectData.seo.keywords} |
||||
jsonLd={jsonLdSchema} |
||||
resourceId={projectId} |
||||
> |
||||
<div class='bg-gray-50'> |
||||
<div class='container'> |
||||
<ProjectTabs projectId={projectId} activeTab='solutions' /> |
||||
|
||||
<div class='mb-4 overflow-hidden rounded-lg border bg-white p-3 sm:p-5'> |
||||
<div class='relative mb-5 hidden sm:block'> |
||||
<h1 class='mb-1 text-xl font-semibold'> |
||||
{projectData.title} Solutions |
||||
</h1> |
||||
<p class='text-sm text-gray-500'> |
||||
{projectData.description} |
||||
</p> |
||||
</div> |
||||
|
||||
<ListProjectSolutions projectId={projectId} client:load /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</BaseLayout> |
||||
Loading…
Reference in new issue