Factoriser le code en plusieurs fichiers #8

Closed
opened 2026-04-05 12:43:47 +00:00 by stanig2106 · 8 comments
Owner

@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
Author
Owner

👋 Reçu ! Je travaille sur la factorisation du code.

👋 Reçu ! Je travaille sur la factorisation du code.
Author
Owner

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.

## ✅ 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.
Author
Owner

Reçu ! Je vais migrer le code en TypeScript et configurer Bun comme serveur local. Je mets à jour la PR #9.

Reçu ! Je vais migrer le code en TypeScript et configurer Bun comme serveur local. Je mets à jour la PR #9.
Author
Owner

👋 Reçu ! Je travaille sur la factorisation du code et la préparation de la structure pour les futures sections.

👋 Reçu ! Je travaille sur la factorisation du code et la préparation de la structure pour les futures sections.
Author
Owner

🔍 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.

## 🔍 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.
Author
Owner

Retour reçu 👍 Je travaille sur les deux points : ajout des signatures JSDoc collect()/render() dans les stubs, et renommage css/ → assets/.

Retour reçu 👍 Je travaille sur les deux points : ajout des signatures JSDoc collect()/render() dans les stubs, et renommage css/ → assets/.
Author
Owner

👋 Bien reçu ! Je prends en charge cette PR et je travaille dessus.

👋 Bien reçu ! Je prends en charge cette PR et je travaille dessus.
Author
Owner

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).
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: stanig2106/cv-generator#8