diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
index 7e0b2b3b0d18bd2deaadecefb65f1e7b2cfe829e..aef83969212ac79c5b0f4e54ec5801af4ee24905 100644
--- a/src/containers/App/App.tsx
+++ b/src/containers/App/App.tsx
@@ -3,28 +3,6 @@ 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 {
- AttributionsPage,
- ContributionPage,
- DescriptionPage,
- EducationPage,
- EngineeringPage,
- EntrepreneurshipPage,
- ExperimentsPage,
- HardwarePage,
- HomePage,
- HumanPracticesPage,
- InclusivityPage,
- MeasurementPage,
- ModelPage,
- NotebookPage,
- PlantPage,
- ResultsPage,
- SafetyPage,
- SoftwarePage,
- SustainablePage,
- TeamPage,
-} from "../../contents";
const App = () => {
const pathMapping = getPathMapping();
@@ -40,70 +18,46 @@ const App = () => {
return (
<>
- {/* Navigation */}
- <Navbar />
+ <>
+ {/* Navigation */}
+ <Navbar />
- {/* Header */}
- <Routes>
- {Object.keys(pathMapping).map((path) => {
- const title = pathMapping[path].title;
- const lead = pathMapping[path].lead;
- return (
- <Route
- key={path}
- path={path}
- element={<Header title={title || ""} lead={lead || ""} />}
- />
- );
- })}
- <Route
- path="*"
- element={
- <Header
- title="Not Found"
- lead="The page you are looking for does not exist."
- />
- }
- />
- </Routes>
-
- {/* Page Content */}
- <div className="container">
+ {/* Header and PageContent */}
<Routes>
- {/* Home */}
- <Route path="/" element={<HomePage />} />
- {/* Team */}
- <Route path="/team" element={<TeamPage />} />
- <Route path="/attributions" element={<AttributionsPage />} />
- {/* Project */}
- <Route path="/contribution" element={<ContributionPage />} />
- <Route path="/description" element={<DescriptionPage />} />
- <Route path="/engineering" element={<EngineeringPage />} />
- <Route path="/experiments" element={<ExperimentsPage />} />
- <Route path="/notebook" element={<NotebookPage />} />
- <Route path="/results" element={<ResultsPage />} />
- {/* Safety */}
- <Route path="/safety" element={<SafetyPage />} />
- {/* Human Practices */}
- <Route path="/human-practices" element={<HumanPracticesPage />} />
- {/* Awards */}
- <Route path="/education" element={<EducationPage />} />
- <Route path="/entrepreneurship" element={<EntrepreneurshipPage />} />
- <Route path="/hardware" element={<HardwarePage />} />
- <Route path="/inclusivity" element={<InclusivityPage />} />
- <Route path="/measurement" element={<MeasurementPage />} />
- <Route path="/model" element={<ModelPage />} />
- <Route path="/plant" element={<PlantPage />} />
- <Route path="/software" element={<SoftwarePage />} />
- <Route path="/sustainable" element={<SustainablePage />} />
- {/* 404 */}
- <Route path="*" element={<NotFound />} />
+ {Object.entries(pathMapping).map(
+ ([path, { title, lead, component: Component }]) => (
+ <Route
+ key={path}
+ path={path}
+ element={
+ <>
+ <Header title={title || ""} lead={lead || ""} />
+ <div className="container">
+ <Component />
+ </div>
+ </>
+ }
+ />
+ ),
+ )}
+ <Route
+ path="*"
+ element={
+ <>
+ <Header
+ title="Not Found"
+ lead="The page you are looking for does not exist."
+ />
+ <NotFound />
+ </>
+ }
+ />
</Routes>
- </div>
- {/* Footer */}
- {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
- <Footer />
+ {/* Footer */}
+ {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
+ <Footer />
+ </>
</>
);
};
diff --git a/src/pages.ts b/src/pages.ts
index e425ee387976a3b65bab4b84f7c44a253de79080..453226ade41ec65ca8ef0f938638626bfef3fa01 100644
--- a/src/pages.ts
+++ b/src/pages.ts
@@ -1,3 +1,26 @@
+import {
+ AttributionsPage,
+ ContributionPage,
+ DescriptionPage,
+ EngineeringPage,
+ ExperimentsPage,
+ HomePage,
+ HumanPracticesPage,
+ NotebookPage,
+ ResultsPage,
+ SafetyPage,
+ TeamPage,
+ EducationPage,
+ EntrepreneurshipPage,
+ HardwarePage,
+ InclusivityPage,
+ MeasurementPage,
+ ModelPage,
+ PlantPage,
+ SoftwarePage,
+ SustainablePage,
+} from "./contents";
+
interface Base {
name: string | undefined;
}
@@ -11,6 +34,7 @@ class Page implements Base {
name: string | undefined;
title: string | undefined;
path: string | undefined;
+ component: React.FC | undefined;
lead: string | undefined;
}
@@ -19,6 +43,7 @@ const Pages: (Page | Folder)[] = [
name: "Home",
title: "Home",
path: "/",
+ component: HomePage,
lead: "Welcome to iGEM 2024! Your team has been approved and you are ready to start the iGEM season!",
},
{
@@ -28,12 +53,14 @@ const Pages: (Page | Folder)[] = [
name: "Team",
title: "Team",
path: "/team",
+ component: TeamPage,
lead: "On this page you can introduce your team members, instructors, and advisors.",
},
{
name: "Attributions",
title: "Attributions",
path: "/attributions",
+ component: AttributionsPage,
lead: "This page must show the attribution form of your project. This includes the work done by each of the student members on your team and any work that was done by people outside of your team, including the host labs, advisors, instructors, and individuals not on the team roster. This requirement is not about literature references - these can and should be displayed throughout your wiki.",
},
],
@@ -45,36 +72,42 @@ const Pages: (Page | Folder)[] = [
name: "Contribution",
title: "Contribution",
path: "/contribution",
+ component: ContributionPage,
lead: "Make a useful contribution for future iGEM teams. Use this page to document that contribution.",
},
{
name: "Description",
title: "Project Description",
path: "/description",
+ component: DescriptionPage,
lead: "Describe how and why you chose your iGEM project.",
},
{
name: "Engineering",
title: "Engineering Success",
path: "/engineering",
+ component: EngineeringPage,
lead: "Demonstrate engineering success in a part of your project by going through at least one iteration of the engineering design cycle.",
},
{
name: "Experiments",
title: "Experiments",
path: "/experiments",
+ component: ExperimentsPage,
lead: "Describe the research, experiments, and protocols you used in your iGEM project.",
},
{
name: "Notebook",
title: "Notebook",
path: "/notebook",
+ component: NotebookPage,
lead: "Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.",
},
{
name: "Results",
title: "Results",
path: "/results",
+ component: ResultsPage,
lead: "You can describe the results of your project and your future plans here.",
},
],
@@ -83,12 +116,14 @@ const Pages: (Page | Folder)[] = [
name: "Safety",
title: "Safety",
path: "/safety",
+ component: SafetyPage,
lead: "Describe all the safety issues of your project.",
},
{
name: "Human Practices",
title: "Human Practices",
path: "/human-practices",
+ component: HumanPracticesPage,
lead: "We ask every team to think deeply and creatively about whether their project is responsible and good for the world. Consider how the world affects your work and how your work affects the world.",
},
{
@@ -98,54 +133,63 @@ const Pages: (Page | Folder)[] = [
name: "Education",
title: "Education",
path: "/education",
+ component: EducationPage,
lead: "Innovative educational tools and outreach activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology.",
},
{
name: "Entrepreneurship",
title: "Entrepreneurship",
path: "/entrepreneurship",
+ component: EntrepreneurshipPage,
lead: "The entrepreneurship prize recognizes exceptional effort to build a business case and commercialize an iGEM project.",
},
{
name: "Hardware",
title: "Hardware",
path: "/hardware",
+ component: HardwarePage,
lead: "Hardware in iGEM should make synthetic biology based on standard parts easier, faster, better, or more accessible to our community.",
},
{
name: "Inclusivity",
title: "Diversity and Inclusion",
path: "/inclusivity",
+ component: InclusivityPage,
lead: "Every individual, regardless of background or experience, should have an equal opportunity to engage with scientific knowledge and technological development.",
},
{
name: "Measurement",
title: "Measurement",
path: "/measurement",
+ component: MeasurementPage,
lead: "Synthetic Biology needs great measurement approaches for characterizing parts, and efficient new methods for characterizing many parts at once. Describe your measurement approaches on this page.",
},
{
name: "Model",
title: "Model",
path: "/model",
+ component: ModelPage,
lead: "Explain your model's assumptions, data, parameters, and results in a way that anyone could understand.",
},
{
name: "Plant",
title: "Plant",
path: "/plant",
+ component: PlantPage,
lead: "This award is designed to celebrate exemplary work done in plant synthetic biology.",
},
{
name: "Software",
title: "Software",
path: "/software",
+ component: SoftwarePage,
lead: "Software in iGEM should make synthetic biology based on standard parts easier, faster, better or more accessible to our community.",
},
{
name: "Sustainable",
title: "Sustainable Development Goals",
path: "/sustainable",
+ component: SustainablePage,
lead: "Describe how you have evaluated your project ideas against one or more of the SDGs.",
},
],
diff --git a/src/utils/getPathMapping.ts b/src/utils/getPathMapping.ts
index b8ea3ce3320bef5c8c7f6a19551e71973f309061..0c0a6c24f1258ff6f8fac1f5e0f5213747c14440 100644
--- a/src/utils/getPathMapping.ts
+++ b/src/utils/getPathMapping.ts
@@ -5,17 +5,24 @@ const getPathMapping = () => {
[key: string]: {
name: string | undefined;
title: string | undefined;
+ component: React.FC;
lead: string | undefined;
};
}>((map, item) => {
- if ("path" in item && item.path) {
- map[item.path] = { name: item.name, title: item.title, lead: item.lead };
+ if ("path" in item && item.path && item.component) {
+ map[item.path] = {
+ name: item.name,
+ title: item.title,
+ component: item.component,
+ lead: item.lead,
+ };
} else if ("folder" in item && item.folder) {
item.folder.forEach((page) => {
- if (page.path) {
+ if (page.path && page.component) {
map[page.path] = {
name: page.name,
title: page.title,
+ component: page.component,
lead: page.lead,
};
}