fix: update exercise.jsx

Author: ramseycoder

component/markdown.jsx

@@ -0,0 +1,75 @@
+import { Span, Color, P, Div } from './elements.jsx'
+import { css } from '../lib/dom.js'
+import { navigate } from '../lib/router.js'
+
+css(`
+    li.mli {
+      display:block;
+    }
+    li.mli.link {
+        cursor:pointer;
+    }
+
+`)
+
+export const MTitle = Object.fromEntries(
+  ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map((el) => [
+    el,
+    ({ children, ...props }) =>
+      h(
+        el,
+        props,
+        <>
+          <Span fg="red">{'#'.repeat(Number(el.slice(1)))}</Span>&nbsp;
+        </>,
+        children,
+      ),
+  ]),
+)
+
+export const MItalicWord = ({ children, color }) => {
+  return (
+    <P>
+      <Span fg="orange"> > </Span>
+      <Color.CommentLighter>*</Color.CommentLighter>
+      <Span fg={color} style={{ fontStyle: 'italic' }}>
+        {children}
+      </Span>
+      <Color.CommentLighter>*</Color.CommentLighter>
+    </P>
+  )
+}
+
+export const MLi = ({ children, link }) => {
+  let ColorIze = link ? Color.CyanDarker : Color.CommentLighter
+  return (
+    <li
+      class={`mli ${link ? 'link' : ''}`}
+      onClick={(e) => {
+        if (link) navigate(link)
+      }}
+    >
+      <Span fg="orange"> - </Span>
+      <Span
+        style={{
+          padding: '0.1rem',
+          background: !link && 'rgba(75, 75, 75, 0.63)',
+          textDecoration: link && 'underline',
+        }}
+        fg={link ? 'cyan-darker' : 'white'}
+      >
+        <ColorIze>{link ? '[' : '`'}</ColorIze>
+        {children}
+        <ColorIze>{link ? ']' : '`'}</ColorIze>
+      </Span>
+    </li>
+  )
+}
+
+export const Warning = ({ children }) => {
+  return (
+    <Div style={{ border: '1px dashed red', padding: '0.8rem' }}>
+      {children}
+    </Div>
+  )
+}

data/fakeExercise.json

@@ -2,5 +2,5 @@
   "name":"01-Hello There",
   "description":"lorem ipsum",
   "instructions":["do this", "do that","do like thaht"],
-  "notions":["loop","variable","functions"]
+  "notions":[{"name":"Loop","link":"/notions/js-loop"},{"name":"Variables","link":"/notions/js-variables"},{"name":"Conditions","link":"/notions/js-conditions"}]
 }

page/exercise.jsx

@@ -1,98 +1,62 @@
 import { css } from '../lib/dom.js'
-import { Div, P, Span } from '../component/elements.jsx'
+import { Div, P } from '../component/elements.jsx'
+import { MTitle, MItalicWord, MLi, Warning } from '../component/markdown.jsx'
 import exercise from '../data/fakeExercise.json'
 
 css(`
     .exercise h1 {
       font-weight: bolder;
     }
 
-    .exercise>hr {
-      width: 100%;
-      height: 2px;
-      background: grey;
-    }
-
     .exercise h3 {
       font-weight: bolder;
-      text-decoration: underline;
-    }
-
-    .exercise ul li {
-      display: block;
     }
 
     .exercise .instructions .description {
       padding: 0.3rem;
     }
 
-    .exercise .instructions ul li:before {
-      content: '';
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      margin-right: 10px;
-      border-radius: 0.5rem;
-      background: white;
-    }
-
-    .exercise .notions h3 span {
-      color: yellow;
-    }
-
     .exercise .notions p {
       padding: 0.3rem;
-
-    .exercise .notions ul li {
-      cursor:pointer;
-      transition: all .25s ease-in-out;
-    }
-
-    .exercise .notions ul li:hover {
-      color: skyblue;
-      font-weight:bolder;
-    }
-
-    .exercise .notions ul li:before {
-      content: '';
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      border-radius: 0 10rem 10rem 0;
-      background: white;
     }
 `)
 export const Exercise = () => {
   return (
     <Div class="exercise">
-      <h1>🖊 {exercise.name}</h1>
-      <hr />
-      
+      <MTitle.h2>{exercise.name}</MTitle.h2>
       {'\n'}
       <Div class="instructions">
-        <h3>Instructions</h3>
+        <MTitle.h3>Instructions</MTitle.h3>
+        {'\n'}
         {exercise.description && (
           <P class="description">{exercise.description}</P>
         )}
+        {'\n'}
         {exercise.instructions && (
           <ul>
             {exercise.instructions.map((key) => (
-              <li key={key}>{key}</li>
+              <MLi key={key}>{key}</MLi>
             ))}
           </ul>
         )}
       </Div>
       {'\n'}
       <Div class="notions">
-        <h3>
-          <span>⚠</span> Warning
-        </h3>
-        <P>To do this Exercise you should know the following concepts : </P>
-        <ul>
-          {exercise.notions.map((key) => (
-            <li key={key}>{key}</li>
-          ))}
-        </ul>
+        <MTitle.h3>Warning</MTitle.h3>
+        {'\n'}
+        <Warning>
+          <MItalicWord color="red">
+            To do this Exercise you should know the following concepts :
+          </MItalicWord>
+          {'\n'}
+          <ul>
+            {exercise.notions.map(({ name, link }) => (
+              <MLi key={name} link={link}>
+                {name}
+              </MLi>
+            ))}
+          </ul>
+        </Warning>
       </Div>
       {'\n'}
     </Div>