notion 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 { Notion } from './page/notion.jsx'
 
 const App = () => (
   <>
     <Header />
     <Router>
       <Profile path="/profile" />
+      <Notion path="/notion" />
       <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,68 @@
+import { Span, Color, P, Div } from './elements.jsx'
+import { css } from '../lib/dom.js'
+import { NavLink } from './header.jsx'
+
+css(`
+    li.mli {
+      display:block;
+    }
+
+    .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 class={`mli`} href={link ? link : null} {...props}>
+      <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 class="warn">{children}</Div>
+}

data/fakeNotion.json

@@ -0,0 +1,22 @@
+{
+  "name":"let and const in javascript",
+   "description":"this is an description of the let and const in javascript",
+   "videos":[
+     {
+     "name":"video1",
+     "link":"https://googgle.com/5"
+   },{
+    "name":"video2",
+    "link":"https://googgle.com/2"
+   }
+  ],
+  "links":[
+    {
+      "name":"link1",
+      "link":"https://google.com/pdf"
+    },{
+      "name":"link2",
+      "link":"https://googe.com/pdf2"
+    }
+  ]
+}

dev/mocks.js

@@ -171,7 +171,10 @@ export const sendResponse = ({ body, options, res, root, host }) => {
 
   // If it's a local redirection, we stop here
   if (options.headers.location[0] === '/') {
-    res.setHeader('location', `${host || ''}${options.headers.location}${session}`)
+    res.setHeader(
+      'location',
+      `${host || ''}${options.headers.location}${session}`,
+    )
     return res.end(body)
   }
 

page/notion.jsx

@@ -0,0 +1,44 @@
+import { Div, P, Span } from '../component/elements.jsx'
+import { css } from '../lib/dom.js'
+import { MTitle, MLi } from '../component/markdown.jsx'
+import notion from '../data/fakeNotion.json'
+import { navigate } from '../lib/router.js'
+
+css(`
+  .notion ul li {
+    display:block;
+    margin:1ch;
+  }
+`)
+export const Notion = () => {
+  return (
+    <Div class="notion">
+      <MTitle.h2>{notion.name}</MTitle.h2>
+      {'\n'}
+      <MTitle.h3> Description </MTitle.h3>
+      {'\n'}
+      <P>
+        {' '}
+        <Span fg="orange"> > </Span> {notion.description}
+      </P>
+      {'\n'}
+      <MTitle.h3> Videos </MTitle.h3>
+      <ul class="videos">
+        {notion.videos.map((val) => (
+          <MLi key={val.name} link={val.link}>
+            📹-<Span fg="cyan">[{val.name}]</Span>
+          </MLi>
+        ))}
+      </ul>
+      {'\n'}
+      <MTitle.h3> Links </MTitle.h3>
+      <ul class="links">
+        {notion.links.map((val) => (
+          <MLi key={val.name} link={val.link}>
+            🔗-<Span fg="cyan">[{val.name}]</Span>
+          </MLi>
+        ))}
+      </ul>
+    </Div>
+  )
+}