Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 842 additions and 109 deletions
src/components/Table.tsx
View file @ 3fd292fd
import { Part } from "../data/parts";
import { Res } from "../data/results-table";
export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}){
let list = [];
let list: JSX.Element[] = [];
for (let index = 0; index < data.length; index++) {
list.push(
<tr>
......@@ -13,14 +14,14 @@ export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}
</tr>
)
}
let heads = [];
let heads: JSX.Element[] = [];
for (let index = 0; index < cols.length; index++) {
heads.push(<td><b>{cols[index]}</b></td>)
}
return(
<div className="flex flex-col">
<div className="min-w-full overflow-x-auto">
<div className="inline-block min-w-full py-4">
<div className="inline-block min-w-full">
<div className="overflow-hidden p-2">
<table className="text-center parttable">
<thead className="bg-d">
......@@ -37,4 +38,45 @@ export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}
</div>
</div>
)
}
export function ResTable({data, cols}: {data: Array<Res>, cols: Array<string>}){
let list: JSX.Element[] = [];
for (let index = 0; index < data.length; index++) {
list.push(
<tr>
<td>{data[index].nr}</td>
<td>{data[index].silent}</td>
<td>{data[index].pbs}</td>
<td>{data[index].rtt}</td>
<td>{data[index].q1}</td>
</tr>
)
}
let heads: JSX.Element[] = [];
for (let index = 0; index < cols.length; index++) {
heads.push(<td><b>{cols[index]}</b></td>)
}
return(
<div className="flex flex-col">
<div className="min-w-full overflow-x-auto">
<div className="inline-block min-w-full">
<div className="overflow-hidden p-2">
<table className="text-center restable">
<thead className="bg-d">
<tr>
{heads}
</tr>
</thead>
<tbody>
{list}
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
\ No newline at end of file
src/components/Tabs.tsx
View file @ 3fd292fd
// The main tab has to be given display: block; via id css or be given the id "First"
export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: string}) {
let rows = []
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
if(data[i].main == true){
rows.push(<div id={data[i].cssname} className={cla} style={{display: "block"}}>
......@@ -20,11 +20,12 @@ import React from "react";
import { BlockQuoteB } from "./Quotes";
import { TimelineDatenpunkt } from "../data/hptimelinedata";
import Collapsible from "./Collapsible";
import { stringToSlug } from "../utils";
/* import { stringToSlug } from "../utils"; */
export function BFHStyleTabs({data, cla}: {data: Array<TimelineDatenpunkt>, cla: string}) {
let rows = []
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
var problem: Boolean = false;
var problem_desc: Array<string> = [];
......@@ -36,10 +37,13 @@ import Collapsible from "./Collapsible";
else if(data[i].language === "de"){
lang = "Original language: German"
}
else if(data[i].type != "meta"){
else{
lang = ""
}
/* else if(data[i].type != "meta"){
problem = true;
problem_desc.push("interview language");
}
} */
/* Expert on */
let expert = "";
......@@ -66,13 +70,72 @@ import Collapsible from "./Collapsible";
quoted = data[i].vorname + " " + data[i].nachnname;
}
}
else{
/* else{
problem = true;
problem_desc.push("quote missing");
} */
let inv_img: React.ReactNode = <></>;
let imp_img: React.ReactNode = <></>;
let aim_img: React.ReactNode = <></>;
// Restliche Logik der Schleife...
// Bildzuweisungen basierend auf den Daten
if (data[i].pictureurl_interview) {
inv_img = <div className="hti-box">
<img src={data[i].pictureurl_interview} className="hp-timeline-img hti-right" />
</div>;
}
if (data[i].pictureurl_implementation) {
imp_img = <div className="hti-box">
<img src={data[i].pictureurl_implementation} className="hp-timeline-img hti-left" />
</div>;
}
if (data[i].pictureurl_aim) {
aim_img = <div className="hti-box">
<img src={data[i].pictureurl_aim} className="hp-timeline-img hti-left" />
</div>;
}
/* textparts */
let aiM: JSX.Element = <></>
if(data[i].aimofcontact){
aiM = <>
<h4>{goalheading}</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].aimofcontact}</p>
{aim_img}
</div>
</>
}
/* textparts */
if(data[i].aimofcontact === ""){
let insighT: JSX.Element = <></>
if(data[i].insights){
insighT = <>
<h4>Insights</h4>
<div className="flexbox">
{inv_img}
<p className="hp-timeline-p">{data[i].insights}</p>
</div>
</>
}
let imP: JSX.Element = <></>
if(data[i].implementation){
imP = <>
<h4>Implementation</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].implementation}</p>
{imp_img}
</div>
</>
}
/* if(data[i].aimofcontact === ""){
problem = true;
problem_desc.push(" " + goalheading + " missing");
}
......@@ -83,7 +146,7 @@ import Collapsible from "./Collapsible";
if(data[i].implementation === ""){
problem = true;
problem_desc.push(" implementation missing");
}
} */
/* Clarification */
var clari: React.ReactNode = <></>
if(data[i].clarification){
......@@ -101,7 +164,7 @@ import Collapsible from "./Collapsible";
problem = true;
problem_desc.push(" cardtext missing");
} */
if(data[i].type !== "meta"){
/* if(data[i].type !== "meta"){
if(data[i].affiliation === undefined || data[i].affiliation === ""){
problem = true;
problem_desc.push(" affiliation missing");
......@@ -110,13 +173,13 @@ import Collapsible from "./Collapsible";
problem = true;
problem_desc.push(" job missing" );
}
}
if(data[i].type === "meta"){
} */
/* if(data[i].type === "meta"){
if(data[i].quoteVorname === undefined || data[i].quoteVorname === ""){
problem = true;
problem_desc.push(" who is the quote from?" );
}
}
} */
/* References */
var refs: React.ReactNode = <></>;
......@@ -125,40 +188,85 @@ import Collapsible from "./Collapsible";
}
/* Further pictures */
var inv_img: React.ReactNode = <></>;
/* var inv_img: React.ReactNode = <></>;
if (data[i].pictureurl_interview) {
inv_img = <> <div className="hti-box"> <img src={data[i].pictureurl_interview} className="hp-timeline-img hti-right"/> </div> <div className="hti-abstand"/> </>
console.info("before: inv_img is: " + inv_img)
console.info(data[i].vorname + " has pictureurl_interview")
inv_img = <> <div className="hti-box"> <img id={`${data[i].vorname}-inv-img`} src={data[i].pictureurl_interview} className="hp-timeline-img hti-right"/> </div> <div className="hti-abstand"/> </>
console.info("after: inv_img is: " + inv_img)
}
var imp_img: React.ReactNode = <></>;
if (data[i].pictureurl_implementation) {
imp_img = <> <div className="hti-abstand"/><div className="hti-box">
<img src={data[i].pictureurl_implementation} className="hp-timeline-img hti-right"/>
console.info(data[i].vorname + " has pictureurl_implementation")
console.info("before: imp_img is: " )
console.info(imp_img)
imp_img = <> <div className="hti-abstand"/><div className="hti-box">
<img id={`${data[i].vorname}-imp-img`} src={data[i].pictureurl_implementation} className="hp-timeline-img hti-right"/>
</div>
</>
console.info("after: imp_img is: " )
console.info(imp_img)
}
var aim_img: React.ReactNode = <></>;
if (data[i].pictureurl_aim) {
console.info(data[i].vorname + " has pictureurl_aim")
console.info("before: aim_img is: " )
console.info(aim_img)
aim_img = <> <div className="hti-abstand"/> <div className="hti-box">
<img src={data[i].pictureurl_aim} className="hp-timeline-img hti-left"/>
</div></>
}
<img id={`${data[i].vorname}-aim-img`} src={data[i].pictureurl_aim} className="hp-timeline-img hti-left"/>
</div></>
console.info("after: aim_img is: " )
console.info(aim_img)
} */
let int = <></>;
let int_id = stringToSlug(`${data[i].vorname}-inv-collapsible`)
if (data[i].interview) {
int = <Collapsible title="Interview" id="joshuainv">
{data[i].interview}
</Collapsible>
int = <div className="hp-collaps"><Collapsible title="Read full Interview here" id={int_id}>
{data[i].interview}
</Collapsible></div>
}
let morepics: JSX.Element[] = [];
let oldpics: string[] = [];
/* if(data[i].more_pictures){ */
if (!data[i].aimofcontact && data[i].pictureurl_aim) {
oldpics.push(data[i].pictureurl_aim!)
}
if (!data[i].insights && data[i].pictureurl_interview) {
oldpics.push(data[i].pictureurl_interview!)
}
if (!data[i].implementation && data[i].pictureurl_implementation) {
oldpics.push(data[i].pictureurl_implementation!)
}
let newlist = oldpics.concat(data[i].more_pictures!);
for (let ind = 0; ind < (newlist.length - 1); ind += 2) {
console.info(data[i].vorname)
console.info(ind + newlist[ind])
console.info(ind+1 + newlist[ind+1])
morepics.push(
<div className="row">
<div className="col">
<img src={newlist[ind]}/>
</div>
<div className="col">
<img src={newlist[ind+1]}/>
</div>
</div>
)
}
/* } */
let node = <>
<br/>
<h3>{data[i].vorname} {data[i].nachnname}</h3>
<h3 id={`${data[i].interviewtabid}-heading`}>{data[i].title} {data[i].vorname} {data[i].nachnname}</h3>
<hr/>
<div className="row">
<div className="col-6">
<div className={"t-tag " + data[i].tag}>
{data[i].job} {data[i].affiliation}
{data[i].job} - {data[i].affiliation}
</div>
</div>
<div className="col" style={{padding: "5px"}}>{expert}</div>
......@@ -167,11 +275,11 @@ import Collapsible from "./Collapsible";
<div className="row align-items-stretch">
<div className="col d-flex flex-column">
<div className="row flex-grow-1 mitte">
<p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
<h4 style={{paddingTop: "50px"}}>Summary:</h4>
<p>{data[i].summary}</p>
</div>
<div className="row unten" style={{fontSize: "large"}}>
See how this influenced our project at
</div>
</div>
<div className="col-3">
......@@ -188,32 +296,20 @@ import Collapsible from "./Collapsible";
</div>
</div> */}
<h4>{goalheading}</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].aimofcontact}</p>
{aim_img}
</div>
{aiM}
{insighT}
<h4>Insights</h4>
<div className="flexbox">
{inv_img}
<p className="hp-timeline-p">{data[i].insights}</p>
</div>
{clari}
<h4>Implementation</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].implementation}</p>
{imp_img}
</div>
{imP}
<div className="col">
<BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
<BlockQuoteB text={data[i].quote!} cite={quoted}></BlockQuoteB>
</div>
{data[i].text}
{morepics}
{int}
{refs}
</>
......@@ -229,14 +325,14 @@ import Collapsible from "./Collapsible";
else{
if (data[i].interviewtabid === "timeline"){
rows.push(
<div id={data[i].interviewtabid} className={cla} style={{display: "block"}}>
<div id={data[i].interviewtabid} className={`${cla} timelinetab bg-db`} style={{display: "block"}}>
{node}
</div>
)
}
else{
rows.push(
<div id={data[i].interviewtabid} className={cla}>
<div id={data[i].interviewtabid} className={`${cla} timelinetab bg-db`}>
{node}
</div>
)
......@@ -246,11 +342,11 @@ import Collapsible from "./Collapsible";
}
return rows;
}
/* Interview */
export function OLDBFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
let rows = []
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
if (data[i].cssname == "timeline"){
rows.push(
......
src/components/VerticalTimeline.tsx
View file @ 3fd292fd
......@@ -146,30 +146,30 @@ export const PanelTimelineItem = () => (
<time>Panel Discussion</time>
<div className="row align-items-center panel-talk-gallery">
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/traci.jpg" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/traci.jpg" alt="pr-sample1" />
<div className="small middle">Taci <br/> Haddock</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/anita-sifuantes.png" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/anita-sifuantes.png" alt="pr-sample1" />
<div className="small middle">Ana <br/> Sifuentes</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/olivia.png" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/olivia.png" alt="pr-sample1" />
<div className="small middle">Olivia <br/> Mozolewska</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/middendorf.jpeg" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/middendorf.jpeg" alt="pr-sample1" />
<div className="small middle">Lasse <br/> Middendorf</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/nemanja.jpg" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/nemanja.jpg" alt="pr-sample1" />
<div className="small middle">Nemanja <br/> Stijepovic</div>
</div>
</div>
<hr/>
<span>Panel Discussion</span>
<div id="panel" style={{display: "none"}}>
So much more
<p>During the panel discussion, participants shared their experiences with iGEM and synthetic biology. Leslie, an advisor for the University of Windsor's team, detailed her transition from team member to advisor and her recent involvement in synthetic biology organizations. Anna, a former iGEM participant, spoke about her background in design and her current role as a senior content strategist at Freelitics, emphasizing her passion for science communication. Tracy recounted her extensive journey within iGEM, starting as a team leader at Boston University and eventually becoming the director of the competition at iGEM headquarters. After transitioning to Asimov, she highlighted her efforts to strengthen partnerships between Asimov and iGEM, including manufacturing distribution kits for participating teams. The discussion showcased the diverse paths taken by individuals in the field and their ongoing commitment to advancing synthetic biology.</p>
</div>
<BFHMoreButton it="panel"></BFHMoreButton>
......
src/components/interfaces.tsx 0 → 100644
View file @ 3fd292fd
export interface Ourlink{
path: string,
text: string,
scrollToId?: string,
tabId?: string,
subTabId?: string,
collapseId?: string,
tabincolId?: string
}
\ No newline at end of file
src/components/makeSources.tsx 0 → 100644
View file @ 3fd292fd
import React, { useState, useEffect } from "react";
import bibtexParse from 'bibtex-parser-js';
interface BibEntry {
ENTRYTYPE: string;
TITLE?: string;
AUTHOR?: string;
journal?: string;
volume?: string;
pages?: string;
year?: string;
doi?: string;
[key: string]: any;
}
interface BibtexParserProps {
bibtexSources: string[]; // Accept an array of BibTeX strings
special?: string,
start?: number
}
function formatPages(pages: string | undefined): JSX.Element | null {
// Check if pages is provided and is a non-empty string
if (pages && pages.length > 0) {
// Check for common page range separators
const pageRangeRegex = /--|-|–|–/; // RegEx to match various dash types
if (pageRangeRegex.test(pages)) {
const pag = pages.split(pageRangeRegex).map(p => p.trim());
const begin = pag[0];
const end = pag[1];
// Return formatted JSX
return (
<>
,&nbsp;<span property="schema:pageBegin">{begin}</span>-<span property="schema:pageEnd">{end}</span>
</>
);
} else if (/^\d+(-\d+)?$/.test(pages)) {
// If pages is a single numeric range, return it directly
return (
<>
,&nbsp;<span property="schema:pageBegin">{pages}</span>
</>
);
} else {
// Handle non-numeric page info
console.warn(`Non-numeric page information detected ('${pages}'). Treating as missing.`);
return null; // Return null if invalid
}
} else {
console.warn("Sorry, no page information.");
return null; // Return null if no page info
}
}
export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , special, start}) => {
const [parsedEntries, setParsedEntries] = useState<BibEntry[]>([]);
// Parse BibTeX on component mount or when sources change
useEffect(() => {
//console.log("Parsing BibTeX sources: ", bibtexSources);
try {
const allEntries: BibEntry[] = [];
bibtexSources.forEach((bibtex) => {
// console.log(`Parsing BibTeX entry #${index + 1}: `, bibtex);
const parsed = bibtexParse.toJSON(bibtex);
// console.log(`Parsed entry: `, parsed);
allEntries.push(...parsed);
});
setParsedEntries(allEntries);
//console.log("All parsed entries: ", allEntries);
} catch (error) {
console.error("Error parsing BibTeX: ", error);
alert("An error occurred while parsing the BibTeX entries. Please check the format." + bibtexSources);
}
}, [bibtexSources]);
// Helper function to render AUTHORS
const formatAuthors = (authors: string): string => {
//console.log("Original input:", authors);
// Bereinigen des Eingabestrings und Ersetzen von "and" durch "|"
const cleanedAuthors = authors
.replace(/\s*and\s*/g, "|") // "and" durch "|" ersetzen
.replace(/\{|\}/g, "") // geschweifte Klammern entfernen
.trim();
//console.log("Cleaned authors string:", cleanedAuthors);
// Autoren in ein Array aufteilen
const authorList = cleanedAuthors.split("|").map(author => author.trim());
//console.log("Split author list:", authorList);
// Maximale Anzahl der anzuzeigenden Autoren
const maxAuthors = 7;
// Formatiere jeden Autor
const formattedAuthors = authorList.map((author, _index) => {
//console.log(`Processing author #${index + 1}:`, author);
// Nachname und Vornamen aufteilen
const [last, firstNames] = author.includes(",") ?
author.split(",").map(part => part.trim()) :
['', author]; // Wenn kein Komma vorhanden ist, wird der gesamte Name als Vorname behandelt
// console.log(`Last name: "${last}", First names: "${firstNames}"`);
// Initialen für Vornamen erstellen
const initials = firstNames.split(' ').map(n => n[0] + '.').join(' ');
//console.log(`Initials for "${firstNames}": "${initials}"`);
const formattedName = `${last}, ${initials}`.trim(); // Rückgabe des formatierten Namens
//console.log(`Formatted name: "${formattedName}"`);
return formattedName;
});
//console.log("Formatted authors before adding et al.:", formattedAuthors);
// Kombiniere die formatierten Autoren mit korrekter Interpunktion
const output = formattedAuthors.slice(0, maxAuthors).join('; ') +
(formattedAuthors.length > maxAuthors ? ' et al.' : '');
//console.log("Final output:", output);
return output;
};
let specialthing = "";
if (special) {
specialthing = `#${special}`;
}
// Helper function to render individual citations based on their type
const renderCitation = (entry: BibEntry, index: number) => {
// console.log(`Rendering citation for entry #${index + 1}: `, entry);
// Use the index as citation number
let citationNumber = index +1;
if(start){
citationNumber += start -1;
}
const entryType = entry.entryType.toLowerCase(); // Convert to lowercase for consistent comparison
const entryTags = entry.entryTags; // Adjust based on your data structure
// console.log("Entry Tags: ", entryTags);
switch (entryType) {
case "article":
return (
<li key={index} typeof="schema:ScholarlyArticle" role="doc-biblioentry" property="schema:citation" id={`desc-${citationNumber}${specialthing}`}>
{/* Citation number as comment */}
{/*<!-- Citation num ${citationNumber} --> */}
{formatAuthors(entryTags.AUTHOR || entryTags.EDITOR || "")}
&nbsp;<span property="schema:name">{entryTags.TITLE.replace(/[?!.]/g, '').replace(/\n/g, ' ').trim()}.</span>
&nbsp;<i property="schema:publisher" typeof="schema:Organization">{entryTags.JOURNAL}</i>
&nbsp;<b property="issueNumber" typeof="PublicationIssue">{entryTags.VOLUME}</b>
{formatPages(entryTags.PAGES) && <span>{formatPages(entryTags.PAGES)}</span>}
{entryTags.YEAR && (
<span>&nbsp;(<time property="schema:datePublished" datatype="xsd:gYear" dateTime={entryTags.YEAR}>{entryTags.YEAR}</time>).</span>
)}
{entryTags.DOI && (
<span>&nbsp;<a className="doi" href={`https://doi.org/${entryTags.DOI}`}>doi: {entryTags.DOI}</a></span>
)}
</li>
);
case "book":
return (
<li key={index} typeof="schema:Book" role="doc-biblioentry" property="schema:citation" id={`desc-${citationNumber}`}>
{/* Render authors */}
{formatAuthors(entryTags.AUTHOR || entryTags.EDITOR || "")}
{/* Render title or booktitle */}
{entryTags.TITLE ? (
<span property="schema:name">&nbsp;{entryTags.TITLE.replace(/[?!.]/g, '').replace(/\n/g, ' ').trim()}.</span>
) : entryTags.BOOKTITLE ? (
<span property="schema:name">&nbsp;{entryTags.BOOKTITLE.replace(/[?!.]/g, '').replace(/\n/g, ' ').trim()}.</span>
) : (
console.warn(`No title or booktitle found for entry ${citationNumber}`)
)}
{/* Render publisher */}
{entryTags.PUBLISHER && (
<i property="schema:publisher" typeof="schema:Organization">
&nbsp;{entryTags.PUBLISHER}
</i>
)}
{/* Render year */}
{entryTags.YEAR && (
<span>
&nbsp;(<time property="schema:datePublished" datatype="xsd:gYear" dateTime={entryTags.YEAR}>
{entryTags.YEAR}
</time>).
</span>
)}
{entryTags.ISBN && (
<span property="isbn">&nbsp;{entryTags.ISBN}</span>
)
}
</li>
);
case "misc":
return (
<li key={index} typeof="schema:WebPage" role="doc-biblioentry" property="schema:citation" id={`desc-${citationNumber}`}>
{/* Render authors */}
{(entryTags.AUTHOR || entryTags.EDITOR || "")}
{/* Render title */}
{entryTags.TITLE && (
<span property="schema:name">.&nbsp;{entryTags.TITLE.replace(/[?!.]/g, '').replace(/\n/g, ' ').trim()}.</span>
)}
{/* Render howpublished */}
{entryTags.HOWPUBLISHED && (
<i property="schema:publisher" typeof="schema:Organization">&nbsp;{entryTags.HOWPUBLISHED}</i>
)}
{/* Render year */}
{entryTags.YEAR && (
<span>&nbsp;(<time property="schema:datePublished" datatype="xsd:gYear" dateTime={entryTags.YEAR}>{entryTags.YEAR}</time>).</span>
)}
</li>
);
// Handle additional entry types here
case "inproceedings":
return (
<li key={index}>
<span>{formatAuthors(entryTags.AUTHOR || "")}</span>&nbsp;
<span>{entryTags.TITLE}</span>. In <i>{entryTags.BOOKTITLE}</i>,&nbsp;
<b>{entryTags.editor}</b>, {entryTags.YEAR}.
</li>
);
case "phdthesis":
return (
<li key={index}>
<span>{formatAuthors(entryTags.AUTHOR || "")}</span>&nbsp;
<span>{entryTags.TITLE}</span>, PhD thesis, {entryTags.SCHOOL}, {entryTags.YEAR}.
</li>
);
default:
console.warn(`Unknown entry type: ${entryType}`);
return <li key={index}>Unknown entry type: {entryType}</li>;
}
};
let startnumber = 1;
if(start) {
startnumber = start;
}
return (
<div>
{parsedEntries.length === 0 ? (
<p>No citations available.</p>
) : (
<ol start={startnumber}>
{parsedEntries.map((entry, index) => renderCitation(entry, index))}
</ol>
)}
</div>
);
};
export default BibtexParser;
src/components/precyse.tsx
View file @ 3fd292fd
export default function PreCyse() {
return (<span className="underline--magical precyse"> PreCyse </span>
return (<span className="underline--magical precyse">PreCyse</span>
)}
\ No newline at end of file
src/components/test.css
View file @ 3fd292fd
......@@ -18,7 +18,7 @@
}
.line {
stroke: black;
stroke: bvar(--offblack)lack;
}
.theLine {
......@@ -36,7 +36,7 @@
.vector {
width: 100px;
height: 100px;
background-color: white;
background-color: var(--ourbeige) ;
}
.animStarterClass {
......@@ -78,7 +78,7 @@
}
#thirdCircle {
background-color: black;
background-color: var(--offblack);
border-radius: 50%;
height: 100px;
width: 100px;
......
src/contents/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/contents/Contribution/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/contents/Contribution/BFH/bfh-about.tsx
View file @ 3fd292fd
......@@ -17,6 +17,33 @@ export function About(){
<H4 text="About Our Cooperation"/>
<p> The cooperation between Bielefeld, Frankfurt, and Hamburg is rooted in the friendships and networks formed during the iGEM competition 2023. Our mission is to promote future projects and bring teams together. By alternating the location of the BFH European Meet-Up each year, we aim to provide diverse networking opportunities and foster a strong sense of community among iGEM participants. </p>
<H4 text="Head of BFH Committee"/>
<div className="row">
<div className="row align-items-center">
<div className="col">
</div>
<div className="col">
</div>
<div className="col">
</div>
</div>
<div className="row align-items-center">
<div className="col">
<p>Sinan Zimmermann</p>
<p><i>Instructor of iGEM Bielefeld </i></p>
</div>
<div className="col">
<p>Olivia Mozolewska</p>
<p><i>Advisor of iGEM Frankfurt</i></p>
</div>
<div className="col">
<p>Lisa Siemers</p>
<p><i>Advisor of iGEM Hamburg </i></p>
</div>
</div>
</div>
<H4 text="What Were Our Goals?"/>
<ul className="haken-liste">
<li> {haken} Unite iGEM teams from across Europe and foster a sense of community and collaboration. </li>
......@@ -203,10 +230,10 @@ export function About(){
<p>The BFH European Meet-Up 2024 was a resounding success, uniting over 20 teams and 150 participants in a celebration of science, innovation, and collaboration. As we look forward to future events, we remain committed to our mission of igniting, innovating, and inspiring the next generation of scientists. Here's to many more great moments and an unforgettable time for every participant – cheers! </p>
<div className="small-row">
<div className="col right">
<a href="https://bfheuropeanmeetup.mobirisesite.com/page6.html"><button className="tablinks bfh-more-button Medical">Visit the Website</button></a>
<a href="https://bfheuropeanmeetup.mobirisesite.com/page6.html"><button className="tablinks btn1 Medical">Visit the Website</button></a>
</div>
<div className="col button-left">
<a href="https://www.instagram.com/bfh_euromeet/"><button className="left-button tablinks bfh-more-button Medical" >Stay in Touch</button></a>
<a href="https://www.instagram.com/bfh_euromeet/"><button className="left-button tablinks btn1 Medical" >Stay in Touch</button></a>
</div>
</div>
</div>
......
src/contents/Contribution/BFH/bfh-menu.tsx
View file @ 3fd292fd
......@@ -2171,7 +2171,7 @@ export function MenuSVG(){
style={{
fill: "#850f78",
fillOpacity: 1,
stroke: "#000000",
stroke: "var(--offblack)",
strokeWidth: "32.6244",
strokeDasharray: "none",
strokeOpacity: 1
......@@ -2225,7 +2225,7 @@ export function MenuSVG(){
style={{
fill: "#850f78",
fillOpacity: 1,
stroke: "#000000",
stroke: "var(--offblack)",
strokeWidth: "32.6244",
strokeDasharray: "none",
strokeOpacity: 1
......
src/contents/Contribution/BFH/bfh.tsx
View file @ 3fd292fd
import { BFHTimeline } from "../../../components/BFH-Timeline";
import BFHpdf, { GuidePDF } from "../../../components/Pdfs";
import BFHpdf from "../../../components/Pdfs";
import BFHGallery from "../../../components/Photo-grid";
import { Section, Subesction } from "../../../components/sections";
import { About } from "./bfh-about";
......@@ -11,7 +11,7 @@ export function MeetUP(){
<Section title="BFH European MeetUp" id="BFH European MeetUp">
<Subesction title="Aftervideo" id="BFH European MeetUp1">
<div className="bg-video-container">
<iframe title="Bielefeld-CeBiTec: MeetUp (2024) [English]" width="100%" height="700" src="https://video.igem.org/videos/embed/30b8a6e0-2b4a-4618-8867-4eb8e6a52936?start=27s&amp;loop=1&amp;autoplay=1&amp;muted=1&amp;title=0&amp;warningTitle=0&amp;controlBar=0&amp;peertubeLink=0&amp;p2p=0" frameBorder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
<iframe title="Bielefeld-CeBiTec: MeetUp (2024) [English]" width="100%" height="700px" src="https://video.igem.org/videos/embed/30b8a6e0-2b4a-4618-8867-4eb8e6a52936" frameBorder="0" allowFullScreen={true} sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
</Subesction>
<div className="" /* style={{ paddingTop: "5vw"}} */>
......@@ -24,13 +24,10 @@ export function MeetUP(){
<Subesction title="Virtual Poster Exhibition" id="BFH European MeetUp4">
<PosterGallery/>
</Subesction>
<Subesction title="Guideline" id="BFH European MeetUp5">
<GuidePDF/>
</Subesction>
<Subesction title="Gallery" id="BFH European MeetUp6">
<Subesction title="Gallery" id="BFH European MeetUp5">
<BFHGallery/>
</Subesction>
<Subesction title="Downloads" id="BFH European MeetUp7">
<Subesction title="Downloads" id="BFH European MeetUp6">
<BFHpdf/>
</Subesction>
</div>
......
src/contents/Contribution/PartCon.tsx 0 → 100644
View file @ 3fd292fd
import { H4 } from "../../components/Headings";
import { PDF } from "../../components/Pdfs";
import { Subesction } from "../../components/sections";
export function PartContribution(){
return(
<Subesction title="Parts" id="Our Contributions2">
<H4 text="Our Protocol Collection"/>
<PDF link="https://static.igem.wiki/teams/5247/pdfs/protocol-collection-igem-2024.pdf" name="protocol-collection-igem-2024.pdf"/>
<p>ShapeOur contribution includes an extensive collection of optimized protocols designed to provide future iGEM teams with easy-to-use starting materials. We've refined these protocols and compiled them into comprehensive summaries, incorporating our experiences, tips, and tricks to make synthetic biology more accessible and enjoyable, especially for newer iGEM teams. Additionally, we have integrated safety and security standards into the protocols, making it easier to introduce the handling of human biomaterials in the iGEM competition while ensuring compliance with necessary regulations. This collection is intended to streamline the workflow and empower teams to approach their projects with greater confidence. </p>
<H4 text="Our Reporter System PreCL"/>
<p>To effectively test different Prime Editing systems and pegRNAs targeting the CF-specific genomic mutation (delF508), we developed a highly sensitive reporter system called PreCL (Prime Editing Conceptualizable Light). This system is designed to detect fluorescence signals across a variety of devices, offering flexibility in measurement and ensuring reliable, high-quality results. </p>
<p>PreCL is characterized by its high sensitivity, with minimal background noise, allowing for precise and accurate detection. Additionally, it closely mimics the CF genomic context, making it highly relevant for CF-specific research. The system features an easy-to-read output, simplifying the interpretation of experimental data, and is designed for constitutive performance, ensuring consistency across tests. </p>
<p>One of the standout features of PreCL is its modular design, which allows it to be adapted to different genomic contexts, extending its utility beyond CF research. While it is optimized for Prime Editing, it also has potential applications for broader genetic approaches such as CRISPR/Cas and base editing. With these advantages, PreCL offers a powerful and versatile tool that facilitates testing and enhances the precision and efficiency of genetic research. </p>
<img src="https://static.igem.wiki/teams/5247/engineering-cycle/precl.svg"/>
<H4 text="Our pegRNA Architecture"/>
<p>In our research, we optimized the structure of pegRNAs to develop a stable and efficient variant with enhanced sensitivity. By incorporating the novel RNA structural motif TevoPreQ1, we improved the stability and complex formation of the pegRNA, ensuring higher Prime Editing throughput. Additionally, we introduced silent edits to promote mismatch repair, further boosting Prime Editing efficiency. By fine-tuning the length of the Reverse Transcriptase Template and Primer Binding Sequence, we ensured optimal pegRNA performance, maximizing editing efficiency. </p>
<p><small>5‘TCTGTATCTATATTCATCATGTTTTAGAGCTAGAAATAGCAAGTTAAAATAAGGCTAGTCCGTTATCAACTTGAAAAAGTGGCACCGAGTCGGTGCGATATGTTCAGGTAAGTGTGTCATACGATGAATATAGATACAGCGCGGTTCTATCTAGTTACGCGTTAAACCAACTAGAATTTTTTT3‘ </small></p>
<H4 text="Our Prime Editing Technology PrimeGuide "/>
<div className="row">
<div className="col">
<img src="https://static.igem.wiki/teams/5247/engineering-cycle/pecomplex.svg"/>
</div>
<div className="col">
<p>We developed a groundbreaking Prime Editing system designed to overcome current limitations in genome editing. As part of this innovation, we introduced a novel eukaryotic RNA-binding DNA-nickase protein, created through enzyme engineering. This protein serves as a much smaller alternative to the traditional Cas9, making it easier to use in Prime Editing and other genetic applications. </p>
</div>
</div>
<p>Additionally, we implemented significant improvements, such as a more efficient Reverse Transcriptase and optimized RNA-binding proteins, which together enhance the overall efficiency of the Prime Editing complex while minimizing off-target effects. </p>
<div className="row">
<div className="col">
<img src="https://static.igem.wiki/teams/5247/engineering-cycle/primeguide-logo.svg"/>
</div>
<div className="col">
<p>By contributing this advancement, we enable safer and more precise Prime Editing for correcting genetic mutations. Our composite part is versatile and can be applied to various contexts, offering immense value to the synthetic biology community. This contribution not only enhances Prime Editing technologies but also provides future researchers with more robust tools for their genetic engineering endeavors. </p>
</div>
</div>
<H4 text="Our Lipid Nanoparticle AirBuddy "/>
<img src="https://static.igem.wiki/teams/5247/engineering-cycle/airbuddy-overview.svg"/>
<p>Our innovative delivery system enables the lung-specific transport of RNA and DNA molecules into eukaryotic cells, offering a significant advancement for gene therapies targeting lung diseases. This formulation overcomes the limitations of current delivery strategies by providing an advanced dry powder inhalation technology designed for controlled monthly use and cost-effective long-term storage, making it highly practical for sustained treatments. </p>
<p>The delivery system stands out for its low cytotoxicity compared to traditional methods like DEMPEG, ensuring a safer application. Its positively charged formulation is optimized for the efficient binding and transport of negatively charged lung cells, enhancing cargo delivery. The system's ideal size distribution further promotes efficient cellular uptake, resulting in significantly higher transfection rates compared to standard reagents like Lipofectamine. </p>
<p>Moreover, its lung-specific design makes it particularly suitable for treating various lung-specific diseases, while its sphere-like structures ensure excellent stability for use in dry powder inhalation therapies. This breakthrough in delivery technology provides a safer, more efficient, and cost-effective solution for delivering genetic material to target cells, with the potential to revolutionize lung disease treatments. </p>
</Subesction>
)
}
\ No newline at end of file
src/contents/Contribution/Wiki/Filterables.tsx
View file @ 3fd292fd
......@@ -5,7 +5,7 @@ import { Troubleshoot } from "./trouble-data";
export function Filterables(data: Array<Troubleshoot>){
let count = 2;
let results = [];
let results: JSX.Element[] = [];
for (let index = 0; index < data.length; index++) {
let tags = ""
for (let i = 0; i < data[index].tags.length; i++) {
......
src/contents/Contribution/Wiki/Wiki-downloads.tsx 0 → 100644
View file @ 3fd292fd
import { H4 } from "../../../components/Headings";
import { TwoLinePDF } from "../../../components/Pdfs";
export function WikiDown(){
return(
<>
<div className="col cycletab" id="flyers" style={{display: "block"}}>
<div className='row align-items-center'>
<p>Please note that due to the freezing of the wiki we will not be able to continously update the guide. To obtain the current version, email the current iGEM team Bielefeld (info[at]igem-bielefeld[dot]de) or the Head of Wiki from 2024 (liliana.sanfilippo[at]uni-bielefeld[dot]de). </p>
<div className="row">
<div className="col">
<H4 text="Our Wiki Guide"/>
<TwoLinePDF link='https://static.igem.wiki/teams/5247/pdfs/wiki-broschure-v1-2.pdf' name="wiki-broschure-v1-2.pdf" />
</div>
<div className="col">
<H4 text="Our Wiki Helper"/>
<TwoLinePDF link='https://static.igem.wiki/teams/5247/pdfs/vokabelliste-wiki.pdf' name="vokabelliste-wiki.pdf" />
</div>
</div>
<H4 text="SVGs"/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/albuterol.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler-with-capsules.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/hypertonic-saline-triple.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/orkambi.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fat.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}}src="https://static.igem.wiki/teams/5247/scientific-figures/trikafta-beide.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/hypertonic-saline-single.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/cough.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/cold.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mask.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/gibbsreflection.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}}src="https://static.igem.wiki/teams/5247/scientific-figures/feedbackcycle.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mendelow-1-aktuell.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mendelow-2.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mendelow-3-1.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mendelow-4.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/first-place.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/second-place.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/third-place.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/box.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/certificate.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/kit.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/new-box.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/tickets.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/trophy.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/download.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/justice.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/talking-bubbles.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/test-tube.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/bones.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/brain.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/glands.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/heart.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/largeintestine.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/liver.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/lungs.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/nose.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/pancreas.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/pregnancy.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/skin.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/stomach.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/diet.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/modulators.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mucolytics.svg"/>
</div>
</div>
{/* <br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
</div> */}
</div>
</div>
</>
)
}
\ No newline at end of file
src/contents/Contribution/Wiki/wiki-overview.tsx
View file @ 3fd292fd
......@@ -3,6 +3,7 @@ export function WikiOverview(){
return(
<div>
<p>This content is not yet finished and will be reworked after the Jamboree.</p>
<p>To help teams get started, we wrote down what we wished we would have easily found while building our wiki with React.</p>
<p><b>Getting startet</b> explains some basics that are important to know. This especially concerns the differences between using plain HTML and React, but the structure of the wiki, too. </p>
<p><b>Troubleshooting</b> is an iteractive search for problems that may arise and how we solved them. </p>
......
src/contents/Contribution/Wiki/wiki-sources.tsx
View file @ 3fd292fd
......@@ -16,20 +16,41 @@ export function Sources(){
<li> <a href="https://biologicalicons.com/en">https://biologicalicons.com/en</a> </li>
<li> <a href="https://www.svgrepo.com/">https://www.svgrepo.com/</a> </li>
<li> <a href="https://www.humanbiomedia.org/">https://www.humanbiomedia.org/</a> </li>
<li><a href="https://smart.servier.com/">https://smart.servier.com/</a></li>
</ul>
<ul>
<li><a href="https://superdesigner.co/tools/svg-backgrounds">https://superdesigner.co/tools/svg-backgrounds</a></li>
</ul>
</Collapsible>
<Collapsible id="wiki-colors" title="Colours" >
Need a slightly lighter version of one of your colors or a mix of two colours?
<ul>
<li><a href="https://www.w3schools.com/colors/colors_mixer.asp"> https://www.w3schools.com/colors/colors_mixer.asp</a></li>
<li><a href="https://www.w3schools.com/colors/colors_mixer.asp"> Color Mixer</a></li>
<li><a href="https://redketchup.io/color-picker">Image Color Picker</a></li>
<li><a href="https://coolors.co/">Color Palette Creator</a></li>
<li><a href="https://rgbcolorcode.com/color/converter/"> HEX to RGB and back</a></li>
<li><a href="https://cssgradient.io/"> CSS gradient picker</a></li>
</ul>
{/* <li><a href=""></a></li> */}
</Collapsible>
<Collapsible id="wiki-tools" title="Coding Tools">
Generators
<Collapsible id="wiki-tools" title="Coding">
<ul>
<li><a href="https://www.cssportal.com/">https://www.cssportal.com/</a></li>
<li><a href="https://www.cssportal.com/">CSS resources</a></li>
<ul>
<li><a href="https://www.cssportal.com/scss-to-css/">SCSS to CSS</a></li>
<li><a href=" https://www.cssportal.com/css-clip-path-generator/">CSS Clip Path generator</a></li>
</ul>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS flexbox guide</a></li>
<li><a href="https://transform.tools/html-to-jsx">HTML to JSX</a></li>
<li><a href="https://nikitahl.github.io/svg-2-code/">Turn SVGs into HTML code</a></li>
<li><a href="https://www.svgviewer.dev/svg-to-react-jsx">Turn SVGs into JSX code</a></li>
<li><a href="https://www.prettifycss.com/">Prettify CSS</a></li>
<li><a href="https://htmlcss.tools/">https://htmlcss.tools/</a></li>
<li><a href="https://beautifytools.com/javascript-beautifier.php">Prettify JS</a></li>
<li><a href="https://tympanus.net/Development/ClickEffects/">Click effects</a></li>
<li><a href="https://michalsnik.github.io/aos/">AOS</a></li>
<li><a href="https://flamingtempura.github.io/bibtex-tidy">Tidy bibtex</a></li>
<li><a href="https://www.toptal.com/designers/htmlarrows/arrows/">HTML entity codes</a></li>
</ul>
</Collapsible>
......@@ -39,11 +60,6 @@ export function Sources(){
</ul>
</Collapsible>
<Collapsible id="wiki-svgs" title="SVGs">
<ul>
<li><a href="https://superdesigner.co/tools/svg-backgrounds">https://superdesigner.co/tools/svg-backgrounds</a></li>
</ul>
</Collapsible>
<Collapsible id="wiki-accessibility" title="Accessibility">
<ul>
......
src/contents/Contribution/Wiki/wiki-tabs.tsx
View file @ 3fd292fd
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Tab } from "@mui/material";
import React from "react";
import { Started } from "./wiki-start";
import { Sources } from "./wiki-sources";
import { Troubleshooting } from "./troubleshooting";
import { WikiOverview } from "./wiki-overview";
import { WikiDown } from "./Wiki-downloads";
export function WikiTabs() {
const [value, setValue] = React.useState('1');
......@@ -18,21 +16,15 @@ export function WikiTabs() {
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label="Overview" value="1" />
<Tab label="Getting started" value="6" />
<Tab label="Troubleshooting" value="2" />
<Tab label="Components" value="3" />
<Tab label="Downloads" value="4" />
<Tab label="Resources" value="5" />
<Tab label="Wiki Guide & Downloads" value="1" />
<Tab label="Other Resources" value="2" />
</TabList>
</Box>
<TabPanel value="1"> <WikiOverview/> </TabPanel>
<TabPanel value="6"> <Started/> </TabPanel>
<TabPanel value="2"> <Troubleshooting/> </TabPanel>
<TabPanel value="3"> </TabPanel>
<TabPanel value="4"> </TabPanel>
<TabPanel value="5"> <Sources/> </TabPanel>
<TabPanel value="1"> <WikiDown/> </TabPanel>
<TabPanel value="2"> <Sources/> </TabPanel>
</TabContext>
</Box>
);
......
src/contents/Contribution/Wiki/wiki.tsx
View file @ 3fd292fd
import { Section } from "../../../components/sections";
import { Subesction } from "../../../components/sections";
import { WikiTabs } from "./wiki-tabs";
export function Wiki () {
return (
<Section title="Wiki" id="Wiki">
<Subesction title="Wiki Developement" id="Our Contributions2">
<WikiTabs></WikiTabs>
</Section>
</Subesction>
);
}
\ No newline at end of file
src/contents/Contribution/collabs.tsx
View file @ 3fd292fd
import { Section } from "../../components/sections";
import { PDF } from "../../components/Pdfs";
import { Subesction } from "../../components/sections";
import { useNavigation } from "../../utils";
export function CollabContribution(){
export function CollabContribution(){
const {goToPagesAndOpenTab} = useNavigation();
return(
<Section title="Collaborations" id="Collaborations">
h
</Section>
<Subesction title="LNP Handbook" id="Our Collaborations2">
<p>In collaboration with the iGEM teams <a href="https://2024.igem.wiki/linkoping/">Linkoping</a>, <a href="https://2024.igem.wiki/patras/">Patras</a>, <a href="https://2024.igem.wiki/radboud-university/team">Radboud University</a> and <a href="https://2024.igem.wiki/termosz-selye-hun/">TERMOSZ-Selye-HUN</a>, we contributed a comprehensive overview of lipid-based delivery systems. Our contribution to the handbook aims to provide future iGEM teams with a deeper understanding of LNP (Lipid Nanoparticle) development. By bringing together diverse teams and innovative solutions, we strive to make a positive impact on the emerging field of LNP design. Our goal is to enhance the accessibility of various LNP formulations and adapt this promising technology for a wide range of therapeutic applications. </p>
<p>Download our LNP Hanbook that was created in <a onClick={() => goToPagesAndOpenTab('colls2024', '/human-practices')}>cooperation</a> with the team <a href="https://2024.igem.wiki/linkoping/">Linköping</a>.</p>
<PDF link="https://static.igem.wiki/teams/5247/pdfs/liposomes-handbook.pdf" name="liposomes-handbook.pdf"/>
</Subesction>
)
}
\ No newline at end of file