From f24504332c2c0fd26640750534b20688c248a970 Mon Sep 17 00:00:00 2001
From: ramseycoder <ramseykoffi080@gmail.com>
Date: Tue, 2 Nov 2021 10:04:02 +0000
Subject: [PATCH 1/3] add markdown file

---
 app.jsx                |   2 -
 component/header.jsx   |   2 +-
 component/markdown.jsx |  71 ++++++++++++++++++++++
 data/fakeExercise.json |   6 --
 page/exercise.jsx      | 134 -----------------------------------------
 5 files changed, 72 insertions(+), 143 deletions(-)
 create mode 100644 component/markdown.jsx
 delete mode 100644 data/fakeExercise.json
 delete mode 100644 page/exercise.jsx

diff --git a/app.jsx b/app.jsx
index 54030577..4335c6a2 100644
--- a/app.jsx
+++ b/app.jsx
@@ -6,7 +6,6 @@ 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'
 
 const App = () => (
   <>
@@ -14,7 +13,6 @@ const App = () => (
     <Router>
       <Profile path="/profile" />
       <Home path="*" />
-      <Exercise path="/exercise" />
     </Router>
     <footer>
       {divider}
diff --git a/component/header.jsx b/component/header.jsx
index c8d765a7..ecb4854f 100644
--- a/component/header.jsx
+++ b/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> - <Link {...props} /></li>
 const LogAction = () => {
   if (!user) {
     return (
diff --git a/component/markdown.jsx b/component/markdown.jsx
new file mode 100644
index 00000000..9253504f
--- /dev/null
+++ b/component/markdown.jsx
@@ -0,0 +1,71 @@
+import { Span, Color, P, Div } from './elements.jsx'
+import { css } from '../lib/dom.js'
+import { NavLink } from '../component/header.jsx'
+import { NavLink } from './header.jsx'
+
+css(`
+    li.mli {
+      display:block;
+    }
+
+`)
+
+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 }) => {
+  let ColorIze = link ? Color.CyanDarker : Color.CommentLighter
+  return (
+    <li class={`mli`}>
+      <NavLink href={link ? link : null}>
+        <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>
+      </NavLink>
+    </li>
+  )
+}
+
+export const Warning = ({ children }) => {
+  return (
+    <Div style={{ outline: '1px dashed red', padding: '0.8rem' }}>
+      {children}
+    </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/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>
-)

From a18350f43b24b3c92ae0d9f80d8d4e9c774a44fa Mon Sep 17 00:00:00 2001
From: ramseycoder <ramseykoffi080@gmail.com>
Date: Tue, 2 Nov 2021 12:02:34 +0000
Subject: [PATCH 2/3] update

---
 component/markdown.jsx | 43 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/component/markdown.jsx b/component/markdown.jsx
index 9253504f..59f71905 100644
--- a/component/markdown.jsx
+++ b/component/markdown.jsx
@@ -8,6 +8,11 @@ css(`
       display:block;
     }
 
+    .warn{
+      outline:1px dashed red;
+      padding:0.8rem;
+    }
+
 `)
 
 export const MTitle = Object.fromEntries(
@@ -42,30 +47,24 @@ export const MItalicWord = ({ children, color, type }) => {
 export const MLi = ({ children, link }) => {
   let ColorIze = link ? Color.CyanDarker : Color.CommentLighter
   return (
-    <li class={`mli`}>
-      <NavLink href={link ? link : null}>
-        <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>
-      </NavLink>
-    </li>
+    <NavLink class={`mli`} href={link ? link : null}>
+      <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>
+    </NavLink>
   )
 }
 
 export const Warning = ({ children }) => {
-  return (
-    <Div style={{ outline: '1px dashed red', padding: '0.8rem' }}>
-      {children}
-    </Div>
-  )
+  return <Div class="warn">{children}</Div>
 }

From b41f3937661523325a97f21574d68931b6dd30cd Mon Sep 17 00:00:00 2001
From: ramseycoder <ramseykoffi080@gmail.com>
Date: Fri, 12 Nov 2021 16:26:33 +0000
Subject: [PATCH 3/3] update markdow branch

---
 component/header.jsx   |  2 +-
 component/markdown.jsx | 45 +++++++++++++++++++++++++++---------------
 markdown.css           | 37 ++++++++++++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 markdown.css

diff --git a/component/header.jsx b/component/header.jsx
index ecb4854f..c8d765a7 100644
--- a/component/header.jsx
+++ b/component/header.jsx
@@ -20,7 +20,7 @@ const LinkMatch = ({ match, children, path, ...props }) => (
 const clearStorage = () => localStorage.clear()
 
 // prettier-ignore
-export const NavLink = (props) => <li> - <Link {...props} /></li>
+const NavLink = (props) => <li> - <Link {...props} /></li>
 const LogAction = () => {
   if (!user) {
     return (
diff --git a/component/markdown.jsx b/component/markdown.jsx
index 59f71905..6a8463a4 100644
--- a/component/markdown.jsx
+++ b/component/markdown.jsx
@@ -1,14 +1,12 @@
-import { Span, Color, P, Div } from './elements.jsx'
+import { Span, Color, P, Div, Link } from './elements.jsx'
 import { css } from '../lib/dom.js'
-import { NavLink } from '../component/header.jsx'
-import { NavLink } from './header.jsx'
 
 css(`
     li.mli {
       display:block;
     }
 
-    .warn{
+    div.warn{
       outline:1px dashed red;
       padding:0.8rem;
     }
@@ -30,6 +28,13 @@ export const MTitle = Object.fromEntries(
   ]),
 )
 
+const NavLink = (props) => (
+  <li>
+    {' '}
+    - <Link {...props} />
+  </li>
+)
+
 export const MItalicWord = ({ children, color, type }) => {
   return (
     <P>
@@ -44,23 +49,31 @@ export const MItalicWord = ({ children, color, type }) => {
   )
 }
 
-export const MLi = ({ children, link }) => {
-  let ColorIze = link ? Color.CyanDarker : Color.CommentLighter
+const Text = ({ text, link, ...props }) => {
+  const Colorize = link ? Color.CyanDarker : Color.CommentLighter
+  return <Colorize {...props}>{link ? `[${text}]` : `\`${text}\``}</Colorize>
+}
+
+export const MLi = ({ children }) => {
   return (
-    <NavLink class={`mli`} href={link ? link : null}>
+    <li>
       <Span fg="orange"> - </Span>
-      <Span
+      <Text
+        text={children}
         style={{
           padding: '0.1rem',
-          background: !link && 'rgba(75, 75, 75, 0.63)',
-          textDecoration: link && 'underline',
+          background: 'rgba(75, 75, 75, 0.63)',
         }}
-        fg={link ? 'cyan-darker' : 'white'}
-      >
-        <ColorIze>{link ? '[' : '`'}</ColorIze>
-        {children}
-        <ColorIze>{link ? ']' : '`'}</ColorIze>
-      </Span>
+      />
+    </li>
+  )
+}
+
+export const MLink = ({ children, link }) => {
+  return (
+    <NavLink class="mli" href={link}>
+      <Span fg="orange"> - </Span>
+      <Text text={children} link style={{ padding: '0.1rem' }} />
     </NavLink>
   )
 }
diff --git a/markdown.css b/markdown.css
new file mode 100644
index 00000000..01fab3ee
--- /dev/null
+++ b/markdown.css
@@ -0,0 +1,37 @@
+h1.mark:before {
+  display:"inine-block";
+  color: red;
+  content:"#"
+}
+
+h2.mark:before {
+  display:"inine-block";
+  color: red;
+  content:"##"
+}
+
+
+h3.mark:before {
+  display:"inine-block";
+  color: red;
+  content:"###"
+}
+
+h4.mark:before {
+  display:"inine-block";
+  color: red;
+  content:"####"
+}
+
+
+h5.mark:before {
+  display:"inine-block";
+  color: red;
+  content:"#####"
+}
+
+h6.mark:before {
+  display:"inine-block";
+  color: red;
+  content:"######"
+}