Architecture Portfolio JBake - Vision i Use Cases
Објављено 15 January 2026
Arhitektonska vizija
Водостави принцип
Arhitektura se temeljí na principu odvajanje zabrinutosti :
-
Sadržaj : strukturirani AsciiDoc fajlovi sa bogatim metapodacima
-
Презентација : шаблоне Thymeleaf повтрно користиви
-
Podaci : model koji se automatski izvlači od JBake iz AsciiDoc atributa
-
Стил : Bootstrap 5 за визуалну консистентност
Strategijski izbor: AsciiDoc za portfolio
Зашто AsciiDoc?
| Критеријум | предност |
|---|---|
Konzistentnost |
Isti format kao članci na blogu |
metapodaci |
Strukturirani i proširivi atributi ( |
Održljivost |
Jednostavno uređivanje teksta, Git verzioniranje |
fleksibilnost |
Можа садржати богато садржај (табеле, код, слике) |
Шаблонирање |
JBake automatski izvuče atribute za Thymeleaf |
Model podataka
Svaki portfolio projekat je dokument AsciiDoc sa:
-
Metapodaci zaglavlja: strukturirane informacije (klijent, trajanje, tehnologije, itd.)
-
Тело документа : narativni opis, izazovi, rešenja, rezultati
-
Прилагођени атрибути : префиксирани`project-*`за автоматско извлечење
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "projekat"
+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
Detaljni slučajevi korišćenja
UC1 : Dodati element u portfelj
Nominalni tok
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Urednik Tekst" as editor participant "Фајл\nAsciiDoc" as file participant "JBake\nmotor" 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
Šablon fajla koji se kreira
Развојник создаје`content/portfolio/nom-projet.adoc`sa standardizovanom strukturom:
-
Naslov sa svim potrebnim atributima
-
Normalizovane sekcije (Kontekst, Izazovi, Rešenja, Rezultati)
-
Koherentna nomenklatura slika
тачке валидације
-
Obavezni atributi su prisutni(
jbake-type,jbake-status,project-thumbnail) -
Referencirane slike postoje u`assets/img/portfolio/`
-
Build JBake uspešno se izvršava bez greške
-
Пројекат се појављује на страници портфолио.
-
Individualna stranica projekta se prikazuje ispravno.
UC2 : Уклони елемент из портфолио
nominalni tok
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Sistem Fajlovi" as fs participant "JBake\nEngine" as jbake participant "статични\nсајт" as site database "keš JBake" 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
Alternativna strategija: arhiviranje
Umesto trajnog brisanja, mogućnost kreiranja fascikle`content/portfolio/archive/`:
-
Премести фајл уместо да га обришеш
-
Omogućava lako vraćanje
-
Zadrži istoriju Git jasnije
Čišćenje resursa
-
Проверити сиротске слике у`assets/img/portfolio/`
-
Уклони слике не референциране од стране других пројеката
-
Očistiti JBake keš da se izbegnu fantomske reference
UC3 : Postaviti na neobjavljeno (draft)
nominalni tok
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Фајл AsciiDoc" as file participant "JBake\nMotor" as jbake participant "Статични сајт" 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
Moguća stanja
@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
Tipični slučajevi upotrebe
-
Projekt u izradi : napraviti u draft, objaviti kad bude spreman
-
Projet confidentiel temporairement : пређи у чернови за време сагласња са клијентом
-
Važno ažuriranje : preći u draft, izmeniti, objaviti ponovo
-
A/B testing: duplikirati u draftu, testirati, objaviti najbolju verziju
Архитектура шаблонирања
Strategija reutilizabilnih template-a
@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 "delimični" {
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 "objavljeni_projekti" as data
database "sadržaj (projekat)" 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
Uzorak izdvajanja podataka
JBake automatski transforma AsciiDoc attribusi u pristupačna svojstva u Thymeleaf:
@startuml
skinparam backgroundColor #FEFEFE
rectangle "Dokument AsciiDoc" {
(":project-client: Acme Corp") as attr1
(":project-duration: 6 meseci") as attr2
(":project-tags: java, react") as attr3
}
rectangle "Model JBake" {
(content['project-client']) as prop1
(content['project-duration']) as prop2
(content.tags) as prop3
}
rectangle "Šablon Thymeleaf" {
(th:text="${project['project-client']}") as tmpl1
(th:text="${project['project-duration']}") as tmpl2
(th:each="етикета : ${project.tags}") as tmpl3
}
attr1 --> prop1 : parsing
attr2 --> prop2 : parsing
attr3 --> prop3 : parsing
prop1 --> tmpl1 : binding
prop2 --> tmpl2 : binding
prop3 --> tmpl3 : binding
@enduml
Konvencije imenovanja
-
Atributi projekta : префикс`project-*` (ex:
project-client,project-tech-stack) -
Datoteke : kebab-case (primer:`ecommerce-platform.adoc`)
-
Slike : prefiks ime-projekat (primer:`ecommerce-platform-thumb.jpg`)
-
Templates : функционално име (ex:`project-card.html`,
tech-badge.html)
radni tok publikacije
Цевовод за развој
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "projekat"
+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
okruženja
| Окружење | upotreba | Prihvaćen statut |
|---|---|---|
lokalno |
Razvoj i pregled |
koncept, objavljeno |
стадирање |
Validacija preproizvodnje |
objavljeno samo |
Proizvodnja |
Javni sajt |
objavljeno samo |
Ekstenzibillost
Додавање нових атрибута
Da biste obogatili model podataka, jednostavno dodati nove prefiksirane atribute.project-*(empty)
-
project-awards: Nagrade i priznanja -
project-testimonial: Захватак клијента -
project-team-size: Величина тима -
`project-budget-range`budžetski opseg
Ovi atributi postaju automatski dostupni u šablonima bez modifikacije JBake motore.
Napredna kategorizacija
@startuml
skinparam backgroundColor #FEFEFE
object Projet {
project-category = "веб"
project-subcategory = "e-komercija"
project-industry = "maloprodaja"
project-complexity = "visok"
}
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
Najbolje prakse
Organizacija fajlova
-
Jedna datoteka = jedan projekat: izbegnuti mešanje više projekata
-
Сlike у посвећеном фолдеру
assets/img/portfolio/nom-projet/ -
Konzistentna nomenklatura : olakošava pretragu i održavanje
-
Versioning Git : potpuno praćenje promena
Управљање садржајем
-
Podrazumevani status nacrta : objaviti samo kada je spremno
-
Преглед пре издавања : провјера квалитета и конфиденцијалности
-
Пуне метаподатке : попuniti све релевантна полиja
-
Bogati narativni sadržaj : Ne ograničavajte se na metapodatke
performans
-
Optimiziraj slike : kompresija pre commit
-
Пагинација ако је потребна : ако >20 пројеката
-
Učitavanje na zahtev : slike galerija učitane na zahtev
-
Keš pregledača : odgovarajuća zaglavlja za assete
Zaključak
Ova arhitektura omogućava:
-
Jednostavnost korišćenja : dodati projekat = kreirati tekstualni fajl
-
Fleksibilnost : ekstenzibilan preko novih atributa
-
Održivost : odvajanje sadržaja i prezentacije
-
Trazibilnost : kompletno Git verzioniranje
-
Automatizacija : kontinuirana gradnja i implementacija moguća
Izbor AsciiDoca osigurava doslednost sa ostalom delom sajta, a uz to pruža bogatstvo metapodataka potrebnih za profesionalni portfolio.