Add logics to render one single person page with the popup opened.

Author: HaudinFlorence

src/components/about/LargePortraitCard.tsx

@@ -8,7 +8,7 @@ import Avatar from "./Avatar";
 export function Distinction({ person }) {
   if (person.distinctionTitle.length !== 0) {
     return person.distinctionTitle.map((distinction, index) => (
-      <div>
+      <div key={index}>
         <Link href={person.distinctionLink[index]}>
           <DistinctionIcon className={styles.distinction_icon} />
           {distinction}

src/components/about/SmallPortraitCard.tsx

@@ -4,23 +4,24 @@ import SocialMediaContacts from "./SocialMediaContacts";
 import { useRef, useState } from "react";
 import LargePortraitCard from "./LargePortraitCard";
 import Avatar from "./Avatar";
-import Link from "@docusaurus/Link";
 
 const contentStyle = {
   background: "white",
   borderRadius: "10px",
+  opacity: 1.0
 };
 
 const overlayStyle = {
   backgroundColor: "var(--ifm-background-color-popup-overlay)",
-  opacity: "0.4",
+  opacity: 0.4,
   width: "100%",
   height: "100%",
 };
 
 function getCenterOfViewport() {
   let horizontalCenter = Math.floor(window.innerWidth / 2);
   let verticalCenter = Math.floor(window.innerHeight / 2);
+  console.log("Center of viewport:", [horizontalCenter, verticalCenter]);
   return [horizontalCenter, verticalCenter];
 }
 
@@ -35,6 +36,7 @@ function calculateOffsets(elementRef) {
     xViewportCenter - xCardCenter,
     yViewportCenter - yCardCenter,
   ];
+  console.log("Offsets are:", offsets);
   return offsets;
 }
 
@@ -73,23 +75,21 @@ export function SmallPortraitCard({ person, setOffsets }) {
     </div>
   );
 }
-export default function PopupPortrait({ person }) {
+export default function PopupPortrait({ person, ...props }) {
   const [offsets, setOffsets] = useState([0, 0]);
-  let [isPopupOpen, setIsPopupOpen] = useState(false);
-
+  let [isPopupOpen, setIsPopupOpen] = useState(props.isPopupOpen);
   return (
     <div>
+      <div>
+        <SmallPortraitCard person={person} setOffsets={setOffsets} />
+      </div>
       <Popup
         open={isPopupOpen}
         closeOnEscape={true}
         closeOnDocumentClick={true}
         onClose={() => setIsPopupOpen(false)}
-        trigger={
-          <div>
-            <SmallPortraitCard person={person} setOffsets={setOffsets} />
-          </div>
-        }
         onOpen={() => {
+          props.isPopupOpen = true;
           setIsPopupOpen(true);
         }}
         contentStyle={contentStyle}

src/components/about/SocialMediaContacts.tsx

@@ -8,14 +8,14 @@ export default function SocialMediaContacts({ person }) {
   return (
     <>
       <div className="flex-full-centered">
-        <Link href={person.githubLink}>{<GHPicture />}</Link>
+        {/* <Link href={person.githubLink}>{<GHPicture />}</Link>
         <Link href={person.LinkedInLink}>{<LinkedInPicture />}</Link>
-        <Link href={person.XLink}>{<XPicture />}</Link>
+        <Link href={person.XLink}>{<XPicture />}</Link> */}
       </div>
       <div className="flex-full-centered">
-        <Link href={person.githubLink} className={styles.githubname}>
+        {/* <Link href={person.githubLink} className={styles.githubname}>
           {person.githubName}
-        </Link>
+        </Link> */}
       </div>
     </>
   );

src/components/about/SubTeam.tsx

@@ -2,25 +2,31 @@ import styles from "./styles.module.css";
 import PopupPortrait from "./SmallPortraitCard";
 import Link from "@docusaurus/Link";
 import { useLocation } from "@docusaurus/router";
-import { IProps } from ".";
-
-export default function SubTeam({ subTeamName, subTeam}) {
-  const location = useLocation().pathname;
 
+export default function SubTeam({ subTeamName, subTeam }) {
+  const firstName = useLocation().pathname.split("/about/")[1];
   return (
     <div className={styles.subteam_container}>
       <h2 className={"text--center"}> {subTeamName}</h2>
       <div className={"container"}>
         <ul className="row padding-none flex-full-centered row-with-margin-top">
-          {subTeam.map((person, index) => (
-            <li className="cards-list" key={index}>
-              <div className="col">
-                <Link href={location + person.firstName}>
-                 <PopupPortrait person={person}/>
-                </Link>
-              </div>
-            </li>
-          ))}
+          {subTeam.map(
+            (person, index) =>
+              !void 0 && (
+                <li className="cards-list" key={index}>
+                  <div className="col">
+                    <Link href={`/about/${person.firstName.toLowerCase()}`}>
+                      <PopupPortrait
+                        person={person}
+                        isPopupOpen={
+                          firstName === person.firstName.toLowerCase()
+                        }
+                      />
+                    </Link>
+                  </div>
+                </li>
+              )
+          )}
         </ul>
       </div>
     </div>

src/pages/about/Sylvain/index.tsx

@@ -1,10 +1,8 @@
 import Layout from "@theme/Layout";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { About } from "@site/src/components/about";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
 export default function AboutPage(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout>
       <BrowserOnly>{() => <About/>}</BrowserOnly>

src/pages/about/Johan/index.tsx renamed to src/pages/about/alexis.tsx

@@ -0,0 +1,11 @@
+import Layout from "@theme/Layout";
+import { About } from "@site/src/components/about";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function AboutPage(): JSX.Element {
+  return (
+    <Layout>
+      <BrowserOnly>{() => <About/>}</BrowserOnly>
+    </Layout>
+  );
+}

src/pages/about/anastasiia.tsx

@@ -0,0 +1,11 @@
+import Layout from "@theme/Layout";
+import { About } from "@site/src/components/about";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function AboutPage(): JSX.Element {
+  return (
+    <Layout>
+      <BrowserOnly>{() => <About/>}</BrowserOnly>
+    </Layout>
+  );
+}

src/pages/about/andreas.tsx

@@ -0,0 +1,11 @@
+import Layout from "@theme/Layout";
+import { About } from "@site/src/components/about";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function AboutPage(): JSX.Element {
+  return (
+    <Layout>
+      <BrowserOnly>{() => <About/>}</BrowserOnly>
+    </Layout>
+  );
+}

src/pages/about/anutosh.tsx

@@ -0,0 +1,11 @@
+import Layout from "@theme/Layout";
+import { About } from "@site/src/components/about";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function AboutPage(): JSX.Element {
+  return (
+    <Layout>
+      <BrowserOnly>{() => <About/>}</BrowserOnly>
+    </Layout>
+  );
+}