Thymeleaf দিয়ে JBake স্ট্যাটিক সাইটের আন্তর্জাতীকরণ

@startuml
left to right direction
skinparam packageStyle rectangle

actor "লেখক" as author
actor "পাঠক FR" as reader_fr
actor "পাঠক EN" as reader_en

rectangle "সাইট JBake বহুভাষিক" {
  usecase "লেখা আর্টিকেল FR" as UC1
  usecase "লেখা आিকেল EN" as UC2
  usecase "কনফিগার মেসেজ i18n" as UC3
  usecase "জেনারেট সাইট" as UC4
  usecase "পড়া আর্টিকেল FR" as UC5
  usecase "পড়া আর্টিকেল EN" as UC6
  usecase "ভাষা পরিবর্তন" as UC7
  usecase "উপলব্ধ অনুবাদ" as UC8
}

author --> UC1
author --> UC2
author --> UC3
author --> UC4

reader_fr --> UC5
reader_fr --> UC7
reader_fr --> UC8

reader_en --> UC6
reader_en --> UC7
reader_en --> UC8

UC1 ..> UC4 : <<include>>
UC2 ..> UC4 : I’m unable to proceed because the French text to translate hasn’t been provided. Could you please share the source passage?
UC3 ..> UC4 : <<include>>
UC5 ..> UC8 : <<extend>>
UC6 ..> UC8 : <<extend>>
@enduml

@startuml
@startsalt
{
{T
+ projet-jbake
++ content
+++ blog
++++ 2024
+++++ fr
++++++ article1.adoc
++++++ article2.adoc
+++++ en
++++++ article1.adoc
++++++ article2.adoc
++++ 2025
+++++ fr
++++++ guide-i18n.adoc
+++++ en
++++++ i18n-guide.adoc
++ templates
+++ post.html
+++ index.html
+++ index_en.html
+++ messages.properties
+++ messages_fr.properties
+++ messages_en.properties
++ assets
+++ css
+++ js
+++ img
++ jbake.properties
++ output
+++ fr
++++ blog
+++++ 2025
++++++ guide-i18n.html
+++ en
++++ blog
+++++ 2025
++++++ i18n-guide.html
}
}
@endsalt
@enduml

@startuml
skinparam componentStyle rectangle

package "" {
  folder "content/blog/2025/" {
    folder "fr/" as content_fr {
      [article1.adoc]
      [article2.adoc]
    }
    folder "en/" as content_en {
      [article1.adoc] as article1_en
      [article2.adoc] as article2_en
    }
  }

  folder "templates/" {
    [post.html]
    [index.html]
    [index_en.html]
  }

  folder "messages/" {
    [messages_fr.properties]
    [messages_en.properties]
  }

  [jbake.properties]
}

package "JBake ইঞ্জিন" {
  [Parser AsciiDoc] as parser
  [Template Engine\nThymeleaf] as thymeleaf
  [Generator] as generator
  [I18n Resolver] as i18n
}

package "সাইট তৈরি করা হয়েছে" {
  folder "fr/" {
    folder "blog/2025/" as blog_fr {
      [article1.html]
      [article2.html]
    }
  }

  folder "en/" {
    folder "blog/2025/" as blog_en {
      [article1.html] as article1_html_en
      [article2.html] as article2_html_en
    }
  }
}

content_fr --> parser
content_en --> parser
parser --> generator

templates --> thymeleaf
messages --> i18n
i18n --> thymeleaf
thymeleaf --> generator
jbake.properties --> generator

generator --> blog_fr
generator --> blog_en
@enduml

src/jbake/templates/
├── messages.properties        # Fallback par défaut
├── messages_fr.properties     # Français
├── messages_en.properties     # Anglais
└── messages_de.properties     # Allemand

# Navigation
nav.home=Accueil
nav.blog=Blog
nav.about=À propos
nav.contact=Contact

# Articles
article.readmore=Lire la suite
article.published=Publié le
article.tags=Étiquettes
article.also.available=Également disponible en

