Update 38 files

- /src/components/AttributionForm/index.tsx
- /src/components/Footer/index.tsx
- /src/components/Header/index.tsx
- /src/components/Inspirations/index.tsx
- /src/components/Navbar/index.tsx
- /src/components/NotFound/index.tsx
- /src/utils/useDocumentTitle.ts
- /src/contents/attributions.tsx
- /src/contents/contribution.tsx
- /src/contents/description.tsx
- /src/contents/engineering.tsx
- /src/contents/index.tsx
- /src/contents/safety.tsx
- /src/contents/education.tsx
- /src/contents/entrepreneurship.tsx
- /src/contents/experiments.tsx
- /src/contents/hardware.tsx
- /src/contents/home.tsx
- /src/contents/human-practices.tsx
- /src/contents/inclusivity.tsx
- /src/contents/measurement.tsx
- /src/contents/model.tsx
- /src/contents/notebook.tsx
- /src/contents/plant.tsx
- /src/contents/results.tsx
- /src/contents/software.tsx
- /src/contents/sustainable.tsx
- /src/contents/team.tsx
- /src/components/Footer.tsx
- /src/components/Header.tsx
- /src/components/Inspirations.tsx
- /src/components/Navbar.tsx
- /src/components/NotFound.tsx
- /src/components/index.tsx
- /src/containers/App/App.tsx
- /src/utils/stringToSlug.ts
- /src/utils/getPathMapping.ts
- /src/utils/index.ts

src/components/AttributionForm/index.tsx

-function AttributionForm() {
-  const teamID = import.meta.env.VITE_TEAM_ID;
-
-  // Listen to size change and update form height
-  window.addEventListener("message", function (e) {
-    if (e.origin === "https://teams.igem.org") {
-      const { type, data } = JSON.parse(e.data);
-      if (type === "igem-attribution-form") {
-        const element = document.getElementById("igem-attribution-form");
-        if (element) {
-          element.style.height = `${data + 50}px`;
-        }
-      }
-    }
-  });
-
-  return (
-    <>
-      <iframe
-        style={{ width: "100%" }}
-        id="igem-attribution-form"
-        src={`https://teams.igem.org/${teamID}/attributions`}
-      />
-    </>
-  );
-}
-
-export default AttributionForm;

src/components/Footer/index.tsx → src/components/Footer.tsx

 import { stringToSlug } from "../../utils";
 
