Table des matières
jsonresume-theme-kendall : D’un document JSON au modèle de CV
Ce fork du thème Kendall JSON Resume transforme un CV structuré en HTML. Le moteur prépare les champs de présentation, puis utilise un modèle Mustache avec les styles écran et impression.
- Langages
- 2Répartition du code
- Composants documentés
- 2Explorer les modules
- Documents source
- 1Lire les instructions
Langages du dépôtJavaScript 55.76%2
Parts calculées à partir des octets GitHub Linguist.
| Langage | % | Octets |
|---|---|---|
| JavaScript | 8 126 | |
| CSS | 6 448 |
1. Aperçu
1.1. Pourquoi il existe
Thème CV minimaliste parfait pour l'impression avec balisage sémantique schema.org.
1.2. Cas d’usage
Génération automatique de CV à partir de fichiers JSON structurés.
2. Cas d’utilisation
Un thème JSON Resume qui transforme resume.json en page HTML Bootstrap avec Mustache et des icônes FontAwesome.
- Rendre resume.json en HTML
- Auteur du CVresume-cli
index.js exporte render(), qui prépare l’objet CV puis remplit resume.template avec Mustache, en intégrant style.css et print.css.
- Prévisualiser en local
- Auteur du CVresume-cli
Le README lance resume serve --theme . depuis le dossier du thème et ouvre l’aperçu sur http://localhost:4000.
- Afficher photo ou Gravatar
- Auteur du CVGravatar
Si basics.image est absent, render() construit une URL Gravatar à partir de basics.email avec le paquet gravatar.
- Associer profils et icônes
- Auteur du CV
Chaque réseau de basics.profiles reçoit une classe FontAwesome, avec des cas particuliers comme stackoverflow, gitlab et keybase.
- Imprimer une copie propre
- Auteur du CV
print.css est injecté comme style media="print" ; il masque la photo et retire les URL affichées après les liens.
2.1. Scénario : Prévisualiser un CV avec le thème Kendall
- Installer l’outil avec npm install -g resume-cli.
- Créer et remplir resume.json avec resume init.
- Lancer npm install dans le dossier du thème pour obtenir mustache, lodash et gravatar.
- Lancer resume serve --theme . et ouvrir http://localhost:4000.
- Vérifier que seules les sections remplies (work, education, skills…) apparaissent, puis imprimer depuis le navigateur.
Fichiers consultésREADME.mdpackage.jsonindex.jsresume.templateprint.css
3. Démarrage
Ces commandes viennent de la documentation du dépôt. Elles n’ont pas été exécutées pendant cette revue.
sudo npm install -g resume-clisudo npm installresume serve --theme .Preview: http://localhost:4000
Press ctrl-c to stopCommandes déclarées dans les manifestes
3.1. package.json
testecho "Error: no test specified" && exit 1
4. Références du dépôt
Extraits des guides du dépôt, dans leur langue d’origine. Les liens ouvrent la version du code consultée.
Prérequis et premier essai
4.1. Install the command line
README.md
4.2. Install npm packages
README.md
Configuration et utilisation
4.3. Usage
README.md
5. Fonctions et composants 2
- Préparation des données
- index.js associe les réseaux aux icônes, formate les dates et prépare les indicateurs de sections optionnelles. Il choisit aussi une image explicite ou Gravatar. Cette logique adapte les données au modèle.
- Modèle et styles
- resume.template contient la structure HTML; style.css et print.css distinguent écran et impression. La transformation des données et la mise en page peuvent être examinées séparément.
6. Architecture
Ouvrez un composant pour suivre ses connexions, ou explorez le diagramme complet.
CV JSON
Préparation dans render
- Depuis CV JSON
- Vers Modèle Mustache
Modèle Mustache
HTML et styles écran ou impression
- Depuis Modèle Mustache
Mermaid Diagramme interactif
Vue générale des composants et des échanges vérifiés dans le dépôt.
flowchart LR
n0["CV JSON"]
n1["Préparation dans render"]
n2["Modèle Mustache"]
n3["HTML et styles écran ou impression"]
n0 --> n1
n1 --> n2
n2 --> n3
Version texte du diagramme
- CV JSON → Préparation dans render
- Préparation dans render → Modèle Mustache
- Modèle Mustache → HTML et styles écran ou impression
Suivre un parcours dans le code
Suivez startDate vers les champs de mois et d’année. Le moteur modifie l’objet fourni; un appelant qui le réutilise doit tenir compte des données de présentation ajoutées.
7. Dossier technique
Établi à partir du code au commit d1401ce (3 fichiers). Chaque élément vient d’une correspondance de motif dans le code: ouvrez le fichier lié avant de vous y fier.
7.1. Couches et modules
Les dossiers sont classés par couche selon leur nom, de l’interface utilisateur jusqu’à l’accès aux données. Comme le classement repose sur les noms seulement, le diagramme ne dit rien des appels entre couches.
Mermaid Vue en couches
flowchart TB
subgraph L_presentation["Présentation"]
direction TB
presentation_0["(root)<br/>2 fichiers"]
end
subgraph L_interface["Points d’entrée et API"]
direction TB
interface_0["(root)<br/>1 fichier"]
end
L_presentation ~~~ L_interface
| Module | Couche | Fichiers | Types | Extensions |
|---|---|---|---|---|
(root) | Présentation | 3 | 0 | .css .js |
7.2. Modèle C4
Du contexte du système aux déclarations du code. Chaque niveau conserve les limites des sources disponibles.
UML 1 · Contexte du système
La vue C4 la plus large : qui utilise le projet et sur quels systèmes et stockages externes il s’appuie. Rendu avec uml-mcp.
Source PlantUML
@startuml
!include <C4/C4_Context>
LAYOUT_LEFT_RIGHT()
System(SYS, "jsonresume-theme-kendall", "Ce fork du thème Kendall JSON Resume transforme un CV structuré en HT…")
@enduml
UML 2 · Conteneurs
Un niveau plus près : les parties qui s’exécutent séparément dans le projet, leur langage principal et le chemin des appels entre elles. Rendu avec uml-mcp.
Source PlantUML
@startuml
!include <C4/C4_Container>
LAYOUT_LEFT_RIGHT()
System_Boundary(SYS, "jsonresume-theme-kendall") {
Container(APP, "jsonresume-theme-kendall", "JavaScript")
}
@enduml
UML 3 · Composants et couches
Modules regroupés par couche du code. Les limites indiquent l’organisation, sans affirmer une isolation à l’exécution ni des appels. Rendu avec uml-mcp.
Source PlantUML
@startuml
!include <C4/C4_Component>
LAYOUT_TOP_DOWN()
System_Boundary(SYS, "jsonresume-theme-kendall") {
Boundary(L0, "Présentation", "layer") {
Component(M0_0, "(root)", ".css", "2 fichiers")
}
Boundary(L1, "Points d’entrée et API", "layer") {
Component(M1_0, "(root)", "JavaScript", "1 fichiers")
}
}
@enduml
UML 4 · Code
Déclarations, champs et méthodes sélectionnés, regroupés par fichier source. Aucun héritage ni appel n’est déduit. Rendu avec uml-mcp.
Source PlantUML
@startuml
skinparam backgroundColor transparent
skinparam shadowing false
skinparam roundCorner 10
skinparam defaultFontName Arial
skinparam defaultFontSize 13
skinparam ArrowColor #4e6070
skinparam ArrowFontColor #3d4f5f
skinparam titleFontSize 14
skinparam actorBorderColor #006a62
skinparam actorBackgroundColor #e9f3f4
skinparam usecaseBorderColor #006a62
skinparam usecaseBackgroundColor #e9f3f4
skinparam componentBorderColor #006a62
skinparam componentBackgroundColor #e9f3f4
skinparam interfaceBorderColor #006a62
skinparam interfaceBackgroundColor #ffffff
skinparam nodeBorderColor #4e6070
skinparam nodeBackgroundColor #f4f8fb
skinparam databaseBorderColor #006a62
skinparam databaseBackgroundColor #ffffff
skinparam cloudBorderColor #4e6070
skinparam cloudBackgroundColor #f0f5fa
skinparam artifactBorderColor #006a62
skinparam artifactBackgroundColor #ffffff
skinparam rectangleBorderColor #b0c2d3
skinparam activityBorderColor #006a62
skinparam activityBackgroundColor #e9f3f4
skinparam partitionBorderColor #b0c2d3
skinparam stereotypeCBackgroundColor #ffffff
top to bottom direction
hide empty members
package "jsonresume-theme-kendall" {
object "index.js" as FN0 {
getMonth()
render()
}
}
@enduml
7.3. Interface publique
Du code extérieur peut utiliser tout ce qui est listé ici. Le projet déclare aussi 0 types publics.
Points d’entrée
index.jsfichier d’entréemainexport du paquetindex.jspackage.json
7.4. Logique métier
Aucune classe n’a été extraite. Voici les plus gros fichiers source et leurs fonctions.
index.jsgetMonth, render
7.5. Stack et dépendances
Node.js package.json 3 à l’exécution
Dépendances externes
3 paquets déclarés (3 à l’exécution, 0 pour le développement) dans package.json.
7.6. Pipeline CI/CD
Aucun pipeline CI/CD dans le dépôt. Le code se construit et se lance à la main, comme décrit plus haut.
7.7. Déploiement
Mermaid Schéma de déploiement
flowchart LR
repo[("Dépôt GitHub")]
local["Poste local<br/>Node.js"]
repo -->|"cloner et lancer"| local
Le dépôt ne contient ni Dockerfile, ni fichier Compose, ni configuration d’hébergement : le code s’exécute sur le poste qui le clone.
7.8. Sécurité
Chaîne d’approvisionnement
Les sources disponibles ne documentent pas les autres sections.
8. Référence
3 / 3 fichiers admissibles lus (9 dans l’arbre); 0 trop volumineux, 0 échec de lecture et 0 diagnostic de syntaxe.
Ce que couvre l’analyse
Les dossiers connus de dépendances et de compilation, les fichiers d’identifiants et les binaires sont exclus. La collecte couvre les README, les manifestes reconnus et les fichiers source pris en charge.
Les statistiques Linguist couvrent l’ensemble du dépôt et peuvent inclure d’autres langages.
10. Fichiers à lire 3
11. Glossaire
Dépôt
Les fichiers source, la configuration et l’historique versionné d’un projet.
README
Le document d’entrée du dépôt, qui présente généralement son rôle et son installation.
Dépendance
Une bibliothèque, un outil ou un service nécessaire à la compilation ou à l’exécution d’un composant.
Port publié
Un port de l’hôte associé au port d’un service dans un conteneur. Sa publication peut rendre le service accessible hors du réseau des conteneurs.
Interface en ligne de commande
Une interface textuelle où les commandes et arguments choisissent les opérations. Les codes de retour permettent aux scripts de détecter un succès ou un échec.
Compilation
Les étapes qui transforment les sources et dépendances en programme exécutable ou en livrable distribuable.
GPU
Un processeur conçu pour les calculs parallèles, dont le rendu graphique et de nombreuses opérations numériques.
Fork
Un dépôt distinct dérivé d’un autre projet. Une modification du fork ne devient pas automatiquement une modification du projet amont.
12. Références
- antoinebou12. (2026, 5 novembre). jsonresume-theme-kendall. [Software repository] github.com.
- antoinebou12. (2026, 5 novembre). jsonresume-theme-kendall: README. [Repository documentation] github.com.
- antoinebou12. (2026, 5 novembre). index.js. [Source file] github.com.
- antoinebou12. (2026, 5 novembre). resume.template. [Source file] github.com.
- antoinebou12. (2026, 5 novembre). print.css. [Source file] github.com.
- Boucher, A. (2026, 23 octobre). jsonresume-theme-kendall : D’un document JSON au modèle de CV. [Project article] antoineboucher.info.
Les sources sans date de publication indiquent la date de leur dernière vérification, le 5 novembre 2026. Les liens des fichiers conservent la révision inspectée lorsqu’elle est disponible.