# Interface
site.title=Mon Blog Technique
site.description=Partage de connaissances et expériences
footer.copyright=© 2025 Tous droits réservés
search.placeholder=Rechercher un article...

# Navigation
nav.home=Home
nav.blog=Blog
nav.about=About
nav.contact=Contact

# Articles
article.readmore=Read more
article.published=Published on
article.tags=Tags
article.also.available=Also available in

# Interface
site.title=My Tech Blog
site.description=Sharing knowledge and experiences
footer.copyright=© 2025 All rights reserved
search.placeholder=Search articles...

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="#{site.title}">Mon Blog</title>
    <meta name="description" th:content="#{site.description}" />
</head>
<body>
    <nav>
        <a th:href="@{/}" th:text="#{nav.home}">Accueil</a>
        <a th:href="@{/blog/}" th:text="#{nav.blog}">Blog</a>
        <a th:href="@{/about.html}" th:text="#{nav.about}">À propos</a>
    </nav>

    <footer>
        <p th:text="#{footer.copyright}">Copyright</p>
    </footer>
</body>
</html>

@startuml
actor Auteur
participant JBake
participant "AsciiDoc\nParser" as parser
participant "Thymeleaf\nEngine" as thymeleaf
participant "I18n\nResolver" as i18n
database "messages_*.properties" as messages

Auteur -> JBake: jbake -b
activate JBake

JBake -> parser: পড়ুন article.fr.adoc
activate parser
parser --> JBake: সামগ্রী + মেটাডেটা\n(lang=fr, article-id=xyz)
deactivate parser

JBake -> parser: পড়ুন article.en.adoc
activate parser
parser --> JBake: বিষয় + মেটাডেটা\n(lang=en, article-id=xyz)
deactivate parser

JBake -> thymeleaf: পৃষ্ঠা তৈরি করুন FR
activate thymeleaf

thymeleaf -> i18n: সমাধান করুন #{nav.home}
activate i18n
i18n -> messages: পড়ুন messages_fr.properties
messages --> i18n: "হোম"
i18n --> thymeleaf: "হোম"
deactivate i18n

thymeleaf -> JBake: অনুসন্ধান অনুবাদ\n(article-id=xyz, lang!=fr)
JBake --> thymeleaf: article.en.html পাওয়া গেছে

thymeleaf --> JBake: /fr/blog/article.html
deactivate thymeleaf

JBake -> thymeleaf: ইংরেজি পৃষ্ঠা তৈরি
activate thymeleaf

thymeleaf -> i18n: সমাধান করুন #{nav.home}
activate i18n
i18n -> messages: পড়ো messages_en.properties
messages --> i18n: "Home"
i18n --> thymeleaf: "Home"
deactivate i18n

thymeleaf -> JBake: অনুসন্ধান অনুবাদ\n(article-id=xyz, lang!=en)
JBake --> thymeleaf: article.fr.html পাওয়া গেল

thymeleaf --> JBake: /en/blog/article.html
deactivate thymeleaf

JBake --> Auteur: সাইট তৈরি করা হয়েছে
deactivate JBake
@enduml

# Locale par défaut
thymeleaf.locale=fr

# Encodage
template.encoding=UTF-8

@startuml
start

:পড়া jbake.properties;
:কনফিগারেশন i18n লোড করুন;

partition "প্রতিটি ফাইলের জন্য AsciiDoc" {
  :পড়ুন মেটাডেটা\n(:jbake-lang:, :jbake-article-id:);
  :বিষয়বস্তু পার্স AsciiDoc;
  :ভাষায় মেমোরি সংরক্ষণ;
}

