No Progress
diff --git a/src/components/HeroSection/CheckIcon.tsx b/src/components/HeroSection/CheckIcon.tsx new file mode 100644 index 000000000..de8eb4e15 --- /dev/null +++ b/src/components/HeroSection/CheckIcon.tsx @@ -0,0 +1,20 @@ +type CheckIconProps = { + additionalClasses?: string; +}; + +export function CheckIcon(props: CheckIconProps) { + const { additionalClasses = 'mr-2 top-[0.5px] w-[20px] h-[20px]' } = props; + + return ( + + ); +} diff --git a/src/components/HeroSection/EmptyProgress.tsx b/src/components/HeroSection/EmptyProgress.tsx new file mode 100644 index 000000000..b90c3f1b4 --- /dev/null +++ b/src/components/HeroSection/EmptyProgress.tsx @@ -0,0 +1,23 @@ +import { CheckIcon } from './CheckIcon'; + +type EmptyProgressProps = { + title?: string; + message?: string; +}; + +export function EmptyProgress(props: EmptyProgressProps) { + const { + title = 'Start learning ..', + message = 'Your progress and favorite roadmaps will show up here.', + } = props; + + return ( +
+
+
+
+ );
+}
diff --git a/src/components/HeroSection/FavoriteRoadmaps.tsx b/src/components/HeroSection/FavoriteRoadmaps.tsx
new file mode 100644
index 000000000..e87d4bf83
--- /dev/null
+++ b/src/components/HeroSection/FavoriteRoadmaps.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'preact/hooks';
+import { EmptyProgress } from './EmptyProgress';
+import { httpGet } from '../../lib/http';
+import { ProgressList } from './ProgressList';
+
+export type UserProgressResponse = {
+ resourceId: string;
+ resourceType: 'roadmap' | 'best-practice';
+ resourceTitle: string;
+ done: number;
+ learning: number;
+ skipped: number;
+ total: number;
+ updatedAt: Date;
+}[];
+
+function renderProgress(progressList: UserProgressResponse) {
+ progressList.forEach((progress) => {
+ const href =
+ progress.resourceType === 'best-practice'
+ ? `/best-practices/${progress.resourceId}`
+ : `/${progress.resourceId}`;
+ const element = document.querySelector(`a[href="${href}"]`);
+ if (!element) {
+ return;
+ }
+
+ const totalDone = progress.done + progress.skipped;
+ const percentageDone = (totalDone / progress.total) * 100;
+
+ const progressBar: HTMLElement | null =
+ element.querySelector('[data-progress]');
+ if (progressBar) {
+ progressBar.style.width = `${percentageDone}%`;
+ }
+ });
+}
+
+export function FavoriteRoadmaps() {
+ const [isPreparing, setIsPreparing] = useState(true);
+ const [isLoading, setIsLoading] = useState(false);
+ const [progress, setProgress] = useState
+
+ {message}
+
+
+ );
+}
diff --git a/src/components/HeroSection/HeroSection.astro b/src/components/HeroSection/HeroSection.astro
new file mode 100644
index 000000000..fe12d5878
--- /dev/null
+++ b/src/components/HeroSection/HeroSection.astro
@@ -0,0 +1,28 @@
+---
+import { FavoriteRoadmaps } from './FavoriteRoadmaps';
+---
+
+
+ {!isLoading && progress.length == 0 &&
+
+
diff --git a/src/components/HeroSection/ProgressList.tsx b/src/components/HeroSection/ProgressList.tsx
new file mode 100644
index 000000000..6b7ad471b
--- /dev/null
+++ b/src/components/HeroSection/ProgressList.tsx
@@ -0,0 +1,46 @@
+import type { UserProgressResponse } from './FavoriteRoadmaps';
+import { CheckIcon } from './CheckIcon';
+
+type ProgressListProps = {
+ progress: UserProgressResponse;
+};
+
+export function ProgressList(props: ProgressListProps) {
+ const { progress } = props;
+
+ return (
+
+
+ + Developer Roadmaps +
+ ++ roadmap.sh is a community effort + to create roadmaps, guides and other educational content to help guide developers + in picking up a path and guide their learnings. +
+ ++ Community created roadmaps, guides and articles to help developers grow in + their career. +
+
+
+ );
+}
diff --git a/src/components/PageSponsor.tsx b/src/components/PageSponsor.tsx
index f77f64251..9b09a1b3c 100644
--- a/src/components/PageSponsor.tsx
+++ b/src/components/PageSponsor.tsx
@@ -29,6 +29,18 @@ export function PageSponsor(props: PageSponsorProps) {
const [sponsor, setSponsor] = useState
+
+ {progress.map((resource) => {
+ const url =
+ resource.resourceType === 'roadmap'
+ ? `/${resource.resourceId}`
+ : `/best-practices/${resource.resourceId}`;
+
+ const percentageDone =
+ ((resource.skipped + resource.done) / resource.total) * 100;
+
+ return (
+
+ {resource.resourceTitle}
+
+
+
+ );
+ })}
+
+
-
-
+
-
- - Developer Roadmaps -
- -- roadmap.sh is a community - effort to create roadmaps, guides and other educational content to help - guide developers in picking up the path and guide their learnings. -
- -- Community created roadmaps, guides and articles to help developers - grow in their career. -
-