src/utils/openThem.ts

+export function openThem({ it, scrollToId }: { it: string; scrollToId?: string }) {
+  const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    if (typeof window !== 'undefined') {
+      console.log(`Opening tab: ${it}`);
+      updateTabs(it, scrollToId);
+
+      // Update der URL
+      const newUrl = `?tab=${it}`;
+      console.log(`Updating URL to: ${newUrl}`);
+      window.history.pushState({ tab: it }, '', newUrl);
+  /*     if (scrollToId && document.getElementById(scrollToId)) {
+        const scElement = document.getElementById(scrollToId);
+        if (scElement) {
+            const scrollPos = window.innerHeight / 2 - scElement.offsetHeight / 2;
+            window.scrollTo({ top: scrollPos, behavior: 'smooth' });
+        }
+      } */
+      // Scrollen in die Mitte
+     /*  const midScrollPosition = window.innerHeight / 2; // Berechnung der Mitte des Viewports
+      console.log(`Scrolling to middle position: ${midScrollPosition}`); */
+     /*  window.scrollTo({ top: midScrollPosition, behavior: 'smooth' }); */
+    }
+  };
+
+  return gotoandopen;
+}
+
+function updateTabs(it: string, scrollToId?: string) {
+  if (typeof window === 'undefined') return;
+
+  let contenttabid = "tab-" + it;
+  let parent = "parent-" + it;
+
+  console.log(`Updating tabs for: ${it}`);
+
+  // Verstecke alle Subtabs und Content-Tabs
+  const subtabs = document.getElementsByClassName("sidesubtab");
+  const contenttabs = document.getElementsByClassName("enginneeringtab");
+  const sideitems = document.getElementsByClassName("sideitem");
+
+  for (let i = 0; i < subtabs.length; i++) {
+    (subtabs[i] as HTMLElement).style.display = "none";
+    console.log(`Hiding subtab: ${subtabs[i].id}`);
+  }
+  for (let i = 0; i < contenttabs.length; i++) {
+    (contenttabs[i] as HTMLElement).style.display = "none";
+    console.log(`Hiding content tab: ${contenttabs[i].id}`);
+  }
+  for (let i = 0; i < sideitems.length; i++) {
+    (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
+    console.log(`Removing active class from side item: ${sideitems[i].id}`);
+  }
+
+  // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
+  document.getElementById(it)!.style.display = "block";
+  console.log(`Showing tab: ${it}`);
+  document.getElementById(parent)!.classList.add("active-sideitem");
+  console.log(`Activating side item: ${parent}`);
+  document.getElementById(contenttabid)!.style.display = "block";
+  console.log(`Showing content tab: ${contenttabid}`);
+
+  // Scrolle zu der angegebenen ID, falls vorhanden
+  if (scrollToId) {
+    const collapseElement = document.getElementById(scrollToId);
+    if (collapseElement) {
+        const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
+        const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
+        const scrollPosition = elementTop - offset;
+
+        window.scrollTo({
+            top: scrollPosition,
+            behavior: 'smooth',
+        });
+    }
+}
+/*   if (scrollToId && document.getElementById(scrollToId)) {
+    const scElement = document.getElementById(scrollToId);
+    if (scElement) {
+        const scrollPos = window.innerHeight / 2 - scElement.offsetHeight / 2;
+        window.scrollTo({ top: scrollPos, behavior: 'smooth' });
+    }
+  } */
+}
+
+// Füge einen Event Listener für `popstate` hinzu
+if (typeof window !== 'undefined') {
+  window.addEventListener('popstate', (event) => {
+    console.log('Popstate event triggered');
+    if (event.state) {
+      const tab = event.state.tab;
+      console.log(`Restoring tab: ${tab}`);
+      updateTabs(tab);
+      
+      // Scrollen in die Mitte beim Zurücknavigieren
+      console.log("Scrolling to middle on popstate...");
+      const midScrollPosition = window.innerHeight / 2;
+      window.scrollTo({ top: midScrollPosition, behavior: 'smooth' });
+    } else {
+      console.log("No state found in popstate event.");
+    }
+  });
+}

src/utils/opentabincollapsible.ts

+export const openTabInCollapsible = (tabId: string, collapsibleId: string) => {
+    // Warten Sie, bis das DOM vollständig geladen wurde
+    setTimeout(() => {
+        // Holen Sie sich das Collapsible
+        const collapsible = document.getElementById(collapsibleId);
+        if (!collapsible) {
+            console.error(`Collapsible mit ID ${collapsibleId} nicht gefunden!`);
+            return;
+        }
+
+        // Loggen Sie das, um sicherzustellen, dass das Collapsible korrekt gefunden wird
+        console.log(`Collapsible mit ID ${collapsibleId} gefunden`);
+
+        // Überprüfen Sie, ob der Tab mit der gegebenen ID existiert
+        const tab = collapsible.querySelector(`#${tabId}`);
+        if (!tab) {
+            console.error(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wurde nicht gefunden!`);
+            return;
+        }
+        let tabClass = tab!.className; 
+        const tabs = document.getElementsByClassName(tabClass);
+        for (let index = 0; index < tabs.length; index++) {
+            (tabs[index] as HTMLElement).style.display = 'none';
+          }
+        // Wenn der Tab gefunden wurde, stellen Sie sicher, dass der Tab sichtbar gemacht wird
+        console.log(`Tab mit ID ${tabId} im Collapsible ${collapsibleId} wird jetzt geöffnet.`);
+        (tab as HTMLElement).style.display = 'block';
+        (tab as HTMLElement).style.visibility = 'visible';
+        (tab as HTMLElement).style.position = 'relative';  // Falls es ein Positionierungsproblem gibt
+        (tab as HTMLElement).style.zIndex = '10';  // Stelle sicher, dass der Tab über anderen Elementen liegt
+
+
+        // Loggen Sie den Stil des Tabs, um zu überprüfen, ob er tatsächlich auf 'block' gesetzt wurde
+        console.log(`Tab-Display-Stil für ${tabId}: ${(tab as HTMLElement).style.display}`);
+
+    }, 100); // 100 ms Verzögerung für DOM-Ladezeit
+};

src/utils/select.js

+var tabs = document.querySelectorAll(".tabs_wrap ul li");
+var males = document.querySelectorAll(".male");
+var females = document.querySelectorAll(".female");
+var all = document.querySelectorAll(".item_wrap");
+
+tabs.forEach((tab)=>{
+	tab.addEventListener("click", ()=>{
+		tabs.forEach((tab)=>{
+			tab.classList.remove("active");
+		})
+		tab.classList.add("active");
+		var tabval = tab.getAttribute("data-tabs");
+
+		all.forEach((item)=>{
+			item.style.display = "none";
+		})
+
+		if(tabval == "male"){
+			males.forEach((male)=>{
+				male.style.display = "block";
+			})
+		}
+		else if(tabval == "female"){
+			females.forEach((female)=>{
+				female.style.display = "block";
+			})
+		}
+		else{
+			all.forEach((item)=>{
+				item.style.display = "block";
+			})
+		}
+
+	})
+})
\ No newline at end of file

src/utils/text.js

+import { gsap } from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+
+ 
+gsap.registerPlugin(ScrollTrigger);
+// REVEAL //
+
+gsap.utils.toArray(st).forEach(function (elem) {
+  ScrollTrigger.create({
+    trigger: elem,
+    start: "top 80%",
+    end: "bottom 20%",
+    markers: true, 
+    onEnter: function () {
+      gsap.fromTo(
+        elem,
+        { y: 100, autoAlpha: 0 },
+        {
+          duration: 1.25,
+          y: 0,
+          autoAlpha: 1,
+          ease: "back",
+          overwrite: "auto"
+        }
+      );
+    },
+    onLeave: function () {
+      gsap.fromTo(elem, { autoAlpha: 1 }, { autoAlpha: 0, overwrite: "auto" });
+    },
+    onEnterBack: function () {
+      gsap.fromTo(
+        elem,
+        { y: -100, autoAlpha: 0 },
+        {
+          duration: 1.25,
+          y: 0,
+          autoAlpha: 1,
+          ease: "back",
+          overwrite: "auto"
+        }
+      );
+    },
+    onLeaveBack: function () {
+      gsap.fromTo(elem, { autoAlpha: 1 }, { autoAlpha: 0, overwrite: "auto" });
+    }
+  });
+});

src/utils/useNavigation.ts

+import { useNavigate } from "react-router-dom";
+
+export const useNavigation = () => {
+    const navigate = useNavigate();
+
+    const goToPagesAndOpenTab = (tabId: string, path: string) => {
+    
+        
+        navigate(`${path}?tab=${tabId}`);
+        
+    };
+    const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
+        
+        navigate(`${path}?collapseId=${collapseId}`);
+    };
+    const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
+        
+        
+        let url = `${path}?tab=${tabId}`;
+        if (collapseId) {
+            url += `&collapseId=${collapseId}`;
+        }
+        navigate(url);
+    };
+    const goToPageWithNestedTabs = ({ path, tabId, subTabId, collapseId }: { path: string, tabId: string, subTabId?: string, collapseId?: string }) => {
+        
+        
+        let url = `${path}?tab=${tabId}`;
+        if (subTabId) {
+            url += `&subTab=${subTabId}`;
+        }
+        if (collapseId) {
+            url += `&collapseId=${collapseId}`;
+        }
+        navigate(url);
+    };
+
+
+
+    const goToPageWithTabAndScroll = ({ path, tabId, scrollToId }: { path: string, tabId: string, scrollToId: string }) => {
+        let url = `${path}?tab=${tabId}`;
+        if (scrollToId) {
+            url += `&scrollTo=${scrollToId}`;
+        }
+        navigate(url);
+    };
+
+    const goToPageAndScroll = (scrollToId: string, path: string) => {
+        
+        navigate(`${path}?scrollTo=${scrollToId}`);
+    };
+
+  
+
+    const goToPlace = ({
+        path,
+        scrollToId,
+        tabId,
+        subTabId,
+        collapseId,
+        tabincolId
+    }: { 
+        path: string;
+        scrollToId?: string;
+        tabId?: string;
+        subTabId?: string;
+        collapseId?: string;
+        tabincolId?: string;
+    }) => {
+    // Den vollständigen Pfad erstellen, indem wir den basePath und path kombinieren
+    let url = `/${path.startsWith("/") ? path.slice(1) : path}`;
+
+
+        
+        let paramsAdded = false; 
+        console.log("Found path: " + path)
+        // 1. Tab-Logik (tabId und subTabId)
+        if (tabId) {
+            console.log("Found tabID: " + tabId)
+            url += `?tab=${tabId}`;
+            paramsAdded = true;
+            if (subTabId) {
+                console.log("Found subTabId: " + subTabId)
+                url += `&subTab=${subTabId}`;
+            }
+        }
+
+        // 2. Collapse-Logik (collapseId und tabincolId)
+        if (collapseId) {
+            console.log("Found collapseId: " + collapseId)
+            if (!tabId) {
+                // Wenn kein tabId gesetzt ist, fügen wir collapseId hinzu
+                url += url.includes('?') ? `&collapseId=${collapseId}` : `?collapseId=${collapseId}`;
+                paramsAdded = true;
+            }
+            if (tabincolId) {
+                console.log("Found tabincolId: " + tabincolId)
+                url += `&colTab=${tabincolId}`;
+            }
+        }
+
+        // 3. Scroll-Logik (scrollToId)
+        if (scrollToId) {
+            console.log("Found scrollToId: " + scrollToId)
+            // Wenn bereits Parameter existieren, fügen wir & hinzu, ansonsten ?
+            const separator = paramsAdded ? '&' : '?';
+            paramsAdded = true;
+            url += `${separator}scrollTo=${scrollToId}`;
+        }
+        console.log("Final URL:", url);
+
+        // Navigiere zur URL
+        navigate(url);
+    };
+
+    
+    return { goToPlace,  goToPageAndScroll, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
+};

src/utils/useScript.ts

+import { useEffect } from 'react';
+
+export function useScript({url}:{url: string}) {
+  useEffect(() => {
+    const script = document.createElement('script');
+
+    script.src = url;
+    script.async = true;
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    }
+  }, [url]);
+};
+
+export default useScript;

src/vite-env.d.ts

@@ -9,5 +9,7 @@ interface ImportMetaEnv {
   interface ImportMeta {
     readonly env: ImportMetaEnv;
   }
-  
-  
\ No newline at end of file
+
+  declare module "gsap/all.js" {
+    export default any;
+  }
\ No newline at end of file

tsconfig.json

@@ -5,6 +5,7 @@
       "lib": ["ES2020", "DOM", "DOM.Iterable"],
       "module": "ESNext",
       "skipLibCheck": true,
+      "noImplicitAny": false,
   
       /* Bundler mode */
       "moduleResolution": "bundler",
@@ -15,12 +16,12 @@
       "jsx": "react-jsx",
   
       /* Linting */
-      "strict": true,
+      "strict": true, 
       "noUnusedLocals": true,
       "noUnusedParameters": true,
       "noFallthroughCasesInSwitch": true
     },
-    "include": ["src"]
+    "include": ["src", "code/mapsc.ts", "assets/mapscript.js", "pubpub/mapscript.js", "pubpub/extra_modules"]
   }
   
   
\ No newline at end of file

tsconfig.node.json

@@ -7,6 +7,6 @@
       "allowSyntheticDefaultImports": true,
       "strict": true
     },
-    "include": ["vite.config.ts", "src/utils/index.ts"]
+    "include": ["vite.config.ts", "src/utils/index.ts", "src/components/seclarations.ts"]
   }
   
\ No newline at end of file

vite.config.js

@@ -5,8 +5,26 @@ import { stringToSlug } from "./src/utils";
 // https://vitejs.dev/config/
 export default () => {
   const env = loadEnv("dev", process.cwd());
+    // Sicherstellen, dass die Umgebungsvariable vorhanden ist
+  if (!env.VITE_TEAM_NAME) {
+    throw new Error("VITE_TEAM_NAME environment variable is not defined");
+  }
+  // Debugging-Log, um den Wert der Umgebungsvariable zu überprüfen
+  console.log(`VITE_TEAM_NAME: ${env.VITE_TEAM_NAME}`);
+
+
+  const baseSlug = stringToSlug(env.VITE_TEAM_NAME);
+
+  console.log("VITE_TEAM_NAME:", env.VITE_TEAM_NAME); // Debugging-Ausgabe
+  console.log("Base Slug:", baseSlug); // Debugging-Ausgabe
+  
   return defineConfig({
     base: `/${stringToSlug(env.VITE_TEAM_NAME)}/`,
     plugins: [react()],
+    build: {
+      outDir: "dist",
+    },
+    publicDir: 'pubpub',
   });
+  
 };

wiki/pages/attributions.html

+{% extends "layout.html" %}
+
+{% block title %}Attributions{% endblock %}
+{% block lead %}In the iGEM Competition, we celebrate student effort and achievement. The Attributions form helps the judges differentiate between what students accomplished from how their external collaborators supported them. Therefore, teams must clearly explain on the standard Project Attributions form what work they have conducted by themselves and what has been done by others.{% endblock %}
+
+
+{% block sidebar %}
+<!-- no sidebar -->
+{% endblock %}
+
+{% block page_content %}
+
+<!--''
+  ======================================================================
+  == VERY IMPORTANT                                                   ==
+  ======================================================================
+  LEAVE THE IFRAME CODE BELOW AS IT IS, THE ATTRIBUTION FORM OF YOUR TEAM
+  WILL BE DISPLAYED ON THIS PAGE. DO NOT REMOVE IT, OTHERWISE YOU RISK OF
+  NOT MEETING BRONZE MEDAL CRITERION #2
+ -->
+<div class="row mt-4">
+  <script type="text/javascript">
+    // 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");
+          element.style.height = `${data + 100}px`;
+        }
+      }
+    });
+  </script>
+  <iframe
+    style='width: 100%'
+    id="igem-attribution-form"
+    src="https://teams.igem.org/wiki/5247/attributions">
+  >
+  </iframe>
+  <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
+
+</div>
+
+{% endblock %}

wiki/pages/loadingScreen.html

+<!DOCTYPE html>
+<html lang="en">
+<head> <link rel="stylesheet" href="loadingScreen.css">
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Loading Screen Example</title>
+
+</head>
+<body>
+    <div id="loading-screen">
+        <div class="spinner"></div>
+    </div>
+    
+    <div id="content" style="display: none;">
+        <!-- Your main content goes here -->
+        <h1>Welcome to my website
+
+        </h1>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file

wiki/pages/script.js

+window.addEventListener('load', function() {
+    const LoadingScreen = document.getElementById('LoadingScreen');
+    const content = document.getElementById('content');
+
+    // Hide loading screen and show main content
+    LoadingScreen.style.display = 'none';
+    content.style.display = 'block';
+});
\ No newline at end of file