diff --git a/src/contents/wiki.tsx b/src/contents/Contribution/Wiki/troubleshooting.tsx
similarity index 58%
rename from src/contents/wiki.tsx
rename to src/contents/Contribution/Wiki/troubleshooting.tsx
index b31653d037f820a4c527a84ea502b40964f4df70..0f0e23972728f8f15b95bad81301854f01591779 100644
--- a/src/contents/wiki.tsx
+++ b/src/contents/Contribution/Wiki/troubleshooting.tsx
@@ -1,203 +1,8 @@
-import { Box, Tab } from "@mui/material";
-import {TabContext, TabList, TabPanel} from '@mui/lab';
-import Collapsible from "../components/Collapsible";
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
-import React from "react";
-export function Wiki () {
- const location = useLocation();
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Handle scroll to collapse section
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Handle opening the tab
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
- return (
- <>
- <div className="row">
- <div className="col">
- <WikiTabs></WikiTabs>
- </div>
- </div>
- <div className="row">
- <div className="d-flex flex-column justify-content-center align-items-center">
- </div>
- </div>
- </>
- );
-}
-
-
- export function WikiTabs() {
- const [value, setValue] = React.useState('1');
-
- const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
- setValue(newValue);
- };
-
- return (
- <Box sx={{ width: '100%', typography: 'body1' }}>
- <TabContext value={value}>
- <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
- <TabList onChange={handleChange} aria-label="lab API tabs example">
- <Tab label="About" 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" />
-
- </TabList>
- </Box>
- <TabPanel value="1"> </TabPanel>
- <TabPanel value="6"> <Started/> </TabPanel>
- <TabPanel value="2"> <Troubleshooting/> </TabPanel>
- <TabPanel value="3"> </TabPanel>
- <TabPanel value="4"> </TabPanel>
- <TabPanel value="5"> <Sources/> </TabPanel>
- </TabContext>
- </Box>
- );
-}
-
-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>
- <table>
- <tr>
- <th></th>
- <th>Plain HTML</th>
- <th>Using React</th>
- </tr>
- <tr>
- <th> <code><tags> </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> <img src:"somesource" alt="alt"> </code> </p>
- </th>
- <th>
- <p> Every tag has to be closed. </p>
- <p> e.g. img, br, ...
- <code> <img src:"somesource" alt="alt"/></code> or
- <code> <img src:"somesource" alt="alt"> </img> </code> </p>
- </th>
- </tr>
- <tr>
- <th>Attribute Names</th>
- <th>
- <p> Global attribute names are always written in lowercase and two words are fused into one by "-". </p>
- <p> E.g. "class", "charset", ...</p>
- <p> This is also the case when using the syle-attribute. </p>
- <p> E.g. <code>style="color:blue; text-align:center"</code></p>
- </th>
- <th>
- <p>Global attribute names are generally written in lowercase but use the camel case if two words have to be fused. Some attrubutes have slightly different names.</p>
- <p>E.g. "className", "charSet", ...</p>
- <p> This is also the case when using the style-attribute.</p>
- <p> E.g. <code>style={{vectorEffect: "non-scaling-stroke"}}</code></p>
- <p>This does not apply to the css file!</p>
- </th>
- </tr>
- <tr>
- <th>Style attribute</th>
- <th>
- <p> style="<var>attribute</var>: <var>value</var>; <var>attribute</var>: <var>value</var>" </p>
- </th>
- <th>
- <p> style={{<var>attribute</var>: "<var>value</var>", <var>attribute</var>: "<var>value</var>" }}</p>
- </th>
- </tr>
- </table>
- </>
- )
-}
-
-
- function Sources(){
- return(
- <div>
- <Collapsible id="wiki-icons" title="Images and Icons" >
- Most teams need a lot of pictures, components, icons and alike. They can be difficult to find, especially free and open source ones.
-
- <ul>
- <li> <a href="https://bioicons.com/"> https://bioicons.com/</a> </li>
- <li> <a href="https://togotv.dbcls.jp/en/pics.html" > https://togotv.dbcls.jp/en/pics.html </a> </li>
- <li> <a href="https://smart.servier.com/" >https://smart.servier.com/</a> </li>
- <li> <a href="https://openclipart.org/" > https://openclipart.org/</a> </li>
- <li> <a href="https://commons.wikimedia.org/wiki/Category:SVG_files" >https://commons.wikimedia.org/wiki/Category:SVG_files</a> </li>
- <li> <a href="https://www.flaticon.com/">https://www.flaticon.com/</a> </li>
- <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>
- </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>
- </ul>
- </Collapsible>
- <Collapsible id="wiki-tools" title="Coding Tools">
- Generators
- <ul>
- <li><a href="https://www.cssportal.com/">https://www.cssportal.com/</a></li>
- <li><a href="https://htmlcss.tools/">https://htmlcss.tools/</a></li>
- </ul>
- </Collapsible>
-
- <Collapsible id="wiki-placeholder" title="Placeholders">
- <ul>
- <li><a href="https://www.loremipsum.de/">https://www.loremipsum.de/</a></li>
- </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>
- <li><a href="https://schema.org">https://schema.org</a></li>
- </ul>
- </Collapsible>
- </div>
-
- )
-}
-
-
-
-import { WikiSelector } from "../components/Filter";
-import { Code } from "../components/Code";
-function Troubleshooting(){
+import { Code } from "../../../components/Code";
+import Collapsible from "../../../components/Collapsible";
+import { WikiSelector } from "../../../components/Filter";
+export function Troubleshooting(){
return(
<div>
@@ -406,5 +211,3 @@ function Troubleshooting(){
</div>
)
}
-
-
diff --git a/src/contents/Contribution/Wiki/wiki-sources.tsx b/src/contents/Contribution/Wiki/wiki-sources.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d62c77734cf374ca9df344b74868dd98cf00e53a
--- /dev/null
+++ b/src/contents/Contribution/Wiki/wiki-sources.tsx
@@ -0,0 +1,56 @@
+import Collapsible from "../../../components/Collapsible";
+
+export function Sources(){
+ return(
+ <div>
+ <Collapsible id="wiki-icons" title="Images and Icons" >
+ Most teams need a lot of pictures, components, icons and alike. They can be difficult to find, especially free and open source ones.
+
+ <ul>
+ <li> <a href="https://bioicons.com/"> https://bioicons.com/</a> </li>
+ <li> <a href="https://togotv.dbcls.jp/en/pics.html" > https://togotv.dbcls.jp/en/pics.html </a> </li>
+ <li> <a href="https://smart.servier.com/" >https://smart.servier.com/</a> </li>
+ <li> <a href="https://openclipart.org/" > https://openclipart.org/</a> </li>
+ <li> <a href="https://commons.wikimedia.org/wiki/Category:SVG_files" >https://commons.wikimedia.org/wiki/Category:SVG_files</a> </li>
+ <li> <a href="https://www.flaticon.com/">https://www.flaticon.com/</a> </li>
+ <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>
+ </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>
+ </ul>
+ </Collapsible>
+ <Collapsible id="wiki-tools" title="Coding Tools">
+ Generators
+ <ul>
+ <li><a href="https://www.cssportal.com/">https://www.cssportal.com/</a></li>
+ <li><a href="https://htmlcss.tools/">https://htmlcss.tools/</a></li>
+ </ul>
+ </Collapsible>
+
+ <Collapsible id="wiki-placeholder" title="Placeholders">
+ <ul>
+ <li><a href="https://www.loremipsum.de/">https://www.loremipsum.de/</a></li>
+ </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>
+ <li><a href="https://schema.org">https://schema.org</a></li>
+ </ul>
+ </Collapsible>
+ </div>
+
+ )
+ }
\ No newline at end of file
diff --git a/src/contents/Contribution/Wiki/wiki-start.tsx b/src/contents/Contribution/Wiki/wiki-start.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..669aab33a5d4e4017d6f275fd211222840c31104
--- /dev/null
+++ b/src/contents/Contribution/Wiki/wiki-start.tsx
@@ -0,0 +1,55 @@
+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>
+ <table>
+ <tr>
+ <th></th>
+ <th>Plain HTML</th>
+ <th>Using React</th>
+ </tr>
+ <tr>
+ <th> <code><tags> </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> <img src:"somesource" alt="alt"> </code> </p>
+ </th>
+ <th>
+ <p> Every tag has to be closed. </p>
+ <p> e.g. img, br, ...
+ <code> <img src:"somesource" alt="alt"/></code> or
+ <code> <img src:"somesource" alt="alt"> </img> </code> </p>
+ </th>
+ </tr>
+ <tr>
+ <th>Attribute Names</th>
+ <th>
+ <p> Global attribute names are always written in lowercase and two words are fused into one by "-". </p>
+ <p> E.g. "class", "charset", ...</p>
+ <p> This is also the case when using the syle-attribute. </p>
+ <p> E.g. <code>style="color:blue; text-align:center"</code></p>
+ </th>
+ <th>
+ <p>Global attribute names are generally written in lowercase but use the camel case if two words have to be fused. Some attrubutes have slightly different names.</p>
+ <p>E.g. "className", "charSet", ...</p>
+ <p> This is also the case when using the style-attribute.</p>
+ <p> E.g. <code>style={{vectorEffect: "non-scaling-stroke"}}</code></p>
+ <p>This does not apply to the css file!</p>
+ </th>
+ </tr>
+ <tr>
+ <th>Style attribute</th>
+ <th>
+ <p> style="<var>attribute</var>: <var>value</var>; <var>attribute</var>: <var>value</var>" </p>
+ </th>
+ <th>
+ <p> style={{<var>attribute</var>: "<var>value</var>", <var>attribute</var>: "<var>value</var>" }}</p>
+ </th>
+ </tr>
+ </table>
+ </>
+ )
+ }
+
\ No newline at end of file
diff --git a/src/contents/Contribution/Wiki/wiki-tabs.tsx b/src/contents/Contribution/Wiki/wiki-tabs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..71d63da43c1ad6bb846e4cb56dcb75f29ca9d880
--- /dev/null
+++ b/src/contents/Contribution/Wiki/wiki-tabs.tsx
@@ -0,0 +1,39 @@
+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";
+
+export function WikiTabs() {
+ const [value, setValue] = React.useState('1');
+
+ const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
+ setValue(newValue);
+ };
+
+ return (
+ <Box sx={{ width: '100%', typography: 'body1' }}>
+ <TabContext value={value}>
+ <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+ <TabList onChange={handleChange} aria-label="lab API tabs example">
+ <Tab label="About" 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" />
+
+ </TabList>
+ </Box>
+ <TabPanel value="1"> </TabPanel>
+ <TabPanel value="6"> <Started/> </TabPanel>
+ <TabPanel value="2"> <Troubleshooting/> </TabPanel>
+ <TabPanel value="3"> </TabPanel>
+ <TabPanel value="4"> </TabPanel>
+ <TabPanel value="5"> <Sources/> </TabPanel>
+ </TabContext>
+ </Box>
+ );
+ }
+
\ No newline at end of file
diff --git a/src/contents/Contribution/Wiki/wiki.tsx b/src/contents/Contribution/Wiki/wiki.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..baf72635e9d42c66b56379b4e89a7017841953a7
--- /dev/null
+++ b/src/contents/Contribution/Wiki/wiki.tsx
@@ -0,0 +1,18 @@
+import { WikiTabs } from "./wiki-tabs";
+
+export function Wiki () {
+ return (
+ <>
+ <div className="row">
+ <div className="col">
+ <WikiTabs></WikiTabs>
+ </div>
+ </div>
+ <div className="row">
+ <div className="d-flex flex-column justify-content-center align-items-center">
+ </div>
+ </div>
+ </>
+ );
+ }
+
\ No newline at end of file