add module home page

api/auth.js

@@ -68,6 +68,7 @@ GET.auth.discord = async ({ url }) => {
       roles: [rolesByKey.student.id, specialities[speciality].id],
     },
   })
+
 
   join.reply.ok || console.error('Unable to join discord:', join.reply)
   user.role = roles.find((r) => join.roles.includes(r.id))?.key || 'student'

app.jsx

@@ -6,15 +6,15 @@ import { P, divider } from './component/elements.jsx'
 import { Router } from './lib/router.js'
 import { Profile } from './page/profile.jsx'
 import { Home } from './page/home.jsx'
-import { Exercise } from './page/exercise.jsx'
+import { ModuleHome } from './page/module_home.jsx'
 
 const App = () => (
   <>
     <Header />
     <Router>
       <Profile path="/profile" />
+      <ModuleHome path="/modules" />
       <Home path="*" />
-      <Exercise path="/exercise" />
     </Router>
     <footer>
       {divider}

component/header.jsx

@@ -20,7 +20,7 @@ const LinkMatch = ({ match, children, path, ...props }) => (
 const clearStorage = () => localStorage.clear()
 
 // prettier-ignore
-const NavLink = (props) => <li> - <Link {...props} /></li>
+export const NavLink = (props) => <li>{!props.removeTiret && ' - '}<Link {...props} /></li>
 const LogAction = () => {
   if (!user) {
     return (
@@ -78,6 +78,11 @@ export const Header = ({ page, title, children }) => {
   return (
     <header>
       <Nav path={path} />
+      {'\n'}
+      <Title>Page</Title>
+      {'\n'}
+      <h1>{`  ${path}`} </h1>
+      {'\n'}
       {children}
     </header>
   )

component/markdown.jsx

@@ -0,0 +1,63 @@
+import { Span, Color, P, Div } from './elements.jsx'
+import { css } from '../lib/dom.js'
+import { NavLink } from './header.jsx'
+
+css(`
+    .warn {
+      outline:1px dashed red;
+      padding:0.8rem;
+    }
+
+`)
+
+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, type }) => {
+  return (
+    <P>
+      <Color.Orange>{'>'}</Color.Orange>
+      <Color.CommentLighter>*</Color.CommentLighter>
+      <Span fg={color} style={{ fontStyle: 'italic' }}>
+        {children}
+      </Span>
+      <Color.CommentLighter>*</Color.CommentLighter>
+      {type === 'ps' && <Color.Orange>{'<'}</Color.Orange>}
+    </P>
+  )
+}
+
+export const MLi = ({ children, link, ...props }) => {
+  let ColorIze = link ? Color.CyanDarker : Color.CommentLighter
+  return (
+    <NavLink href={link ? link : null} {...props}>
+      <Span
+        style={{
+          padding: '0.1rem',
+          background: !link && 'rgba(75, 75, 75, 0.63)',
+        }}
+        fg={link ? 'cyan-darker' : 'white'}
+      >
+        <ColorIze>{link ? '[' : '`'}</ColorIze>
+        {children}
+        <ColorIze>{link ? ']' : '`'}</ColorIze>
+      </Span>
+    </NavLink>
+  )
+}
+
+export const Warning = ({ children }) => {
+  return <Div class="warn">{children}</Div>
+}

component/moduleLi.jsx

@@ -0,0 +1,78 @@
+import { css } from '../lib/dom'
+import { navigate } from '../lib/router'
+import { P, Span } from './elements'
+import { NavLink } from './header.jsx'
+
+css(`
+  .module-li {
+    display:block;
+    cursor:pointer;
+    margin:1ch;
+    padding:0.2ch;
+    display:flex;
+    width: 100%;
+    flex-direction:row;
+    align-items:center;
+    justify-conternt: space-around;
+    cursor:not-allowed;
+  }
+
+  .module-li p {
+    margin-right:1ch;
+    width:30%;
+    color: grey;
+  }
+
+  .module-li span {
+    margin-right:1ch;
+    color:grey;
+  }
+
+  .module-li.pass {
+    cursor:pointer;
+  }
+
+  .module-li.pass p{
+    color: white;
+  }
+
+  .module-li.pass span {
+    color:white;
+  }
+
+
+`)
+
+export const ModuleLi = ({
+  name,
+  language,
+  exercises,
+  quizzes,
+  isPassed,
+  isActive,
+  results,
+}) => {
+  return (
+    <NavLink
+      class={`module-li ${isPassed || isActive ? 'pass' : ''}`}
+      href={(isPassed || isActive) && '/module/' + name}
+      style={{
+        outline: !isPassed && !isActive && 'none',
+        textDecoration: 'none',
+      }}
+      removeTiret
+    >
+      <P>📕 - {name}</P>
+      <Span>
+        <Span bg="selection">
+          [{results ? results.exercises : 0}/{exercises} exos done]
+        </Span>
+      </Span>
+      <Span>
+        <Span bg="selection">
+          [{results ? results.quizzes : 0}/{quizzes} quizzes done]
+        </Span>
+      </Span>
+    </NavLink>
+  )
+}

data/fakeModules.json

@@ -0,0 +1,46 @@
+{
+    "01-JS Basics":{
+      "description":
+        "this  module talk about the basics  programmation in javascript",
+      "notions": ["variables", "data types", "operators", "condition", "iteraction"],
+      "children": [
+        { "name": "Hello There", "type": "exercise", "key": "01-Hello There.exercise.md"},
+        {
+          "name": "Anything To Declare",
+          "type": "exercise",
+          "key": "02-Anything To Declare.exercise.md"
+        },
+        { "name": "Good Search", "type": "exercise", "key": "03-Good Search.exercise.md"},
+        { "name": "World of DOM", "type": "quiz", "key": "04-World of DOM.quiz.md"},
+        {
+          "name": "Redeclaration Love",
+          "type": "exercise",
+          "key": "05-Redeclaration of Love"
+        },
+        { "name": "Duplicate", "type": "exercise", "key": "06-Duplicate.exercise.md"},
+        { "name": "cool", "type": "quiz", "key": "07-cool.quiz.md"}
+      ]
+    },
+    "02-JS Conditions":{
+      "description":
+        "this  module talk about the basics  programmation in javascript",
+      "notions": ["variables", "data types", "operators", "condition", "iteraction"],
+      "children": [
+        { "name": "Hello There", "type": "exercise", "key": "01-Hello There.exercise.md"},
+        {
+          "name": "Anything To Declare",
+          "type": "exercise",
+          "key": "02-Anything To Declare.exercise.md"
+        },
+        { "name": "Good Search", "type": "exercise", "key": "03-Good Search.exercise.md"},
+        { "name": "World of DOM", "type": "quiz", "key": "04-World of DOM.quiz.md"},
+        {
+          "name": "Redeclaration Love",
+          "type": "exercise",
+          "key": "05-Redeclaration of Love"
+        },
+        { "name": "Duplicate", "type": "exercise", "key": "06-Duplicate.exercise.md"},
+        { "name": "cool", "type": "quiz", "key": "07-cool.quiz.md"}
+      ]
+    }
+}

data/fakeUserData.json

@@ -0,0 +1,11 @@
+{
+  "name":"Koffi",
+  "lastname":"Kouamé Rameaux",
+  "results":{
+    "01-JS Basics":{
+        "01-Hello There":{"type": "exercise","percent":0.6,"attempts":4,"seconds":60,"pass":true},
+      "02-Anything To Declare":{"type" : "exercise" , "percent":0.7,"seconds":125,"attempts":15,"pass":true},
+      "03-Good Search":{"type":"exercise","attempts": 14,"pass":false }
+    }
+  }
+}