index notions page

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}

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>
   )

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,
+        <Color.Red style={{ marginRight: '1ch' }}>
+          {'#'.repeat(Number(el.slice(1)))}
+        </Color.Red>,
+        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>
+  )
+}

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>{' '}
+    </>
+  )
+}

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"}]
+  }
+}

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>
+  )
+}