partition "প্রতিটি টেমপ্লেটের জন্য" {
  :টেমপ্লেট লোড করুন Thymeleaf;
  :লক্ষ্য ভাষার শনাক্তকারী;
  :লোড messages_{lang}.properties;

  partition "কন্টেন্ট ফিল্টারিং" {
    :ভাষা অনুযায়ী শনাক্ত;
    :গ্রুপ কর অনুবাদ\nদ্বারা article-id;
  }

  :টেমপ্লেট i18n ব্যবহার করে প্রয়োগ করুন;
  :HTML তৈরি করুন /{lang}/;
}

:স্ট্যাটিক এসেটগুলি কপি করুন;
:বহুভাষিক সাইটম্যাপ তৈরি করুন;
:প্রবাহ RSS তৈরি করুন প্রতিটি ভাষায়;

stop
@enduml

content/blog/
├── 2024/
│   ├── fr/
│   │   ├── introduction-jbake.adoc
│   │   ├── guide-thymeleaf.adoc
│   │   └── astuces-asciidoc.adoc
│   └── en/
│       ├── introduction-jbake.adoc
│       ├── thymeleaf-guide.adoc
│       └── asciidoc-tips.adoc
└── 2025/
    ├── fr/
    │   └── internationalisation-jbake.adoc
    └── en/
        └── jbake-internationalization.adoc

= Internationalisation d'un site statique JBake
:jbake-type: post
:jbake-status: published
:jbake-date: 2025-10-20
:jbake-lang: bn
:jbake-article-id: jbake-i18n-thymeleaf
:jbake-tags: jbake, thymeleaf, i18n
:jbake-description: Guide pour mettre en place l'i18n avec JBake

= Internationalizing a JBake Static Site
:jbake-type: post
:jbake-status: published
:jbake-date: 2025-10-20
:jbake-lang: bn
:jbake-article-id: jbake-i18n-thymeleaf
:jbake-tags: jbake, thymeleaf, i18n
:jbake-description: Guide to implement i18n with JBake

# Pattern d'URL avec langue
post.permalink.pattern=:lang/blog/:year/:name.html

# Langue par défaut
site.default.lang=fr

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${content.title}">Article</title>
</head>
<body>
    <article>
        <header>
            <h1 th:text="${content.title}">Titre</h1>

            <div class="article-meta">
                <time th:text="${#dates.format(content.date, 'dd MMMM yyyy')}"
                      th:attr="datetime=${#dates.format(content.date, 'yyyy-MM-dd')}">
                    Date
                </time>

                <!-- Sélecteur de traductions -->
                <div class="translations" th:if="${content['article-id']}">
                    <span th:text="#{article.also.available}">Aussi disponible en :</span>
                    <ul class="language-list">
                        <li th:each="post : ${published_posts}"
                            th:if="${post['article-id'] == content['article-id'] and post.lang != content.lang}">
                            <a th:href="${post.uri}"
                               th:text="${post.lang.toUpperCase()}">
                                LANG
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <div class="content" th:utext="${content.body}">
            Contenu de l'article
        </div>

        <footer class="article-footer">
            <div class="tags" th:if="${content.tags}">
                <span th:text="#{article.tags}">Étiquettes :</span>
                <span th:each="tag : ${content.tags}">
                    <a th:href="@{/tags/{tag}.html(tag=${tag})}"
                       th:text="${tag}">tag</a>
                </span>
            </div>
        </footer>
    </article>
</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="#{site.title}">Mon Blog</title>
</head>
<body>
    <main>
        <h1 th:text="#{nav.blog}">Blog</h1>

        <div class="articles-list">
            <article th:each="post : ${published_posts}"
                     th:if="${post.lang == 'fr'}">
                <h2>
                    <a th:href="${post.uri}" th:text="${post.title}">Titre</a>
                </h2>
                <time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}">
                    Date
                </time>
                <p th:text="${post.description}">Description</p>
                <a th:href="${post.uri}" th:text="#{article.readmore}">
                    Lire la suite
                </a>
            </article>
        </div>
    </main>