-function WikiFooter() {
+export function Footer() {
   const teamYear = import.meta.env.VITE_TEAM_YEAR;
   const teamName = import.meta.env.VITE_TEAM_NAME;
   const teamSlug = stringToSlug(teamName);
@@ -78,5 +78,3 @@ function WikiFooter() {
     </footer>
   );
 }
-
-export default WikiFooter;

src/components/Header/index.tsx → src/components/Header.tsx

@@ -5,7 +5,7 @@ interface HeaderProps {
   lead: string;
 }
 
-const WikiHeader: React.FC<HeaderProps> = ({ title, lead }) => {
+export function Header({ title, lead }: HeaderProps) {
   return (
     <header className="bg-hero py-5 mb-5">
       <div className="container h-100">
@@ -19,5 +19,3 @@ const WikiHeader: React.FC<HeaderProps> = ({ title, lead }) => {
     </header>
   );
 };
-
-export default WikiHeader;

src/components/Inspirations/index.tsx → src/components/Inspirations.tsx

@@ -11,7 +11,7 @@ interface InspirationsProps {
   inspirationLinkList: InspirationLink[];
 }
 
-const Inspirations: React.FC<InspirationsProps> = ({ inspirationLinkList }) => {
+export function Inspirations ({ inspirationLinkList }: InspirationsProps) {
   return (
     <>
       <div className="col-lg-4">
@@ -42,4 +42,3 @@ const Inspirations: React.FC<InspirationsProps> = ({ inspirationLinkList }) => {
   );
 };
 
-export default Inspirations;

src/components/Navbar/index.tsx → src/components/Navbar.tsx

@@ -5,7 +5,7 @@ import NavDropdown from "react-bootstrap/NavDropdown";
 import { Link } from "react-router-dom";
 import Pages from "../../pages.ts";
 
-function WikiNavbar() {
+export function Navbar() {
   const pages = Pages.map((item, pageIndex) => {
     if ("folder" in item && item.folder) {
       const folderItems = item.folder.map((subpage, subpageIndex) => {
@@ -50,6 +50,4 @@ function WikiNavbar() {
       </Container>
     </Navbar>
   );
-}
-
+}
\ No newline at end of file
-export default WikiNavbar;

src/components/NotFound.tsx

+import { Link } from "react-router-dom";
+
+export function NotFound() {
+  return (
+    <div className="d-flex flex-column justify-content-center align-items-center">
+    <h1 className="not-found-title" style={{ fontSize: "100pt" }}>
+      404
+    </h1>
+    <div className="my-5">
+      <Link to="/" className="btn btn-secondary btn-lg">
+        Back to Home
+      </Link>
+    </div>
+  </div>
+  );
+}

src/components/NotFound/index.tsx

-import { Link } from "react-router-dom";
-
-function NotFound() {
-  return (
-    <>
-      <div className="d-flex flex-column justify-content-center align-items-center">
-        <h1 className="not-found-title" style={{ fontSize: "100pt" }}>
-          404
-        </h1>
-        <div className="my-5">
-          <Link to="/" className="btn btn-secondary btn-lg">
-            Back to Home
-          </Link>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default NotFound;

src/components/index.tsx

-export { default as Navbar } from "./Navbar";
-export { default as Header } from "./Header";
-export { default as Footer } from "./Footer";
-export { default as NotFound } from "./NotFound";
+export * from "./Navbar";
+export * from "./Header";
+export * from "./Footer";
+export * from "./NotFound";
+export * from "./Inspirations";

src/containers/App/App.tsx

@@ -2,7 +2,7 @@ import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { Route, Routes } from "react-router-dom";
 import { Footer, Header, Navbar, NotFound } from "../../components";
-import { getPathMapping, stringToSlug, useDocumentTitle } from "../../utils";
+import { getPathMapping, stringToSlug } from "../../utils";
 
 const App = () => {
   const pathMapping = getPathMapping();
@@ -14,10 +14,12 @@ const App = () => {
   // Set Page Title
   const title =
     currentPath in pathMapping ? pathMapping[currentPath].title : "Not Found";
-  useDocumentTitle(title);
+  
+    useEffect(() => {
+      document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
+    }, [title]);
 
   return (
-    <>
       <>
         {/* Navigation */}
         <Navbar />
@@ -58,7 +60,6 @@ const App = () => {
         {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
         <Footer />
       </>
-    </>
   );
 };
 

src/contents/attributions.tsx

-import AttributionForm from "../components/AttributionForm";
+import {useEffect} from 'react';
 
 const Attributions = () => {
+  const teamID = import.meta.env.VITE_TEAM_ID;
+
+  useEffect(() => {
+    function listenToIframeHeight(e) {
+      if (e.origin === "https://teams.igem.org") {
+        const { type, data } = JSON.parse(e.data);
+        if (type === "igem-attribution-form") {
+          const element = document.getElementById("igem-attribution-form");
+          if (element) {
+            element.style.height = `${data + 50}px`;
+          }
+        }
+      }
+    }
+    window.addEventListener("message", listenToIframeHeight);
+    return () => {
+      window.removeEventListener("message", listenToIframeHeight)
+    }
+  }, [])
+
   return (
     <>
       <div className="row mt-4">
@@ -31,7 +51,11 @@ const Attributions = () => {
           </div>
         </div>
       </div>
-      <AttributionForm />
+      <iframe
+        style={{ width: "100%" }}
+        id="igem-attribution-form"
+        src={`https://teams.igem.org/${teamID}/attributions`}
+      />
     </>
   );
 };

src/contents/contribution.tsx

-const Contribution = () => {
+export function Contribution () {
   return (
     <>
       <div className="row mt-4">
@@ -31,6 +31,4 @@ const Contribution = () => {
       </div>
     </>
   );
-};
-
+};
\ No newline at end of file
-export default Contribution;

src/contents/description.tsx

-import Inspirations, { InspirationLink } from "../components/Inspirations";
+import { Inspirations, InspirationLink } from "../components";
 
-const Description = () => {
+export function Description () {
   const links: InspirationLink[] = [
     { year: 2022, teamName: "DTU-Denmark", pageName: "Description" },
     { year: 2019, teamName: "ITESO_Guadalajara", pageName: "Description" },
@@ -76,6 +76,4 @@ const Description = () => {
       </div>
     </>
   );
-};
-
+};
\ No newline at end of file
-export default Description;

src/contents/education.tsx

-import Inspirations, { InspirationLink } from "../components/Inspirations";
+import { Inspirations, InspirationLink } from "../components";
 
-const Education = () => {
+export function Education () {
   const links: InspirationLink[] = [
     { year: 2020, teamName: "CCA_San_Diego", pageName: "Education" },
     { year: 2020, teamName: "Lambert_GA", pageName: "Education" },
@@ -47,5 +47,3 @@ const Education = () => {
     </>
   );
 };
-
-export default Education;

src/contents/engineering.tsx

-const Engineering = () => {
+export function Engineering () {
   return (
     <>
       <div className="row mt-4">
@@ -31,6 +31,4 @@ const Engineering = () => {
       </div>
     </>
   );
-};
-
+};
\ No newline at end of file
-export default Engineering;

src/contents/entrepreneurship.tsx

-import Inspirations, { InspirationLink } from "../components/Inspirations";
+import { Inspirations, InspirationLink } from "../components";
 
-const Entrepreneurship = () => {
+export function Entrepreneurship () {
   const links: InspirationLink[] = [
     { year: 2019, teamName: "UCopenhagen", pageName: "Entrepreneurship" },
     { year: 2019, teamName: "Thessaly", pageName: "Entrepreneurship" },
@@ -79,4 +79,3 @@ const Entrepreneurship = () => {
   );
 };
 
-export default Entrepreneurship;

src/contents/experiments.tsx

-import Inspirations, { InspirationLink } from "../components/Inspirations";
+import { Inspirations, InspirationLink } from "../components";
 
-const Experiments = () => {
+export function Experiments () {
   const links: InspirationLink[] = [
     { year: 2019, teamName: "Nantes", pageName: "Experiments" },
     { year: 2019, teamName: "TU_Eindhoven", pageName: "Experiments" },
@@ -31,6 +31,4 @@ const Experiments = () => {
       </div>
     </>
   );
-};
-
+};
\ No newline at end of file
-export default Experiments;

src/contents/hardware.tsx

-import Inspirations, { InspirationLink } from "../components/Inspirations";
+import { Inspirations, InspirationLink } from "../components";
 
-const Hardware = () => {
+export function Hardware () {
   const links: InspirationLink[] = [
     { year: 2018, teamName: "Valencia_UPV", pageName: "Hardware" },
     { year: 2018, teamName: "Unesp_Brazil", pageName: "Hardware" },
@@ -64,5 +64,3 @@ const Hardware = () => {
     </>
   );
 };
-
-export default Hardware;

src/contents/home.tsx

-import Inspirations, { InspirationLink } from "../components/Inspirations";
+import { Inspirations, InspirationLink } from "../components";
 
-const Home = () => {
+export function Home () {
   const links: InspirationLink[] = [
     { year: 2022, teamName: "DTU-Denmark", pageName: "" },
     { year: 2022, teamName: "Virginia", pageName: "" },
@@ -104,6 +104,4 @@ const Home = () => {
       </div>
     </>
   );
-};
-
+};
\ No newline at end of file
-export default Home;

src/contents/human-practices.tsx

-import Inspirations, { InspirationLink } from "../components/Inspirations";
+import { Inspirations, InspirationLink } from "../components";
 
-const HumanPractices = () => {
+export function HumanPractices () {
   const links: InspirationLink[] = [
     { year: 2019, teamName: "Thessaly", pageName: "Human_Practices" },
     { year: 2019, teamName: "Linkoping_Sweden", pageName: "Human_Practices" },
@@ -108,5 +108,3 @@ const HumanPractices = () => {
     </>
   );
 };
-
-export default HumanPractices;

src/contents/inclusivity.tsx

-import Inspirations, { InspirationLink } from "../components/Inspirations";
+import { Inspirations, InspirationLink } from "../components";
 
-const Inclusivity = () => {
+export function Inclusivity () {
   const links: InspirationLink[] = [
     { year: 2020, teamName: "Fudan", pageName: "Inclusion" },
     { year: 2020, teamName: "CCU_Taiwan", pageName: "Inclusion" },
@@ -65,5 +65,3 @@ const Inclusivity = () => {
     </>
   );
 };
-
-export default Inclusivity;