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 1145 additions and 291 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,9 +37,18 @@ 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 = "";
if (data[i].experton) {
expert = `Expert on ${data[i].experton}`;
}
/* Aim/Goal */
......@@ -60,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");
}
......@@ -77,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){
......@@ -95,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");
......@@ -104,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 = <></>;
......@@ -119,76 +188,128 @@ 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].job} - {data[i].affiliation}
</div>
</div>
<div className="col-3">{lang}</div>
<div className="col" style={{padding: "5px"}}>{expert}</div>
<div className="col" style={{width: "20%", flex: "1 0 0%", padding: "5px"}}>{lang}</div>
</div>
<div className="row">
<div className="row align-items-stretch">
<div className="col d-flex flex-column">
<div className="row flex-grow-1 mitte">
<h4 style={{paddingTop: "50px"}}>Summary:</h4>
<p>{data[i].summary}</p>
</div>
<div className="row unten" style={{fontSize: "large"}}>
</div>
</div>
<div className="col-3">
<img className="middle sechpro img-fluid" src={data[i].pictureurl} />
</div>
</div>
{/* <div className="row">
<div className="col">
<BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
<p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
<p>{data[i].summary}</p>
</div>
<div className="col-3">
<img className="middle sechpro" src={data[i].pictureurl}/>
</div>
</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}
{imP}
<div className="col">
<BlockQuoteB text={data[i].quote!} cite={quoted}></BlockQuoteB>
</div>
{data[i].text}
{morepics}
{int}
{refs}
</>
......@@ -204,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>
)
......@@ -221,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 0 → 100644
View file @ 3fd292fd
import Collapsible from "../../../components/Collapsible";
import { H5 } from "../../../components/Headings";
import { Troubleshoot } from "./trouble-data";
export function Filterables(data: Array<Troubleshoot>){
let count = 2;
let results: JSX.Element[] = [];
for (let index = 0; index < data.length; index++) {
let tags = ""
for (let i = 0; i < data[index].tags.length; i++) {
tags += data[index].tags[i] + " ";
}
results.push(
<div className={`filterable all ${tags}`} id={`wiki-trouble-${count}`}>
<Collapsible title={data[index].title} id={`wiki-trouble-${count}-collapsible`}>
{data[index].text}
<H5 text="Example"/>
{data[index].examplechildren}
<H5 text="Solution"/>
{data[index].solutionchildren}
</Collapsible>
</div>
)
count ++;
}
return results;
}
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/trouble-data.tsx 0 → 100644
View file @ 3fd292fd
import { Code } from "../../../components/Code";
export interface Troubleshoot{
tags: Array<Searchcriteria>;
title: string;
examplechildren: React.ReactNode;
solutionchildren: React.ReactNode;
text?: React.ReactNode;
}
type Searchcriteria = "html" | "script" | "css" | "react" | "type" | "properties" | "pipeline" | "module" | "browser" | "console" |"overload" ;
export const troubledata: Array<Troubleshoot> = [
{
tags: ["react", "type"],
title: "Type X is not assignable to type Y.",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["pipeline"],
title: "The pipeline passed but the Wiki is not visible under the url",
text: <><p>This error could be a result of a wrong base url in the vite.config.js file.</p>
<p>E.g. if you switched from plain HTML to the react framework. </p></>,
examplechildren: <><Code>
<p>return defineConfig(&#123;</p>
<p>base: `/`,</p>
<p>...</p>
</Code></>,
solutionchildren: <><p>Change the base url to reflect the correct team url.</p>
<Code>
<p>return defineConfig(&#123;</p>
<p>base: `/$&#123;stringToSlug(env.VITE_TEAM_NAME)&#125;/`,</p>
<p>...</p>
</Code></>
},
{
tags: ["console"],
title: "NS_ERROR_CORRUPTED_CONTENT error in console",
text: <><p> &rarr; See also "The pipeline passed but the Wiki is not visible under the url" as these errors can be connected.</p>
<p> This error for css and js files can be the result of wrong <b>rollupOptions</b> in for the build, to be specific wrong <b>output</b> and <b>assetFileNames</b> options and possibly wrong/empty <b>css</b> options in your vite.config.js. </p>
</>,
examplechildren: <><p>In our case, we had the following code on our vite.config.js</p>
<Code>
<p>build: &#123; </p>
<p>outDir: "dist",</p>
<p>rollupOptions: &#123;</p>
<p>output: &#123;</p>
<p> assetFileNames: `assets/[ext]/[name]-[hash].[ext]`</p>
<p>&#125; &#125; &#125; , </p>
</Code>
<p> Our <b>css</b> options were empty, which could also have played a factor for the css files.</p>
<Code>
<p>css: &#123;</p>
<p>preprocessorOptions: &#123;</p>
<p>css: &#123;</p>
<p> //javascriptEnabled: true, // Enable JavaScript in CSS (useful for certain CSS preprocessor plugins)</p>
<p> &#125; &#125; &#125;,</p>
</Code></>,
solutionchildren: <></>
},
{
tags: ["browser", "console"],
title: "Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)",
examplechildren: <><p> &rarr; See also "Refused to apply style from &lt;&lt;css file&gt;&gt; because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)"</p>
</>,
solutionchildren: <></>
},
{
tags: ["console", "browser"],
title: "Refused to apply style from <<css file>> because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)",
examplechildren: <><p> &rarr; See also "Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)"</p> </>,
solutionchildren: <><p>This error could </p></>
},
{
tags: ["react", "type"],
title: "Type 'undefined' cannot be used as an index type",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "overload"],
title: "No overload matches this call.",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "module"],
title: "Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.",
examplechildren: <>index.tsx:
<p className="problem-error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
</>,
solutionchildren: <><p>Simply rename the function in one of the modules or consider making it a component if you plan on using it frequently.
</p></>
},
{
tags: ["pipeline"],
title: "error TS6133: 'event' is declared but its value is never read.",
examplechildren: <>HorizontalTimeline.tsx:
<div className="terminal-box">
$ yarn build
<p>yarn run v1.22.19</p>
<p>$ tsc && vite build</p>
<p className="terminal-error">src/components/HorizontalTimeline.tsx(67,23): error TS6133: 'event' is declared but its value is never read.
error Command failed with exit code 2.</p>
<p>info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.</p>
</div>
<p>in</p>
<Code>
const openPop = (event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
</Code></>,
solutionchildren: <><p>Change to: </p>
<Code>
const openPop = (_event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
</Code></>
},
{
tags: ["html"],
title: "Unexpected token. Did you mean `{'>'}` or `&gt;`?\" id=\"wiki-trouble-16",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "type"],
title: "Type 'x | undefined' is not assignable to type 'x'",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "type", "properties"],
title: "Type X is missing the following properties from type Y: a, b, c",
examplechildren: <><p className="problem-error">
Type '&#123; date: string; text: string; &#125;' is missing the following properties from type 'TextEventProps': marker, card
</p>
<p>In reference of the interface TextEventProps:</p>
<Code>
<p>interface TextEventProps &#123; </p>
<p>date: string; </p>
<p>text: string; </p>
<p>marker: React.ReactNode; </p>
<p>id: string; </p>
<p>card: Function; </p>
&#125;
</Code>
<p>For the code:</p>
<Code>
<p> &lt;TextEvent </p>
<p> id="05"</p>
<p> date="14-06-2024"</p>
<p> text="Test test"</p>
<p> /&gt;</p>
</Code></>,
solutionchildren: <>
<h6>Solutions</h6>
<p>One solution could be getting rid of the properties you do not need everywhere and create new property interfaces for all cases.</p>
<p>If you want to stick to more general Interfaces, you can make properties optional:</p>
<Code>
<p>interface TextEventProps &#123; </p>
<p>date: string; </p>
<p>text: string; </p>
<p>marker?: React.ReactNode; </p>
<p>id: string; </p>
<p>card?: Function; </p>
&#125;
</Code>
<p>Remember that this can lead to different return cases for your functions.</p></>
},
{
tags: ["react", "type", "properties"],
title: "Property x does not exist on type Y.",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "type", "properties"],
title: "Property x is missing in type y but required in type z.",
examplechildren: <><p className="problem-error"> Argument of type '&#123; [x: string]: any; &#125;' is not assignable to parameter of type '&#123; classNames: string[]; &#125;'.
Property 'classNames' is missing in type '&#123; [x: string]: any; &#125;' but required in type '&#123; classNames: string[]; &#125;'.</p>
<p> for </p>
<Code>className=&#123;joinClassNames(&#123;[&#39;text-event&#39;, className]&#125;)&#125; </Code>
</>,
solutionchildren: <><p>In this example, the problem was that the property "classNames" was not explicitly named.</p>
<p>Changing it to </p>
<Code>className=&#123;joinClassNames(&#123;<b>classNames:</b>[&#39;text-event &#39;, className]&#125;)&#125;</Code>
</>
},
{
tags: ["css"],
title: "I added css styles but they do not show",
examplechildren: <><p>The color is not showing on hover.</p>
<Code>.nav-link:hover &#123;
color: var(--darkpurple);
background-color: var(--yellow) !important;
border-radius: 3px;
&#125;</Code></>,
solutionchildren: <><p>Styles not showing is often a case of a different style overriding your style. Some styles are pre defined by bootstrap or other packages you may use. </p>
<p> If an external package is overriding your style, you need to add the <b>!important</b> tag to your style. </p>
<p> If one of your own styles is overriding the new style, you can change your old style or define a new, more specific style case. E.g. by using a more specific css path. But you may still need to add the <b>!important</b> tag. </p>
<Code> .nav-link:hover &#123;
color: var(--darkpurple) <b>!important</b>;
background-color: var(--yellow) !important;
border-radius: 3px;
&#125;
</Code></>
},
{
tags: ["css", "script"],
title: "(subtabs[i] as HTMLElement).style.display = \"x\"; is not working.",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "script"],
title: "Property 'style' does not exist on type 'Element'.",
examplechildren: <>
<p className="problem-error">
Property 'style' does not exist on type 'Element'.
</p>
<p>for the Code: </p>
<Code>
const subtabs &#x3D; document.getElementsByClassName(&quot;sidesubtab&quot;);
for (let i &#x3D; 0; i &lt; subtabs.length; i++) &#123;
(subtabs[i]).style.display &#x3D; &quot;none&quot;;
console.log(\&#x60;Hiding subtab: $&#123;subtabs[i].id&#125;\&#x60;);
&#125;
</Code>
</>,
solutionchildren: <></>
},
]
\ No newline at end of file
src/contents/Contribution/Wiki/troubleshooting.tsx
View file @ 3fd292fd
import { Code } from "../../../components/Code";
import Collapsible from "../../../components/Collapsible";
import { WikiSelector } from "../../../components/Filter";
import { Filterables } from "./Filterables";
import { troubledata } from "./trouble-data";
export function Troubleshooting(){
let items = Filterables(troubledata)
return(
<div>
Please select what you want to troubleshoot for.
......@@ -11,203 +11,16 @@ export function Troubleshooting(){
<div id="nono" className="noshow">
This combination returns no instances.
</div>
<div className="filterable all react type property">
<Collapsible id="wiki-trouble-1" title="Argument of type X is not assignable to parameter of type Y. ">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react type">
<Collapsible id="wiki-trouble-2" title="Type X is not assignable to type Y.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all css">
<Collapsible id="wiki-trouble-3" title="I added css styles but they do not show">
<h6>Example</h6>
<p>The color is not showing on hover.</p>
<Code>.nav-link:hover &#123;
color: var(--darkpurple);
background-color: var(--yellow) !important;
border-radius: 3px;
&#125;</Code>
<h6>Solution</h6>
<p>Styles not showing is often a case of a different style overriding your style. Some styles are pre defined by bootstrap or other packages you may use. </p>
<p> If an external package is overriding your style, you need to add the <b>!important</b> tag to your style. </p>
<p> If one of your own styles is overriding the new style, you can change your old style or define a new, more specific style case. E.g. by using a more specific css path. But you may still need to add the <b>!important</b> tag. </p>
<Code> .nav-link:hover &#123;
color: var(--darkpurple) <b>!important</b>;
background-color: var(--yellow) !important;
border-radius: 3px;
&#125;
</Code>
</Collapsible>
</div>
<div className="filterable all react type property">
<Collapsible id="wiki-trouble-4" title="Property x is missing in type y but required in type z.">
<h6>Example</h6>
<p className="problem-error"> Argument of type '&#123; [x: string]: any; &#125;' is not assignable to parameter of type '&#123; classNames: string[]; &#125;'.
Property 'classNames' is missing in type '&#123; [x: string]: any; &#125;' but required in type '&#123; classNames: string[]; &#125;'.</p>
<p> for </p>
<Code>className=&#123;joinClassNames(&#123;[&#39;text-event&#39;, className]&#125;)&#125; </Code>
<h6>Solutions</h6>
<p>In this example, the problem was that the property "classNames" was not explicitly named.</p>
<p>Changing it to </p>
<Code>className=&#123;joinClassNames(&#123;<b>classNames:</b>[&#39;text-event &#39;, className]&#125;)&#125;</Code>
</Collapsible>
</div>
<div className="filterable all react type property">
<Collapsible id="wiki-trouble-5" title="Property x does not exist on type Y.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react type property">
<Collapsible id="wiki-trouble-6" title="Type X is missing the following properties from type Y: a, b, c">
<h6>Example</h6>
<p className="problem-error">
Type '&#123; date: string; text: string; &#125;' is missing the following properties from type 'TextEventProps': marker, card
</p>
<p>In reference of the interface TextEventProps:</p>
<Code>
<p>interface TextEventProps &#123; </p>
<p>date: string; </p>
<p>text: string; </p>
<p>marker: React.ReactNode; </p>
<p>id: string; </p>
<p>card: Function; </p>
&#125;
</Code>
<p>For the code:</p>
<Code>
<p> &lt;TextEvent </p>
<p> id="05"</p>
<p> date="14-06-2024"</p>
<p> text="Test test"</p>
<p> /&gt;</p>
</Code>
<h6>Solutions</h6>
<p>One solution could be getting rid of the properties you do not need everywhere and create new property interfaces for all cases.</p>
<p>If you want to stick to more general Interfaces, you can make properties optional:</p>
<Code>
<p>interface TextEventProps &#123; </p>
<p>date: string; </p>
<p>text: string; </p>
<p>marker?: React.ReactNode; </p>
<p>id: string; </p>
<p>card?: Function; </p>
&#125;
</Code>
<p>Remember that this can lead to different return cases for your functions.</p>
</Collapsible>
</div>
<div className="filterable all react type">
<Collapsible id="wiki-trouble-7" title="Type 'x | undefined' is not assignable to type 'x'.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all pipeline">
<Collapsible id="wiki-trouble-8" title="The pipeline passed but the Wiki is not visible under the url">
<p>This error could be a result of a wrong base url in the vite.config.js file.</p>
<p>E.g. if you switched from plain HTML to the react framework. </p>
<h6>Example</h6>
<Code>
<p>return defineConfig(&#123;</p>
<p>base: `/`,</p>
<p>...</p>
</Code>
<h6>Solution</h6>
<p>Change the base url to reflect the correct team url.</p>
<Code>
<p>return defineConfig(&#123;</p>
<p>base: `/$&#123;stringToSlug(env.VITE_TEAM_NAME)&#125;/`,</p>
<p>...</p>
</Code>
</Collapsible>
</div>
<div className="filterable all console">
<Collapsible id="wiki-trouble-9" title="NS_ERROR_CORRUPTED_CONTENT error in console">
<p> &rarr; See also "The pipeline passed but the Wiki is not visible under the url" as these errors can be connected.</p>
<p> This error for css and js files can be the result of wrong <b>rollupOptions</b> in for the build, to be specific wrong <b>output</b> and <b>assetFileNames</b> options and possibly wrong/empty <b>css</b> options in your vite.config.js. </p>
<h6>Example</h6>
<p>In our case, we had the following code on our vite.config.js</p>
<Code>
<p>build: &#123; </p>
<p>outDir: "dist",</p>
<p>rollupOptions: &#123;</p>
<p>output: &#123;</p>
<p> assetFileNames: `assets/[ext]/[name]-[hash].[ext]`</p>
<p>&#125; &#125; &#125; , </p>
</Code>
<p> Our <b>css</b> options were empty, which could also have played a factor for the css files.</p>
<Code>
<p>css: &#123;</p>
<p>preprocessorOptions: &#123;</p>
<p>css: &#123;</p>
<p> //javascriptEnabled: true, // Enable JavaScript in CSS (useful for certain CSS preprocessor plugins)</p>
<p> &#125; &#125; &#125;,</p>
</Code>
</Collapsible>
</div>
<div className="filterable all console">
<Collapsible id="wiki-trouble-10" title="Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)">
<p> &rarr; See also "Refused to apply style from &lt;&lt;css file&gt;&gt; because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)"</p>
<p>This error could </p>
</Collapsible>
</div>
<div className="filterable all console">
<Collapsible id="wiki-trouble-11" title="Refused to apply style from <<css file>> because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)">
<p> &rarr; See also "Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)"</p>
<p>This error could </p>
</Collapsible>
</div>
<div className="filterable all react type">
<Collapsible id="wiki-trouble-12" title="Type 'undefined' cannot be used as an index type">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react overload">
<Collapsible id="wiki-trouble-13" title="No overload matches this call.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react module">
<Collapsible id="wiki-trouble-14" title="Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.">
<h6>Example</h6>
index.tsx:
<p className="problem-error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
<h6>Solutions</h6>
Simply rename the function in one of the modules or consider making it a component if you plan on using it frequently.
</Collapsible>
</div>
<div className="filterable all pipeline">
<Collapsible id="wiki-trouble-15" title="error TS6133: 'event' is declared but its value is never read.">
<h6>Example</h6>
HorizontalTimeline.tsx:
<div className="terminal-box">
$ yarn build
<p>yarn run v1.22.19</p>
<p>$ tsc && vite build</p>
<p className="terminal-error">src/components/HorizontalTimeline.tsx(67,23): error TS6133: 'event' is declared but its value is never read.
error Command failed with exit code 2.</p>
<p>info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.</p>
</div>
<p>in</p>
<Code>
const openPop = (event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
</Code>
<h6>Solutions</h6>
<p>Change to: </p>
<Code>
const openPop = (_event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
</Code>
</Collapsible>
</div>
{items}
</div>
)
}
src/contents/Contribution/Wiki/wiki-overview.tsx 0 → 100644
View file @ 3fd292fd
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>
<p><b>Components</b> contains some components we used that we found very helpful. Many packages that offer components such as timelines were not exactly what we were looking for or did not work with our packages. The solution was to create our own components. </p>
<p><b>Downloads</b> contains svgs we created - not all of them we were able to use. </p>
<p><b>Resources</b> contains links zu helpful external. </p>
</div>
)
}
\ No newline at end of file
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-start.tsx
View file @ 3fd292fd
......@@ -3,18 +3,21 @@ export function Started(){
return(
<>
<h3>Differences between React and plain HTML</h3>
<p>There are some differences in the syntax that can lead to errors.</p>
<p>These can lead to confusing errors if you are used to HTML.</p>
<table>
<tr>
<th></th>
<th>Plain HTML</th>
<th>Using React</th>
</tr>
<thead>
<tr>
<th></th>
<th>Plain HTML</th>
<th>Using React</th>
</tr>
</thead>
<tbody>
<tr>
<th> <code>&lt;tags&gt; </code> </th>
<th>
<p> Most tags have to be opened and closed, but some can be only opened. </p>
<p> e.g. img, br, ... <code> &lt;img src:"somesource" alt="alt"&gt; </code> </p>
<p> e.g. img, br, ... <code> &lt;img src:"somesource" alt="alt"&gt; </code> </p>
</th>
<th>
<p> Every tag has to be closed. </p>
......@@ -48,7 +51,9 @@ export function Started(){
<p> style=&#123;&#123;<var>attribute</var>: "<var>value</var>", <var>attribute</var>: "<var>value</var>" &#125;&#125;</p>
</th>
</tr>
</tbody>
</table>
<h3>Good to knows</h3>
</>
)
}