From dac51c76e65d6da29ea8cff25b4e796047cf58e0 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 20 Jun 2024 20:42:29 +0200
Subject: [PATCH] copied react starter pack to this branch
---
LICENSE | 396 ++++++++++++++++++++++++++++++
README.md | 80 ++++++
index.html | 17 ++
package.json | 34 +++
src/components/Footer.tsx | 104 ++++++++
src/components/Header.tsx | 19 ++
src/components/Inspirations.tsx | 42 ++++
src/components/Navbar.tsx | 65 +++++
src/components/NotFound.tsx | 16 ++
src/components/index.tsx | 5 +
src/containers/App/App.css | 73 ++++++
src/containers/App/App.tsx | 73 ++++++
src/contents/attributions.tsx | 75 ++++++
src/contents/contribution.tsx | 34 +++
src/contents/description.tsx | 390 +++++++++++++++++++++++++++++
src/contents/education.tsx | 48 ++++
src/contents/engineering.tsx | 34 +++
src/contents/entrepreneurship.tsx | 79 ++++++
src/contents/experiments.tsx | 34 +++
src/contents/hardware.tsx | 65 +++++
src/contents/home.tsx | 25 ++
src/contents/human-practices.tsx | 109 ++++++++
src/contents/inclusivity.tsx | 66 +++++
src/contents/index.tsx | 25 ++
src/contents/measurement.tsx | 65 +++++
src/contents/model.tsx | 67 +++++
src/contents/notebook.tsx | 31 +++
src/contents/plant.tsx | 48 ++++
src/contents/results.tsx | 83 +++++++
src/contents/safety.tsx | 92 +++++++
src/contents/software.tsx | 62 +++++
src/contents/sustainable.tsx | 52 ++++
src/contents/team.tsx | 51 ++++
src/main.tsx | 12 +
src/pages.ts | 199 +++++++++++++++
src/utils/getPathMapping.ts | 33 +++
src/utils/index.ts | 2 +
src/utils/stringToSlug.ts | 9 +
src/vite-env.d.ts | 11 +
tsconfig.json | 24 ++
tsconfig.node.json | 11 +
vite.config.ts | 12 +
42 files changed, 2772 insertions(+)
create mode 100644 LICENSE
create mode 100644 README.md
create mode 100644 index.html
create mode 100644 package.json
create mode 100644 src/components/Footer.tsx
create mode 100644 src/components/Header.tsx
create mode 100644 src/components/Inspirations.tsx
create mode 100644 src/components/Navbar.tsx
create mode 100644 src/components/NotFound.tsx
create mode 100644 src/components/index.tsx
create mode 100644 src/containers/App/App.css
create mode 100644 src/containers/App/App.tsx
create mode 100644 src/contents/attributions.tsx
create mode 100644 src/contents/contribution.tsx
create mode 100644 src/contents/description.tsx
create mode 100644 src/contents/education.tsx
create mode 100644 src/contents/engineering.tsx
create mode 100644 src/contents/entrepreneurship.tsx
create mode 100644 src/contents/experiments.tsx
create mode 100644 src/contents/hardware.tsx
create mode 100644 src/contents/home.tsx
create mode 100644 src/contents/human-practices.tsx
create mode 100644 src/contents/inclusivity.tsx
create mode 100644 src/contents/index.tsx
create mode 100644 src/contents/measurement.tsx
create mode 100644 src/contents/model.tsx
create mode 100644 src/contents/notebook.tsx
create mode 100644 src/contents/plant.tsx
create mode 100644 src/contents/results.tsx
create mode 100644 src/contents/safety.tsx
create mode 100644 src/contents/software.tsx
create mode 100644 src/contents/sustainable.tsx
create mode 100644 src/contents/team.tsx
create mode 100644 src/main.tsx
create mode 100644 src/pages.ts
create mode 100644 src/utils/getPathMapping.ts
create mode 100644 src/utils/index.ts
create mode 100644 src/utils/stringToSlug.ts
create mode 100644 src/vite-env.d.ts
create mode 100644 tsconfig.json
create mode 100644 tsconfig.node.json
create mode 100644 vite.config.ts
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..dba157d3
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,396 @@
+Attribution 4.0 International (CC BY 4.0)
+https://creativecommons.org/licenses/by/4.0/
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+ Considerations for licensors: Our public licenses are
+ intended for use by those authorized to give the public
+ permission to use material in ways otherwise restricted by
+ copyright and certain other rights. Our licenses are
+ irrevocable. Licensors should read and understand the terms
+ and conditions of the license they choose before applying it.
+ Licensors should also secure all rights necessary before
+ applying our licenses so that the public can reuse the
+ material as expected. Licensors should clearly mark any
+ material not subject to the license. This includes other CC-
+ licensed material, or material used under an exception or
+ limitation to copyright. More considerations for licensors:
+ wiki.creativecommons.org/Considerations_for_licensors
+
+ Considerations for the public: By using one of our public
+ licenses, a licensor grants the public permission to use the
+ licensed material under specified terms and conditions. If
+ the licensor's permission is not necessary for any reason--for
+ example, because of any applicable exception or limitation to
+ copyright--then that use is not regulated by the license. Our
+ licenses grant only permissions under copyright and certain
+ other rights that a licensor has authority to grant. Use of
+ the licensed material may still be restricted for other
+ reasons, including because others have copyright or other
+ rights in the material. A licensor may make special requests,
+ such as asking that all changes be marked or described.
+ Although not required by our licenses, you are encouraged to
+ respect those requests where reasonable. More considerations
+ for the public:
+ wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution 4.0 International Public License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution 4.0 International Public License ("Public License"). To the
+extent this Public License may be interpreted as a contract, You are
+granted the Licensed Rights in consideration of Your acceptance of
+these terms and conditions, and the Licensor grants You such rights in
+consideration of benefits the Licensor receives from making the
+Licensed Material available under these terms and conditions.
+
+
+Section 1 -- Definitions.
+
+ a. Adapted Material means material subject to Copyright and Similar
+ Rights that is derived from or based upon the Licensed Material
+ and in which the Licensed Material is translated, altered,
+ arranged, transformed, or otherwise modified in a manner requiring
+ permission under the Copyright and Similar Rights held by the
+ Licensor. For purposes of this Public License, where the Licensed
+ Material is a musical work, performance, or sound recording,
+ Adapted Material is always produced where the Licensed Material is
+ synched in timed relation with a moving image.
+
+ b. Adapter's License means the license You apply to Your Copyright
+ and Similar Rights in Your contributions to Adapted Material in
+ accordance with the terms and conditions of this Public License.
+
+ c. Copyright and Similar Rights means copyright and/or similar rights
+ closely related to copyright including, without limitation,
+ performance, broadcast, sound recording, and Sui Generis Database
+ Rights, without regard to how the rights are labeled or
+ categorized. For purposes of this Public License, the rights
+ specified in Section 2(b)(1)-(2) are not Copyright and Similar
+ Rights.
+
+ d. Effective Technological Measures means those measures that, in the
+ absence of proper authority, may not be circumvented under laws
+ fulfilling obligations under Article 11 of the WIPO Copyright
+ Treaty adopted on December 20, 1996, and/or similar international
+ agreements.
+
+ e. Exceptions and Limitations means fair use, fair dealing, and/or
+ any other exception or limitation to Copyright and Similar Rights
+ that applies to Your use of the Licensed Material.
+
+ f. Licensed Material means the artistic or literary work, database,
+ or other material to which the Licensor applied this Public
+ License.
+
+ g. Licensed Rights means the rights granted to You subject to the
+ terms and conditions of this Public License, which are limited to
+ all Copyright and Similar Rights that apply to Your use of the
+ Licensed Material and that the Licensor has authority to license.
+
+ h. Licensor means the individual(s) or entity(ies) granting rights
+ under this Public License.
+
+ i. Share means to provide material to the public by any means or
+ process that requires permission under the Licensed Rights, such
+ as reproduction, public display, public performance, distribution,
+ dissemination, communication, or importation, and to make material
+ available to the public including in ways that members of the
+ public may access the material from a place and at a time
+ individually chosen by them.
+
+ j. Sui Generis Database Rights means rights other than copyright
+ resulting from Directive 96/9/EC of the European Parliament and of
+ the Council of 11 March 1996 on the legal protection of databases,
+ as amended and/or succeeded, as well as other essentially
+ equivalent rights anywhere in the world.
+
+ k. You means the individual or entity exercising the Licensed Rights
+ under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+ a. License grant.
+
+ 1. Subject to the terms and conditions of this Public License,
+ the Licensor hereby grants You a worldwide, royalty-free,
+ non-sublicensable, non-exclusive, irrevocable license to
+ exercise the Licensed Rights in the Licensed Material to:
+
+ a. reproduce and Share the Licensed Material, in whole or
+ in part; and
+
+ b. produce, reproduce, and Share Adapted Material.
+
+ 2. Exceptions and Limitations. For the avoidance of doubt, where
+ Exceptions and Limitations apply to Your use, this Public
+ License does not apply, and You do not need to comply with
+ its terms and conditions.
+
+ 3. Term. The term of this Public License is specified in Section
+ 6(a).
+
+ 4. Media and formats; technical modifications allowed. The
+ Licensor authorizes You to exercise the Licensed Rights in
+ all media and formats whether now known or hereafter created,
+ and to make technical modifications necessary to do so. The
+ Licensor waives and/or agrees not to assert any right or
+ authority to forbid You from making technical modifications
+ necessary to exercise the Licensed Rights, including
+ technical modifications necessary to circumvent Effective
+ Technological Measures. For purposes of this Public License,
+ simply making modifications authorized by this Section 2(a)
+ (4) never produces Adapted Material.
+
+ 5. Downstream recipients.
+
+ a. Offer from the Licensor -- Licensed Material. Every
+ recipient of the Licensed Material automatically
+ receives an offer from the Licensor to exercise the
+ Licensed Rights under the terms and conditions of this
+ Public License.
+
+ b. No downstream restrictions. You may not offer or impose
+ any additional or different terms or conditions on, or
+ apply any Effective Technological Measures to, the
+ Licensed Material if doing so restricts exercise of the
+ Licensed Rights by any recipient of the Licensed
+ Material.
+
+ 6. No endorsement. Nothing in this Public License constitutes or
+ may be construed as permission to assert or imply that You
+ are, or that Your use of the Licensed Material is, connected
+ with, or sponsored, endorsed, or granted official status by,
+ the Licensor or others designated to receive attribution as
+ provided in Section 3(a)(1)(A)(i).
+
+ b. Other rights.
+
+ 1. Moral rights, such as the right of integrity, are not
+ licensed under this Public License, nor are publicity,
+ privacy, and/or other similar personality rights; however, to
+ the extent possible, the Licensor waives and/or agrees not to
+ assert any such rights held by the Licensor to the limited
+ extent necessary to allow You to exercise the Licensed
+ Rights, but not otherwise.
+
+ 2. Patent and trademark rights are not licensed under this
+ Public License.
+
+ 3. To the extent possible, the Licensor waives any right to
+ collect royalties from You for the exercise of the Licensed
+ Rights, whether directly or through a collecting society
+ under any voluntary or waivable statutory or compulsory
+ licensing scheme. In all other cases the Licensor expressly
+ reserves any right to collect such royalties.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+ a. Attribution.
+
+ 1. If You Share the Licensed Material (including in modified
+ form), You must:
+
+ a. retain the following if it is supplied by the Licensor
+ with the Licensed Material:
+
+ i. identification of the creator(s) of the Licensed
+ Material and any others designated to receive
+ attribution, in any reasonable manner requested by
+ the Licensor (including by pseudonym if
+ designated);
+
+ ii. a copyright notice;
+
+ iii. a notice that refers to this Public License;
+
+ iv. a notice that refers to the disclaimer of
+ warranties;
+
+ v. a URI or hyperlink to the Licensed Material to the
+ extent reasonably practicable;
+
+ b. indicate if You modified the Licensed Material and
+ retain an indication of any previous modifications; and
+
+ c. indicate the Licensed Material is licensed under this
+ Public License, and include the text of, or the URI or
+ hyperlink to, this Public License.
+
+ 2. You may satisfy the conditions in Section 3(a)(1) in any
+ reasonable manner based on the medium, means, and context in
+ which You Share the Licensed Material. For example, it may be
+ reasonable to satisfy the conditions by providing a URI or
+ hyperlink to a resource that includes the required
+ information.
+
+ 3. If requested by the Licensor, You must remove any of the
+ information required by Section 3(a)(1)(A) to the extent
+ reasonably practicable.
+
+ 4. If You Share Adapted Material You produce, the Adapter's
+ License You apply must not prevent recipients of the Adapted
+ Material from complying with this Public License.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+ a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+ to extract, reuse, reproduce, and Share all or a substantial
+ portion of the contents of the database;
+
+ b. if You include all or a substantial portion of the database
+ contents in a database in which You have Sui Generis Database
+ Rights, then the database in which You have Sui Generis Database
+ Rights (but not its individual contents) is Adapted Material; and
+
+ c. You must comply with the conditions in Section 3(a) if You Share
+ all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+ a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+ EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+ AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+ ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+ IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+ WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+ PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+ ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+ KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+ ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+ b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+ TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+ NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+ INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+ COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+ USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+ ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+ DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+ IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+ c. The disclaimer of warranties and limitation of liability provided
+ above shall be interpreted in a manner that, to the extent
+ possible, most closely approximates an absolute disclaimer and
+ waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+ a. This Public License applies for the term of the Copyright and
+ Similar Rights licensed here. However, if You fail to comply with
+ this Public License, then Your rights under this Public License
+ terminate automatically.
+
+ b. Where Your right to use the Licensed Material has terminated under
+ Section 6(a), it reinstates:
+
+ 1. automatically as of the date the violation is cured, provided
+ it is cured within 30 days of Your discovery of the
+ violation; or
+
+ 2. upon express reinstatement by the Licensor.
+
+ For the avoidance of doubt, this Section 6(b) does not affect any
+ right the Licensor may have to seek remedies for Your violations
+ of this Public License.
+
+ c. For the avoidance of doubt, the Licensor may also offer the
+ Licensed Material under separate terms or conditions or stop
+ distributing the Licensed Material at any time; however, doing so
+ will not terminate this Public License.
+
+ d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+ License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+ a. The Licensor shall not be bound by any additional or different
+ terms or conditions communicated by You unless expressly agreed.
+
+ b. Any arrangements, understandings, or agreements regarding the
+ Licensed Material not stated herein are separate from and
+ independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+ a. For the avoidance of doubt, this Public License does not, and
+ shall not be interpreted to, reduce, limit, restrict, or impose
+ conditions on any use of the Licensed Material that could lawfully
+ be made without permission under this Public License.
+
+ b. To the extent possible, if any provision of this Public License is
+ deemed unenforceable, it shall be automatically reformed to the
+ minimum extent necessary to make it enforceable. If the provision
+ cannot be reformed, it shall be severed from this Public License
+ without affecting the enforceability of the remaining terms and
+ conditions.
+
+ c. No term or condition of this Public License will be waived and no
+ failure to comply consented to unless expressly agreed to by the
+ Licensor.
+
+ d. Nothing in this Public License constitutes or may be interpreted
+ as a limitation upon, or waiver of, any privileges and immunities
+ that apply to the Licensor or You, including from the legal
+ processes of any jurisdiction or authority.
+
+
+=======================================================================
+
+Creative Commons is not a party to its public licenses.
+Notwithstanding, Creative Commons may elect to apply one of its public
+licenses to material it publishes and in those instances will be
+considered the “Licensor.†The text of the Creative Commons public
+licenses is dedicated to the public domain under the CC0 Public Domain
+Dedication. Except for the limited purpose of indicating that material
+is shared under a Creative Commons public license or as otherwise
+permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the public
+licenses.
+
+Creative Commons may be contacted at creativecommons.org.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..9657ff6e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,80 @@
+# Team IOANNINA 2024 Wiki
+
+This repository uses `TypeScript` and `React` to manage the wikis.
+
+This repository **MUST** contain all coding assets to generate your team's wiki
+(HTML, CSS, JavaScript, TypeScript, Python, etc).
+
+Images, photos, icons and fonts **MUST** be stored on `static.igem.wiki` using
+[tools.igem.org](https://tools.igem.org), and Videos **must** be embedded
+from [iGEM Video Universe](https://video.igem.org).
+
+For up-to-date requirements, resources, help and guidance, visit
+[competition.igem.org/deliverables/team-wiki](https://competition.igem.org/deliverables/team-wiki).
+
+## Getting Started
+
+Before refactoring the code of this template to suit your wiki needs, please make sure you have the ability to use React
+for web development.
+
+1. Clone the repository:
+ ```bash
+ git clone https://gitlab.igem.org/2024/ioannina
+ cd ioannina
+ ```
+2. Install the dependencies:
+
+ ```bash
+ yarn install
+ ```
+
+ ### Important:
+
+ Ensure you are using Node.js version `^18.18.0 or >=20.0.0` to mostly avoid compatibility issues. Node `v18.20.0` is
+ recommended for this project. You can check your Node version by running `node -v` in your terminal.
+
+3. Start the development server:
+ ```bash
+ yarn run dev
+ ```
+4. Navigate to the files you wish to edit:
+ - The main App component can be found under `src/containers/App`
+ - Pre-built components are located under `src/components`
+ - Individual pages can be modified in the `src/pages.ts`
+ - Content pages can be updated in the `src/contents`
+5. Once you are done, save the changes by **committing** them to the _main branch_ of the repository
+6. An automated script will build, test and deploy your wiki to the iGEM server
+
+## About This Template
+
+### Files
+
+Below is the structure of important files and directories in this project:
+
+ ├── README.md -> The file you are currently reading
+ ├── index.html -> Single HTML file for the wiki
+ ├── package.json -> Manages project metadata and dependencies
+ ├── src/
+ │ ├── components/ -> Pre-built components(like Navbar, Footer, etc.)
+ │ ├── containers/
+ │ │ └── App/ -> Main React application container
+ │ ├── contents/
+ │ │ ├── *.tsx -> Page components for the wiki
+ │ ├── main.tsx -> Entry point of the wiki application
+ │ ├── pages.ts -> Page definition and path mapping
+ │ ├── utils/ -> Utility functions
+ │ └── vite-env.d.ts -> TypeScript definitions for Vite
+ ├── tsconfig.json -> Configures TypeScript options
+ ├── tsconfig.node.json -> TypeScript settings for Node.js
+ ├── vite.config.ts -> Configuration for the Vite tool
+ └── yarn.lock -> Yarn lock file for dependency management
+
+### Technologies
+
+- [React](https://reactjs.org): A JavaScript library for building user interfaces
+- [TypeScript](https://www.typescriptlang.org): Extends JavaScript by adding types
+- [Vite](https://vitejs.dev): Frontend tooling that provides faster and leaner development builds
+- [Bootstrap](https://getbootstrap.com): Framework for building responsive, mobile-first sites
+- [React Bootstrap](https://react-bootstrap.github.io): Bootstrap components built with React
+- [React Router](https://reactrouter.com): Declarative routing for React applications
+- (Optional) [Prettier](https://prettier.io): Code formatter
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..fbd846a8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link
+ rel="shortcut icon"
+ href="https://static.igem.wiki/common/icons/favicons/igem-2022.svg"
+ type="image/x-icon"
+ />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>%VITE_TEAM_NAME% - iGEM %VITE_TEAM_YEAR%</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..e28995fe
--- /dev/null
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+ "name": "team-slug",
+ "version": "0.0.1",
+ "license": "CC-BY-4.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "format": "prettier --write \"**/*.{ts,tsx,md,json,css}\"",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "bootstrap": "^5.3.3",
+ "react": "^18.2.0",
+ "react-bootstrap": "^2.10.2",
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.23.0"
+ },
+ "devDependencies": {
+ "@types/node": "^20.12.10",
+ "@types/react": "^18.2.66",
+ "@types/react-dom": "^18.2.22",
+ "@typescript-eslint/eslint-plugin": "^7.2.0",
+ "@typescript-eslint/parser": "^7.2.0",
+ "@vitejs/plugin-react": "^4.2.1",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.6",
+ "prettier": "^3.2.5",
+ "typescript": "^5.2.2",
+ "vite": "^5.2.0"
+ }
+ }
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 00000000..5526669a
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,104 @@
+import { stringToSlug } from "../utils";
+import Pages from "../pages.ts";
+
+export function Footer() {
+ const teamYear = import.meta.env.VITE_TEAM_YEAR;
+ const teamName = import.meta.env.VITE_TEAM_NAME;
+ const teamSlug = stringToSlug(teamName);
+
+ const pages = Pages.map((item, pageIndex) => {
+ if ("folder" in item && item.folder) {
+ const folderItems = item.folder.map((subpage, subpageIndex) => {
+ if (subpage.path) {
+ return (
+ <li key={`subpage-${pageIndex}-${subpageIndex}`}>
+ <a href={"/ioannina"+subpage.path}>{subpage.name}</a>
+ </li>
+ );
+ }
+ });
+ return (
+ <div className="col m-2">
+ <h4 className="mb-3">{item.name}</h4>
+ <ul className="m-2 p-2">
+ {folderItems}
+ </ul>
+ </div>
+ );
+ } else if ("path" in item && item.path) {
+ return (
+ <div className="col m-2">
+ <h4 className="mb-3"><a href={"/ioannina"+item.path}>{item.name}</a></h4>
+ </div>
+ );
+ }
+ });
+
+ return (
+ <footer className="pt-5 pb-5 footer py-5 mt-5 bg-dark text-white">
+ <div className="container">
+
+ <div className="row mb-4">
+ <div className="col-lg-6 col-xs-12">
+ <h4 className="mb-3">Atropos</h4>
+ <p>
+ Change the fates' design...
+ </p>
+ </div>
+
+ <div className="row">
+ <div className="col">
+ <h4 className="mt-lg-0 mt-sm-3">Sponsors</h4>
+
+ </div>
+ <div className="col">
+ <h4 className="mt-lg-0 mt-sm-3">Social</h4>
+ <ul className="m-2 p-2">
+ <li>
+ <a href="https://www.instagram.com/igemioannina/">instagram</a>
+ </li>
+ </ul>
+ </div>
+ <div className="col">
+ <h4 className="mt-lg-0 mt-sm-3">Contact</h4>
+
+ </div>
+ </div>
+ </div>
+
+ <div className="row mb-4">
+ {pages}
+ </div>
+
+ <hr />
+ {/* The following MUST be on every page: license information and link to the repository on gitlab.igem.org */}
+ <div className="row mt-4">
+ <div className="col">
+ <p className="mb-0">
+ <small>
+ © 2024 - Content on this site is licensed under a{" "}
+ <a
+ className="subfoot"
+ href="https://creativecommons.org/licenses/by/4.0/"
+ rel="license"
+ >
+ Creative Commons Attribution 4.0 International license
+ </a>
+ .
+ </small>
+ </p>
+ <p>
+ <small>
+ The repository used to create this website is available at{" "}
+ <a href={`https://gitlab.igem.org/${teamYear}/${teamSlug}`}>
+ gitlab.igem.org/{teamYear}/{teamSlug}
+ </a>
+ .
+ </small>
+ </p>
+ </div>
+ </div>
+ </div>
+ </footer>
+ );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 00000000..884b416d
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,19 @@
+interface HeaderProps {
+ title: string;
+ lead: string;
+}
+
+export function Header({ title, lead }: HeaderProps) {
+ return (
+ <header className="bg-hero py-5 mb-5">
+ <div className="container h-100">
+ <div className="row h-100 align-items-center">
+ <div className="col-lg-12">
+ <h1 className="display-4 mt-5 mb-2">{title}</h1>
+ <p className="lead mb-5 text-white-50">{lead}</p>
+ </div>
+ </div>
+ </div>
+ </header>
+ );
+}
diff --git a/src/components/Inspirations.tsx b/src/components/Inspirations.tsx
new file mode 100644
index 00000000..f01f10cc
--- /dev/null
+++ b/src/components/Inspirations.tsx
@@ -0,0 +1,42 @@
+import { stringToSlug } from "../utils";
+
+export interface InspirationLink {
+ year: number;
+ teamName: string;
+ pageName: string;
+}
+
+interface InspirationsProps {
+ inspirationLinkList: InspirationLink[];
+}
+
+export function Inspirations({ inspirationLinkList }: InspirationsProps) {
+ return (
+ <>
+ <div className="col-lg-4">
+ <h2>Inspirations</h2>
+ <hr />
+ <ul>
+ {inspirationLinkList.map((inspirationLink) => {
+ const { year, teamName, pageName } = inspirationLink;
+ const teamSlug = stringToSlug(teamName);
+ const pageSlug = pageName ? `/${stringToSlug(pageName)}` : "";
+
+ const href =
+ year < 2022
+ ? `https://${year}.igem.org/Team:${teamName}${pageName ? `/${pageName}` : ""}`
+ : `https://${year}.igem.wiki/${teamSlug}${pageSlug}`;
+
+ return (
+ <li key={`${year}-${teamName}`}>
+ <a href={href} target="_blank">
+ {year} {teamName}
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </>
+ );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 00000000..aa32fa91
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,65 @@
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import BootstrapNavbar from "react-bootstrap/Navbar";
+import NavDropdown from "react-bootstrap/NavDropdown";
+import { Link } from "react-router-dom";
+import Pages from "../pages.ts";
+
+export function Navbar({isDarkMode, setIsDarkMode}:any) {
+
+ const handleToggle = () => {
+ setIsDarkMode(!isDarkMode);
+ };
+
+ const pages = Pages.map((item, pageIndex) => {
+ if ("folder" in item && item.folder) {
+ const folderItems = item.folder.map((subpage, subpageIndex) => {
+ if (subpage.path) {
+ return (
+ <NavDropdown.Item
+ key={`subpage-${pageIndex}-${subpageIndex}`}
+ as={Link}
+ to={subpage.path}
+ >
+ {subpage.name}
+ </NavDropdown.Item>
+ );
+ }
+ });
+ return (
+ <NavDropdown
+ key={`page-${pageIndex}`}
+ title={item.name}
+ id="basic-nav-dropdown"
+ >
+ {folderItems}
+ </NavDropdown>
+ );
+ } else if ("path" in item && item.path) {
+ return (
+ <Nav.Link key={`page-${pageIndex}`} as={Link} to={item.path}>
+ {item.name}
+ </Nav.Link>
+ );
+ }
+ });
+
+ return (
+ <BootstrapNavbar expand="lg" bg={isDarkMode ? "dark" : "light"} variant={isDarkMode ? "dark" : "light"} fixed="top">
+ <Container>
+ <BootstrapNavbar.Brand>
+ {import.meta.env.VITE_TEAM_NAME}
+ </BootstrapNavbar.Brand>
+ <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" />
+ <BootstrapNavbar.Collapse id="basic-navbar-nav">
+ <Nav className="left-aligned">
+ <button id="theme-toggle" className="btn btn-outline-secondary ml-auto" onClick={handleToggle}>
+ {isDarkMode ? '🌙' : '🔆' }
+ </button>
+ {pages}
+ </Nav>
+ </BootstrapNavbar.Collapse>
+ </Container>
+ </BootstrapNavbar>
+ );
+}
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 00000000..e98efdc1
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,16 @@
+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>
+ );
+}
diff --git a/src/components/index.tsx b/src/components/index.tsx
new file mode 100644
index 00000000..33a5bbde
--- /dev/null
+++ b/src/components/index.tsx
@@ -0,0 +1,5 @@
+export * from "./Navbar";
+export * from "./Header";
+export * from "./Footer";
+export * from "./NotFound";
+export * from "./Inspirations";
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
new file mode 100644
index 00000000..b612df7f
--- /dev/null
+++ b/src/containers/App/App.css
@@ -0,0 +1,73 @@
+body {
+ padding-top: 56px;
+ background-color: #fffdf0;
+ color: #493843;
+}
+
+body.dark-mode {
+ background-color: #130d11;
+ color: #fffdf0;
+}
+
+.left-aligned {
+ margin-left: auto;
+}
+
+.bg-dark {
+ background-color: #27233A !important;
+}
+
+.bg-hero {
+ background-color: #05204A;
+ color: #FFDB23;
+}
+
+/* CALLOUT */
+.bd-callout {
+ padding: 1.25rem;
+ margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+ border: 1px solid #e9ecef;
+ border-left-width: 0.25rem;
+ border-radius: 0.25rem;
+}
+
+.bd-callout h4 {
+ margin-bottom: 0.25rem;
+}
+
+.bd-callout p:last-child {
+ margin-bottom: 0;
+}
+
+.bd-callout code {
+ border-radius: 0.25rem;
+}
+
+.bd-callout + .bd-callout {
+ margin-top: -0.25rem;
+}
+
+.bd-callout-info {
+ border-left-color: #ABD2FA;
+}
+
+.bd-callout-warning {
+ border-left-color: #f0ad4e;
+}
+
+.bd-callout-danger {
+ border-left-color: #d9534f;
+}
+
+/* footer */
+footer a {
+ color: white;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+footer a:hover {
+ color: white;
+ text-decoration: underline;
+}
diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
new file mode 100644
index 00000000..6c5f2178
--- /dev/null
+++ b/src/containers/App/App.tsx
@@ -0,0 +1,73 @@
+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 } from "../../utils";
+import { useEffect, useState } from "react";
+
+const App = () => {
+ // Dark Mode toggle
+ const [isDarkMode, setIsDarkMode] = useState(true);
+ useEffect(() => {
+ document.body.className = isDarkMode ? 'dark-mode' : '';
+ }, [isDarkMode]);
+
+ const pathMapping = getPathMapping();
+ const currentPath =
+ location.pathname
+ .split(`${stringToSlug(import.meta.env.VITE_TEAM_NAME)}`)
+ .pop() || "/";
+
+ // Set Page Title
+ const title =
+ currentPath in pathMapping ? pathMapping[currentPath].title : "Not Found";
+
+ useEffect(() => {
+ document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
+ }, [title]);
+
+ return (
+ <>
+ {/* Navigation */}
+ <Navbar isDarkMode={isDarkMode} setIsDarkMode={setIsDarkMode} />
+
+ {/* Header and PageContent */}
+ <Routes>
+ {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 requested URL was not found on this server."
+ />
+ <NotFound />
+ </>
+ }
+ />
+ </Routes>
+
+ {/* Footer */}
+ {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
+ <Footer />
+ </>
+ );
+};
+
+export default App;
diff --git a/src/contents/attributions.tsx b/src/contents/attributions.tsx
new file mode 100644
index 00000000..32d82f51
--- /dev/null
+++ b/src/contents/attributions.tsx
@@ -0,0 +1,75 @@
+import { useEffect } from "react";
+
+export function Attributions() {
+ const teamID = import.meta.env.VITE_TEAM_ID;
+
+ useEffect(() => {
+ function listenToIframeHeight(e: MessageEvent) {
+ 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 + 100}px`;
+ }
+ }
+ }
+ }
+ window.addEventListener("message", listenToIframeHeight);
+ return () => {
+ window.removeEventListener("message", listenToIframeHeight);
+ };
+ }, []);
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div>
+ <p>Teams must use the standard Attributions form. To meet the attributions requirement, you must display the standard form on your Wiki by following the instructions <a href="https://competition.igem.org/deliverables/project-attribution" target="_blank">here</a></p>
+ </div>
+ <div className="bd-callout bd-callout-info">
+ <p>
+ 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.
+ </p>
+ <p>
+ Teams must use the standard Attributions form. To meet the
+ attributions requirement, you must display the standard form on
+ your Wiki by following the instructions here:
+ <a href="https://competition.igem.org/deliverables/project-attribution">
+ Project Attribution page
+ </a>
+ .
+ </p>
+ </div>
+ <div className="bd-callout bd-callout-info">
+ <h4>Bronze Medal Criterion #2</h4>
+ <p>
+ Describe what work your team members did and what other people did
+ for your project.
+ </p>
+ <p>
+ The form that has been embedded in an iframe in this page shows
+ your team's Project Attribution form. This page must keep the form
+ as it is.
+ </p>
+ <p>
+ If you use a different website framework, make sure to embed the
+ right URL for your team's form.
+ </p>
+ </div>
+ </div>
+ </div>
+ <iframe
+ style={{ width: "100%" }}
+ id="igem-attribution-form"
+ src={`https://teams.igem.org/wiki/${teamID}/attributions`}
+ />
+ </>
+ );
+}
diff --git a/src/contents/contribution.tsx b/src/contents/contribution.tsx
new file mode 100644
index 00000000..f5c49a4f
--- /dev/null
+++ b/src/contents/contribution.tsx
@@ -0,0 +1,34 @@
+export function Contribution() {
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Bronze Medal Criterion #4</h4>
+ <p>
+ Make a useful contribution for future iGEM teams. Use this page to
+ document that contribution.
+ </p>
+ <p>
+ If you are making a contribution by adding information to an
+ existing Part or creating a new Part, you must document your
+ contribution on the Part's Main Page on the{" "}
+ <a href="https://parts.igem.org/Main_Page">Registry</a> for your
+ team to be eligible for this criteria. You can use this page to
+ link to that part and include additional information about your
+ contribution.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/medals">
+ 2024 Medals Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
new file mode 100644
index 00000000..4cbc65ad
--- /dev/null
+++ b/src/contents/description.tsx
@@ -0,0 +1,390 @@
+export function Description() {
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <h2>Introduction</h2>
+ <hr />
+ <p>
+ It is evident that climate change is one of the most alarming threats of the 21st century as it affects both
+ our environment and health. Regarding the environment, climate change is responsible for extreme weather
+ conditions and natural phenomena such as storms, floods, drought, rising sea levels as well as the extinction
+ of species. Particularly, according to the United Nations, the pace at which species are currently
+ becoming extinct nowadays is 1.000 faster compared to the past [1].
+ </p>
+ <p>
+ However, the most frightening aspect of climate change is the impact that it has on our health since it
+ facilitates the spread of many infectious diseases, the majority of which are vector-borne [1]. The severity
+ of this issue can clearly be illustrated by the fact that more than 700.000 deaths per year can be attributed
+ to this type of infectious diseases [2]. Examples include: <i>Schistosomiasis</i> which is a water-borne
+ disease, <i>Malaria</i> which is parasitic infection transmitted via Anopheline mosquitos in the countries of
+ Asia, sub-Saharan Africa, and South America, <i>Dengue</i> which is transmitted via a mosquito [2]
+ and <i>Encephalitis</i> caused by the West Nile Virus (WNV) which is also mosquito-borne [3]. Some of the most
+ common clinical symptoms of these diseases include fever, liver failure, acute kidney injury, shock,
+ respiratory distress, muscle weakness, neurological symptoms including seizures or Altered Mental Status (AMS)
+ and Paralysis [4].
+ </p>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>References</h4>
+ <hr/>
+ <p>[1] <a href="https://www.who.int/news-room/fact-sheets/detail/climate-change-and-health" target="_blank">
+ https://www.who.int/news-room/fact-sheets/detail/climate-change-and-health</a>
+ </p>
+ <p>[2] <a href="https://www.who.int/news-room/fact-sheets/detail/vector-borne-diseases" target="_blank">
+ https://www.who.int/news-room/fact-sheets/detail/vector-borne-diseases</a>
+ </p>
+ <p>[3] Semenza, J. C., Rocklöv, J., & Ebi, K. L. (2022). Climate change and cascading risks from infectious
+ disease. Infectious diseases and therapy, 11(4), 1371-1390.</p>
+ <p>[4] Wiltz, P. (2023). Identifying and Managing Vector-Borne Diseases in Migrants and Recent Travelers in
+ the Emergency Department. Current Emergency and Hospital Medicine Reports, 11(2), 58-65.</p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <h2>Virology</h2>
+ <hr/>
+ <p>
+ WNV is an arbovirus in the family Flaviridae. Its spherical, enveloped capsid has a diameter of ≈50 nm and is
+ constituted of single-stranded RNA that encodes the capsid (C), envelope (E), and pre-membrane (prM) proteins,
+ as well as 7 nonstructural proteins that likely contribute to viral replication.
+ The virus has 2 genetic lineages: lineage 1 strains are found in North America, Europe, Africa, Asia, and
+ Australia; lineage 2 strains have been isolated only in sub-Saharan Africa and Madagascar. Lineage 1 strains
+ have been further divided into 4 clades: Kunjin, Indian, A, and B (which includes an Indian isolate). The
+ isolates in clade B, which includes strains from the United States, are all virulent in mice; lineage 2 and
+ other clades in lineage 1 comprise both virulent and attenuated strains.
+ Differences in pathogenicity may be related to nucleotides that code for specific regions in the prM, E, or
+ nonstructural proteins of the virus [1].
+ </p>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>References</h4>
+ <hr/>
+ <p>[1] Hayes, E. B., Sejvar, J. J., Zaki, S. R., Lanciotti, R. S., Bode, A. V., & Campbell, G. L. (2005).
+ Virology, pathology, and clinical manifestations of West Nile virus disease. Emerging infectious
+ diseases, 11(8), 1174.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <h2>Ecology</h2>
+ <hr/>
+ <p>
+ The first reports of WNV were in Uganda in 1937. As of today, the WNV is found all over the world [1]. WNV is
+ an arbovirus that is amplified in a bird-mosquito-bird enzootic transmission cycle, with wild birds as the
+ primary hosts since they can develop high viremia to infect mosquitoes [2,3]. Humans and other mammals are
+ considered accidental or dead-end hosts due to the low and transient viral levels in the bloodstream and
+ therefore can't infect mosquitoes. Transmission to mammals and especially to humans is mainly carried out by
+ the Culex spp mosquitoes [3]. Due to the mosquito's life cycle outbreaks tend to be associated with late
+ summer and fall but can also occur throughout the year in warmer places [1]. WNV is classified into eight
+ lineages with the most pathogenic strains belonging to lineages 1 and 2, both of which can be found in Europe
+ [2]. After a mosquito feed on an infected competent host, the arbovirus replicates within it and can then be
+ transmitted to a susceptible host through salivary gland secretions [3]. Although, no human-to-human
+ transmission through casual contact has been documented, there have been cases of WNV transmission through
+ organ transplant, blood transfusion, intrauterine and through breast milk [4,5].
+ </p>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>References</h4>
+ <hr/>
+ <p>[1] Clark, M. B., & Schaefer, T. J. (2019). West Nile Virus.
+ </p>
+ <p>[2] Fiacre, L., Pagès, N., Albina, E., Richardson, J., Lecollinet, S., & Gonzalez, G. (2020). Molecular
+ determinants of West Nile virus virulence and pathogenesis in vertebrate and invertebrate hosts.
+ International journal of molecular sciences, 21(23), 9117.
+ </p>
+ <p>[3] Chancey, C., Grinev, A., Volkova, E., & Rios, M. (2015). The global ecology and epidemiology of West
+ Nile virus. BioMed research international, 2015(1), 376230.
+ </p>
+ <p>[4] Hayes, E. B., Komar, N., Nasci, R. S., Montgomery, S. P., O'Leary, D. R., & Campbell, G. L. (2005).
+ Epidemiology and transmission dynamics of West Nile virus disease. Emerging infectious diseases, 11(8),
+ 1167.
+ </p>
+ <p>[5] <a href="http://www.malwest.gr/en-us/westnilevirus/informationforhealthcareprofessionals/basicpoints.aspx" target="_blank">
+ http://www.malwest.gr/en-us/westnilevirus/informationforhealthcareprofessionals/basicpoints.aspx</a>
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <h2>West Nile virus infection - Transmission period 2024</h2>
+ <hr/>
+ <p>
+ Outbreaks of WNV infection occur in many countries worldwide, including many European countries, on an annual
+ basis. In the years 2010-2014 and 2017-2023, cases of WNV infection were recorded in various regions of our
+ country, during the summer and autumn months, while circulation of the virus has been recorded in all regions.
+ This suggests that WNV has settled in our country as well as in other European countries. Therefore, the
+ recurrence of incidents in our country and other European and neighbouring countries, during the current 2024
+ transmission season (as well as subsequent seasons), is likely and expected.
+ </p>
+ <p>
+ As the epidemiology of the virus is complex and determined by many factors, the areas of circulation of the
+ virus and the areas of occurrence of cases during the current 2024 season (and in each transmission season)
+ cannot be predicted with certainty. Therefore the Greek NHO recommends the observance of individual protection
+ measures against mosquitoes, throughout the territory, and the period of circulation of mosquitoes.
+ </p>
+ <p>
+ In summary, the cases of West Nile virus infection diagnosed and declared in our country, in recent years
+ (2010 - 2023), are presented in the following Table [1]:
+ </p>
+ <table className="table">
+ <thead>
+ <tr>
+ <th>WNV infection cases (per year)</th>
+ <th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th><th>2017</th>
+ <th>2018</th><th>2019</th><th>2020</th><th>2021</th><th>2022</th><th>2023</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Total number of cases</td>
+ <td>262</td><td>100</td><td>161</td><td>86</td><td>15</td><td>0</td><td>0</td><td>48</td><td>317<sup>2</sup></td>
+ <td>227</td><td>145</td><td>59</td><td>286</td><td>162</td>
+ </tr>
+ <tr>
+ <td>Cases with CNS manifestations<sup>1</sup></td>
+ <td>197</td><td>75</td><td>109</td><td>51</td><td>14</td><td>0</td><td>0</td><td>28</td><td>243</td>
+ <td>140</td><td>116</td><td>38</td><td>184</td><td>119</td>
+ </tr>
+ <tr>
+ <td>Cases without CNS manifestations</td>
+ <td>65</td><td>25</td><td>52</td><td>35</td><td>1</td><td>0</td><td>0</td><td>20</td><td>74</td>
+ <td>87</td><td>29</td><td>21</td><td>102</td><td>43</td>
+ </tr>
+ <tr>
+ <td>Number of deaths</td>
+ <td>35</td><td>9</td><td>18</td><td>11</td><td>6</td><td>0</td><td>0</td><td>5</td><td>51<sup>3</sup></td>
+ <td>35</td><td>23</td><td>8</td><td>33</td><td>23</td>
+ </tr>
+ </tbody>
+ </table>
+ <p>
+ <b>Table:</b> Number of reported cases of WNV infection with and without central nervous system manifestations (CNS),
+ and number of deaths among cases with WNV infection, Greece, 2010 - 2023
+ </p>
+ <p>
+ <sup>1</sup> Encephalitis and/or meningitis and/or acute flaccid paralysis.
+ </p>
+ <p>
+ <sup>2</sup> One case infected in 2018 but diagnosed in 2019 is also included.
+ </p>
+ <p>
+ <sup>3</sup> One death of a hospitalized patient (infected in 2018) which occurred in 2019 is also included.
+ </p>
+ <div className="mt-4 mb-4">
+ <img src="https://static.igem.wiki/teams/5490/description/description-graph-1.png" alt="Example" style={{ maxWidth: '50%', height: 'auto' }} />
+ </div>
+ <p>
+ <b>Graph:</b> Number of reported cases of WNV infection with and without central nervous system manifestations (CNS),
+ and number of deaths among cases with WNV infection, Greece, 2010 - 2023
+ </p>
+ <p>
+ The majority of people infected with the virus do not get sick at all or only have mild disease, while a few
+ people (less than 1% of those infected) develop severe disease that affects the nervous system (mainly
+ encephalitis or meningitis). Older people (over 50 years) are more at risk of becoming seriously ill, as well
+ as immunosuppressed people and chronic underlying diseases. The epidemiological surveillance of the disease,
+ the timely implementation of appropriate integrated mosquito management programs and the adoption of personal
+ protection measures against mosquitoes are internationally the most appropriate measures for the prevention
+ and control of the disease. In this context, the vigilance of health professionals and the continued vigilance
+ of local and national authorities are deemed necessary.
+ </p>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>References</h4>
+ <hr/>
+ <p>[1] <a href="https://eody.gov.gr/en/disease/west-nile-virus/" target="_blank">
+ https://eody.gov.gr/en/disease/west-nile-virus/</a>
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <h2>Pathophysiology</h2>
+ <hr/>
+ <p>
+ WNV infection leads to inflammatory responses in the keratinocytes such as the induction of type I or type III
+ IFNs or the secretion of cytokines. At later stages, WNV is internalized by skin dendritic cells or Langerhans
+ cells which then migrate to the lymph nodes, where the virus replicates, and later to the visceral organs [1].
+ The incubation period of the WNV varies from 4-14 days. Most virulent WNV strains are inherently
+ neuroinvasive and spread to the central nervous system through mechanisms that include a direct crossing of
+ the blood-brain barrier, passive transport through the endothelium, infected macrophages crossing the
+ blood-brain barrier or direct axonal retrograde transport. In the CNS the virus primarily induces inflammation
+ and a subsequent loss of neurons within the spinal cord and brainstem gray matter. [2]. Encephalitis is the
+ most severe neurological complication that can occur and can be fatal in the case of the elderly and
+ immunocompromised persons [1].
+ </p>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>References</h4>
+ <hr/>
+ <p>[1] Fiacre, L., Pagès, N., Albina, E., Richardson, J., Lecollinet, S., & Gonzalez, G. (2020). Molecular
+ determinants of West Nile virus virulence and pathogenesis in vertebrate and invertebrate hosts.
+ International journal of molecular sciences, 21(23), 9117.
+ </p>
+ <p>[2] Clark, M. B., & Schaefer, T. J. (2019). West Nile Virus.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <h2>The problem</h2>
+ <hr/>
+ <p>
+ With the ongoing climate crisis and the vectors (mosquitoes) slowly flooding the countries of southern Europe,
+ we expect an increase in cases of WNV with effects on the central nervous system. Especially the age groups
+ over 50 and the immunocompromised are more and more at risk. There are many ways to limit the issue and
+ protect public health by focusing on the vectors, but with cases increasing every year, the need for effective
+ and targeted treatment for the virus begins to emerge.
+ </p>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <h2>Our Solution</h2>
+ <hr/>
+ <h3>ATROPOS</h3>
+ <p>
+ Our system, ATROPOS, is heavily based on the CRISPR-Cas13 RNA editing system; this specific technology has
+ been widely used in research, including -but not limited to interference with viral infection. We propose a
+ novel approach to use CRISPR-Cas13 for targeting and frittering viral RNA, introducing our construct to neural
+ cells. Our construct (plasmid vector) will consist of promoters, regulated by a calcium-dependent
+ transcription factor (a synthetic NF-AT), the CasRx, and crRNA (gRNA) sequences. The novelty of our approach
+ lies in the sophistication of our proposed regulatory mechanism, which is based on the neural cells' natural
+ response to WNV infection; more specifically, upon the endocytosis of the virus, the cytosolic
+ calcium concentration increases rapidly. Our system takes advantage of this increase, to promote the
+ transcription of the Cas13 and the gRNA sequences. ATROPOS will transfect the human CNS, via a herpetic
+ vector, that will stay inside the cells for on average 7 days before it degrades [1].
+ </p>
+ <h3>CRISPR-Cas13</h3>
+ <p>
+ The CRISPR-Cas13 system has two components: the Cas13 protein effector and a CRISPR RNA (sgRNA) of 64 to 66
+ nucleotides. The Cas13d protein is composed of crRNA-recognition (REC) lobe and nuclease (NUC) domain. The REC
+ lobe contains an N-terminal domain (NTD) a domain called helix-1 or Helical-1 and a domain called helix-2 or
+ Helical-2. The NTD is a non-conserved region of Cas13d that consists of a larger subdomain containing an
+ ordered fragment composed of seven α helices and a disordered fragment, and a smaller subdomain containing
+ three α helices, a β-hairpin and a β-sheet [2]. The CRISPR-Cas13 ribonucleases have been widely applied for
+ RNA knockdown and transcriptional modulation owing to their high programmability and specificity [3]. The
+ system also provides various applications in various organisms through different RNA technologies such as RNA
+ interference, RNA detection, RNA editing, and RNA targeting [4].
+ </p>
+ <h3>Guide RNAs</h3>
+ <p>
+ For the CRISPR guide RNAs (gRNAs) we forked and modified a bioinformatics pipeline developed by Keng et
+ al.[5]. The pipeline accepts as input WNV RNA sequences, generates, and scores gRNAs to assist the creation of
+ Atropos. The generation creates a pool of all possible 23-mers from a sequence chosen as the reference. The
+ gRNAs in the pool are scored based on three criteria: a <i>Guide Score</i> predicted via a Random-Forest
+ algorithm developed by Wessels et al.[6], a <i>Conservation Score</i> and
+ an <i>Intolerant Region Conservation Score</i>. Conservation scores are calculated based on all the input RNA
+ sequences aligned to the reference sequence. These three scores are normalized and summed with weights, in a
+ total Weighted Score by which final gRNA selection is done. Additionally, the pipeline filters out any
+ candidate gRNAs that contain homopolymers or have off-targets in the human genome. Our modifications of the
+ pipeline include usage of WNV sequences as input, a few bug-fixes and some changes to facilitate the
+ installation of the pipeline.
+ </p>
+ <h3>Calsium Mechanism</h3>
+ <p>
+ Calcium is perhaps the most universal secondary messenger in nature, utilized by cells in various pathways
+ such as the activation of transcription factors and kinase pathways. Upon viral infection, cellular
+ homeostasis is disrupted, leading to the upregulation or downregulation of numerous genes. This occurs
+ through various intracellular processes, including the activation of kinase pathways, as the cell attempts to
+ inhibit viral replication while the virus endeavors to hijack the cellular machinery [7]. It is well
+ established that following viral infection, one of the primary mechanisms by which viruses create a more
+ favorable environment within the cell is by increasing calcium concentration in the cytosol. This calcium can
+ originate from outside the cell or from the endoplasmic reticulum. By modulating calcium levels, apoptotic
+ mechanisms can either be suppressed or activated, such as through calcium flux into the mitochondria [8].
+ </p>
+ <p>
+ WNV is no exception, as it has been shown to elevate intracellular calcium levels by enhancing the influx from
+ the extracellular environment. Although it is likely that WNV can also tap into ER calcium stores, evidence
+ for this remains limited. The importance of calcium for viral processes is underscored by the fact that many
+ antiviral drugs have been designed to inhibit the ability of viruses to activate various proteins that
+ increase calcium flux [9]. In synthetic biology, calcium has been used to control gene expression.
+ Specifically, calcium-dependent transcription factors, like NFAT (nuclear factor of activated T-cells), have
+ been employed in CRISPR applications. We plan to use a synthetic version of NFAT for similar purposes [10].
+ Natural NFAT is particularly valuable because it can distinguish between homeostatic calcium levels and those
+ associated with pathogenesis [11].
+ </p>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>References</h4>
+ <hr/>
+ <p>[1] MesÌŒko, M., Lebar, T., Dekleva, P., Jerala, R., & BencÌŒina, M. (2020). Engineering and rewiring of a
+ calcium-dependent signaling pathway. ACS synthetic biology, 9(8), 2055-2065.
+ </p>
+ <p>[2] Gupta, R., Ghosh, A., Chakravarti, R., Singh, R., Ravichandiran, V., Swarnakar, S., & Ghosh, D.
+ (2022). Cas13d: a new molecular scissor for transcriptome engineering. Frontiers in Cell and Developmental
+ Biology, 10, 866800.
+ </p>
+ <p>[3] Deng, X., Osikpa, E., Yang, J., Oladeji, S. J., Smith, J., Gao, X., & Gao, Y. (2023). Structural
+ basis for the activation of a compact CRISPR-Cas13 nuclease. Nature Communications, 14(1), 5845.
+ </p>
+ <p>[4] Kavuri, N. R., Ramasamy, M., Qi, Y., & Mandadi, K. (2022). Applications of CRISPR/Cas13-based RNA
+ editing in plants. Cells, 11(17), 2665.
+ </p>
+ <p>[5] Keng, C. T., Yogarajah, T., Lee, R. C. H., Muhammad, I. B. H., Chia, B. S., Vasandani, S. R., ... &
+ Chew, W. L. (2023). AAV-CRISPR-Cas13 eliminates human enterovirus and prevents death of infected mice.
+ EBioMedicine, 93.
+ </p>
+ <p>[6] Wessels, H. H., Méndez-Mancilla, A., Guo, X., Legut, M., Daniloski, Z., & Sanjana, N. E. (2020).
+ Massively parallel Cas13 screens reveal principles for guide RNA design. Nature biotechnology, 38(6),
+ 722-727.
+ </p>
+ <p>[7] Maximova, O. A., Sturdevant, D. E., Kash, J. C., Kanakabandi, K., Xiao, Y., Minai, M., ... & Pletnev,
+ A. G. (2021). Virus infection of the CNS disrupts the immune-neural-synaptic axis via induction of
+ pleiotropic gene regulation of host responses. Elife, 10, e62273.
+ </p>
+ <p>[8] Chen, X., Cao, R., & Zhong, W. (2019). Host calcium channels and pumps in viral infections. Cells,
+ 9(1), 94.
+ </p>
+ <p>[9] Scherbik, S. V., & Brinton, M. A. (2010). Virus-induced Ca2+ influx extends survival of west nile
+ virus-infected cells. Journal of virology, 84(17), 8721-8731.
+ </p>
+ <p>[10] Arpino, J. A., Hancock, E. J., Anderson, J., Barahona, M., Stan, G. B. V., Papachristodoulou, A., &
+ Polizzi, K. (2013). Tuning the dials of synthetic biology. Microbiology, 159(Pt_7), 1236-1253.
+ </p>
+ <p>[11] Kipanyula, M. J., Kimaro, W. H., & Etet, P. F. S. (2016). The emerging roles of the
+ calcineurin-nuclear factor of activated T-lymphocytes pathway in nervous system functions and diseases.
+ Journal of aging research, 2016(1), 5081021.
+ </p>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/education.tsx b/src/contents/education.tsx
new file mode 100644
index 00000000..59486efe
--- /dev/null
+++ b/src/contents/education.tsx
@@ -0,0 +1,48 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Education() {
+ const links: InspirationLink[] = [
+ { year: 2020, teamName: "CCA_San_Diego", pageName: "Education" },
+ { year: 2020, teamName: "Lambert_GA", pageName: "Education" },
+ { year: 2020, teamName: "Stanford", pageName: "Education" },
+ { year: 2020, teamName: "Waseda", pageName: "Education" },
+ { year: 2020, teamName: "Fudan", pageName: "Education" },
+ { year: 2020, teamName: "Toulouse_INSA-UPS", pageName: "Education" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Best Education</h4>
+ <p>
+ How have you developed new opportunities to include more people in
+ shaping synthetic biology? 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. Document your approach and what
+ was learned by everyone involved to compete for this award.
+ </p>
+ <p>
+ To compete for the Best Education prize, select the prize on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>{" "}
+ and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </>
+ );
+}
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
new file mode 100644
index 00000000..32accee4
--- /dev/null
+++ b/src/contents/engineering.tsx
@@ -0,0 +1,34 @@
+export function Engineering() {
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Silver Medal Criterion #1</h4>
+ <p>
+ Demonstrate engineering success in a part of your project by going
+ through at least one iteration of the engineering design cycle.
+ This achievement should be distinct from your Contribution for
+ Bronze.
+ </p>
+ <p>
+ If you plan to show engineering success by creating a new Part
+ that has been shown to work as expected, you must document your
+ contribution on the Part's Main Page on the{" "}
+ <a href="https://parts.igem.org/Main_Page">Registry</a> for your
+ team to be eligible for this criteria.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/medals">
+ 2024 Medals Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/entrepreneurship.tsx b/src/contents/entrepreneurship.tsx
new file mode 100644
index 00000000..7413fe61
--- /dev/null
+++ b/src/contents/entrepreneurship.tsx
@@ -0,0 +1,79 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Entrepreneurship() {
+ const links: InspirationLink[] = [
+ { year: 2019, teamName: "UCopenhagen", pageName: "Entrepreneurship" },
+ { year: 2019, teamName: "Thessaly", pageName: "Entrepreneurship" },
+ { year: 2019, teamName: "NCKU_Tainan", pageName: "Entrepreneurship" },
+ { year: 2020, teamName: "TAS_Taipei", pageName: "Entrepreneurship" },
+ { year: 2020, teamName: "KCL_UK", pageName: "Entrepreneurship" },
+ { year: 2020, teamName: "Calgary", pageName: "Entrepreneurship" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Best Supporting Entrepreneurship</h4>
+ <p>
+ The Best Supporting Entrepreneurship award recognizes exceptional
+ effort to build a business case and commercialize an iGEM project.
+ This award is open to all teams to show that entrepreneurship is
+ something all teams can aspire to do with their project. This
+ award can go to an new project, or to a previous project that a
+ team aimed to commercialize. Have you filed a provisional patent
+ on your project/device/process? Have you raised money to build and
+ ship products? Have you pitched your idea to investors and
+ received money? As always in iGEM, the aim is to impress the
+ judges!
+ </p>
+ <p>
+ To compete for the Best Supporting Entrepreneurship prize, select
+ the prize on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>{" "}
+ and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>Patents and intellectual property</h2>
+ <hr />
+ <p>
+ If your team is seriously considering commercializing and looking
+ into building a company after the competition, you may want to look
+ at how you are going to protect your work and secure investment.
+ Investors will usually require some form of intellectual protection,
+ so you may want to investigate how to apply for a patent or
+ provisional patent in your country and region before disclosing your
+ project at iGEM. Remember that you can only be evaluated in iGEM
+ based on what you share on your wiki and at the Jamboree, so any
+ work you don't present can't count towards your project.
+ </p>
+ <p>
+ This is an area where we are different as we care about sharing,
+ openness and contributing to the community and investors don't
+ always agree with these values. It is up to you and your team to
+ decide what to do. Remember that most universities have a
+ commercialization department and that you can talk to them before
+ coming to a decision.
+ </p>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/experiments.tsx b/src/contents/experiments.tsx
new file mode 100644
index 00000000..09519bce
--- /dev/null
+++ b/src/contents/experiments.tsx
@@ -0,0 +1,34 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Experiments() {
+ const links: InspirationLink[] = [
+ { year: 2019, teamName: "Nantes", pageName: "Experiments" },
+ { year: 2019, teamName: "TU_Eindhoven", pageName: "Experiments" },
+ { year: 2019, teamName: "Mingdao", pageName: "Demonstrate" },
+ { year: 2020, teamName: "Amsterdam", pageName: "Experiments" },
+ { year: 2020, teamName: "NCTU_Formosa", pageName: "Experiments" },
+ { year: 2020, teamName: "USAFA", pageName: "Experiments" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>What should this page contain?</h2>
+ <hr />
+ <p>
+ Describe the research, experiments, and protocols you used in your
+ iGEM project. These should be detailed enough for another team to
+ repeat your experiments.
+ </p>
+ <p>
+ If you made Parts this year, please remember to put all information,
+ characterization, and measurement data on the Part's Main Page on
+ the <a href="https://parts.igem.org/Main_Page">Registry</a>.
+ </p>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/hardware.tsx b/src/contents/hardware.tsx
new file mode 100644
index 00000000..ea272f20
--- /dev/null
+++ b/src/contents/hardware.tsx
@@ -0,0 +1,65 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Hardware() {
+ const links: InspirationLink[] = [
+ { year: 2018, teamName: "Valencia_UPV", pageName: "Hardware" },
+ { year: 2018, teamName: "Unesp_Brazil", pageName: "Hardware" },
+ { year: 2019, teamName: "BIT", pageName: "Hardware" },
+ { year: 2019, teamName: "Bielefeld-CeBiTec", pageName: "Hardware" },
+ { year: 2019, teamName: "Nanjing-China", pageName: "Hardware" },
+ { year: 2020, teamName: "Vilnius-Lithuania", pageName: "Hardware" },
+ { year: 2020, teamName: "ZJUT_China_B", pageName: "Hardware" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Best Hardware</h4>
+ <p>
+ This is a prize for the team that has developed a piece of
+ hardware for synthetic biology. Hardware in iGEM should make
+ synthetic biology based on standard parts easier, faster, better
+ or more accessible to our community. Did your team make a sensor
+ to help teams characterize parts? Did you make a robot that can
+ help teams perform experiments or do cloning more easily? Tell us
+ what your team did for this award!
+ </p>
+ <p>
+ To compete for the Best Hardware prize, select the prize on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>{" "}
+ and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>Overview</h2>
+ <hr />
+ <p>
+ In addition to encouraging teams to work with DNA parts and build
+ biological devices in the lab, iGEM also encourages other types of
+ technical solutions for synthetic biology. This can include physical
+ devices (hardware) related to robotic assembly, microfluidics,
+ low-cost measurement devices, to name a few examples. There are many
+ exciting opportunities for hardware innovation in synthetic biology.
+ </p>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/home.tsx b/src/contents/home.tsx
new file mode 100644
index 00000000..62283acd
--- /dev/null
+++ b/src/contents/home.tsx
@@ -0,0 +1,25 @@
+//import { Inspirations, InspirationLink } from "../components";
+import { Link } from "react-router-dom";
+
+export function Home() {
+ return (
+ <>
+ <div className="row">
+ <div className="col">
+ <h2>Wiki under construction!</h2>
+ <hr />
+ <p>See you soon!</p>
+ </div>
+ </div>
+ <div className="row">
+ <div className="d-flex flex-column justify-content-center align-items-center">
+ <h2></h2>
+ <hr />
+ <Link to="/description" className="btn btn-secondary btn-lg">
+ Project Description
+ </Link>
+ </div>
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
new file mode 100644
index 00000000..e3ec3e8a
--- /dev/null
+++ b/src/contents/human-practices.tsx
@@ -0,0 +1,109 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function HumanPractices() {
+ const links: InspirationLink[] = [
+ { year: 2019, teamName: "Thessaly", pageName: "Human_Practices" },
+ { year: 2019, teamName: "Linkoping_Sweden", pageName: "Human_Practices" },
+ { year: 2019, teamName: "FDR-HB_Peru", pageName: "Human_Practices" },
+ { year: 2020, teamName: "William_and_Mary", pageName: "Human_Practices" },
+ { year: 2020, teamName: "Rochester", pageName: "Human_Practices" },
+ { year: 2020, teamName: "Leiden", pageName: "Human_Practices" },
+ { year: 2020, teamName: "Baltimore_BioCrew", pageName: "Human_Practices" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Silver Medal Criterion #2</h4>
+ <p>
+ Explain how you have determined your work is responsible and good
+ for the world.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/medals">
+ 2024 Medals Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+
+ <div className="bd-callout bd-callout-info">
+ <h4>Best Integrated Human Practices</h4>
+ <p>
+ How does your project affect society and how does society
+ influence the direction of your project? How might ethical
+ considerations and stakeholder input guide your project purpose
+ and design and the experiments you conduct in the lab? How does
+ this feedback enter into the process of your work all through the
+ iGEM competition? Document a thoughtful and creative approach to
+ exploring these questions and how your project evolved in the
+ process to compete for this award!
+ </p>
+ <p>
+ To compete for the Best Integrated Human Practices prize, select
+ the prize on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>{" "}
+ and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>Overview</h2>
+ <hr />
+ <p>
+ At iGEM we believe societal considerations should be upfront and
+ integrated throughout the design and execution of synthetic biology
+ projects. “Human Practices†refers to iGEM teams' efforts to
+ actively consider how the world affects their work and their work
+ affects the world. Through your Human Practices activities, your
+ team should demonstrate how you have thought carefully and
+ creatively about whether your project is responsible and good for
+ the world. We invite you to explore issues relating (but not
+ limited) to the ethics, safety, security, and sustainability of your
+ project, and to show how this exploration feeds back into your
+ project purpose, design, and execution.
+ </p>
+ <p>
+ Please note you can compete for the Silver Medal criterion #2 and
+ the Best Integrated Human Practices prize with this page.
+ </p>
+ <p>
+ For more information, please see the{" "}
+ <a href="https://responsibility.igem.org/human-practices/what-is-human-practices">
+ Human Practices Hub
+ </a>
+ .
+ </p>
+ <p>
+ On this page, your team should document all of your Human Practices
+ work and activities. You should write about the Human Practices
+ topics you considered in your project, document any activities you
+ conducted to explore these topics (such as engaging with experts and
+ stakeholders), describe why you took a particular approach
+ (including referencing any work you built upon), and explain if and
+ how you integrated takeaways from your Human Practices work back
+ into your project purpose, design and/or execution.
+ </p>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/inclusivity.tsx b/src/contents/inclusivity.tsx
new file mode 100644
index 00000000..0d8bfff2
--- /dev/null
+++ b/src/contents/inclusivity.tsx
@@ -0,0 +1,66 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Inclusivity() {
+ const links: InspirationLink[] = [
+ { year: 2020, teamName: "Fudan", pageName: "Inclusion" },
+ { year: 2020, teamName: "CCU_Taiwan", pageName: "Inclusion" },
+ { year: 2020, teamName: "Concordia-Montreal", pageName: "Inclusion" },
+ { year: 2020, teamName: "CLS_CLSG_UK", pageName: "Inclusion" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Inclusivity Award</h4>
+ <p>
+ The Inclusivity Award recognizes exceptional efforts to include
+ people with diverse identities in scientific research. Who is
+ allowed to have a voice in iGEM, synthetic biology, and science
+ more broadly? How have you developed new opportunities to
+ eliminate barriers and allow more people to contribute to,
+ participate in, and/or be represented by these communities? To
+ compete for this prize, activities do not have to be directly
+ related to your team’s project. Document your approach, how you
+ improved inclusivity, and what was learned.
+ </p>
+ <p>
+ To compete for the Inclusivity award, select the prize on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>{" "}
+ and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>Overview</h2>
+ <hr />
+ <p>
+ We should all recognize the importance of building an open and
+ welcoming scientific community. A more diverse community involved in
+ creating knowledge and technology is more likely to produce a more
+ equitable and representative system. Every individual, regardless of
+ background or experience, should have an equal opportunity to engage
+ with scientific knowledge and technological development. Everyone
+ should be able to share their opinions on the societal implications
+ of research.
+ </p>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/index.tsx b/src/contents/index.tsx
new file mode 100644
index 00000000..1070578f
--- /dev/null
+++ b/src/contents/index.tsx
@@ -0,0 +1,25 @@
+export * from "./home.tsx";
+// Team
+export * from "./team.tsx";
+export * from "./attributions.tsx";
+// Project
+export * from "./contribution.tsx";
+export * from "./description.tsx";
+export * from "./engineering.tsx";
+export * from "./experiments.tsx";
+export * from "./notebook.tsx";
+export * from "./results.tsx";
+// Safety
+export * from "./safety.tsx";
+// Human Practices
+export * from "./human-practices.tsx";
+// Awards
+export * from "./education.tsx";
+export * from "./entrepreneurship.tsx";
+export * from "./hardware.tsx";
+export * from "./inclusivity.tsx";
+export * from "./measurement.tsx";
+export * from "./model.tsx";
+export * from "./plant.tsx";
+export * from "./software.tsx";
+export * from "./sustainable.tsx";
diff --git a/src/contents/measurement.tsx b/src/contents/measurement.tsx
new file mode 100644
index 00000000..1443244e
--- /dev/null
+++ b/src/contents/measurement.tsx
@@ -0,0 +1,65 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Measurement() {
+ const links: InspirationLink[] = [
+ { year: 2018, teamName: "UC_Davis", pageName: "Measurement" },
+ { year: 2019, teamName: "Newcastle", pageName: "Measurement" },
+ { year: 2019, teamName: "Evry_Paris-Saclay", pageName: "Measurement" },
+ { year: 2019, teamName: "GENAS_China", pageName: "Measurement" },
+ { year: 2020, teamName: "Calgary", pageName: "Measurement" },
+ { year: 2020, teamName: "CSMU_Taiwan", pageName: "Measurement" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Best Measurement</h4>
+ <p>
+ Measurements are critical to scientific communication and
+ advancement. Well-reported measurements are the only way to show
+ whether hardware is functioning correctly, whether data are
+ reliable, and whether a result is actually important. There is a
+ high value in identifying appropriate targets for measurement,
+ collecting precise measurements, and reporting results clearly and
+ with appropriate units. Document your careful measurement efforts
+ and you could win this award!
+ </p>
+ <p>
+ To compete for the Best Measurement prize, select the prize on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>{" "}
+ and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>Overview</h2>
+ <hr />
+ <p>
+ {" "}
+ If you've done excellent work in measurement, you should consider
+ nominating your team for this special prize. Synthetic Biology needs
+ great measurement approaches for characterizing parts, and efficient
+ new methods for characterizing many parts at once. If you've done
+ something exciting in the area of Measurement, describe it here!
+ </p>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/model.tsx b/src/contents/model.tsx
new file mode 100644
index 00000000..bb8cd2f9
--- /dev/null
+++ b/src/contents/model.tsx
@@ -0,0 +1,67 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Model() {
+ const links: InspirationLink[] = [
+ { year: 2018, teamName: "GreatBay_China", pageName: "Model" },
+ { year: 2018, teamName: "Leiden", pageName: "Model" },
+ { year: 2019, teamName: "IISER_Kolkata", pageName: "Model" },
+ { year: 2019, teamName: "Exeter", pageName: "Model" },
+ { year: 2019, teamName: "Mingdao", pageName: "Model" },
+ { year: 2020, teamName: "Harvard", pageName: "Model" },
+ { year: 2020, teamName: "Leiden", pageName: "Model" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Best Model</h4>
+ <p>
+ Models and computer simulations can help us understand the
+ function and operation of BioBrick Parts and Devices. Simulation
+ and modeling are critical engineering skills that can contribute
+ to project design or provide a better understanding of the modeled
+ process. These processes are even more useful and/or informative
+ when real world data are included in the model. This award is for
+ teams who build a model of their system and use it to inform
+ system design or simulate expected behavior before, or in
+ conjunction with, experiments in the wetlab.
+ </p>
+ <p>
+ To compete for the Best Model prize, select the prize on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>{" "}
+ and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>Overview</h2>
+ <hr />
+ <p>
+ Mathematical models and computer simulations provide a great way to
+ describe the function and operation of Parts and Devices. Synthetic
+ Biology is an engineering discipline, and part of engineering is
+ simulation and modeling to determine the behavior of your design
+ before you build it. Designing and simulating can be iterated many
+ times in a computer before moving to the lab.
+ </p>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/notebook.tsx b/src/contents/notebook.tsx
new file mode 100644
index 00000000..0a96c528
--- /dev/null
+++ b/src/contents/notebook.tsx
@@ -0,0 +1,31 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Notebook() {
+ const links: InspirationLink[] = [
+ { year: 2018, teamName: "Munich", pageName: "Notebook" },
+ { year: 2019, teamName: "Georgia_State", pageName: "Notebook" },
+ { year: 2019, teamName: "Newcastle", pageName: "Notebook" },
+ { year: 2020, teamName: "IISER-Pune-India", pageName: "Notebook" },
+ { year: 2020, teamName: "Lund", pageName: "Notebook" },
+ { year: 2020, teamName: "NOVA_LxPortugal", pageName: "Notebook" },
+ { year: 2020, teamName: "RDFZ-China", pageName: "NoteBook" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>What should this page contain?</h2>
+ <hr />
+ <ul>
+ <li>Chronological notes of what your team is doing.</li>
+ <li>Brief descriptions of daily important events.</li>
+ <li>Pictures of your progress.</li>
+ <li>Mention who participated in what task.</li>
+ </ul>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/plant.tsx b/src/contents/plant.tsx
new file mode 100644
index 00000000..e9c5dafa
--- /dev/null
+++ b/src/contents/plant.tsx
@@ -0,0 +1,48 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Plant() {
+ const links: InspirationLink[] = [
+ { year: 2018, teamName: "Cardiff_Wales", pageName: "Plant" },
+ { year: 2019, teamName: "Sorbonne_U_Paris", pageName: "Plant" },
+ { year: 2019, teamName: "TU_Kaiserslautern", pageName: "Plant" },
+ { year: 2019, teamName: "Humboldt_Berlin", pageName: "Plant" },
+ { year: 2020, teamName: "Sorbonne_U_Paris", pageName: "Plant" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Best Plant Synthetic Biology</h4>
+ <p>
+ This award is designed to celebrate exemplary work done in plant
+ synthetic biology. Did you build a project in a plant chassis? Did
+ you submit plant parts to the Registry? This award could also be
+ given to a team working with algae or another photosynthetic
+ eukaryotic chassis. Show us what you made and remember to adhere
+ to iGEM safety guidelines!
+ </p>
+ <p>
+ To compete for the Best Plant Synthetic Biology prize, select the
+ prize on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>{" "}
+ and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </>
+ );
+}
diff --git a/src/contents/results.tsx b/src/contents/results.tsx
new file mode 100644
index 00000000..feb900e2
--- /dev/null
+++ b/src/contents/results.tsx
@@ -0,0 +1,83 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Results() {
+ const links: InspirationLink[] = [
+ { year: 2019, teamName: "Newcastle", pageName: "Results" },
+ { year: 2019, teamName: "Munich", pageName: "Results" },
+ { year: 2019, teamName: "Tec-Chihuahua", pageName: "Results" },
+ { year: 2020, teamName: "Aalto-Helsinki", pageName: "Results" },
+ { year: 2020, teamName: "GreatBay_SCIE", pageName: "Results" },
+ { year: 2020, teamName: "Queens_Canada", pageName: "Results" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col-lg-5">
+ <h2>What should this page contain?</h2>
+ <hr />
+ <ul>
+ <li>Clearly and objectively describe the results of your work.</li>
+ <li>Future plans for the project.</li>
+ <li>Considerations for replicating the experiments.</li>
+ </ul>
+ </div>
+ <div className="col-lg-7">
+ <h2>Describe what your results mean</h2>
+ <hr />
+ <ul>
+ <li>
+ Interpretation of the results obtained during your project. Don't
+ just show a plot/figure/graph/other, tell us what you think the
+ data means. This is an important part of your project that the
+ judges will look for.
+ </li>
+ <li>
+ Show data, but remember{" "}
+ <b>
+ all measurement and characterization data must also be on the
+ Part's Main Page on the{" "}
+ <a href="https://parts.igem.org/Main_Page">Registry</a>.
+ </b>{" "}
+ Otherwise these data will not be in consideration for any medals
+ or part awards!
+ </li>
+ <li>
+ Consider including an analysis summary section to discuss what
+ your results mean. Judges like to read what you think your data
+ means, beyond all the data you have acquired during your project.
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>Project Achievements</h2>
+ <hr />
+ <p>
+ You can also include a list of bullet points (and links) of the
+ successes and failures you have had over your summer. It is a quick
+ reference page for the judges to see what you achieved during your
+ summer.
+ </p>
+ <ul>
+ <li>
+ A list of linked bullet points of the successful results during
+ your project
+ </li>
+ <li>
+ A list of linked bullet points of the unsuccessful results during
+ your project and what you learned from them. This is about being
+ scientifically honest. If you worked on an area for a long time
+ with no success, tell us so we know where you put your effort.
+ Furthermore, you can still impress the judges by thoughtfully
+ discussing what went wrong and how you might change things.
+ </li>
+ </ul>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
new file mode 100644
index 00000000..8385695e
--- /dev/null
+++ b/src/contents/safety.tsx
@@ -0,0 +1,92 @@
+export function Safety() {
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Safety and Security Award</h4>
+ <p>
+ Synthetic biology will need to be used safely and securely if
+ local people are to solve local problems all around the world. The
+ Safety and Security Committee is challenging teams to apply
+ biological engineering approaches to manage risks associated with
+ synthetic biology. Can you take the next step in incremental
+ progress towards knowledge, understanding, and tools that will
+ make the use of synthetic biology safer and more secure?
+ </p>
+ <p>
+ To compete for the Safety and Security award, please describe your
+ work on this page and also fill out the description on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>
+ .
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col">
+ <h2>What should this page contain?</h2>
+ <hr />
+ <p>
+ On this page of your wiki, you should write about how you are
+ addressing any safety issues in your project. The wiki is a place
+ where you can go beyond the questions on the safety forms, and write
+ about whatever safety topics are most interesting in your project.
+ (You do not need to copy your safety forms onto this wiki page.)
+ </p>
+ <div className="bd-callout bd-callout-info">
+ <p>
+ Please visit the{" "}
+ <a href="https://responsibility.igem.org/safety-policies/introduction">
+ Safety Policies page
+ </a>{" "}
+ to find this year's safety requirements & deadlines, and to learn
+ about safe & responsible research in iGEM.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div className="row mt-4">
+ <div className="col-lg-8">
+ <h2>Safe Project Design</h2>
+ <hr />
+ <p>
+ Does your project include any safety features? Have you made certain
+ decisions about the design to reduce risks? Write about them here!
+ For example:
+ </p>
+ <ul>
+ <li>Choosing a non-pathogenic chassis</li>
+ <li>Choosing parts that will not harm humans / animals / plants</li>
+ <li>
+ Substituting safer materials for dangerous materials in a
+ proof-of-concept experiment
+ </li>
+ <li>Including an "induced lethality" or "kill-switch" device</li>
+ </ul>
+ </div>
+ <div className="col-lg-4">
+ <h2>Safe Lab Work</h2>
+ <hr />
+ <p>
+ What safety procedures do you use every day in the lab? Did you
+ perform any unusual experiments, or face any unusual safety issues?
+ Write about them here!
+ </p>
+ </div>
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/software.tsx b/src/contents/software.tsx
new file mode 100644
index 00000000..1b336b8b
--- /dev/null
+++ b/src/contents/software.tsx
@@ -0,0 +1,62 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Software() {
+ const links: InspirationLink[] = [
+ { year: 2019, teamName: "Sydney_Australia", pageName: "Software" },
+ { year: 2019, teamName: "SMMU-China", pageName: "Software" },
+ { year: 2019, teamName: "Grenoble-Alpes", pageName: "Software" },
+ { year: 2020, teamName: "DTU-Denmark", pageName: "Software" },
+ { year: 2020, teamName: "GunnVistaPingry_US", pageName: "Software" },
+ { year: 2020, teamName: "Rochester", pageName: "Software" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Best Software Tool</h4>
+ <p>
+ Regardless what's the topic, iGEM projects often create or adapt
+ computational tools to move the bigger project forward. Because
+ they are born out of a direct practical need, these software tools
+ (or new computational methods) can even prove surprisingly useful
+ for others. Without necessarily being big or complex, they can
+ make the crucial difference to a project's success. This award
+ tries to find and honor such "nuggets" of computational work. To
+ be eligible, your software has to be documented and made available
+ under an OSI-approved open source license. Teams nominating
+ themselves for this prize must host the source code of their
+ software on the dedicated repository on{" "}
+ <a href="https://gitlab.igem.org/2024/software-tools/">
+ iGEM's GitLab
+ </a>
+ .
+ </p>
+ <p>
+ To compete for the Best Software Tool prize, select the prize on
+ the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>
+ , host your software on{" "}
+ <a href="https://gitlab.igem.org/2024/software-tools/">
+ iGEM's GitLab
+ </a>
+ , and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </>
+ );
+}
diff --git a/src/contents/sustainable.tsx b/src/contents/sustainable.tsx
new file mode 100644
index 00000000..c1f66948
--- /dev/null
+++ b/src/contents/sustainable.tsx
@@ -0,0 +1,52 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Sustainable() {
+ const links: InspirationLink[] = [
+ { year: 2020, teamName: "Calgary", pageName: "Sustainable" },
+ { year: 2020, teamName: "Toulouse_INSA-UPS", pageName: "Sustainable" },
+ { year: 2020, teamName: "TUDelft", pageName: "Sustainable" },
+ { year: 2020, teamName: "Lambert_GA", pageName: "Sustainable" },
+ ];
+
+ return (
+ <>
+ <div className="row mt-4">
+ <div className="col">
+ <div className="bd-callout bd-callout-info">
+ <h4>Best Sustainable Development</h4>
+ <p>
+ The Sustainable Development Goals (SDGs) are a call to action to
+ integrally address global environmental, social, and economic
+ challenges. As the future leaders of synthetic biology research
+ and innovation, it’s your responsibility to participate in the
+ global conversations to help develop solutions towards meeting the
+ SDGs. We encourage you to demonstrate how you have evaluated your
+ project ideas against one or more of the SDGs, how you’ve
+ consulted with SDG stakeholders, and how you’ve begun to form
+ collaborations with other iGEM teams around the SDGs. You’re
+ encouraged to look back at previous iGEM projects to evaluate them
+ against the SDGs and build upon them.
+ </p>
+ <p>
+ To compete for the Best Sustainable Development prize, select the
+ prize on the{" "}
+ <a href="https://competition.igem.org/deliverables/judging-form">
+ judging form
+ </a>{" "}
+ and describe your work on this page.
+ </p>
+ <hr />
+ <p>
+ Please see the{" "}
+ <a href="https://competition.igem.org/judging/awards">
+ 2024 Awards Page
+ </a>{" "}
+ for more information.
+ </p>
+ </div>
+ </div>
+ </div>
+ <Inspirations inspirationLinkList={links} />
+ </>
+ );
+}
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
new file mode 100644
index 00000000..f1591560
--- /dev/null
+++ b/src/contents/team.tsx
@@ -0,0 +1,51 @@
+import { Inspirations, InspirationLink } from "../components";
+
+export function Team() {
+ const links: InspirationLink[] = [
+ { year: 2019, teamName: "CU", pageName: "Team" },
+ { year: 2019, teamName: "UANL", pageName: "Team" },
+ { year: 2019, teamName: "William_and_Mary", pageName: "Team" },
+ { year: 2020, teamName: "BOKU-Vienna", pageName: "Team" },
+ { year: 2020, teamName: "CAU_China", pageName: "Team_Member" },
+ { year: 2020, teamName: "Lethbridge", pageName: "Members" },
+ ];
+
+ return (
+ <>
+ <div className="row">
+ <div className="col-8">
+ <h2>What should this page contain?</h2>
+ <hr />
+ <ul>
+ <li>
+ Include pictures of your teammates, don't forget instructors and
+ advisors!
+ </li>
+ <li>
+ You can add a small biography or a few words from each team
+ member, to tell us what you like, and what motivated you to
+ participate in iGEM.
+ </li>
+ <li>
+ Take team pictures! Show us your school, your lab and little bit
+ of your city.
+ </li>
+ <li>
+ Remember that image galleries can help you showcase many pictures
+ while saving space.
+ </li>
+ </ul>
+ <div className="bd-callout bd-callout-info">
+ <strong>Important:</strong> Your wiki pages will be archived at the
+ end of the iGEM season and this content will remain online. Please
+ keep this in mind as you post photos and personal information on
+ this page.
+ </div>
+ </div>
+ <div className="col-4">
+ <Inspirations inspirationLinkList={links} />
+ </div>
+ </div>
+ </>
+ );
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 00000000..884a4dec
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./containers/App/App.tsx";
+import { BrowserRouter } from "react-router-dom";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+ <React.StrictMode>
+ <BrowserRouter basename={import.meta.env.BASE_URL}>
+ <App />
+ </BrowserRouter>
+ </React.StrictMode>,
+);
diff --git a/src/pages.ts b/src/pages.ts
new file mode 100644
index 00000000..1d6ecb1f
--- /dev/null
+++ b/src/pages.ts
@@ -0,0 +1,199 @@
+import {
+ Attributions,
+ Contribution,
+ Description,
+ Engineering,
+ Experiments,
+ Home,
+ HumanPractices,
+ Notebook,
+ Results,
+ Safety,
+ Team,
+ Education,
+ Entrepreneurship,
+ Hardware,
+ Inclusivity,
+ Measurement,
+ Model,
+ Plant,
+ Software,
+ Sustainable,
+} from "./contents";
+
+interface Base {
+ name: string | undefined;
+}
+
+class Folder implements Base {
+ name: string | undefined;
+ folder: Page[] | undefined;
+}
+
+class Page implements Base {
+ name: string | undefined;
+ title: string | undefined;
+ path: string | undefined;
+ component: React.FC | undefined;
+ lead: string | undefined;
+}
+
+const Pages: (Page | Folder)[] = [
+ {
+ name: "Home",
+ title: "Atropos",
+ path: "/",
+ component: Home,
+ lead: "Change the fates' design...",
+ },
+ {
+ name: "Team",
+ folder: [
+ {
+ name: "Team",
+ title: "Team",
+ path: "/team",
+ component: Team,
+ lead: "On this page you can introduce your team members, instructors, and advisors.",
+ },
+ {
+ name: "Attributions",
+ title: "Attributions",
+ path: "/attributions",
+ component: Attributions,
+ 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.",
+ },
+ ],
+ },
+ {
+ name: "Project",
+ folder: [
+ {
+ name: "Contribution",
+ title: "Contribution",
+ path: "/contribution",
+ component: Contribution,
+ lead: "Make a useful contribution for future iGEM teams. Use this page to document that contribution.",
+ },
+ {
+ name: "Description",
+ title: "Project Description",
+ path: "/description",
+ component: Description,
+ lead: "",
+ },
+ {
+ name: "Engineering",
+ title: "Engineering Success",
+ path: "/engineering",
+ component: Engineering,
+ lead: "Demonstrate engineering success in a technical aspect of your project by going through at least one iteration of the engineering design cycle. This achievement should be distinct from your Contribution for Bronze.",
+ },
+ {
+ name: "Experiments",
+ title: "Experiments",
+ path: "/experiments",
+ component: Experiments,
+ lead: "Describe the research, experiments, and protocols you used in your iGEM project.",
+ },
+ {
+ name: "Notebook",
+ title: "Notebook",
+ path: "/notebook",
+ component: Notebook,
+ 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: Results,
+ lead: "You can describe the results of your project and your future plans here.",
+ },
+ ],
+ },
+ {
+ name: "Safety",
+ title: "Safety",
+ path: "/safety",
+ component: Safety,
+ lead: "Describe all the safety issues of your project.",
+ },
+ {
+ name: "Human Practices",
+ title: "Human Practices",
+ path: "/human-practices",
+ component: HumanPractices,
+ 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.",
+ },
+ {
+ name: "Awards",
+ folder: [
+ {
+ name: "Education",
+ title: "Education",
+ path: "/education",
+ component: Education,
+ 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: Entrepreneurship,
+ lead: "The entrepreneurship prize recognizes exceptional effort to build a business case and commercialize an iGEM project.",
+ },
+ {
+ name: "Hardware",
+ title: "Hardware",
+ path: "/hardware",
+ component: Hardware,
+ 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: Inclusivity,
+ 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: Measurement,
+ 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: Model,
+ lead: "Explain your model's assumptions, data, parameters, and results in a way that anyone could understand.",
+ },
+ {
+ name: "Plant",
+ title: "Plant",
+ path: "/plant",
+ component: Plant,
+ lead: "This award is designed to celebrate exemplary work done in plant synthetic biology.",
+ },
+ {
+ name: "Software",
+ title: "Software",
+ path: "/software",
+ component: Software,
+ 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: Sustainable,
+ lead: "Describe how you have evaluated your project ideas against one or more of the SDGs.",
+ },
+ ],
+ },
+];
+
+export default Pages;
diff --git a/src/utils/getPathMapping.ts b/src/utils/getPathMapping.ts
new file mode 100644
index 00000000..950d76b0
--- /dev/null
+++ b/src/utils/getPathMapping.ts
@@ -0,0 +1,33 @@
+import pages from "../pages.ts";
+
+export const getPathMapping = () => {
+ return pages.reduce<{
+ [key: string]: {
+ name: string | undefined;
+ title: string | undefined;
+ component: React.FC;
+ lead: string | undefined;
+ };
+ }>((map, item) => {
+ 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 && page.component) {
+ map[page.path] = {
+ name: page.name,
+ title: page.title,
+ component: page.component,
+ lead: page.lead,
+ };
+ }
+ });
+ }
+ return map;
+ }, {});
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 00000000..feff56ae
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,2 @@
+export * from "./getPathMapping";
+export * from "./stringToSlug";
diff --git a/src/utils/stringToSlug.ts b/src/utils/stringToSlug.ts
new file mode 100644
index 00000000..3fb7b55e
--- /dev/null
+++ b/src/utils/stringToSlug.ts
@@ -0,0 +1,9 @@
+export function stringToSlug(string: string): string {
+ let slug = String(string).toLowerCase();
+ slug = slug.replace(/[^a-z0-9-]/g, "-");
+ slug = slug.replace(/-+/g, "-");
+ // remove dashes at start and end
+ const start = slug.search(/[^-]/); // find index of first non-dash
+ const end = slug.search(/-+$/); // find index of first end dash
+ return slug.substring(start, end === -1 ? undefined : end);
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..ac924403
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+ readonly VITE_TEAM_ID: string;
+ readonly VITE_TEAM_NAME: string;
+ readonly VITE_TEAM_YEAR: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..d0259126
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+ }
\ No newline at end of file
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..822429ca
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true,
+ "strict": true
+ },
+ "include": ["vite.config.ts", "src/utils/index.ts"]
+ }
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..2032bc61
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+import { stringToSlug } from "./src/utils";
+
+// https://vitejs.dev/config/
+export default () => {
+ const env = loadEnv("dev", process.cwd());
+ return defineConfig({
+ base: `/${stringToSlug(env.VITE_TEAM_NAME)}/`,
+ plugins: [react()],
+ });
+};
\ No newline at end of file
--
GitLab