Χαρτοφυλάκιο Αρχιτεκτονικής JBake - Όραμα και Use Cases
Δημοσιεύτηκε 15 January 2026
Πίνακας περιεχομένων
- Αρχιτεκτονική όραση
- Οδηγίαρχός? Wait check best translation: "Principle director" used often as "καιρός"? Let’s think: "principe directeur" in law/management is "guiding principle". Usually Greek phrase: "οδηγίαρχος?" Not common. I’d choose "καθοδηγητική αρχή". That seems accurate.
- Στρατηγική επιλογή : AsciiDoc για το πορτφόλιο
- Μοντέλο δεδομένων
- Λεπτομερείς περιπτώσεις χρήσης
- �Ροή εργασίας δημοσίευσης
- εκτασιμότητα
- Καλές Πρακτικές
Αρχιτεκτονική όραση
Οδηγίαρχός? Wait check best translation: "Principle director" used often as "καιρός"? Let’s think: "principe directeur" in law/management is "guiding principle". Usually Greek phrase: "οδηγίαρχος?" Not common. I’d choose "καθοδηγητική αρχή". That seems accurate.
Thus output exactly: καθοδηγητική αρχή
No extra spaces at ends.
Proceed.
</think>
καθοδηγητική αρχή
Η αρχιτεκτονική βασίζεται στο αρχέγονο του διαχωρισμού των ανησυχιών :
-
Περιεχόμενο : οργανωμένα αρχεία AsciiDoc με πλούσια μεταδεδομένα
-
Παρουσίαση : πρότυπα Thymeleaf επαναχρησιμοποιήσιμα
-
Δεδομένα : μοντέλο εξαγόμενο αυτόματα από το JBake από τα χαρακτηριστικά AsciiDoc
-
Στυλ : Bootstrap 5 για τη οπτική συνέπεια
Στρατηγική επιλογή : AsciiDoc για το πορτφόλιο
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "έργο"
+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
| Κριτήριο | Πλεονέκτημα |
|---|---|
Συμφωνία |
�Ίδιος μορφος όπως τα άρθρα του blog |
Μεταδεδομένα |
Δομημένα και επεκτάσιμα χαρακτηριστικά ( |
συντήρησις |
Απλή επεξεργασία κειμένου, εκδόσιμη με Git |
ευελιξία |
Μπορεί να περιέχει πλούσιο περιεχόμενο (πίνακες, κώδικας, εικόνες) |
Πρότυπο |
JBake εξάγει αυτόματα τα χαρακτηριστικά για το Thymeleaf |
Μοντέλο δεδομένων
Κάθε portfolio project είναι ένα έγγραφο AsciiDoc με:
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Επεξεργαστής\nΚείμενο" as editor participant "Αρχείο\nAsciiDoc" as file participant "JBake\nΜηχανή" as jbake participant "Στατικός\nΙστότοπος" 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
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "έργο"
+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
Λεπτομερείς περιπτώσεις χρήσης
UC1 : Προσθέστε ένα στοιχείο στο πορτοφολιο
ονομαστική ροή
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Επεξεργαστής\nΚείμενο" as editor participant "Αρχείο\nAsciiDoc" as file participant "JBake\nΜηχανή" as jbake participant "ιστότοπος\nστατικός" 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
Πρότυπο αρχείου που θα δημιουργηθεί
Ο προγραμματιστής δημιουργεί`content/portfolio/nom-projet.adoc`με μια προτυποποιημένη δομή :
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Σύστημα\nΑρχεία" as fs participant "JBake\nEngine" as jbake participant "Στατικός\nΙστότοπος" 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
Σημεία επικύρωσης
-
Τα υποχρεωτικά χαρακτηριστικά υπάρχουν (
jbake-type,jbake-status,project-thumbnail) -
Οι αναφερόμενες εικόνες υπάρχουν σε`assets/img/portfolio/`
-
Η JBake build ολοκληρώνεται χωρίς σφάλματα.
-
Το project εμφανίζεται στη σελίδα του portfolio.
-
Η ατομική σελίδα του έργου εμφανίζεται σωστά
UC2 : Διαγραφή ενός στοιχείου από το πορτοφολιού
Ονομαστική ροή
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Σύστημα\nΑρχεία" as fs participant "JBake\nΜηχανή" as jbake participant "Ιστότοπος\nστατικό" as site database "Κατάκεντρο\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
Εναλλακτική στρατηγική : αρχειοθέτηση
Αντί να διαγράψετε οριστικά, υπάρχει η δυνατότητα να δημιουργήσετε ένα φάκελο`content/portfolio/archive/`:
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Αρχείο\nAsciiDoc" as file participant "JBake\nEngine" as jbake participant "Στατικός\nΙστότοπος" 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 Το έργο υπάρχει ακόμα αλλά δεν είναι δημοσιευμένο 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
Καθαρισμός των πόρων
@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: προσχέδιο Δεν είναι δημόσια ορατό Χρήσιμο για τρέχοντα έργα end note note right of Published :jbake-status: δημοσιευμένο Ορατό στο χαρτοφυλάκιο Ευρετηριασμένο από το JBake end note note right of Archived Μεταφέρθηκε στο archive/ ή jbake-status: archived Μη δημοσιευμένο αλλά διατηρημένο end note @enduml
UC3 : Ορισμός ως μη δημοσιευμένο (draft)
ονομαστική ροή
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Αρχείο\nAsciiDoc" as file participant "JBake\nEngine" as jbake participant "Ιστοτόπος\nΣτατικός" 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
Πιθανές καταστάσεις
@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle
package "Πρότυπα 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 "Δεδομένα JBake" {
database "published_projects" as data
database "περιεχόμενο (έργο)" 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
Επαναχρησιμοποιήσιμο τμήμα
για την προβολή μιας κάρτας
έργου με:
- thumbnail
- τίτλο
- tags
- highlights
end note
@enduml
Τυπικές περιπτώσεις χρήσης
-
Έργο υπό επεξεργασία : Δημιουργία σε προχειρό, δημοσίευση όταν είναι έτοιμο
-
Προσωρινά μυστικό έργο : να περάσετε σε πρόχειρο για τη διάρκεια της σύμφωνης με τον πελάτη
-
Μεγάλη ενημέρωση : να μεταβείτε σε σχέδιο, να τροποποιήσετε, να δημοσιεύσετε ξανά
-
A/B testing : απλώνεται σε σχέδιο, δοκιμάζεται, δημοσίευση της καλύτερας έκδοσης
@startuml
skinparam backgroundColor #FEFEFE
rectangle "Έγγραφο AsciiDoc" {
(":project-client: Acme Corp") as attr1
(":project-duration: 6 μήνες") as attr2
(":project-tags: java, react") as attr3
}
rectangle "Πρότυπο JBake" {
(content['project-client']) as prop1
(content['project-duration']) as prop2
(content.tags) as prop3
}
rectangle "Πρότυπο 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
Στρατηγία ανχυρῶν προτύπων
@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle
package "Πρότυπα Thymeleaf" {
component [index.html] as index
component [portfolio.html] as portfolio
component [project.html] as project
package "Μερικοί" {
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 "Δεδομένα JBake" {
database "δημοσιευμένα_έργα" as data
database "περιεχόμενο (έργου)" 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
Πρότυπο εξαγωγής δεδομένων
JBake μετατρέπει αυτόματα τα χαρακτηριστικά AsciiDoc σε ιδιότητες προσβάσιμες στο Thymeleaf :
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "έργο"
+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
Συμβάσεις ονοματοδότησης
-
Ιδιότητες έργου : πρόθεμα`project-*` (ex:
project-client,project-tech-stack) -
Αρχεία : kebab-case (π.χ.
ecommerce-platform.adoc) -
Images : πρόθημα όνομα-έργου (π.χ:`ecommerce-platform-thumb.jpg`)
-
Πρότυπα : λειτουργικό όνομα (ex:`project-card.html`,
tech-badge.html)
�Ροή εργασίας δημοσίευσης
Δρομός ανάπτυξης
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "έργο"
+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
Περιβάλλοντα
| Περιβάλλον | Χρήση | Κατάσταση αποδεκτή |
|---|---|---|
Τοπικός |
Ανάπτυξη και προεπισκόπηση |
πρόχειρο, δημοσιευμένο |
παρασκευή |
Επικύρωση προπαραγωγής |
δημοσιεύτηκε μόνο |
Παραγωγή |
Δημόσιος ιστότοπος |
μόνο δημοσιευμένο |
εκτασιμότητα
@startuml
skinparam backgroundColor #FEFEFE
object Projet {
project-category = "ιστότοπος"
project-subcategory = "ηλεκτρονικό εμπόριο"
project-industry = "λιανική"
project-complexity = "υψηλό"
}
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
Επιτρέπει το φιλτράρισμα πολλαπλών κριτηρίων
στο πρότυπο portfolio.html
μέσω JavaScript ή στην πλευρά του διακομιστή
end note
@enduml
Για να πλουσιεύσετε το μοντέλο δεδομένων, απλώς προσθέστε νέα χαρακτηριστικά με πρόθεμα`project-*`:
-
project-awards: Βραβεία και αναγνωρίσματα -
project-testimonial: πρόταση πελάτη -
`project-team-size`Μέγεθος ομάδας
-
`project-budget-range`Εύρος προϋπολογισμού
Αυτοί οι χαρακτηριστικοί γίνονται αυτόματα διαθέσιμοι στα πρότυπα χωρίς τροποποίηση του μηχανισμού JBake.
Προηγμένη κατηγοριοποίηση
@startuml
skinparam backgroundColor #FEFEFE
object Projet {
project-category = "δικτυακός"
project-subcategory = "ηλεκτρονίκο εμπόριο"
project-industry = "λιανική"
project-complexity = "υψηλός"
}
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
Καλές Πρακτικές
Οργάνωση των αρχείων
-
Ένα αρχείο = ένα έργο : αποφύγετε το να ανακατέψετε πολλά έργα
-
Εικόνες σε αfiερωμένο φάκελο
assets/img/portfolio/nom-projet/ -
Συνεπής ορολογία : διευκολύνει την αναζήτηση και τη συντήρηση
-
Versioning Git : πλήρης παρακολούθηση των αλλαγών
Διαχείριση περιεχομένου
-
Προεπιλεγμένη κατάσταση προτύπου : να δημοσιεύεται μόνο όταν είναι έτοιμο
-
Επιθεώρηση πριν τη δημοσίευση : επικύρωση ποιότητας και μυστικότητας
-
Πλήρη μεταδεδομένα : Συμπληρώστε όλα τα σχετικά πεδία
-
Πλούσιο διηγηματικό περιεχόμενο : μην περιορίζεστε στα μεταδεδομένα