Add a new page for fundable projects.

Author: HaudinFlorence

docusaurus.config.ts

@@ -110,6 +110,13 @@ const config: Config = {
           className: "custom_navbar_item",
           label: "Blog",
           position: "left",
+        },
+              {
+          to: "/fundable/",
+          className: "custom_navbar_item",
+          label: "Fundable projects",
+          position: "right",
+          className:"fundable_projects"
         },
         {
           to: "/contact/",

src/components/footer/Footer.tsx

@@ -65,6 +65,16 @@ export default function Footer() {
                   </li>
                 </ul>
               </div>
+            <div className="col flex-horizontally-centered">
+                <ul>
+                  <li>
+                    <Link href={"/fundable"}>Fundable projects</Link>
+                  </li>
+                  <li>
+                    <Link href={"/contact"}>Contact us</Link>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>

src/components/fundable/IconContainer.tsx

@@ -0,0 +1,26 @@
+import styles from "./styles.module.css";
+import Link from "@docusaurus/Link";
+import GHPicture from "@site/static/img/socialmedias/GH.svg";
+import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg";
+import BlueskyPicture from "@site/static/img/socialmedias/Bluesky.svg";
+import MastodonPicture from "@site/static/img/socialmedias/Mastodon.svg";
+
+export default function IconContainer({ project }) {
+    const icons = project.icons
+    return (
+
+
+        <div className={styles.icon_container}>
+            {icons.map((Icon, index) => (
+                <div key={index} className={styles.iconWrapper}>
+                    <Icon height={"42px"} width={"42px"}
+                        alt={
+                            "Icon for the fundable project."
+                        } />
+                </div>
+            ))}
+        </div>
+    );
+
+
+}

src/components/fundable/LargeProjectCard.tsx

@@ -0,0 +1,29 @@
+import styles from "./styles.module.css";
+import React from "react";
+
+export default function LargeProjectCard({ project }) {
+    return (
+        <div className={styles.large_project_card}>
+            <div className={"container"}>
+                <div className={"row padding-none"}>
+                    <div className="col col--12 col--offset-1">
+                        <div className={styles.large_card_project_category}>
+                            {project.category}
+                        </div>
+                        <div className={styles.large_card_project_title}>{project.title}</div>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col col--10 col--offset-1">
+                        <div className={styles.large_project_card_text_container}></div>
+                        <div className={styles.large_project_card_section_title}>Overview</div>
+                        <div className={styles.large_project_card_text}>
+                            <project.description />
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+}

src/components/fundable/LargeProjectCardPage.tsx

@@ -0,0 +1,80 @@
+import { useHistory, useLocation } from "@docusaurus/router";
+import { useEffect } from "react";
+import styles from "./styles.module.css";
+import LargeProjectCard from "./LargeProjectCard";
+import { getCategoryFromProjectTitle } from ".";
+import FundableProjects from ".";
+import Layout from "@theme/Layout";
+import { Route } from 'react-router-dom';
+
+
+export default function LargeProjectCardPage() {
+  const location = useLocation();
+  const history = useHistory();
+
+  useEffect(() => {
+    if (location.state?.fromFundable) {
+      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('/fundable');
+  };
+
+  const handleClose = () => {
+    const scrollY = location.state?.scrollY;
+    if (location.state?.fromFundable) {
+      history.replace('/fundable');
+
+      setTimeout(() => {
+        if (scrollY !== undefined) {
+          window.scrollTo({ top: scrollY, behavior: 'auto' });
+        }
+      }, 0);
+    } else {
+      history.goBack();
+    }
+  }
+  return (
+    <Layout>
+      <FundableProjects />
+      <Route
+        path="/fundable/:shortTitle"
+        render={({ match }) => {
+          const { shortTitle } = match.params; /* extract the dynamic part from the url i.e. the shortTitle*/
+          const projectsByCategory = getCategoryFromProjectTitle(shortTitle);
+          console.log('projectsByCategory:', projectsByCategory);
+          const project = projectsByCategory.find((project) => project.shortTitle.replace(/\s+/g, '') === shortTitle);
+          if (!project) return null;
+
+          return (
+            <div className={styles.modal_overlay} onClick={handleOverlayClick}>
+              <div
+                className={styles.modal_content}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <button
+                  className="close-button"
+                  style={{
+                    position: "absolute",
+                    top: "10px",
+                    right: "10px",
+                  }}
+                  onClick={handleClose}
+                />
+                <LargeProjectCard project={project} />
+              </div>
+            </div>
+          );
+        }}
+      />
+    </Layout>
+  )
+}

src/components/fundable/MenuSideBar.tsx

@@ -0,0 +1,48 @@
+// src/components/ScrollSidebar.js
+import React, { useEffect, useState } from 'react';
+import styles from "./styles.module.css";
+
+const sections = [
+  { id: 'jupyter-ecosystem', label: 'Jupyter Ecosystem' },
+  { id: 'project-management', label: 'Project Management' },
+];
+
+export default function MenuSideBar() {
+  const [activeSectionId, setActiveSectionId] = useState(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY + 200;
+      for (const section of sections) {
+        const element = document.getElementById(section.id);
+        if (element && element.offsetTop <= scrollPosition) {
+          setActiveSectionId(section.id);
+        }
+      }
+    };
+    window.addEventListener('scroll', handleScroll);
+    handleScroll();
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div className={styles.menu_sidebar_container}>
+      <aside className={styles.menu_sidebar}>
+        <ul style={{ listStyle: 'none', padding: "0px" }}>
+          {sections.map((section) => (
+            <li key={section.id}>
+              <a
+                href={`#${section.id}`}
+                className={`${activeSectionId === section.id ? styles.active_section : ''}`}
+              >
+                <span className={styles.indicator} />
+                <span className={styles.menu_sidebar_item}>{section.label}</span>
+              </a>
+
+            </li>
+          ))}
+        </ul>
+      </aside>
+    </div>
+  );
+}

src/components/fundable/ProgressBar.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export default function ProgressBar({ value = 0, color = '#4caf50' }) {
+    return (
+
+        <div style={{
+            background: '#eee',
+            borderRadius: '4px',
+            border: 'solid 0.5px',
+            height: '10px',
+            width: '100px',
+            margin: '10px 0'
+        }}>
+
+            <div style={{
+                width: `${value}%`,
+                background: color,
+                border: 'solid 0.5px',
+                height: '100%',
+                borderRadius: '4px',
+                transition: 'width 0.3s ease-in-out',
+            }} />
+        </div>
+    );
+}

src/components/fundable/ProjectCategory.tsx

@@ -0,0 +1,22 @@
+import styles from "./styles.module.css";
+import { SmallProjectCard } from "./SmallProjectCard";
+
+
+export default function ProjectCategory({ projectCategoryName, projectCategory }) {
+  return (
+    <div className={styles.project_category_container}>
+      <h2 className={styles.category_header} style={{margin: "0px"}}> {projectCategoryName }</h2>
+      <div className={"container"}>
+        <ul className="row padding-none row-with-margin-top">
+          {projectCategory.map((project) => (
+            <li className="cards-list" key={project.shortTitle}>
+              <div className="col" style={{justifyContent: "left"}}>
+                <SmallProjectCard project={project} />
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

src/components/fundable/SmallProjectCard.tsx

@@ -0,0 +1,63 @@
+import styles from "./styles.module.css";
+import ProgressBar from "./ProgressBar";
+import { useHistory } from "@docusaurus/router";
+import IconContainer from "./IconContainer";
+
+export function SmallProjectCard({ project }) {
+const history = useHistory();
+
+  function openDialog() {
+    const shortTitle = project.shortTitle.replace(/\s+/g, '');
+    
+    history.push({
+      pathname: `/fundable/${shortTitle}`,
+      state: { fromFundable: true, scrollY: window.scrollY, },
+    });
+  }
+
+
+  return (
+    <div onClick={openDialog}>
+      <div className={"card" + " " + styles.small_project_card}>
+        <div className="card__header" style={{padding: "0"}}>
+          <div
+            className={styles.project_title
+            }
+          >
+            {project.title}
+          </div>
+        </div>
+        <div className="card__body" style={{padding: "0"}}>
+          <div style={{display: "flex"}}>
+            <div>
+              <div><IconContainer project={project}/></div>
+              <div
+                className={styles.project_catch_up_phrase}
+              >
+                {project.catchUpPhrase}
+
+              </div>
+              <div style={{ fontSize: "16px", padding: "8px 0" }}>
+                Indicative Price: {project.price}
+              </div>
+             
+              <div style={{ fontSize: "16px", padding: "8px 0" }}>
+                Shareable between {project.maxNbOfFunders} funder(s).
+              </div>
+              <div style={{ fontSize: "16px", padding: "8px 0" }}>
+                Currently this project is supported by {project.currentNbOfFunders} funder(s).
+              </div>
+               <div style={{ fontSize: "16px", padding: "8px 0" }}>
+                Financed at {project.currentFundingPercentage} %
+              </div>
+              <div>
+               <ProgressBar value={project.currentFundingPercentage} color={'var(--ifm-color-primary-p1'}/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  )
+}

src/components/fundable/descriptions/EmscriptenForgePackageRequests.md

@@ -0,0 +1,5 @@
+Emscripten-forge is a conda package distribution specifically designed for WebAssembly. When combined with JupyterLite and the jupyterlite-xeus extension, it enables easy deployment of JupyterLite with a preconfigured conda environment that includes essential packages like NumPy, Pandas, Matplotlib, and more.
+
+While the number of available emscripten-forge packages is growing quickly, many packages are still missing from the ecosystem.
+
+We will be working on adding new packages upon request.