</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="#{site.title}">My Blog</title>
</head>
<body>
    <main>
        <h1 th:text="#{nav.blog}">Blog</h1>

        <div class="articles-list">
            <article th:each="post : ${published_posts}"
                     th:if="${post.lang == 'en'}">
                <h2>
                    <a th:href="${post.uri}" th:text="${post.title}">Title</a>
                </h2>
                <time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}">
                    Date
                </time>
                <p th:text="${post.description}">Description</p>
                <a th:href="${post.uri}" th:text="#{article.readmore}">
                    Read more
                </a>
            </article>
        </div>
    </main>
</body>
</html>

@startuml
start

:ব্যবহারকারী সাইটে প্রবেশ করে;

if (Langue préférée ?) then (FR)
  :প্রদর্শন /index.html;
  :FR নিবন্ধ তালিকা করুন;
else (EN)
  :দেখান /en/index.html;
  :EN অনুষদের তালিকা;
endif

:ব্যবহারকারী নিবন্ধে ক্লিক করে;

:আর্টিকেল\nমেটাডেটা দেখান;

if (Traductions disponibles ?) then (oui)
  :প্রদর্শন নির্বাচক\nde অনুবাদ;

  if (Changement de langue ?) then (oui)
    :পুনর্নির্দেশ করুন\nঅনুবাদ;
    :article\nকে নতুন ভাষায় দেখান;
  else (non)
    :অবিরত পড়ুন;
  endif
else (non)
  :আরো পড়ুন;
endif

stop
@enduml

<nav class="language-switcher">
    <a href="/index.html"
       th:classappend="${content.lang == 'fr'} ? 'active'"
       title="Français">
        🇫🇷 FR
    </a>
    <a href="/en/index.html"
       th:classappend="${content.lang == 'en'} ? 'active'"
       title="English">
        🇬🇧 EN
    </a>
</nav>

.language-switcher {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 4px;
}

.language-switcher a {
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: background 0.2s;
}

.language-switcher a:hover {
    background: #e0e0e0;
}

.language-switcher a.active {
    background: #007bff;
    color: white;
}

.translations {
    margin: 1rem 0;
    padding: 1rem;
    background: #f8f9fa;
    border-left: 4px solid #007bff;
}

.language-list {
    display: inline-flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.language-list li::after {
    content: "•";
    margin-left: 0.5rem;
}

.language-list li:last-child::after {
    content: "";
}

:jbake-tags: java, spring-boot, microservices

# Version française
:jbake-tags: java, spring-boot, microservices

# Version anglaise
:jbake-tags: java, spring-boot, microservices

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org">
    <url th:each="post : ${published_posts}">
        <loc th:text="${config.site_host + post.uri}">URL</loc>
        <lastmod th:text="${#dates.format(post.date, 'yyyy-MM-dd')}">Date</lastmod>

        <!-- Liens alternatifs pour les traductions -->
        <xhtml:link th:each="translation : ${published_posts}"
                    th:if="${translation['article-id'] == post['article-id'] and translation.lang != post.lang}"
                    rel="alternate"
                    th:attr="hreflang=${translation.lang},href=${config.site_host + translation.uri}" />
    </url>
</urlset>

@startuml
node "বিকাশ মেশিন" {
  artifact "উৎস" {
    folder "বিষয়বস্তু/"
    folder "টেমপ্লেট/"
    folder "অ্যাসেট/"
  }

  component "JBake CLI" as jbake

  Sources --> jbake : jbake -b
}

node "বিল্ড সার্ভার\n(CI/CD)" {
  component "GitHub কর্ম\nবা GitLab CI" as ci

  jbake --> ci : push
}

cloud "CDN / hôsting" {
  node "স্ট্যাটিক ওয়েব সার্ভার" {
    artifact "উৎপন্ন সাইট" {
      folder "/fr/blog/"
      folder "/en/blog/"
      folder "/assets/"
    }
  }
}

ci --> "উৎপন্ন সাইট" : déploiement

actor "পাঠক" as users

users --> "স্ট্যাটিক ওয়েব সার্ভার" : HTTPS
@enduml