From a8f700513c11d82115a3a896313a9a853ef6b70a Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 8 Jul 2024 12:51:12 +0200
Subject: [PATCH] More content

---
 src/App/App.css       | 18 +++++++++
 src/contents/wiki.tsx | 91 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+)

diff --git a/src/App/App.css b/src/App/App.css
index 0a52d073..b0231ab4 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -171,7 +171,25 @@ color: var(--text-primary);
   color: var(--text-primary) !important;
 }
 
+/* TABLES */
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
 
+td, th {
+  border: 1px solid black;
+  text-align: left;
+  padding: 8px;
+}
+
+tr:nth-child(even) {
+  background-color: #ededed;
+}
+tr:nth-child(1) {
+  background-color: var(--lightblue);
+}
 
 /* * * * * * * */
 /* BACKGROUND  */
diff --git a/src/contents/wiki.tsx b/src/contents/wiki.tsx
index 5491e747..09a9b3d9 100644
--- a/src/contents/wiki.tsx
+++ b/src/contents/wiki.tsx
@@ -34,13 +34,16 @@ export function Wiki  () {
         <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>
@@ -50,6 +53,62 @@ export function Wiki  () {
   );
 }
 
+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>
@@ -69,7 +128,39 @@ export function Wiki  () {
         </ul>
 
       </Collapsible>
+      <Collapsible title="Colours" >
+        Need a slightly lighter version of one of your colours 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 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 title="Placeholders">
+        <ul>
+          <li><a href="https://www.loremipsum.de/">https://www.loremipsum.de/</a></li>
+        </ul>
+      </Collapsible>
+
+      <Collapsible title="SVGs">
+        <ul>
+          <li><a href="https://superdesigner.co/tools/svg-backgrounds">https://superdesigner.co/tools/svg-backgrounds</a></li>
+        </ul>
+      </Collapsible>
+
+      <Collapsible title="Accessibility">
+      <ul>
+        <li><a href="https://schema.org">https://schema.org</a></li>
+      </ul>
+      </Collapsible>
     </div>
+
   )
 } 
 
-- 
GitLab