Skip to content
Snippets Groups Projects
Commit 49d43a5b authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

Wiki

parent c658603e
No related branches found
No related tags found
No related merge requests found
Pipeline #439803 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/contents/wiki.tsx → src/contents/Contribution/Wiki/troubleshooting.tsx
+ 4
− 201
View file @ 49d43a5b
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>&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>
</th>
<th>
<p> Every tag has to be closed. </p>
<p> e.g. img, br, ...
<code> &lt;img src:"somesource" alt="alt"/&gt;</code> or
<code> &lt;img src:"somesource" alt="alt"&gt; &lt;/img&gt; </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=&#123;&#123;vectorEffect: &quot;non-scaling-stroke&quot;&#125;&#125;</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=&#123;&#123;<var>attribute</var>: "<var>value</var>", <var>attribute</var>: "<var>value</var>" &#125;&#125;</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>
)
}
src/contents/Contribution/Wiki/wiki-sources.tsx 0 → 100644
+ 56
− 0
View file @ 49d43a5b
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
src/contents/Contribution/Wiki/wiki-start.tsx 0 → 100644
+ 55
− 0
View file @ 49d43a5b
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>&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>
</th>
<th>
<p> Every tag has to be closed. </p>
<p> e.g. img, br, ...
<code> &lt;img src:"somesource" alt="alt"/&gt;</code> or
<code> &lt;img src:"somesource" alt="alt"&gt; &lt;/img&gt; </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=&#123;&#123;vectorEffect: &quot;non-scaling-stroke&quot;&#125;&#125;</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=&#123;&#123;<var>attribute</var>: "<var>value</var>", <var>attribute</var>: "<var>value</var>" &#125;&#125;</p>
</th>
</tr>
</table>
</>
)
}
\ No newline at end of file
src/contents/Contribution/Wiki/wiki-tabs.tsx 0 → 100644
+ 39
− 0
View file @ 49d43a5b
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
src/contents/Contribution/Wiki/wiki.tsx 0 → 100644
+ 18
− 0
View file @ 49d43a5b
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment