Architecture Portfolio JBake - Vision et Use Cases
Pubblicato il 15 January 2026
Visione Architettonica
Principio direttivo
L’architettura si basa sul principio della separazione delle preoccupazioni :
-
Contenuto : file AsciiDoc strutturati con metadati ricchi
-
Presentazione : template Thymeleaf riutilizzabili
-
Dati : modello estratto automaticamente da JBake dagli attributi AsciiDoc
-
Stile : Bootstrap 5 per la coerenza visiva
Scelta strategica : AsciiDoc per il portfolio
| Criterio | Vantaggio |
|---|---|
Coerenza |
Même format que les articles de blog |
Metadati |
Attributi strutturati ed estensibili ( |
Manutenibilità |
Modifica semplice di testo, versionabile Git |
Flessibilità |
Può contenere contenuti ricchi (tabelle, codice, immagini) |
Templating |
JBake estrae automaticamente gli attributi per Thymeleaf |
Modello di dati
Ogni progetto portfolio è un documento AsciiDoc con :
-
Metadati di intestazione : informazioni strutturate (cliente, durata, tecnologie, ecc.)
-
Corpo del documento : descrizione narrativa, sfide, soluzioni, risultati
-
Attributi personalizzati : prefissati`project-*`per l’estrazione automatica
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "project"
+jbake-status: published|draft
+jbake-date: Date
+jbake-tags: List<String>
--
+project-category: String
+project-client: String
+project-duration: String
+project-role: String
+project-thumbnail: String
+project-gallery: List<String>
+project-tech-stack: String
+project-highlights: List<String>
+project-demo-url: String
+project-github-url: String
--
+body: HTML (converti)
}
class JBakeEngine {
+parse(asciidoc)
+extractMetadata()
+convertToHTML()
}
class ThymeleafTemplate {
+portfolio.html
+project.html
+partials/project-card.html
}
class PortfolioPage {
+published_projects: List
+filtres: categories
}
ProjetAsciiDoc --> JBakeEngine : parse
JBakeEngine --> ThymeleafTemplate : fournit données
ThymeleafTemplate --> PortfolioPage : génère
@enduml
Casi d’uso dettagliati
UC1 : Aggiungere un elemento al portfolio
Flusso nominale
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Éditeur\nTexte" as editor participant "Fichier\nAsciiDoc" as file participant "JBake\nEngine" as jbake participant "Site\nStatique" as site dev -> editor : Créer nouveau fichier activate editor editor -> file : portfolio/nouveau-projet.adoc activate file dev -> editor : Rédiger en-tête avec métadonnées\n(titre, type=project, status=published,\nattributs project-*) dev -> editor : Rédiger contenu narratif\n(contexte, défis, solutions) dev -> editor : Ajouter images dans assets/img/portfolio/ editor -> file : Sauvegarder deactivate editor dev -> jbake : Lancer build (jbake -b) activate jbake jbake -> file : Lire et parser jbake -> jbake : Extraire métadonnées jbake -> jbake : Convertir AsciiDoc → HTML jbake -> jbake : Appliquer template project.html jbake -> jbake : Ajouter à la liste portfolio.html jbake -> site : Générer pages statiques deactivate jbake dev -> site : Vérifier résultat activate site site --> dev : Afficher projet deactivate site @enduml
Modello del file da creare
Il sviluppatore crea`content/portfolio/nom-projet.adoc`con una struttura standardizzata :
-
Intestazione con tutti gli attributi richiesti
-
Sezioni standardizzate (Contesto, Sfide, Soluzioni, Risultati)
-
Nomenclatura coerente delle immagini
Punti di validazione
-
Gli attributi obbligatori sono presenti.
jbake-type,jbake-status,project-thumbnail) -
Le immagini referenziate esistono in`assets/img/portfolio/`
-
Il build JBake riesce senza errori
-
Il progetto appare nella pagina portfolio
-
La pagina individuale del progetto viene visualizzata correttamente
UC2 : Rimuovere un elemento del portfolio
Flusso nominale
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Système\nFichiers" as fs participant "JBake\nEngine" as jbake participant "Site\nStatique" as site database "Cache\nJBake" as cache dev -> fs : Supprimer portfolio/projet-ancien.adoc activate fs fs --> dev : Fichier supprimé deactivate fs dev -> fs : (Optionnel) Supprimer images associées\nassets/img/portfolio/projet-ancien-* activate fs fs --> dev : Images supprimées deactivate fs dev -> cache : Nettoyer cache JBake activate cache cache --> dev : Cache vidé deactivate cache dev -> jbake : Rebuild complet (jbake -b) activate jbake jbake -> jbake : Scanner content/portfolio/ jbake -> jbake : Projet absent → non généré jbake -> jbake : Régénérer portfolio.html\n(sans le projet supprimé) jbake -> site : Déployer nouveau build deactivate jbake dev -> site : Vérifier activate site site --> dev : Projet absent de la liste deactivate site @enduml
Strategia alternativa: archiviazione
Invece di eliminare definitivamente, possibilità di creare una cartella`content/portfolio/archive/`:
-
Spostare il file invece di eliminarlo
-
Consente di ripristinare facilmente
-
Mantieni la cronologia Git più chiara
Pulizia delle risorse
-
Controlla le immagini orfane in`assets/img/portfolio/`
-
Rimuovere le immagini non riferite da altri progetti
-
Pulire la cache JBake per evitare riferimenti fantasma
UC3: Mettere in bozza
flusso nominale
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Fichier\nAsciiDoc" as file participant "JBake\nEngine" as jbake participant "Site\nStatique" as site dev -> file : Ouvrir portfolio/projet.adoc activate file dev -> file : Modifier attribut\n:jbake-status: published\n↓\n:jbake-status: draft file --> dev : Sauvegardé deactivate file dev -> jbake : Rebuild (jbake -b) activate jbake jbake -> file : Parser le fichier jbake -> jbake : Détecter status=draft jbake -> jbake : Exclure de published_projects jbake -> jbake : Ne pas créer page publique note right Le projet existe toujours mais n'est pas publié end note jbake -> site : Générer site (sans ce projet) deactivate jbake dev -> site : Vérifier portfolio activate site site --> dev : Projet absent de la liste publique deactivate site @enduml
Stati possibili
@startuml skinparam backgroundColor #FEFEFE [*] --> Draft : Création initiale Draft --> Published : Validation et publication Published --> Draft : Retrait temporaire Draft --> Archived : Projet abandonné Published --> Archived : Projet obsolète Archived --> [*] : Suppression définitive Published --> Published : Mises à jour note right of Draft :jbake-status: draft Non visible publiquement Utile pour projets en cours end note note right of Published :jbake-status: published Visible sur le portfolio Indexé par JBake end note note right of Archived Déplacé dans archive/ ou jbake-status: archived Non publié mais conservé end note @enduml
Casi d’utilizzo tipici
-
Progetto in corso di redazione : creare una bozza, pubblicare quando pronto
-
Progetto confidenziale temporaneo: passare in bozza finché non si ha l’accordo con il cliente
-
Aggiornamento importante : passare in draft, modificare, ripubblicare
-
A/B testing : duplicare in bozza, testare, pubblicare la versione migliore
Architettura di templating
Strategia di template riutilizzabili
@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle
package "Templates Thymeleaf" {
component [index.html] as index
component [portfolio.html] as portfolio
component [project.html] as project
package "Partials" {
component [header.html] as header
component [footer.html] as footer
component [project-card.html] as card
component [tech-badge.html] as badge
component [gallery.html] as gallery
}
}
package "Données JBake" {
database "published_projects" as data
database "content (projet)" as content
}
index --> header
index --> footer
portfolio --> header
portfolio --> footer
portfolio --> card
data --> portfolio : itération
project --> header
project --> footer
project --> badge
project --> gallery
content --> project : projet individuel
note right of card
Fragment réutilisable
pour afficher une carte
de projet avec :
- thumbnail
- titre
- tags
- highlights
end note
@enduml
Schema di estrazione dei dati
JBake converte automaticamente gli attributi AsciiDoc in proprietà accessibili in Thymeleaf :
@startuml
skinparam backgroundColor #FEFEFE
rectangle "Document AsciiDoc" {
(":project-client: Acme Corp") as attr1
(":project-duration: 6 mesi") as attr2
(":project-tags: java, react") as attr3
}
rectangle "Modello JBake" {
(content['project-client']) as prop1
(content['project-duration']) as prop2
(content.tags) as prop3
}
rectangle "Template Thymeleaf" {
(th:text="${project['project-client']}") as tmpl1
(th:text="${project['project-duration']}") as tmpl2
(th:each="tag : ${project.tags}") as tmpl3
}
attr1 --> prop1 : parsing
attr2 --> prop2 : parsing
attr3 --> prop3 : parsing
prop1 --> tmpl1 : binding
prop2 --> tmpl2 : binding
prop3 --> tmpl3 : binding
@enduml
Convenzioni di denominazione
-
Attributi progetto : prefisso`project-*` (ex:
project-client,project-tech-stack) -
File : kebab-case (es:`ecommerce-platform.adoc`)
-
Immagini : prefisso nome-progetto (es:`ecommerce-platform-thumb.jpg`)
-
Templates : nome funzionale (es:`project-card.html`,
tech-badge.html)
Workflow di pubblicazione
Pipeline di sviluppo
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "project"
+jbake-status: published|draft
+jbake-date: Date
+jbake-tags: List<String>
__
+project-category: String
+project-client: String
+project-duration: String
+project-role: String
+project-thumbnail: String
+project-gallery: List<String>
+project-tech-stack: String
+project-highlights: List<String>
+project-demo-url: String
+project-github-url: String
__
+body: HTML (converti)
}
class JBakeEngine {
+parse(asciidoc)
+extractMetadata()
+convertToHTML()
}
class ThymeleafTemplate {
+portfolio.html
+project.html
+partials/project-card.html
}
class PortfolioPage {
+published_projects: List
+filtres: categories
}
ProjetAsciiDoc --> JBakeEngine : parse
JBakeEngine --> ThymeleafTemplate : fournit données
ThymeleafTemplate --> PortfolioPage : génère
@enduml
Ambienti
| Ambiente | Uso | Stato accettato |
|---|---|---|
Local |
Sviluppo e anteprima |
bozza, pubblicato |
allestimento |
Validazione pre-produzione |
published solo |
Produzione |
Sito pubblico |
pubblicato solo |
Estensibilità
Aggiunta di nuovi attributi
Per arricchire il modello di dati, basta semplicemente aggiungere nuovi attributi prefissati`project-*`:
-
project-awards: Premi e riconoscimenti -
project-testimonial: citazione cliente -
project-team-size: Dimensione squadra -
project-budget-range: forchetta di bilancio
Questi attributi diventano automaticamente disponibili nei modelli senza modificare il motore JBake.
Categorizzazione avanzata
@startuml
skinparam backgroundColor #FEFEFE
object Projet {
project-category = "web"
project-subcategory = "ecommerce"
project-industry = "retail"
project-complexity = "high"
}
object Taxonomie {
categories : [web, mobile, data, devops]
subcategories : Map<category, List>
industries : [retail, finance, healthcare, ...]
complexities : [low, medium, high]
}
Projet --> Taxonomie : classifié selon
note right of Taxonomie
Permet filtrage multi-critères
dans le template portfolio.html
via JavaScript ou côté serveur
end note
@enduml
Buone pratiche
Organizzazione dei file
-
Un file = un progetto : evitare di mescolare diversi progetti
-
Immagini nella cartella dedicata
assets/img/portfolio/nom-projet/ -
Nomenclatura coerente : facilita ricerca e manutenzione
-
Versioning Git : tracciamento completo delle modifiche
Gestione del contenuto
-
Stato bozza predefinito : pubblicare solo quando pronto
-
Review prima della pubblicazione : validazione qualità e riservatezza
-
Metadati completi : compilare tutti i campi pertinenti
-
contenuto narrativo ricco : non limitarsi ai metadati
Performance
-
Ottimizzare immagini : compressione prima del commit
-
Paginazione se necessaria : se >20 progetti
-
Lazy loading : immagini delle gallerie caricate su richiesta
-
Cache del browser : intestazioni appropriate per gli asset
Conclusione
Questa architettura permette :
-
Facilità d’utilizzo : aggiungere un progetto = creare un file di testo
-
Flessibilità : estensibile via nuovi attributi
-
Manutenibilità: separazione contenuto/presentazione
-
Tracciabilità : versioning Git completo
-
Automazione : build e distribuzione continua possibili
La scelta di AsciiDoc garantisce la coerenza con il resto del sito, offrendo al contempo la ricchezza dei metadati necessari a un portfolio professionale.