สถาปัตยกรรมพอร์ตโฟลิโอ JBake - วิสัยทัศน์และกรณีการใช้งาน

@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 : พาร์ส
JBakeEngine --> ThymeleafTemplate : ให้ข้อมูล
ThymeleafTemplate --> PortfolioPage : สร้าง
@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 "published_projects" as data
  database "เนื้อหา (โครงการ)" as content
}

index --> header
index --> footer

portfolio --> header
portfolio --> footer
portfolio --> card
data --> portfolio : การทำซ้ำ

project --> header
project --> footer
project --> badge
project --> gallery
content --> project : โครงการส่วนบุคคล

note right of card
ส่วนที่สามารถนำกลับมาใช้ใหม่
เพื่อแสดงบัตร
ของโครงการ :
- ภาพขนาดย่อ
- ชื่อเรื่อง
- แท็ก
- ไฮไลท์
end note
@enduml

@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="แท็ก : ${project.tags}") as tmpl3
}

attr1 --> prop1 : การวิเคราะห์
attr2 --> prop2 : การวิเคราะห์
attr3 --> prop3 : การแยกวิเคราะห์

prop1 --> tmpl1 : การผูกมัด
prop2 --> tmpl2 : การผูกพัน
prop3 --> tmpl3 : การผูกมัด
@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 : แยกวิเคราะห์
JBakeEngine --> ThymeleafTemplate : ให้ข้อมูล
ThymeleafTemplate --> PortfolioPage : สร้าง
@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 : จัดประเภทตาม

note right of Taxonomie
อนุญาตการกรองหลายเกณฑ์
ในเทมเพลต portfolio.html
ผ่าน JavaScript หรือฝั่งเซิร์ฟเวอร์
end note
@enduml