add markdown file #101
add markdown file #101
Conversation
Deploying with
|
| Latest commit: |
b41f393
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4782a3fb.platform-nan-dev-8sl.pages.dev |
component/markdown.jsx
Outdated
| 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' |
There was a problem hiding this comment.
import { NavLink } from '../component/header.jsx'
import { NavLink } from './header.jsx'?? ce code compile ?
There was a problem hiding this comment.
faut eviter autan que possible de lier les components entre eux, le headers doit pas creer des components generique reutiliser par markdown.jsx
| .warn{ | ||
| outline:1px dashed red; | ||
| padding:0.8rem; | ||
| } |
There was a problem hiding this comment.
je pense qu'il faut eviter les noms de class css trop generique si elle ne sont pas scoper dans une classe parente plus specifique.
| children, | ||
| ), | ||
| ]), | ||
| ) |
There was a problem hiding this comment.
tu peu pre-compute une partie du code:
export const MTitle = Object.fromEntries(
['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map((el) => {
const decoration = <Span fg="red">{'#'.repeat(Number(el.slice(1)))}</Span>
return [el, ({ children, ...props }) => h(el, props, decoration, children)]
}),
)Mais je pense que c'est encore mieu de le generer en css directement, comme c'est fait ici: https://github.com/egoist/hack/blob/master/src/css/markdown.css#L91-L105
| ) | ||
|
|
||
| export const MItalicWord = ({ children, color, type }) => { | ||
| return ( |
There was a problem hiding this comment.
useless return, I do think a lot of this could be achieve with a class and :before :after elements too
| </Span> | ||
| </NavLink> | ||
| ) | ||
| } |
There was a problem hiding this comment.
je suis pas convaincu de ce MLi, tu devrais le decouper en 3 components:
- Les LI
- Les Liens
- Le text
et eviter un truc aussi specifique
| .warn{ | ||
| outline:1px dashed red; | ||
| padding:0.8rem; |
There was a problem hiding this comment.
padding en rem ca va pas gerer que l'allignement reste sur la grille de characters monospace (mode text quoi)
component/header.jsx
Outdated
|
|
||
| // prettier-ignore | ||
| const NavLink = (props) => <li> - <Link {...props} /></li> | ||
| export const NavLink = (props) => <li> - <Link {...props} /></li> |
There was a problem hiding this comment.
pas sur que je trouve ca specialement intressant d'exporter ca plutot que de le copier / coller dans ce cas
create a markdown utility file for hep in design