From 72832610a9831d14a5e8a818f3b6cb8f757e35dd Mon Sep 17 00:00:00 2001
From: ramseycoder <ramseykoffi080@gmail.com>
Date: Mon, 25 Oct 2021 15:21:47 +0000
Subject: [PATCH 1/2] add notions.jsx page

---
 app.jsx                   |   4 +-
 component/header.jsx      |   5 ++
 component/markdown.jsx    |  74 +++++++++++++++++++++
 component/notion_card.jsx |  42 ++++++++++++
 data/fakeExercise.json    |   6 --
 data/fakeRessources.json  |  32 +++++++++
 page/exercise.jsx         | 134 --------------------------------------
 page/notions.jsx          |  30 +++++++++
 8 files changed, 185 insertions(+), 142 deletions(-)
 create mode 100644 component/markdown.jsx
 create mode 100644 component/notion_card.jsx
 delete mode 100644 data/fakeExercise.json
 create mode 100644 data/fakeRessources.json
 delete mode 100644 page/exercise.jsx
 create mode 100644 page/notions.jsx

diff --git a/app.jsx b/app.jsx
index 54030577..6750c952 100644
--- a/app.jsx
+++ b/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 { Notions } from './page/notions.jsx'
 
 const App = () => (
   <>
     <Header />
     <Router>
       <Profile path="/profile" />
+      <Notions path="/notions" />
       <Home path="*" />
-      <Exercise path="/exercise" />
     </Router>
     <footer>
       {divider}
diff --git a/component/header.jsx b/component/header.jsx
index c8d765a7..ba34bfdf 100644
--- a/component/header.jsx
+++ b/component/header.jsx
@@ -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>
   )
