111 lines
3.8 KiB
Markdown
111 lines
3.8 KiB
Markdown
---
|
|
phase: 15-locale-detection-routing
|
|
plan: 02
|
|
subsystem: ui
|
|
tags: [i18n, locale, hreflang, SEO, accessibility]
|
|
|
|
# Dependency graph
|
|
requires:
|
|
- phase: 15-01
|
|
provides: LocalePicker component with manual selection cookie handling
|
|
provides:
|
|
- Language switcher dropdown UI partial
|
|
- Header integration with language switcher
|
|
- hreflang tags for SEO across all layouts
|
|
affects: [16-browser-detection, 17-locale-testing]
|
|
|
|
# Tech tracking
|
|
tech-stack:
|
|
added: []
|
|
patterns:
|
|
- Accessible dropdown with ARIA attributes
|
|
- CSS-only dropdown animation (opacity/visibility/transform)
|
|
- Mobile-responsive icon-only switcher
|
|
|
|
key-files:
|
|
created:
|
|
- themes/quotify/partials/language-switcher.htm
|
|
- themes/quotify/assets/css/components/language-switcher.css
|
|
modified:
|
|
- themes/quotify/partials/header.htm
|
|
- themes/quotify/layouts/default.htm
|
|
- themes/quotify/layouts/dashboard.htm
|
|
- themes/quotify/layouts/empty.htm
|
|
- themes/quotify/assets/css/app.css
|
|
- themes/quotify/assets/css/layout.css
|
|
|
|
key-decisions:
|
|
- "Native language names in switcher (Polski, Deutsch, English)"
|
|
- "Icon-only switcher on mobile (globe icon via SVG data URI)"
|
|
- "hreflang tags in head before favicon for SEO priority"
|
|
|
|
patterns-established:
|
|
- "Language switcher uses data-request to localePicker::onSwitchLocale"
|
|
- "Components directory for modular CSS (components/language-switcher.css)"
|
|
- "header-actions wrapper for header utilities"
|
|
|
|
# Metrics
|
|
duration: 2min
|
|
completed: 2026-02-02
|
|
---
|
|
|
|
# Phase 15 Plan 02: Language Switcher UI Summary
|
|
|
|
**Accessible language switcher dropdown in header with hreflang SEO tags across all layouts**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** 2 min
|
|
- **Started:** 2026-02-02T01:05:47Z
|
|
- **Completed:** 2026-02-02T01:07:48Z
|
|
- **Tasks:** 3
|
|
- **Files modified:** 8
|
|
|
|
## Accomplishments
|
|
- Created language switcher partial with accessible dropdown (ARIA attributes, keyboard navigation)
|
|
- Integrated switcher into site header with responsive styling
|
|
- Added localePicker and alternateHrefLangElements components to all layouts
|
|
- hreflang tags now output in head section for SEO
|
|
|
|
## Task Commits
|
|
|
|
Each task was committed atomically:
|
|
|
|
1. **Task 1: Create language switcher partial and CSS** - `2e045dd` (feat)
|
|
2. **Task 2: Integrate language switcher into header** - `ec454b5` (feat)
|
|
3. **Task 3: Register components and add hreflang to layouts** - `0a07da8` (feat)
|
|
|
|
## Files Created/Modified
|
|
- `themes/quotify/partials/language-switcher.htm` - Dropdown UI with locale options
|
|
- `themes/quotify/assets/css/components/language-switcher.css` - Responsive dropdown styles
|
|
- `themes/quotify/assets/css/app.css` - Import for language-switcher CSS
|
|
- `themes/quotify/assets/css/layout.css` - header-actions positioning styles
|
|
- `themes/quotify/partials/header.htm` - Language switcher integration
|
|
- `themes/quotify/layouts/default.htm` - localePicker + hreflang
|
|
- `themes/quotify/layouts/dashboard.htm` - localePicker + hreflang
|
|
- `themes/quotify/layouts/empty.htm` - localePicker + hreflang
|
|
|
|
## Decisions Made
|
|
- **Native language names:** Display "Polski", "Deutsch", "English" (not English translations)
|
|
- **Mobile icon:** Globe SVG as data URI in CSS for icon-only mobile display
|
|
- **hreflang placement:** Before favicon in head section for SEO priority
|
|
|
|
## Deviations from Plan
|
|
None - plan executed exactly as written.
|
|
|
|
## Issues Encountered
|
|
None.
|
|
|
|
## User Setup Required
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
- Language switcher fully functional with all three locales
|
|
- Clicking any language triggers localePicker::onSwitchLocale which sets cookie and redirects
|
|
- hreflang tags enable search engines to index all language versions
|
|
- Ready for Phase 16 (Browser Detection) or Phase 17 (Locale Testing)
|
|
|
|
---
|
|
*Phase: 15-locale-detection-routing*
|
|
*Completed: 2026-02-02*
|