pi3c/blog.pyaqa.ru
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): add browser-language localization with Jinja2 _() and locale middleware
Some checks failed
ci/woodpecker/pr/pipeline Pipeline failed
Details

Browse Source 
Add i18n support to the blog web UI with 4 languages (en/ru/fr/de),
80 translation keys, automatic Accept-Language detection, persistent
locale cookie, and a language switcher dropdown in the header.

- Infrastructure: TranslationService, translation dicts, convenience _()
- Presentation: locale middleware, /web/lang/{locale} switcher route
- Templates: all 9 templates use {{ _(key, current_locale) }}
- Tests: 26 tests across TranslationService, locale detection helpers
- Docs: TEST_MODEL.md and FEATURE_INFRASTRUCTURE.md updated with TC-UNIT-811-821
This commit is contained in:
Сергей Ванюшкин
2026-05-10 16:22:06 +03:00
parent 4e6505c598
commit d32ad29abc
18 changed files with 1077 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/presentation/templates/partials/footer.html
View File

@@ -1,14 +1,14 @@
<footer class="site-footer" data-testid="site-footer">
<div class="container" data-testid="footer-container">
<div class="footer-copyright" data-testid="footer-copyright">
<span data-testid="copyright-text">© 2026 Blog. All rights reserved.</span>
<span data-testid="copyright-text">{{ _('footer.copyright', current_locale) }}</span>
</div>
<nav class="footer-links" data-testid="footer-nav" aria-label="Footer navigation">
<a href="/about" class="footer-link" data-testid="footer-link-about">About</a>
<a href="/privacy" class="footer-link" data-testid="footer-link-privacy">Privacy</a>
<a href="/terms" class="footer-link" data-testid="footer-link-terms">Terms</a>
<a href="/api/docs" class="footer-link" data-testid="footer-link-api">API</a>
<a href="/about" class="footer-link" data-testid="footer-link-about">{{ _('footer.about', current_locale) }}</a>
<a href="/privacy" class="footer-link" data-testid="footer-link-privacy">{{ _('footer.privacy', current_locale) }}</a>
<a href="/terms" class="footer-link" data-testid="footer-link-terms">{{ _('footer.terms', current_locale) }}</a>
<a href="/api/docs" class="footer-link" data-testid="footer-link-api">{{ _('footer.api', current_locale) }}</a>
</nav>
</div>
</footer>

122
app/presentation/templates/partials/header.html
View File