diff --git a/component/markdown.jsx b/component/markdown.jsx
new file mode 100644
index 00000000..eb93fb87
--- /dev/null
+++ b/component/markdown.jsx
@@ -0,0 +1,74 @@
+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>
+  )
+}
diff --git a/component/notion_card.jsx b/component/notion_card.jsx
new file mode 100644
index 00000000..f2fce156
--- /dev/null
+++ b/component/notion_card.jsx
@@ -0,0 +1,42 @@
+import { Div, P, Span } from './elements'
+import { css } from '../lib/dom'
+
+css(`
+    .notion_card {
+        border:2px dashed var(--comment-darker);
+        width: 200px;
+        padding: 0.6rem;
+        cursor:pointer;
+        margin: 5px;
+    }
+
+    .notion_card>h3 {
+      font-weight:bolder;
+    }
+    .notion_card p {
+      white-space:normal !important;
+      color:darkgrey;
+      font-weight:normal;
+    }
+`)
+
+export const NotionCard = ({ name, videos, links, description }) => {
+  return (
+    <>
+      {' '}
+      <Div class="notion_card">
+        <h3>{name}</h3>
+        <P fg="grey">{description.slice(0, 14)} ...</P>
+        <Div>
+          <Span fg="white">
+            <strong>videos</strong>:{videos.length}
+          </Span>{' '}
+          &nbsp;
+          <Span fg="white">
+            <strong>links</strong>:{links.length}
+          </Span>
+        </Div>
+      </Div>{' '}
+    </>
+  )
+}
diff --git a/data/fakeExercise.json b/data/fakeExercise.json
deleted file mode 100644
index 0a9f7c6e..00000000
--- a/data/fakeExercise.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name":"01 - Hello There",
-  "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet dolor sit amet lectus consequat condimentum. Morbi ultrices vitae nulla a mollis. Suspendisse arcu leo, finibus in accumsan ut, ultrices dictum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut accumsan vitae nisi vel porttitor. Nullam hendrerit nibh a sapien sagittis dignissim. Fusce suscipit nisl vel eros volutpat venenatis. Duis nec vehicula magna. Sed varius dictum quam, ac tempus augue rhoncus ac.",
-  "instructions":["create a variable", "create a constante", "create a condition"],
-  "notions": ["Basics Programming","Loop","Iteraction"]
-}
diff --git a/data/fakeRessources.json b/data/fakeRessources.json
new file mode 100644
index 00000000..8489a3c5
--- /dev/null
+++ b/data/fakeRessources.json
@@ -0,0 +1,32 @@
+{
+   "js-loop":{
+     "description":"lorem ipsum mkjdsqflk mlkjdflksdf  mjdqslmkf  mkjdsflk djmjdflk",
+    "videos":[{"name":"learn variabe","link":"https://google.com"},{"name":"learn variabe","link":"https://google.com"}],
+    "links":[{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"}]
+   },
+   "js-variables":{
+    "description":"lorem ipsum",
+   "videos":[{"name":"learn variabe","link":"https://google.com"},{"name":"learn variabe","link":"https://google.com"}],
+   "links":[{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"}]
+  },
+  "js-boucles":{
+    "description":"lorem ipsum",
+   "videos":[{"name":"learn variabe","link":"https://google.com"},{"name":"learn variabe","link":"https://google.com"}],
+   "links":[{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"}]
+  },
+  "js-conditions":{
+    "description":"lorem ipsum",
+   "videos":[{"name":"learn variabe","link":"https://google.com"},{"name":"learn variabe","link":"https://google.com"}],
+   "links":[{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"}]
+  },
+  "js-jest":{
+    "description":"lorem ipsum",
+   "videos":[{"name":"learn variabe","link":"https://google.com"},{"name":"learn variabe","link":"https://google.com"}],
+   "links":[{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"}]
+  },
+  "js-object":{
+    "description":"lorem ipsum",
+   "videos":[{"name":"learn variabe","link":"https://google.com"},{"name":"learn variabe","link":"https://google.com"}],
+   "links":[{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"},{"name":"variabe pdf","link":"https://pdf.com"}]
+  }
+}
diff --git a/page/exercise.jsx b/page/exercise.jsx
deleted file mode 100644
index 4e548efb..00000000
--- a/page/exercise.jsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { css } from '../lib/dom.js'
-import { Main, Div, P } from '../component/elements.jsx'
-import { name, description } from '../data/fakeExercise.json'
-
-css(`
-     .exercise{
-       width:100%;
-       height: auto;
-     }
-
-     .exercise>h1 {
-       font-size: 2rem;
-       font-weight:bolder;
-     }
-
-
-
-     .exercise>hr {
-       width: 100%;
-       height:2px;
-       background: grey;
-       margin-top: 5px;
-     }
-
-     .exercise p.description {
-         white-space:normal !important;
-         background: #090c12a8;
-         color: grey;
-         margin: 10px auto;
-         padding:1rem;
-         border-radius:0.3rem;
-    }
-
-    .exercise .instructions h3{
-      font-size:2rem;
-    }
-
-    .exercise .instructions ul {
-      margin-left:50px;
-    }
-
-    .exercise .instructions ul li {
-      display:block;
-      margin:7px auto;
-      font-weight:bolder;
-      font-size:1.2rem;
-    }
-
-    .exercise .instructions ul li:before {
-       content:'👉';
-       font-size: 1.5rem;
-       margin-right:10px;
-
-    }
-
-    .exercise .notions {
-      width:100%;
-      height: auto;
-      padding: 0.5rem;
-      border-radius: 0.7rem;
-      background:#110909;
-      margin-top: 18px;
-    }
-
-    .exercise .notions h1 {
-      font-size:1.7rem;
-      margin-top: -18px;
-    }
-
-    .exercise .notions h1 span {
-      color: yellow;
-      font-weight:bolder;
-      font-size: 3rem;
-      margin-right: 10px;
-    }
-
-    .exercise .notions p{
-      white-space:normal !important;
-      font-size:1.2rem;
-    }
-
-    .exercise .notions ul {
-       margin-top: 10px;
-    }
-
-    .exercise .notions ul li {
-      display:block;
-      width:0px;
-      background: grey;
-      font-size:1rem;
-      margin: 7px 0;
-      cursor:pointer;
-      font-style:oblique;
-    }
-
-    .exercise .notions ul li:hover{
-      color: skyblue;
-      font-weight:bolder;
-    }
-
-    .exercise .notions ul li:before{
-      content:'🔗';
-      font-size: 1rem;
-    }
-
-`)
-export const Exercise = () => (
-  <Main>
-    <Div class="exercise">
-      <h1>&#x270D; {name}</h1>
-      <hr />
-      <P class="description">{description}</P>
-      <Div class="instructions">
-        <h3>&#x1F4CB; Instructions </h3>
-        <ul>
-          <li>do this</li>
-          <li>do that</li>
-          <li>do more</li>
-        </ul>
-      </Div>
-      <Div class="notions">
-        <h1>
-          <span>⚠</span>Warning
-        </h1>
-        <P> to do this exercise you should know the following concepts : </P>
-        <ul>
-          <li> progession </li>
-          <li> progession </li>
-          <li> progession </li>
-        </ul>
-      </Div>
-    </Div>
-  </Main>
-)
diff --git a/page/notions.jsx b/page/notions.jsx
new file mode 100644
index 00000000..a9ba755d
--- /dev/null
+++ b/page/notions.jsx
@@ -0,0 +1,30 @@
+import { css } from '../lib/dom'
+import { Div } from '../component/elements.jsx'
+import { Main } from '../component/elements.jsx'
+import { NotionCard } from '../component/notion_card.jsx'
+import ressources from '../data/fakeRessources.json'
+import { MTitle } from '../component/markdown.jsx'
+
+css(`
+   .container {
+     display: flex;
+     align-items: center;
+     justify-content: space-between;
+     flex-wrap:wrap;
+   }
+`)
+
+export const Notions = () => {
+  const notions = Object.entries(ressources)
+  return (
+    <Div cass="notions">
+      <MTitle.h2>Notions</MTitle.h2>
+      {'\n'}
+      <Div class="container">
+        {notions.map(([name, data]) => {
+          return <NotionCard name={name} {...data} />
+        })}
+      </Div>
+    </Div>
+  )
+}

From 7c1219c0aa8e6e19dc6d9f1d84ebc426fed4f5fb Mon Sep 17 00:00:00 2001
From: ramseycoder <ramseykoffi080@gmail.com>
Date: Tue, 26 Oct 2021 10:29:19 +0000
Subject: [PATCH 2/2] fix: add margin and padding instead of &nbsp;

---
 component/markdown.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/component/markdown.jsx b/component/markdown.jsx
index eb93fb87..dd5d3514 100644
--- a/component/markdown.jsx
+++ b/component/markdown.jsx
@@ -18,9 +18,9 @@ export const MTitle = Object.fromEntries(
       h(
         el,
         props,
-        <>
-          <Span fg="red">{'#'.repeat(Number(el.slice(1)))}</Span>&nbsp;
-        </>,
+        <Color.Red style={{ marginRight: '1ch' }}>
+          {'#'.repeat(Number(el.slice(1)))}
+        </Color.Red>,
         children,
       ),
   ]),