-
-
+
+
{title}
-
{description}
+
{description}
diff --git a/src/components/RoadmapHint.astro b/src/components/RoadmapHint.astro
index ceb21890564c..2fd0b202b66c 100644
--- a/src/components/RoadmapHint.astro
+++ b/src/components/RoadmapHint.astro
@@ -1,5 +1,5 @@
---
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
export interface Props {
roadmapId: string;
diff --git a/src/components/Setting/SettingSidebar.astro b/src/components/Setting/SettingSidebar.astro
new file mode 100644
index 000000000000..99ee7c284fc5
--- /dev/null
+++ b/src/components/Setting/SettingSidebar.astro
@@ -0,0 +1,81 @@
+---
+import Icon from '../AstroIcon.astro';
+const { pageUrl, name } = Astro.props;
+
+export interface Props {
+ pageUrl: string;
+ name: string;
+}
+---
+
+
+
+
diff --git a/src/components/Setting/UpdatePasswordForm.tsx b/src/components/Setting/UpdatePasswordForm.tsx
new file mode 100644
index 000000000000..e519416d0412
--- /dev/null
+++ b/src/components/Setting/UpdatePasswordForm.tsx
@@ -0,0 +1,175 @@
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import Cookies from 'js-cookie';
+import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
+import { httpGet, httpPost } from '../../lib/http';
+import { pageLoadingMessage } from '../../stores/page';
+
+export default function UpdatePasswordForm() {
+ const [authProvider, setAuthProvider] = useState('');
+ const [currentPassword, setCurrentPassword] = useState('');
+ const [newPassword, setNewPassword] = useState('');
+ const [newPasswordConfirmation, setNewPasswordConfirmation] = useState('');
+
+ const [error, setError] = useState('');
+ const [success, setSuccess] = useState('');
+
+ const [isLoading, setIsLoading] = useState(true);
+
+ const handleSubmit = async (e: Event) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError('');
+ setSuccess('');
+
+ if (newPassword !== newPasswordConfirmation) {
+ setError('Passwords do not match');
+ setIsLoading(false);
+
+ return;
+ }
+
+ const { response, error } = await httpPost(
+ `${import.meta.env.PUBLIC_API_URL}/v1-update-password`,
+ {
+ oldPassword: authProvider === 'email' ? currentPassword : 'social-auth',
+ password: newPassword,
+ confirmPassword: newPasswordConfirmation,
+ }
+ );
+
+ if (error) {
+ setError(error.message || 'Something went wrong');
+ setIsLoading(false);
+
+ return;
+ }
+
+ setError('');
+ setCurrentPassword('');
+ setNewPassword('');
+ setNewPasswordConfirmation('');
+ setSuccess('Password updated successfully');
+ setIsLoading(false);
+ };
+
+ const loadProfile = async () => {
+ setIsLoading(true);
+
+ const { error, response } = await httpGet(
+ `${import.meta.env.PUBLIC_API_URL}/v1-me`
+ );
+
+ if (error || !response) {
+ setIsLoading(false);
+ setError(error?.message || 'Something went wrong');
+
+ return;
+ }
+
+ const { authProvider } = response;
+ setAuthProvider(authProvider);
+
+ setIsLoading(false);
+ };
+
+ useEffect(() => {
+ pageLoadingMessage.set('Loading profile');
+ loadProfile().finally(() => {
+ pageLoadingMessage.set('');
+ });
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/src/components/Setting/UpdateProfileForm.tsx b/src/components/Setting/UpdateProfileForm.tsx
new file mode 100644
index 000000000000..e4524c3d2024
--- /dev/null
+++ b/src/components/Setting/UpdateProfileForm.tsx
@@ -0,0 +1,203 @@
+import { useEffect, useState } from 'preact/hooks';
+import { httpGet, httpPost } from '../../lib/http';
+import Cookies from 'js-cookie';
+import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
+import { pageLoadingMessage } from '../../stores/page';
+
+export function UpdateProfileForm() {
+ const [name, setName] = useState('');
+ const [email, setEmail] = useState('');
+ const [github, setGithub] = useState('');
+ const [twitter, setTwitter] = useState('');
+ const [linkedin, setLinkedin] = useState('');
+ const [website, setWebsite] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+
+ const [error, setError] = useState('');
+ const [success, setSuccess] = useState('');
+
+ const handleSubmit = async (e: Event) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError('');
+ setSuccess('');
+
+ const { response, error } = await httpPost(
+ `${import.meta.env.PUBLIC_API_URL}/v1-update-profile`,
+ {
+ name,
+ github: github || undefined,
+ linkedin: linkedin || undefined,
+ twitter: twitter || undefined,
+ website: website || undefined,
+ }
+ );
+
+ if (error || !response) {
+ setIsLoading(false);
+ setError(error?.message || 'Something went wrong');
+
+ return;
+ }
+
+ await loadProfile();
+ setSuccess('Profile updated successfully');
+ };
+
+ const loadProfile = async () => {
+ // Set the loading state
+ setIsLoading(true);
+
+ const { error, response } = await httpGet(
+ `${import.meta.env.PUBLIC_API_URL}/v1-me`
+ );
+
+ if (error || !response) {
+ setIsLoading(false);
+ setError(error?.message || 'Something went wrong');
+
+ return;
+ }
+
+ const { name, email, links } = response;
+
+ setName(name);
+ setEmail(email);
+ setGithub(links?.github || '');
+ setLinkedin(links?.linkedin || '');
+ setTwitter(links?.twitter || '');
+ setWebsite(links?.website || '');
+
+ setIsLoading(false);
+ };
+
+ // Make a request to the backend to fill in the form with the current values
+ useEffect(() => {
+ pageLoadingMessage.set('Loading profile');
+ loadProfile().finally(() => {
+ pageLoadingMessage.set('');
+ });
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/src/components/ShareIcons/ShareIcons.astro b/src/components/ShareIcons/ShareIcons.astro
index f788c2ad2e14..d7648ccdaefb 100644
--- a/src/components/ShareIcons/ShareIcons.astro
+++ b/src/components/ShareIcons/ShareIcons.astro
@@ -1,5 +1,5 @@
---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
export interface Props {
pageUrl: string;
diff --git a/src/components/Sponsor/Sponsor.astro b/src/components/Sponsor/Sponsor.astro
index e28963627758..303a7250d1ef 100644
--- a/src/components/Sponsor/Sponsor.astro
+++ b/src/components/Sponsor/Sponsor.astro
@@ -1,6 +1,6 @@
---
import type { GAEventType } from '../Analytics/analytics';
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
export type SponsorType = {
url: string;
diff --git a/src/components/SubscribePopup.astro b/src/components/SubscribePopup.astro
deleted file mode 100644
index 851188562e04..000000000000
--- a/src/components/SubscribePopup.astro
+++ /dev/null
@@ -1,41 +0,0 @@
----
-import Popup from './Popup/Popup.astro';
-import CaptchaFields from './Captcha/CaptchaFields.astro';
----
-
-
diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
new file mode 100644
index 000000000000..131c8cd8894c
--- /dev/null
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -0,0 +1,261 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import SpinnerIcon from '../../icons/spinner.svg';
+import CheckIcon from '../../icons/check.svg';
+import ResetIcon from '../../icons/reset.svg';
+import CloseIcon from '../../icons/close.svg';
+
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { useLoadTopic } from '../../hooks/use-load-topic';
+import { httpGet } from '../../lib/http';
+import { isLoggedIn } from '../../lib/jwt';
+import {
+ isTopicDone,
+ renderTopicProgress,
+ ResourceType,
+ toggleMarkTopicDone as toggleMarkTopicDoneApi,
+} from '../../lib/resource-progress';
+import { useKeydown } from '../../hooks/use-keydown';
+import { useToggleTopic } from '../../hooks/use-toggle-topic';
+import { pageLoadingMessage } from '../../stores/page';
+
+export function TopicDetail() {
+ const [isActive, setIsActive] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState('');
+ const [topicHtml, setTopicHtml] = useState('');
+
+ const [isDone, setIsDone] = useState
();
+ const [isUpdatingProgress, setIsUpdatingProgress] = useState(true);
+
+ const isGuest = useMemo(() => !isLoggedIn(), []);
+ const topicRef = useRef(null);
+
+ // Details of the currently loaded topic
+ const [topicId, setTopicId] = useState('');
+ const [resourceId, setResourceId] = useState('');
+ const [resourceType, setResourceType] = useState('roadmap');
+
+ const showLoginPopup = () => {
+ const popupEl = document.querySelector(`#login-popup`);
+ if (!popupEl) {
+ return;
+ }
+
+ popupEl.classList.remove('hidden');
+ popupEl.classList.add('flex');
+ const focusEl = popupEl.querySelector('[autofocus]');
+ if (focusEl) {
+ focusEl.focus();
+ }
+ };
+
+ const toggleMarkTopicDone = (isDone: boolean) => {
+ setIsUpdatingProgress(true);
+ toggleMarkTopicDoneApi({ topicId, resourceId, resourceType }, isDone)
+ .then(() => {
+ setIsDone(isDone);
+ setIsActive(false);
+ renderTopicProgress(topicId, isDone);
+ })
+ .catch((err) => {
+ alert(err.message);
+ console.error(err);
+ })
+ .finally(() => {
+ setIsUpdatingProgress(false);
+ });
+ };
+
+ // Load the topic status when the topic detail is active
+ useEffect(() => {
+ if (!topicId || !resourceId || !resourceType) {
+ return;
+ }
+
+ setIsUpdatingProgress(true);
+ isTopicDone({ topicId, resourceId, resourceType })
+ .then((status: boolean) => {
+ setIsUpdatingProgress(false);
+ setIsDone(status);
+ })
+ .catch(console.error);
+ }, [topicId, resourceId, resourceType]);
+
+ // Close the topic detail when user clicks outside the topic detail
+ useOutsideClick(topicRef, () => {
+ setIsActive(false);
+ });
+
+ useKeydown('Escape', () => {
+ setIsActive(false);
+ });
+
+ // Toggle topic is available even if the component UI is not active
+ // This is used on the best practice screen where we have the checkboxes
+ // to mark the topic as done/undone.
+ useToggleTopic(({ topicId, resourceType, resourceId }) => {
+ if (isGuest) {
+ showLoginPopup();
+ return;
+ }
+
+ pageLoadingMessage.set('Updating');
+
+ // Toggle the topic status
+ isTopicDone({ topicId, resourceId, resourceType })
+ .then((oldIsDone) => {
+ return toggleMarkTopicDoneApi(
+ {
+ topicId,
+ resourceId,
+ resourceType,
+ },
+ !oldIsDone
+ );
+ })
+ .then((newIsDone) => renderTopicProgress(topicId, newIsDone))
+ .catch((err) => {
+ alert(err.message);
+ console.error(err);
+ })
+ .finally(() => {
+ pageLoadingMessage.set('');
+ });
+ });
+
+ // Load the topic detail when the topic detail is active
+ useLoadTopic(({ topicId, resourceType, resourceId }) => {
+ setIsLoading(true);
+ setIsActive(true);
+
+ setTopicId(topicId);
+ setResourceType(resourceType);
+ setResourceId(resourceId);
+
+ const topicPartial = topicId.replaceAll(':', '/');
+ const topicUrl =
+ resourceType === 'roadmap'
+ ? `/${resourceId}/${topicPartial}`
+ : `/best-practices/${resourceId}/${topicPartial}`;
+
+ httpGet(
+ topicUrl,
+ {},
+ {
+ headers: {
+ Accept: 'text/html',
+ },
+ }
+ )
+ .then(({ response }) => {
+ if (!response) {
+ setError('Topic not found.');
+ return;
+ }
+
+ // It's full HTML with page body, head etc.
+ // We only need the inner HTML of the #main-content
+ const node = new DOMParser().parseFromString(response, 'text/html');
+ const topicHtml = node?.getElementById('main-content')?.outerHTML || '';
+
+ setIsLoading(false);
+ setTopicHtml(topicHtml);
+ })
+ .catch((err) => {
+ setError('Something went wrong. Please try again later.');
+ setIsLoading(false);
+ });
+ });
+
+ if (!isActive) {
+ return null;
+ }
+
+ return (
+
+
+ {isLoading && (
+
+
+
+ )}
+
+ {!isLoading && !error && (
+ <>
+ {/* Actions for the topic */}
+
+ {isGuest && (
+
+ )}
+
+ {!isGuest && (
+ <>
+ {isUpdatingProgress && (
+
+ )}
+ {!isUpdatingProgress && !isDone && (
+
+ )}
+
+ {!isUpdatingProgress && isDone && (
+
+ )}
+
+ )}
+
+
+
+
+ {/* Topic Content */}
+
+
+ )}
+
+
+
@@ -19,33 +19,39 @@ const { contentContributionLink } = Astro.props;
-
-
+
+
+
+
-
+
+
+
+
+
@@ -53,24 +59,24 @@ const { contentContributionLink } = Astro.props;
We are still working on this page. You can contribute by submitting a
brief description and a few links to learn more about this topic on GitHub repository..
-
-
\ No newline at end of file
+
diff --git a/src/components/TopicOverlay/topic.js b/src/components/TopicOverlay/topic.js
index 1f2c625d9210..680b55054689 100644
--- a/src/components/TopicOverlay/topic.js
+++ b/src/components/TopicOverlay/topic.js
@@ -29,7 +29,6 @@ export class Topic {
this.markAsDone = this.markAsDone.bind(this);
this.markAsPending = this.markAsPending.bind(this);
this.querySvgElementsByTopicId = this.querySvgElementsByTopicId.bind(this);
- this.rightClickListener = this.rightClickListener.bind(this);
this.isTopicDone = this.isTopicDone.bind(this);
this.init = this.init.bind(this);
@@ -63,20 +62,6 @@ export class Topic {
return document.getElementById(this.overlayId);
}
- rightClickListener(e) {
- const groupId = e.target?.closest('g')?.dataset?.groupId;
- if (!groupId) {
- return;
- }
-
- e.preventDefault();
- if (this.isTopicDone(groupId)) {
- this.markAsPending(groupId);
- } else {
- this.markAsDone(groupId);
- }
- }
-
resetDOM(hideOverlay = false) {
if (hideOverlay) {
this.overlayEl.classList.add('hidden');
@@ -99,7 +84,8 @@ export class Topic {
isTopicDone(topicId) {
const normalizedGroup = topicId.replace(/^\d+-/, '');
- return localStorage.getItem(normalizedGroup) === 'done';
+ const el = document.querySelector(`[data-group-id$="-${normalizedGroup}"]`);
+ return el?.classList.contains('done');
}
/**
@@ -152,9 +138,9 @@ export class Topic {
const isDone = localStorage.getItem(topicId) === 'done';
if (isDone) {
- this.markAsPending(topicId);
+ this.markAsPending(topicId, bestPracticeId, 'best-practice');
} else {
- this.markAsDone(topicId);
+ this.markAsDone(topicId, bestPracticeId, 'best-practice');
}
}
@@ -165,7 +151,7 @@ export class Topic {
return;
}
- this.markAsPending(topicId);
+ this.markAsPending(topicId, bestPracticeId, 'best-practice');
}
handleBestPracticeTopicClick(e) {
@@ -244,22 +230,34 @@ export class Topic {
return matchingElements;
}
- markAsDone(topicId) {
+ async markAsDone(topicId, resourceId, resourceType) {
const updatedTopicId = topicId.replace(/^\d+-/, '');
- localStorage.setItem(updatedTopicId, 'done');
- this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => {
- item?.classList?.add('done');
- });
+ const { response, error } = {};
+
+ if (response) {
+ this.close();
+ this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => {
+ item?.classList?.add('done');
+ });
+ } else {
+ console.error(error);
+ }
}
- markAsPending(topicId) {
+ async markAsPending(topicId, resourceId, resourceType) {
const updatedTopicId = topicId.replace(/^\d+-/, '');
- localStorage.removeItem(updatedTopicId);
- this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => {
- item?.classList?.remove('done');
- });
+ const { response, error } = {};
+
+ if (response) {
+ this.close();
+ this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => {
+ item?.classList?.remove('done');
+ });
+ } else {
+ console.error(error);
+ }
}
handleOverlayClick(e) {
@@ -274,22 +272,32 @@ export class Topic {
e.target.id === this.markTopicDoneId ||
e.target.closest(`#${this.markTopicDoneId}`);
if (isClickedDone) {
- this.markAsDone(this.activeTopicId);
- this.close();
+ this.markAsDone(
+ this.activeTopicId,
+ this.activeResourceId,
+ this.activeResourceType
+ );
+ // this.close();
}
const isClickedPending =
e.target.id === this.markTopicPendingId ||
e.target.closest(`#${this.markTopicPendingId}`);
if (isClickedPending) {
- this.markAsPending(this.activeTopicId);
- this.close();
+ this.markAsPending(
+ this.activeTopicId,
+ this.activeResourceId,
+ this.activeResourceType
+ );
+ // this.close();
}
+ const isClickedPopupOpener =
+ e.target.dataset['popup'] || e.target.closest('button[data-popup]');
const isClickedClose =
e.target.id === this.closeTopicId ||
e.target.closest(`#${this.closeTopicId}`);
- if (isClickedClose) {
+ if (isClickedClose || isClickedPopupOpener) {
this.close();
}
}
@@ -308,9 +316,8 @@ export class Topic {
'roadmap.topic.click',
this.handleRoadmapTopicClick
);
- window.addEventListener('click', this.handleOverlayClick);
- window.addEventListener('contextmenu', this.rightClickListener);
+ window.addEventListener('click', this.handleOverlayClick);
window.addEventListener('keydown', (e) => {
if (e.key.toLowerCase() === 'escape') {
this.close();
diff --git a/src/components/TopicSearch/TopicSearch.astro b/src/components/TopicSearch/TopicSearch.astro
index bb50b59626ad..37d87998978f 100644
--- a/src/components/TopicSearch/TopicSearch.astro
+++ b/src/components/TopicSearch/TopicSearch.astro
@@ -1,5 +1,5 @@
---
-import Icon from '../Icon.astro';
+import Icon from '../AstroIcon.astro';
---
diff --git a/src/components/UpcomingForm.astro b/src/components/UpcomingForm.astro
index 1fad8594ba4a..22c888278d8c 100644
--- a/src/components/UpcomingForm.astro
+++ b/src/components/UpcomingForm.astro
@@ -1,6 +1,6 @@
---
import CaptchaFields from './Captcha/CaptchaFields.astro';
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
---
diff --git a/src/components/YouTubeBanner.astro b/src/components/YouTubeBanner.astro
index 12262a74e602..ad1628e78b45 100644
--- a/src/components/YouTubeBanner.astro
+++ b/src/components/YouTubeBanner.astro
@@ -1,5 +1,5 @@
---
-import Icon from './Icon.astro';
+import Icon from './AstroIcon.astro';
---
diff --git a/src/env.d.ts b/src/env.d.ts
index db53e77f02c2..a7da0c001109 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -2,6 +2,7 @@
interface ImportMetaEnv {
GITHUB_SHA: string;
+ PUBLIC_API_URL: string;
}
interface ImportMeta {
diff --git a/src/hooks/use-keydown.ts b/src/hooks/use-keydown.ts
new file mode 100644
index 000000000000..9a53c9254722
--- /dev/null
+++ b/src/hooks/use-keydown.ts
@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'preact/hooks';
+
+export function useKeydown(keyName: string, callback: any) {
+ useEffect(() => {
+ const listener = (event: any) => {
+ if (event.key.toLowerCase() === keyName.toLowerCase()) {
+ callback();
+ }
+ };
+
+ window.addEventListener('keydown', listener);
+ return () => {
+ window.removeEventListener('keydown', listener);
+ };
+ }, []);
+}
diff --git a/src/hooks/use-load-topic.ts b/src/hooks/use-load-topic.ts
new file mode 100644
index 000000000000..3b3747e007c9
--- /dev/null
+++ b/src/hooks/use-load-topic.ts
@@ -0,0 +1,30 @@
+import { useEffect } from 'preact/hooks';
+import type { ResourceType } from '../lib/resource-progress';
+
+type CallbackType = (data: {
+ resourceType: ResourceType;
+ resourceId: string;
+ topicId: string;
+}) => void;
+
+export function useLoadTopic(callback: CallbackType) {
+ useEffect(() => {
+ function handleTopicClick(e: any) {
+ const { resourceType, resourceId, topicId } = e.detail;
+
+ callback({
+ resourceType,
+ resourceId,
+ topicId,
+ });
+ }
+
+ window.addEventListener(`roadmap.topic.click`, handleTopicClick);
+ window.addEventListener(`best-practice.topic.click`, handleTopicClick);
+
+ return () => {
+ window.removeEventListener(`roadmap.topic.click`, handleTopicClick);
+ window.removeEventListener(`best-practice.topic.click`, handleTopicClick);
+ };
+ }, []);
+}
diff --git a/src/hooks/use-outside-click.ts b/src/hooks/use-outside-click.ts
new file mode 100644
index 000000000000..f22b0130eed8
--- /dev/null
+++ b/src/hooks/use-outside-click.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'preact/hooks';
+
+export function useOutsideClick(ref: any, callback: any) {
+ useEffect(() => {
+ const listener = (event: any) => {
+ const isClickedOutside = !ref?.current?.contains(event.target);
+ if (isClickedOutside) {
+ callback();
+ }
+ };
+
+ document.addEventListener('mousedown', listener);
+ document.addEventListener('touchstart', listener);
+
+ return () => {
+ document.removeEventListener('mousedown', listener);
+ document.removeEventListener('touchstart', listener);
+ };
+ }, [ref]);
+}
diff --git a/src/hooks/use-toggle-topic.ts b/src/hooks/use-toggle-topic.ts
new file mode 100644
index 000000000000..70324a2778a2
--- /dev/null
+++ b/src/hooks/use-toggle-topic.ts
@@ -0,0 +1,30 @@
+import { useEffect } from 'preact/hooks';
+import type { ResourceType } from '../lib/resource-progress';
+
+type CallbackType = (data: {
+ resourceType: ResourceType;
+ resourceId: string;
+ topicId: string;
+}) => void;
+
+export function useToggleTopic(callback: CallbackType) {
+ useEffect(() => {
+ function handleToggleTopic(e: any) {
+ const { resourceType, resourceId, topicId } = e.detail;
+
+ callback({
+ resourceType,
+ resourceId,
+ topicId,
+ });
+ }
+
+ window.addEventListener(`best-practice.topic.toggle`, handleToggleTopic);
+ return () => {
+ window.removeEventListener(
+ `best-practice.topic.toggle`,
+ handleToggleTopic
+ );
+ };
+ }, []);
+}
diff --git a/src/icons/check.svg b/src/icons/check.svg
index 896f56aec7d2..fe7e41c6f70d 100644
--- a/src/icons/check.svg
+++ b/src/icons/check.svg
@@ -1,5 +1,3 @@
-