Fix issues related to last names like for those having special characters.

Add logics to not scroll systematically to the top of the page when changing from about page to portrait ones and reciprocally.

Author: HaudinFlorence

src/components/about/LargePortraitCardPage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Layout from '@theme/Layout';
-import { useHistory, useLocation} from '@docusaurus/router';
+import { useHistory, useLocation } from '@docusaurus/router';
+import { useEffect } from 'react';
 import { Route } from 'react-router-dom';
 import { About } from '@site/src/components/about'
 import LargePortraitCard from '@site/src/components/about/LargePortraitCard';
@@ -11,9 +12,32 @@ export default function LargePortraitCardPage() {
   const location = useLocation();
   const history = useHistory();
 
-  function handleClose() {
+  useEffect(() => {
     if (location.state?.fromAbout) {
-      history.push('/about');
+      window.scrollTo({ top: location.state.scrollY ?? 0, behavior: 'auto' });
+    }
+  }, []);
+
+  const handleOverlayClick = () => {
+    const scrollY = location.state?.scrollY;
+    setTimeout(() => {
+      if (scrollY !== undefined) {
+        window.scrollTo({ top: scrollY, behavior: 'auto' });
+      }
+    }, 0);
+      history.replace('/about');
+  };
+
+  const handleClose = () => {
+    const scrollY = location.state?.scrollY;
+    if (location.state?.fromAbout) {
+      history.replace('/about');
+
+      setTimeout(() => {
+        if (scrollY !== undefined) {
+          window.scrollTo({ top: scrollY, behavior: 'auto' });
+        }
+      }, 0);
     } else {
       history.goBack();
     }
@@ -24,13 +48,13 @@ export default function LargePortraitCardPage() {
       <Route
         path="/about/:completeName"
         render={({ history, match }) => {
-          const { completeName } = match.params;
+          const { completeName } = match.params; /* extract the dynamic part from the url i.e. the completeName*/
           const teamMembers = getTeamByPersonName(completeName);
-          const person = teamMembers.find(person => person.completeName.replace(/\s+/g, '') === completeName);
+          const person = teamMembers.find((person) => person.completeName.replace(/\s+/g, '').normalize("NFD").replace(/[\u0300-\u036f]/g, '') === completeName);
           if (!person) return null;
 
           return (
-            <div className={styles.modal_overlay} onClick={() => history.push('/about')}>
+            <div className={styles.modal_overlay} onClick={handleOverlayClick}>
               <div
                 className={styles.modal_content}
                 onClick={(e) => e.stopPropagation()}

src/components/about/SmallPortraitCard.tsx

@@ -2,13 +2,17 @@ import styles from "./styles.module.css";
 import { useHistory } from "@docusaurus/router";
 import Avatar from "./Avatar";
 
-export function SmallPortraitCard({ person}) {
+export function SmallPortraitCard({ person }) {
   const history = useHistory();
 
   function openDialog() {
+    const completeName = person.completeName.replace(/\s+/g, '');
+    const completeNameWithoutAccents = completeName
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, '');
     history.push({
-      pathname: `/about/${person.completeName.replace(/\s+/g, '')}`,
-      state: { fromAbout: true },
+      pathname: `/about/${completeNameWithoutAccents}`,
+      state: { fromAbout: true, scrollY: window.scrollY, },
     });
   }
 

src/components/about/Team/team.ts

@@ -69,7 +69,6 @@ import TrungAvatarUrl from "@site/static/img/avatars/Trung.png";
 import YahiaMD from "@site/src/components/about/Team/Yahia.md";
 import YahiaAvatarUrl from "@site/static/img/avatars/Yahia.png";
 
-
 export const teams = {
   coreTeam: [
     {
@@ -328,22 +327,6 @@ export const teams = {
       subTeamName: "coreTeam",
       BioComponent: ArjunMD,
     },
-    {
-      completeName: "Antoine Pitrou",
-      firstName: "AntoinePi",
-      position: " Senior Software Developer",
-      GitHubLink: "https://github.com/pitrou",
-      LinkedInLink:
-        "https://www.linkedin.com/in/pitrou/",
-      BlueskyLink: "https://bsky.app/profile/pitrou.bsky.social",
-      MastodonLink: "",
-      GitHubName: "@pitrou",
-      avatarUrl: AntoineAvatarUrl,
-      distinctionTitle: ["Python Software Foundation Fellow"],
-      distinctionLink: ["https://www.python.org/psf/fellows-roster/"],
-      subTeamName: "coreTeam",
-      BioComponent: AntoineMD,
-    },
     {
       completeName: "Sandrine Pataut",
       firstName: "Sandrine",
@@ -378,7 +361,7 @@ export const teams = {
     },
     {
       completeName: "Antoine Prouvost",
-      firstName: "AntoinePrv",
+      firstName: "Antoine",
       position: " Scientific Software Developer",
       GitHubLink: "https://github.com/AntoinePrv",
       LinkedInLink: "https://www.linkedin.com/in/antoine-prouvost-0667b6a4/",
@@ -419,8 +402,38 @@ export const teams = {
       subTeamName: "coreTeam",
       BioComponent: OusemaMD,
     },
+    {
+      completeName: "Guy Mushiata Kibulu",
+      firstName: "Guy",
+      position: "Scientific Software Development Intern",
+      GitHubLink: "https://github.com/Gauss-Taylor-Euler",
+      LinkedInLink:
+        "https://www.linkedin.com/in/guy-mushiata-kibulu-189646336/",
+      GitHubName: "@Gauss-Taylor-Euler",
+      avatarUrl: GuyAvatarUrl,
+      distinctionTitle: [],
+      distinctionLink: [],
+      subTeamName: "coreTeam",
+      BioComponent: GuyMD,
+    }
   ],
+
   QSCollaboratorsTeam: [
+    {
+      completeName: "Johan Mabille",
+      firstName: "Johan",
+      position: "Technical Director",
+      GitHubLink: "https://github.com/JohanMabille",
+      LinkedInLink: "https://www.linkedin.com/in/johan-mabille/",
+      BlueskyLink: "",
+      MastodonLink: "",
+      GitHubName: "@JohanMabille",
+      avatarUrl: JohanAvatarUrl,
+      distinctionTitle: ["Jupyter Distinguished Contributor"],
+      distinctionLink: ["https://jupyter.org/about#distinguished-contributors"],
+      subTeamName: "QSCollaboratorsTeam",
+      BioComponent: JohanMD,
+    },
     {
       completeName: "Serge Guelton",
       firstName: "Serge",
@@ -451,6 +464,37 @@ export const teams = {
       subTeamName: "QSCollaboratorsTeam",
       BioComponent: RomainMD
     },
+    {
+      completeName: "Antoine Pitrou",
+      firstName: "Antoine",
+      position: "Senior Software Developer",
+      GitHubLink: "https://github.com/pitrou",
+      LinkedInLink:
+        "https://www.linkedin.com/in/pitrou/",
+      BlueskyLink: "https://bsky.app/profile/pitrou.bsky.social",
+      MastodonLink: "",
+      GitHubName: "@pitrou",
+      avatarUrl: AntoineAvatarUrl,
+      distinctionTitle: ["Python Software Foundation Fellow"],
+      distinctionLink: ["https://www.python.org/psf/fellows-roster/"],
+      subTeamName: "QSCollaboratorsTeam",
+      BioComponent: AntoineMD,
+    },
+    {
+      completeName: "Marion Chaffaut",
+      firstName: "Marion",
+      position: "Chief Financial Officer",
+      GitHubLink: "https://github.com/MarionChaff",
+      LinkedInLink: "https://www.linkedin.com/in/marion-chaffaut/",
+      BlueskyLink: "",
+      MastodonLink: "",
+      GitHubName: "@MarionChaff",
+      avatarUrl: MarionAvatarUrl,
+      distinctionTitle: [],
+      distinctionLink: [],
+      subTeamName: "QSCollaboratorsTeam",
+      BioComponent: MarionMD,
+    },
   ],
 
   leadershipTeam: [
@@ -469,25 +513,10 @@ export const teams = {
       subTeamName: "LeadershipTeam",
       BioComponent: SylvainMD,
     },
-    {
-      completeName: "Johan Mabille",
-      firstName: "Johan",
-      position: "Project Director",
-      GitHubLink: "https://github.com/JohanMabille",
-      LinkedInLink: "https://www.linkedin.com/in/johan-mabille/",
-      BlueskyLink: "",
-      MastodonLink: "",
-      GitHubName: "@JohanMabille",
-      avatarUrl: JohanAvatarUrl,
-      distinctionTitle: ["Jupyter Distinguished Contributor"],
-      distinctionLink: ["https://jupyter.org/about#distinguished-contributors"],
-      subTeamName: "LeadershipTeam",
-      BioComponent: JohanMD,
-    },
     {
       completeName: "Martin Renou",
       firstName: "Martin",
-      position: "Project Director",
+      position: "Technical Director",
       GitHubLink: "https://github.com/martinRenou",
       LinkedInLink: "https://www.linkedin.com/in/martin-renou",
       BlueskyLink: "https://bsky.app/profile/martinrenou.bsky.social",
@@ -514,7 +543,6 @@ export const teams = {
       subTeamName: "LeadershipTeam",
       BioComponent: JeremyMD,
     },
-
     {
       completeName: "Afshin Darian",
       firstName: "Darian",
@@ -575,20 +603,5 @@ export const teams = {
       subTeamName: "LeadershipTeam",
       BioComponent: TrungMD,
     },
-    {
-      completeName: "Marion Chaffaut",
-      firstName: "Marion",
-      position: "Chief Financial Officer",
-      GitHubLink: "https://github.com/MarionChaff",
-      LinkedInLink: "https://www.linkedin.com/in/marion-chaffaut/",
-      BlueskyLink: "",
-      MastodonLink: "",
-      GitHubName: "@MarionChaff",
-      avatarUrl: MarionAvatarUrl,
-      distinctionTitle: [],
-      distinctionLink: [],
-      subTeamName: "LeadershipTeam",
-      BioComponent: MarionMD,
-    },
   ]
 }

src/components/about/index.tsx

@@ -6,7 +6,7 @@ import LinkToContact from "../home/LinkToContact";
 
 export function getTeamByPersonName(name: string) {
   for (const [teamName, members] of Object.entries(teams)) {
-    const person = members.find((person) => person.completeName.replace(/\s+/g, '') === name);
+    const person = members.find((person) => person.completeName.replace(/\s+/g, '').replace(/\s+/g, '').normalize("NFD").replace(/[\u0300-\u036f]/g, '') === name);
     if (person) {
       return members;
     }

src/pages/about/TrungLeDuc.tsx renamed to src/pages/about/LeDucTrung.tsx

@@ -1,6 +1,3 @@
-import React from 'react';
-import Layout from '@theme/Layout';
-import { useHistory, useLocation} from '@docusaurus/router';
 import LargePortraitCardPage from "@site/src/components/about/LargePortraitCardPage";
 
 export default function AboutPage() {