Claude/add translation support 0153tir v erx cj ymo zq h wx ald#16
Merged
bleuscyther merged 22 commits intodevelopfrom Nov 21, 2025
Merged
Conversation
Implemented a complete internationalization (i18n) system with support for:
- English (en) - default
- Haitian Creole (ht)
- Spanish (es)
- French (fr)
New Components:
- language-selector: UI component for language switching
- i18n service: Core translation service with lazy loading and caching
- Translation interfaces and types
Updated Components:
- app-root: Added language state management and event handling
- right-panel: Integrated translations and language selector
- config.ts: Added getTranslatedMenuItems() function
Features:
- Automatic browser language detection
- LocalStorage persistence
- Reactive language switching
- Dot notation for nested keys (e.g., 't("nav.home")')
- Variable interpolation support
- Fallback to default language
- Prepared for future API-based translation
- Fully accessible language selector
Translation files stored in /src/translations/ and /src/assets/translations/
Documentation available in TRANSLATION_IMPLEMENTATION.md
Implemented comprehensive URL-based language routing system to maintain language consistency across navigation and browser history. URL Format: /:lang/:page (e.g., /en/welcome, /ht/about-me) Language Detection Priority: 1. URL parameter (highest priority) 2. LocalStorage (saved preference) 3. Browser language (auto-detect) 4. Default (en) Key Changes: i18n Service: - Added getLanguageFromURL() to extract language from URL - Added getPathWithoutLanguage() to get page path without prefix - Added buildURLWithLanguage() to construct URLs with language - Updated setLanguage() to update URL when language changes - Updated init() to prioritize URL language over other sources app-root Component: - Redirects URLs without language prefix to include detected language - Syncs language state from URL on route changes - Handles popstate events to maintain language on back/forward navigation - Extracts paths without language for route validation simple-link Component: - Automatically adds current language prefix to all links - Subscribes to language changes to update href attributes - Uses buildURLWithLanguage() for consistent URL generation right-panel Component: - Extracts paths without language prefix for route matching - Properly highlights active menu items regardless of URL language Documentation: - Added URL-Based Language Routing section - Documented language detection priority - Updated function signatures and examples - Added component-specific URL handling details Benefits: - Shareable URLs maintain language preference - SEO-friendly language-specific URLs - Browser back/forward maintains language context - Page refresh preserves language from URL - Consistent language across all navigation
Implemented complete multilingual blog system and automatic SEO meta tag management with Open Graph and Twitter Card support. Multilingual Blog Support: - Updated BlogPost interface to include language field - Modified BlogService to filter posts by language - Added language-specific methods (getAllPosts, getPostById, etc.) - Added getAvailableLanguages() to check post translation availability - Added getPostWithFallback() for graceful English fallback - Blog posts automatically display in user's selected language Meta Tags Service (NEW): - Created comprehensive meta tags management service - Automatic HTML lang attribute updates - Standard meta tags (description, keywords, author, language) - Open Graph tags for Facebook/LinkedIn previews - Twitter Card tags for Twitter sharing - Automatic hreflang alternate language links - Canonical URL management - Article-specific meta tags (published/modified time, tags) Features: - Automatic meta tag updates on page load - Meta tags update on language change - Meta tags update on route navigation - Route-specific meta tags using translation keys - Support for website and article content types - OG image optimization (1200x630 for social sharing) - Alternate locale tags for all supported languages - X-default hreflang for default language app-root Integration: - Added updateMetaTags() method for route-specific tags - Meta tags initialized on component load - Meta tags update on language changes - Meta tags update on route changes - Uses translation keys for titles and descriptions Documentation: - Added "Multilingual Blog Support" section - Added "SEO & Meta Tags" section with complete examples - Documented blog service methods - Documented meta tags auto-generation - Listed SEO benefits (hreflang, Open Graph, Twitter Cards) SEO Benefits: - Language-specific URLs properly indexed by search engines - Hreflang tags indicate language versions to search engines - Rich previews on social media (Facebook, LinkedIn, Twitter) - Canonical URLs prevent duplicate content issues - Improved international SEO with proper locale tags - Better click-through rates with optimized social previews Files Changed: - src/interfaces/blog.ts - Added language field to BlogMetadata - src/services/blogService.ts - Language filtering and fallback support - src/services/metaTagsService.ts - NEW comprehensive meta tags manager - src/components/app-root/app-root.tsx - Meta tags integration - TRANSLATION_IMPLEMENTATION.md - Complete documentation update
- Fix type error in app-root updateMetaTags method with Record type - Remove unused previousLanguage variable in i18n service - Prefix unused parameters with underscore in fetchTranslationFromAPI - Remove unused index parameter in metaTagsService forEach
Changed nav.home to nav.welcome in all translation files to match the menu item key 'welcome' defined in config.ts. This resolves the 'Translation key not found: nav.welcome' error.
- Fix activeRoute initialization to strip language prefix - Remove dot prefix from 404 error message - Ensures menu routing works correctly with language prefixes
- Fix Shadow DOM click-outside handler using composedPath() - Add capture phase for event listener - Add translations directory to Stencil copy config - Ensures translation files are included in build output
- Change language icon from outlined to sharp variant - Update SCSS to support all Material Symbols variants - Matches the fonts loaded in index.html
…ht-panel - Fixed ID mismatch in loading-modal (langDropDown vs profileDropDown) - Improved language-selector click handling with proper Shadow DOM event propagation - Added overflow: visible to right-panel language-selector-wrapper to prevent clipping - Added styling for langDropDown in loading-modal - Enhanced click-outside detection using composedPath and host element reference 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
… loading-modal - Replaced dropdown-button with reusable language-selector component - Removed custom _selectLanguage method with alert message - Added part attributes (button, dropdown) to language-selector for external styling - Styled language-selector in loading-modal using ::part() selectors - Ensured consistent language switching functionality across both locations - Updated social-links with actual URLs and target="_blank" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add loading modal translation keys for all 4 languages - Update loading-modal component to use translation service - Add TypeScript interface for loading translations - Fix nav.home to nav.welcome in translation interface - Support greeting, roles, welcome message, and sound on text in all languages All UI text in loading modal is now fully translatable
- Add character selection translation keys (en, ht, es, fr) - Update character-selection component to use translation service - Add TypeScript interface for character translations - Translate: questions, labels, placeholders, and buttons - Support language change reactivity in character selection All text in character selection screen is now fully translatable
- Merge PDF resume generation feature - Resolve conflicts in stencil.config.ts (keep both translations and resumes) - Add resume markdown files in en, es, fr (ht translations needed) - Include PDF service and resume service
- Add Haitian Creole to resume config (en, ht, fr, es) - Create ht.md resume files for all 3 roles (frontend, fullStack, wireless) - Add resume UI translation keys for all 4 languages - Translate: Download CV, Target, Language labels, role names, buttons - Add error messages and version labels - Complete translation coverage for resume download feature
…tion-support-0153tirVErxCjYmoZqHWxALD
- Add complete welcome page story and text translations - Add projects page translations (title, subtitle, CTA) - Add blog page UI translations (read article, by, min read) - English and Haitian Creole translations complete
- Add Spanish and French translations for welcome page - Add Spanish and French translations for projects page - Add Spanish and French translations for blog page UI - All 4 languages now have complete translation coverage for: * Navigation, loading, character selection * Resume download feature * Welcome page personal story * Projects page content * Blog page UI elements
- Updated console-about to use translation service for resume download UI - Added missing Haitian Creole option to resume language dropdown - Updated gui-welcome to use translations with variable interpolation for personalized greeting - Updated gui-projects to use translations for all UI text - Updated gui-blog to use translations for article metadata - Updated TypeScript translation interfaces with resume, projectsPage, blogPage, and extended welcome keys - All components now support dynamic language switching
- Added notFound translations to all 4 language files (en, ht, es, fr) - Updated gui-404 component to use translation service - Added dynamic path interpolation for console error message - Updated TypeScript translation interface with notFound keys - Buttons and messages now support language switching
- Added aboutPage translations to all 4 language files (en, ht, es, fr) - Translated section headings: About Me, Bio, Employment History, Education, Skills - Translated UI labels: Info, Location, Email - Updated gui-about component to use translation service - Added language change listener for dynamic switching - Updated TypeScript translation interface with aboutPage keys - Professional content (bio, job descriptions) kept in English as per portfolio convention
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.