feat: redesign roadmap page header and add upcoming projects functionality (#6347)
* Redesign the header * Responsiveness of the roadmap header * Fix spacing * Redesign roadmap header * Add projects badge * Update badge * Add screen for projects * UI flicker fix * Add question for system design * Code formattingpull/6348/head
Kamran Ahmed
4 months ago
committed by
GitHub
parent
5a052d0db2
commit
1087e1a935
16 changed files with 447 additions and 286 deletions
@ -0,0 +1,40 @@ |
|||||||
|
import { Download } from 'lucide-react'; |
||||||
|
import { isLoggedIn } from '../lib/jwt.ts'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { showLoginPopup } from '../lib/popup.ts'; |
||||||
|
|
||||||
|
type DownloadRoadmapButtonProps = { |
||||||
|
roadmapId: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function DownloadRoadmapButton(props: DownloadRoadmapButtonProps) { |
||||||
|
const { roadmapId } = props; |
||||||
|
|
||||||
|
const [url, setUrl] = useState<string>('#'); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (isLoggedIn()) { |
||||||
|
setUrl(`/pdfs/roadmaps/${roadmapId}.pdf`); |
||||||
|
} |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
className="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" |
||||||
|
aria-label="Download Roadmap" |
||||||
|
target="_blank" |
||||||
|
href={url} |
||||||
|
onClick={(e) => { |
||||||
|
if (isLoggedIn()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
e.preventDefault(); |
||||||
|
showLoginPopup(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<Download className="h-4 w-4" /> |
||||||
|
<span className="ml-2 hidden sm:inline">Download</span> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
import { Bell, Check, FolderKanbanIcon } from 'lucide-react'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { cn } from '../../lib/classname.ts'; |
||||||
|
import { Spinner } from '../ReactIcons/Spinner.tsx'; |
||||||
|
import { isLoggedIn } from '../../lib/jwt.ts'; |
||||||
|
import { showLoginPopup } from '../../lib/popup.ts'; |
||||||
|
|
||||||
|
export function EmptyProjects() { |
||||||
|
const [isSubscribed, setIsSubscribed] = useState(false); |
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setIsSubscribed(isLoggedIn()); |
||||||
|
setIsLoading(false); |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col items-center justify-center"> |
||||||
|
<FolderKanbanIcon className="h-14 w-14 text-gray-300" strokeWidth={1.5} /> |
||||||
|
<h2 className="mb-0.5 mt-2 text-center text-base font-medium text-gray-900 sm:text-xl"> |
||||||
|
<span className="hidden sm:inline">Projects are coming soon!</span> |
||||||
|
<span className="inline sm:hidden">Coming soon!</span> |
||||||
|
</h2> |
||||||
|
<p className="mb-3 text-balance text-center text-sm text-gray-500 sm:text-base"> |
||||||
|
Sign up to get notified when projects are available. |
||||||
|
</p> |
||||||
|
|
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
if (isSubscribed) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
showLoginPopup(); |
||||||
|
}} |
||||||
|
className={cn( |
||||||
|
'flex items-center rounded-md bg-gray-800 py-1.5 pl-3 pr-4 text-xs text-white opacity-0 transition-opacity duration-500 hover:bg-black sm:text-sm', |
||||||
|
{ |
||||||
|
'cursor-default bg-gray-300 text-black hover:bg-gray-300': |
||||||
|
isSubscribed, |
||||||
|
'opacity-100': !isLoading, |
||||||
|
}, |
||||||
|
)} |
||||||
|
> |
||||||
|
{!isSubscribed && ( |
||||||
|
<> |
||||||
|
<Bell className="mr-2 h-4 w-4" /> |
||||||
|
Signup to get Notified |
||||||
|
</> |
||||||
|
)} |
||||||
|
{isSubscribed && ( |
||||||
|
<> |
||||||
|
<Check className="mr-2 h-4 w-4" /> |
||||||
|
We will notify you by email |
||||||
|
</> |
||||||
|
)} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
import type { LucideIcon } from 'lucide-react'; |
||||||
|
import { cn } from '../lib/classname.ts'; |
||||||
|
|
||||||
|
type TabLinkProps = { |
||||||
|
icon: LucideIcon; |
||||||
|
text: string; |
||||||
|
isActive: boolean; |
||||||
|
isExternal?: boolean; |
||||||
|
badgeText?: string; |
||||||
|
hideTextOnMobile?: boolean; |
||||||
|
url: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function TabLink(props: TabLinkProps) { |
||||||
|
const { |
||||||
|
icon: Icon, |
||||||
|
badgeText, |
||||||
|
isExternal = false, |
||||||
|
url, |
||||||
|
text, |
||||||
|
isActive, |
||||||
|
hideTextOnMobile = false, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const className = cn( |
||||||
|
'inline-flex group transition-colors items-center gap-1.5 border-b-2 px-2 pb-2.5 text-sm', |
||||||
|
{ |
||||||
|
'cursor-default border-b-black font-medium text-black': isActive, |
||||||
|
'border-b-transparent font-normal text-gray-400 hover:text-gray-700': |
||||||
|
!isActive, |
||||||
|
'font-medium hover:text-black text-gray-500 px-0': isExternal, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
const textClass = cn({ |
||||||
|
'hidden sm:inline': hideTextOnMobile, |
||||||
|
}); |
||||||
|
|
||||||
|
const badgeNode = badgeText && ( |
||||||
|
<span className="ml-0.5 hidden items-center gap-0.5 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-black transition-colors group-hover:bg-yellow-300 sm:flex"> |
||||||
|
<span className="relative -top-px">{badgeText}</span> |
||||||
|
</span> |
||||||
|
); |
||||||
|
|
||||||
|
if (isActive) { |
||||||
|
return ( |
||||||
|
<span className={className}> |
||||||
|
<Icon className="h-4 w-4 flex-shrink-0" /> |
||||||
|
<span className={textClass}>{text}</span> |
||||||
|
{badgeNode} |
||||||
|
</span> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
target={isExternal ? '_blank' : undefined} |
||||||
|
onClick={(e) => { |
||||||
|
e.preventDefault(); |
||||||
|
}} |
||||||
|
href={url} |
||||||
|
className={className} |
||||||
|
> |
||||||
|
<Icon className="h-4 w-4 flex-shrink-0" /> |
||||||
|
<span className={textClass}>{text}</span> |
||||||
|
{badgeNode} |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
--- |
||||||
|
import { EditorRoadmap } from '../../components/EditorRoadmap/EditorRoadmap'; |
||||||
|
import FAQs, { type FAQType } from '../../components/FAQs/FAQs.astro'; |
||||||
|
import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro'; |
||||||
|
import RelatedRoadmaps from '../../components/RelatedRoadmaps.astro'; |
||||||
|
import RoadmapHeader from '../../components/RoadmapHeader.astro'; |
||||||
|
import { FolderKanbanIcon } from 'lucide-react'; |
||||||
|
import { EmptyProjects } from '../../components/Projects/EmptyProjects'; |
||||||
|
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 { |
||||||
|
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'; |
||||||
|
|
||||||
|
export async function getStaticPaths() { |
||||||
|
const roadmapIds = await getRoadmapIds(); |
||||||
|
|
||||||
|
return roadmapIds.map((roadmapId) => ({ |
||||||
|
params: { roadmapId }, |
||||||
|
})); |
||||||
|
} |
||||||
|
|
||||||
|
interface Params extends Record<string, string | undefined> { |
||||||
|
roadmapId: string; |
||||||
|
} |
||||||
|
|
||||||
|
const { roadmapId } = Astro.params as Params; |
||||||
|
const roadmapFile = await import( |
||||||
|
`../../data/roadmaps/${roadmapId}/${roadmapId}.md` |
||||||
|
); |
||||||
|
|
||||||
|
const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter; |
||||||
|
|
||||||
|
// update og for projects |
||||||
|
const ogImageUrl = |
||||||
|
roadmapData?.seo?.ogImageUrl || |
||||||
|
getOpenGraphImageUrl({ |
||||||
|
group: 'roadmap', |
||||||
|
resourceId: roadmapId, |
||||||
|
}); |
||||||
|
--- |
||||||
|
|
||||||
|
<BaseLayout |
||||||
|
permalink={`/${roadmapId}`} |
||||||
|
title={roadmapData?.seo?.title} |
||||||
|
briefTitle={roadmapData.briefTitle} |
||||||
|
ogImageUrl={ogImageUrl} |
||||||
|
description={roadmapData.seo.description} |
||||||
|
keywords={roadmapData.seo.keywords} |
||||||
|
noIndex={true} |
||||||
|
resourceId={roadmapId} |
||||||
|
resourceType='roadmap' |
||||||
|
> |
||||||
|
<div class='bg-gray-50'> |
||||||
|
<RoadmapHeader |
||||||
|
title={roadmapData.title} |
||||||
|
description={roadmapData.description} |
||||||
|
note={roadmapData.note} |
||||||
|
tnsBannerLink={roadmapData.tnsBannerLink} |
||||||
|
roadmapId={roadmapId} |
||||||
|
hasTopics={roadmapData.hasTopics} |
||||||
|
isUpcoming={roadmapData.isUpcoming} |
||||||
|
isForkable={roadmapData.isForkable} |
||||||
|
question={roadmapData.question} |
||||||
|
activeTab='projects' |
||||||
|
/> |
||||||
|
|
||||||
|
<div class='container'> |
||||||
|
<div |
||||||
|
class='relative my-2.5 flex min-h-[400px] flex-col items-center justify-center rounded-lg border bg-white' |
||||||
|
> |
||||||
|
<EmptyProjects client:load /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</BaseLayout> |
||||||
Loading…
Reference in new issue