|
| 1 | +// Language Selector for Eitri Docs |
| 2 | +document.addEventListener('DOMContentLoaded', function() { |
| 3 | + // Find the header's right section |
| 4 | + const headerRight = document.querySelector('header .ml-auto'); |
| 5 | + if (!headerRight) return; |
| 6 | + |
| 7 | + // Create language selector container |
| 8 | + const langSelector = document.createElement('div'); |
| 9 | + langSelector.className = 'language-selector flex items-center gap-2'; |
| 10 | + langSelector.innerHTML = ` |
| 11 | + <a href="https://docs.eitri.tech/en/" |
| 12 | + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all hover:bg-accent hover:text-accent-foreground rounded-md px-3 h-8" |
| 13 | + title="English"> |
| 14 | + EN |
| 15 | + </a> |
| 16 | + <span class="text-muted-foreground">|</span> |
| 17 | + <a href="https://docs.eitri.tech/pt/" |
| 18 | + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all hover:bg-accent hover:text-accent-foreground rounded-md px-3 h-8" |
| 19 | + title="Português"> |
| 20 | + PT |
| 21 | + </a> |
| 22 | + `; |
| 23 | + |
| 24 | + // Insert before the theme toggle button |
| 25 | + const themeButton = headerRight.querySelector('button[title="Toggle theme"]'); |
| 26 | + if (themeButton) { |
| 27 | + // Insert separator and language selector before theme button |
| 28 | + const separator = document.createElement('div'); |
| 29 | + separator.setAttribute('data-orientation', 'vertical'); |
| 30 | + separator.setAttribute('role', 'none'); |
| 31 | + separator.setAttribute('data-slot', 'separator'); |
| 32 | + separator.className = 'bg-border shrink-0 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px hidden lg:block'; |
| 33 | + |
| 34 | + themeButton.parentNode.insertBefore(separator, themeButton); |
| 35 | + themeButton.parentNode.insertBefore(langSelector, themeButton); |
| 36 | + } |
| 37 | +}); |
0 commit comments