@via
Il faut factoriser le code pour preparer l'arrive de nouvelle feature (section formation, experience pro, hobbies etc)
Factorise l'existant et prepare des dossier vide
@via
Il faut factoriser le code pour preparer l'arrive de nouvelle feature (section formation, experience pro, hobbies etc)
Factorise l'existant et prepare des dossier vide
## ✅ Travail terminé — PR #9
La factorisation est complète. Voici ce qui a été fait :
### Structure mise en place
```
css/
form.css # Styles page + formulaire
cv.css # Styles rendu CV (prêt pour les futures sections)
js/
main.js # Point d'entrée unique (ES Modules)
sections/
identite.js # ✅ Actif — collect + render
competences.js # 🚧 Stub
formation.js # 🚧 Stub
experience.js # 🚧 Stub
hobbies.js # 🚧 Stub
sections/
identite/ # Fragment HTML de référence
competences/ # Dossier prêt
formation/ # Dossier prêt
experience/ # Dossier prêt
hobbies/ # Dossier prêt
```
### Points notables
- Chaque section future a déjà son module JS stub avec les signatures `collect*()` et `render*()` — il suffit de les implémenter
- Les dossiers `sections/` sont prêts avec leur propre README pour guider les contributeurs
- **⚠️ ES Modules natifs** : il faut servir via `npx serve .` ou Live Server — le double-clic sur `index.html` ne fonctionnera plus (documenté dans le README)
- Zéro dépendance externe ajoutée
- Protection XSS via `textContent` (pas de `innerHTML`)
La PR #9 est ouverte et liée à cette issue.
Après lecture des fichiers sources, voici l'état réel du repo :
Déjà en place ✅
Structure de dossiers pour 5 sections (formation, experience, competences, langues, hobbies)
Stubs JS : (un fichier par section, avec TODO)
Stubs CSS : (un fichier par section, avec TODO)
existe, gère la soumission du formulaire
TODO comments dans pour les futures sections
Ce qui reste à faire 🔧
**** — créer avec un script npm start (npx serve .) car les modules ES sont bloqués sur file://
**Splitter ** en fichiers thématiques : , , ,
**Transformer ** pour importer les sections via ES modules (Version: ImageMagick 7.1.2-9 Q16-HDRI aarch64 23451 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP
Delegates (built-in): bzlib fontconfig freetype heic jng jp2 jpeg jxl lcms lqr ltdl lzma openexr png raw tiff uhdr webp xml zip zlib zstd
Compiler: clang (17.0.0)
Usage: import [options ...] [ file ]
Image Settings:
-adjoin join images into a single multi-image file
-border include window border in the output image
-channel type apply option to select image channels
-colorspace type alternate image colorspace
-comment string annotate image with comment
-compress type type of pixel compression when writing the image
-define format:option
define one or more image format options
-density geometry horizontal and vertical density of the image
-depth value image depth
-descend obtain image by descending window hierarchy
-display server X server to contact
-dispose method layer disposal method
-dither method apply error diffusion to image
-delay value display the next image after pausing
-encipher filename convert plain pixels to cipher pixels
-endian type endianness (MSB or LSB) of the image
-encoding type text encoding type
-filter type use this filter when resizing an image
-format "string" output formatted image characteristics
-frame include window manager frame
-gravity direction which direction to gravitate towards
-identify identify the format and characteristics of the image
-interlace type None, Line, Plane, or Partition
-interpolate method pixel color interpolation method
-label string assign a label to an image
-limit type value Area, Disk, Map, or Memory resource limit
-monitor monitor progress
-page geometry size and location of an image canvas
-pause seconds seconds delay between snapshots
-pointsize value font point size
-quality value JPEG/MIFF/PNG compression level
-quiet suppress all warning messages
-regard-warnings pay attention to warning messages
-repage geometry size and location of an image canvas
-respect-parentheses settings remain in effect until parenthesis boundary
-sampling-factor geometry
horizontal and vertical sampling factor
-scene value image scene number
-screen select image from root window
-seed value seed a new sequence of pseudo-random numbers
-set property value set an image property
-silent operate silently, i.e. don't ring any bells
-snaps value number of screen snapshots
-support factor resize support: > 1.0 is blurry, < 1.0 is sharp
-synchronize synchronize image to storage device
-taint declare the image as modified
-transparent-color color
transparent color
-treedepth value color tree depth
-verbose print detailed information about the image
-virtual-pixel method
Constant, Edge, Mirror, or Tile
-window id select window with this id or name
root selects whole screen
Image Operators:
-annotate geometry text
annotate the image with text
-colors value preferred number of colors in the image
-crop geometry preferred size and location of the cropped image
-encipher filename convert plain pixels to cipher pixels
-extent geometry set the image size
-geometry geometry preferred size or location of the image
-help print program options
-monochrome transform image to black and white
-negate replace every pixel with its complementary color
-quantize colorspace reduce colors in this colorspace
-resize geometry resize the image
-rotate degrees apply Paeth rotation to the image
-strip strip image of all profiles and comments
-thumbnail geometry create a thumbnail of the image
-transparent color make this color transparent within the image
-trim trim image edges
-type type image type
Miscellaneous Options:
-debug events display copious debugging information
-help print program options
-list type print a list of supported option arguments
-log format format of debugging information
-version print version information
By default, 'file' is written in the MIFF image format. To
specify a particular image format, precede the filename with an image
format name and a colon (i.e. ps:image) or specify the image type as
the filename suffix (i.e. image.ps). Specify 'file' as '-' for
standard input or output.) et exposer un pattern clair pour les futurs contributeurs
4. Ajouter des exports init() dans chaque stub de section, conformément au pattern attendu
5. **Mettre à jour ** : + liens vers les CSS splittés
6. Enrichir le README : architecture, comment lancer le projet, comment ajouter une section
Plan d'action
Étape
Action
1
Créer
2
Splitter → , , ,
3
Refactorer pour utiliser ES modules
4
Ajouter dans chaque stub section
5
Mettre à jour (script type=module, nouveaux liens CSS)
6
Enrichir avec architecture + guide contribution
Je commence l'implémentation.
## 🔍 Audit du code existant
Après lecture des fichiers sources, voici l'état réel du repo :
**Déjà en place ✅**
- Structure de dossiers pour 5 sections (formation, experience, competences, langues, hobbies)
- Stubs JS : (un fichier par section, avec TODO)
- Stubs CSS : (un fichier par section, avec TODO)
- existe, gère la soumission du formulaire
- TODO comments dans pour les futures sections
**Ce qui reste à faire 🔧**
1. **** — créer avec un script `npm start` (npx serve .) car les modules ES sont bloqués sur `file://`
2. **Splitter ** en fichiers thématiques : , , ,
3. **Transformer ** pour importer les sections via ES modules (Version: ImageMagick 7.1.2-9 Q16-HDRI aarch64 23451 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP
Delegates (built-in): bzlib fontconfig freetype heic jng jp2 jpeg jxl lcms lqr ltdl lzma openexr png raw tiff uhdr webp xml zip zlib zstd
Compiler: clang (17.0.0)
Usage: import [options ...] [ file ]
Image Settings:
-adjoin join images into a single multi-image file
-border include window border in the output image
-channel type apply option to select image channels
-colorspace type alternate image colorspace
-comment string annotate image with comment
-compress type type of pixel compression when writing the image
-define format:option
define one or more image format options
-density geometry horizontal and vertical density of the image
-depth value image depth
-descend obtain image by descending window hierarchy
-display server X server to contact
-dispose method layer disposal method
-dither method apply error diffusion to image
-delay value display the next image after pausing
-encipher filename convert plain pixels to cipher pixels
-endian type endianness (MSB or LSB) of the image
-encoding type text encoding type
-filter type use this filter when resizing an image
-format "string" output formatted image characteristics
-frame include window manager frame
-gravity direction which direction to gravitate towards
-identify identify the format and characteristics of the image
-interlace type None, Line, Plane, or Partition
-interpolate method pixel color interpolation method
-label string assign a label to an image
-limit type value Area, Disk, Map, or Memory resource limit
-monitor monitor progress
-page geometry size and location of an image canvas
-pause seconds seconds delay between snapshots
-pointsize value font point size
-quality value JPEG/MIFF/PNG compression level
-quiet suppress all warning messages
-regard-warnings pay attention to warning messages
-repage geometry size and location of an image canvas
-respect-parentheses settings remain in effect until parenthesis boundary
-sampling-factor geometry
horizontal and vertical sampling factor
-scene value image scene number
-screen select image from root window
-seed value seed a new sequence of pseudo-random numbers
-set property value set an image property
-silent operate silently, i.e. don't ring any bells
-snaps value number of screen snapshots
-support factor resize support: > 1.0 is blurry, < 1.0 is sharp
-synchronize synchronize image to storage device
-taint declare the image as modified
-transparent-color color
transparent color
-treedepth value color tree depth
-verbose print detailed information about the image
-virtual-pixel method
Constant, Edge, Mirror, or Tile
-window id select window with this id or name
root selects whole screen
Image Operators:
-annotate geometry text
annotate the image with text
-colors value preferred number of colors in the image
-crop geometry preferred size and location of the cropped image
-encipher filename convert plain pixels to cipher pixels
-extent geometry set the image size
-geometry geometry preferred size or location of the image
-help print program options
-monochrome transform image to black and white
-negate replace every pixel with its complementary color
-quantize colorspace reduce colors in this colorspace
-resize geometry resize the image
-rotate degrees apply Paeth rotation to the image
-strip strip image of all profiles and comments
-thumbnail geometry create a thumbnail of the image
-transparent color make this color transparent within the image
-trim trim image edges
-type type image type
Miscellaneous Options:
-debug events display copious debugging information
-help print program options
-list type print a list of supported option arguments
-log format format of debugging information
-version print version information
By default, 'file' is written in the MIFF image format. To
specify a particular image format, precede the filename with an image
format name and a colon (i.e. ps:image) or specify the image type as
the filename suffix (i.e. image.ps). Specify 'file' as '-' for
standard input or output.) et exposer un pattern clair pour les futurs contributeurs
4. **Ajouter des exports `init()`** dans chaque stub de section, conformément au pattern attendu
5. **Mettre à jour ** : + liens vers les CSS splittés
6. **Enrichir le README** : architecture, comment lancer le projet, comment ajouter une section
**Plan d'action**
| Étape | Action |
|-------|--------|
| 1 | Créer |
| 2 | Splitter → , , , |
| 3 | Refactorer pour utiliser ES modules |
| 4 | Ajouter dans chaque stub section |
| 5 | Mettre à jour (script type=module, nouveaux liens CSS) |
| 6 | Enrichir avec architecture + guide contribution |
Je commence l'implémentation.
Bien reçu ! Je travaille dessus. Plan : audit du code existant → fix XSS dans identite.js (textContent au lieu de innerHTML) → vérification de main.js → stubs explicites pour les sections non implémentées → README + commentaire npx serve → nettoyage (double arborescence sections/, .gitignore).
Bien reçu ! Je travaille dessus. Plan : audit du code existant → fix XSS dans identite.js (textContent au lieu de innerHTML) → vérification de main.js → stubs explicites pour les sections non implémentées → README + commentaire npx serve → nettoyage (double arborescence sections/, .gitignore).
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
@via
Il faut factoriser le code pour preparer l'arrive de nouvelle feature (section formation, experience pro, hobbies etc)
Factorise l'existant et prepare des dossier vide
👋 Reçu ! Je travaille sur la factorisation du code.
✅ Travail terminé — PR #9
La factorisation est complète. Voici ce qui a été fait :
Structure mise en place
Points notables
collect*()etrender*()— il suffit de les implémentersections/sont prêts avec leur propre README pour guider les contributeursnpx serve .ou Live Server — le double-clic surindex.htmlne fonctionnera plus (documenté dans le README)textContent(pas deinnerHTML)La PR #9 est ouverte et liée à cette issue.
Reçu ! Je vais migrer le code en TypeScript et configurer Bun comme serveur local. Je mets à jour la PR #9.
👋 Reçu ! Je travaille sur la factorisation du code et la préparation de la structure pour les futures sections.
🔍 Audit du code existant
Après lecture des fichiers sources, voici l'état réel du repo :
Déjà en place ✅
Ce qui reste à faire 🔧
npm start(npx serve .) car les modules ES sont bloqués surfile://Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP
Delegates (built-in): bzlib fontconfig freetype heic jng jp2 jpeg jxl lcms lqr ltdl lzma openexr png raw tiff uhdr webp xml zip zlib zstd
Compiler: clang (17.0.0)
Usage: import [options ...] [ file ]
Image Settings:
-adjoin join images into a single multi-image file
-border include window border in the output image
-channel type apply option to select image channels
-colorspace type alternate image colorspace
-comment string annotate image with comment
-compress type type of pixel compression when writing the image
-define format:option
define one or more image format options
-density geometry horizontal and vertical density of the image
-depth value image depth
-descend obtain image by descending window hierarchy
-display server X server to contact
-dispose method layer disposal method
-dither method apply error diffusion to image
-delay value display the next image after pausing
-encipher filename convert plain pixels to cipher pixels
-endian type endianness (MSB or LSB) of the image
-encoding type text encoding type
-filter type use this filter when resizing an image
-format "string" output formatted image characteristics
-frame include window manager frame
-gravity direction which direction to gravitate towards
-identify identify the format and characteristics of the image
-interlace type None, Line, Plane, or Partition
-interpolate method pixel color interpolation method
-label string assign a label to an image
-limit type value Area, Disk, Map, or Memory resource limit
-monitor monitor progress
-page geometry size and location of an image canvas
-pause seconds seconds delay between snapshots
-pointsize value font point size
-quality value JPEG/MIFF/PNG compression level
-quiet suppress all warning messages
-regard-warnings pay attention to warning messages
-repage geometry size and location of an image canvas
-respect-parentheses settings remain in effect until parenthesis boundary
-sampling-factor geometry
horizontal and vertical sampling factor
-scene value image scene number
-screen select image from root window
-seed value seed a new sequence of pseudo-random numbers
-set property value set an image property
-silent operate silently, i.e. don't ring any bells
-snaps value number of screen snapshots
-support factor resize support: > 1.0 is blurry, < 1.0 is sharp
-synchronize synchronize image to storage device
-taint declare the image as modified
-transparent-color color
transparent color
-treedepth value color tree depth
-verbose print detailed information about the image
-virtual-pixel method
Constant, Edge, Mirror, or Tile
-window id select window with this id or name
root selects whole screen
Image Operators:
-annotate geometry text
annotate the image with text
-colors value preferred number of colors in the image
-crop geometry preferred size and location of the cropped image
-encipher filename convert plain pixels to cipher pixels
-extent geometry set the image size
-geometry geometry preferred size or location of the image
-help print program options
-monochrome transform image to black and white
-negate replace every pixel with its complementary color
-quantize colorspace reduce colors in this colorspace
-resize geometry resize the image
-rotate degrees apply Paeth rotation to the image
-strip strip image of all profiles and comments
-thumbnail geometry create a thumbnail of the image
-transparent color make this color transparent within the image
-trim trim image edges
-type type image type
Miscellaneous Options:
-debug events display copious debugging information
-help print program options
-list type print a list of supported option arguments
-log format format of debugging information
-version print version information
By default, 'file' is written in the MIFF image format. To
specify a particular image format, precede the filename with an image
format name and a colon (i.e. ps:image) or specify the image type as
the filename suffix (i.e. image.ps). Specify 'file' as '-' for
standard input or output.) et exposer un pattern clair pour les futurs contributeurs
4. Ajouter des exports
init()dans chaque stub de section, conformément au pattern attendu5. **Mettre à jour ** : + liens vers les CSS splittés
6. Enrichir le README : architecture, comment lancer le projet, comment ajouter une section
Plan d'action
Je commence l'implémentation.
Retour reçu 👍 Je travaille sur les deux points : ajout des signatures JSDoc collect()/render() dans les stubs, et renommage css/ → assets/.
👋 Bien reçu ! Je prends en charge cette PR et je travaille dessus.
Bien reçu ! Je travaille dessus. Plan : audit du code existant → fix XSS dans identite.js (textContent au lieu de innerHTML) → vérification de main.js → stubs explicites pour les sections non implémentées → README + commentaire npx serve → nettoyage (double arborescence sections/, .gitignore).