@@ -5,7 +5,7 @@
<rect width="32" height="32" rx="6" fill="var(--color-primary)"/>
<path d="M8 12h16M8 16h12M8 20h8" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
<span data-testid="logo-text">Blog</span>
<span data-testid="logo-text">{{ _('header.logo', current_locale) }}</span>
</a>
{% include "partials/nav.html" %}
@@ -15,7 +15,7 @@
type="button"
class="mobile-menu-btn"
data-testid="mobile-menu-toggle"
aria-label="Toggle menu"
aria-label="{{ _('header.toggle_menu', current_locale) }}"
aria-expanded="false"
aria-controls="mobile-nav"
>
@@ -30,8 +30,8 @@
type="button"
class="theme-toggle"
data-testid="theme-toggle"
aria-label="Toggle dark mode"
title="Toggle dark mode"
aria-label="{{ _('header.toggle_theme', current_locale) }}"
title="{{ _('header.toggle_theme', current_locale) }}"
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="theme-light-icon" style="display: none;">
<path d="M10 2v2M10 16v2M4.22 4.22l1.42 1.42M14.36 14.36l1.42 1.42M2 10h2M16 10h2M4.22 15.78l1.42-1.42M14.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -41,7 +41,27 @@
<path d="M17.293 13.293A8 8 0 116.707 2.707a8.003 8.003 0 0010.586 10.586z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="lang-switcher" data-testid="lang-switcher">
<button
type="button"
class="lang-switcher-toggle"
data-testid="lang-switcher-toggle"
aria-haspopup="true"
aria-expanded="false"
title="{{ _('header.lang_switcher', current_locale) }}"
>
<span data-testid="current-lang-code">{{ current_locale|upper }}</span>
</button>
<div class="lang-switcher-dropdown" data-testid="lang-switcher-dropdown">
{% for code in ('en', 'ru', 'fr', 'de') %}
<a href="/web/lang/{{ code }}" class="lang-switcher-item {% if code == current_locale %}active{% endif %}" data-testid="lang-option-{{ code }}">
{{ _('lang.' + code, current_locale) }}
</a>
{% endfor %}
</div>
</div>
{% if user %}
<div class="user-menu" data-testid="user-menu">
<button
@@ -63,14 +83,14 @@
<circle cx="8" cy="6" r="3" stroke="currentColor" stroke-width="2"/>
<path d="M2 14c0-3 3-5 6-5s6 2 6 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Profile
{{ _('header.profile', current_locale) }}
</a>
{% if can_create %}
<a href="/web/posts/new" class="user-menu-item" data-testid="user-menu-new-post">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 0.5rem;">
<path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
New Post
{{ _('header.new_post', current_locale) }}
</a>
{% endif %}
<div class="user-menu-divider" data-testid="user-menu-divider"></div>
@@ -78,13 +98,13 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 0.5rem;">
<path d="M10 12h2a2 2 0 002-2V6a2 2 0 00-2-2h-2M6 12l-3-3m0 0l3-3m-3 3h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Sign Out
{{ _('header.sign_out', current_locale) }}
</a>
</div>
</div>
{% else %}
<a href="/auth/login" class="btn btn-primary btn-sm" data-testid="btn-login">
Sign In
{{ _('header.sign_in', current_locale) }}
</a>
{% endif %}
</div>
@@ -241,6 +261,84 @@
}
}
.lang-switcher {
position: relative;
}
.lang-switcher-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 6px;
color: var(--color-text);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.lang-switcher-toggle:hover {
background-color: var(--color-hover);
border-color: var(--color-secondary-dark-2);
}
.lang-switcher-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 0.5rem;
min-width: 140px;
background-color: var(--color-box-body);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 4px 12px var(--color-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 1000;
}
.lang-switcher:hover .lang-switcher-dropdown,
.lang-switcher-toggle:focus + .lang-switcher-dropdown,
.lang-switcher-dropdown:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lang-switcher-item {
display: block;
padding: 0.6rem 1rem;
color: var(--color-text);
text-decoration: none;
font-size: 0.875rem;
transition: background-color 0.2s ease;
}
.lang-switcher-item:first-child {
border-radius: 8px 8px 0 0;
}
.lang-switcher-item:last-child {
border-radius: 0 0 8px 8px;
}
.lang-switcher-item:hover {
background-color: var(--color-hover);
text-decoration: none;
}
.lang-switcher-item.active {
font-weight: 600;
color: var(--color-primary);
}
@media (min-width: 769px) {
.mobile-menu-btn {
display: none;
@@ -255,13 +353,13 @@
<!-- Mobile Navigation Menu -->
<nav class="mobile-nav" id="mobile-nav" data-testid="mobile-nav" aria-label="Mobile navigation">
<a href="/web/" class="nav-link {% if active_page == 'home' %}active{% endif %}" data-testid="mobile-nav-link-home">
Home
{{ _('nav.home', current_locale) }}
</a>
<a href="/web/posts" class="nav-link {% if active_page == 'posts' %}active{% endif %}" data-testid="mobile-nav-link-posts">
Posts
{{ _('nav.posts', current_locale) }}
</a>
<a href="/web/about" class="nav-link {% if active_page == 'about' %}active{% endif %}" data-testid="mobile-nav-link-about">
About
{{ _('nav.about', current_locale) }}
</a>
</nav>

6
app/presentation/templates/partials/nav.html
View File

@@ -1,11 +1,11 @@
<nav class="main-nav" data-testid="main-nav" aria-label="Main navigation">
<a href="/web/" class="nav-link {% if active_page == 'home' %}active{% endif %}" data-testid="nav-link-home">
Home
{{ _('nav.home', current_locale) }}
</a>
<a href="/web/posts" class="nav-link {% if active_page == 'posts' %}active{% endif %}" data-testid="nav-link-posts">
Posts
{{ _('nav.posts', current_locale) }}
</a>
<a href="/web/about" class="nav-link {% if active_page == 'about' %}active{% endif %}" data-testid="nav-link-about">
About
{{ _('nav.about', current_locale) }}
</a>
</nav>