adding help button; adding meta description translations#6
Conversation
WalkthroughThe changes enhance UI presentation and refactor metadata management across multiple layers. CSS adds styles for a help button, header constraints, and TTS options container. HTML restructures the TTS controls and updates supported languages in metadata. JavaScript extracts language-specific metadata logic into a reusable Changes
Sequence DiagramsequenceDiagram
participant User
participant main.js as main.js<br/>(Language Selection)
participant dynamic_meta.js as dynamic_meta.js<br/>(Metadata Manager)
participant DOM
User->>main.js: Select Language
main.js->>dynamic_meta.js: updateMeta(selectedLanguage)
dynamic_meta.js->>dynamic_meta.js: Look up translatedMeta<br/>Build description string<br/>Apply dialect styling
dynamic_meta.js->>DOM: Update document.title
dynamic_meta.js->>DOM: Update meta description
dynamic_meta.js->>DOM: Update sample text
DOM-->>User: Display Updated Metadata
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
wiktionary_pron/css/style.css (1)
469-469: Remove duplicate --volume-icon declaration.The
--volume-iconCSS variable is already declared at line 469 with the identical value. This duplicate declaration is unnecessary and should be removed to avoid confusion.Apply this diff:
--icon-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M304 48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zm0 416c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM48 304c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm464-48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM142.9 437A48 48 0 1 0 75 369.1a48 48 0 1 0 67.9 67.9zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1a48 48 0 1 0-67.9 67.9z'/%3E%3C/svg%3E"); - --volume-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M215%2072L126.1%20161H24c-13.3%200-24%2010.7-24%2024v144c0%2013.3%2010.7%2024%2024%2024h102.1l89%2089c15%2015%2041%204.5%2041-17V89c0-21.5-26-32-41-17zm123.2%20108.1c-11.6-6.3-26.2-2.2-32.6%209.5-6.4%2011.6-2.2%2026.2%209.5%2032.6C328%20229.3%20336%20242.6%20336%20257c0%2014.4-8%2027.7-20.9%2034.8-11.6%206.4-15.8%2021-9.5%2032.6%206.4%2011.7%2021.1%2015.8%2032.6%209.5%2028.2-15.6%2045.8-45%2045.8-76.9s-17.5-61.3-45.8-76.9z%22%2F%3E%3C%2Fsvg%3E"); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
wiktionary_pron/css/style.css(5 hunks)wiktionary_pron/index.html(3 hunks)wiktionary_pron/scripts/dynamic_meta.js(2 hunks)wiktionary_pron/scripts/main.js(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
wiktionary_pron/scripts/dynamic_meta.js (1)
wiktionary_pron/scripts/languages.js (2)
languages(1-98)languages(1-98)
wiktionary_pron/scripts/main.js (1)
wiktionary_pron/scripts/dynamic_meta.js (1)
selectedLanguage(84-84)
🔇 Additional comments (11)
wiktionary_pron/css/style.css (3)
222-227: LGTM! Help button styles support dynamic visibility.The
display: noneinitial state is correctly toggled toinline-blockby JavaScript inwiktionary_pron/scripts/main.js(lines 623-624) when a language is selected.
237-240: LGTM! Prevents header title overflow.The
max-width: 80%constraint prevents the header title from overlapping with the help button when it's displayed.
246-250: LGTM! Supports refactored TTS controls layout.The flex container aligns with the restructured TTS options in
wiktionary_pron/index.html(lines 98-103), which wraps Speed and Volume inputs in separate divs.wiktionary_pron/index.html (3)
23-24: LGTM! Meta description updated with additional language support.The meta description now accurately reflects the expanded language support including Russian, Belorussian, Ukrainian, Bulgarian, Icelandic, and Lithuanian. This aligns with the languages defined in
wiktionary_pron/scripts/languages.js.
63-64: LGTM! Help button reactivated for language-specific help pages.The button visibility is now controlled dynamically via JavaScript in
wiktionary_pron/scripts/main.js(lines 619-633), which sets thedisplaystyle and onclick handler based on the selected language.
98-103: LGTM! TTS controls refactored into structured container.The TTS controls are now properly organized within a
#tts_optionsdiv, which uses the flex layout defined inwiktionary_pron/css/style.css(lines 246-250) for centered alignment.wiktionary_pron/scripts/main.js (2)
1-1: LGTM! Import updated to match new export pattern.The named import
{ updateMeta }correctly matches the export inwiktionary_pron/scripts/dynamic_meta.js(line 89). This change supports the refactoring that centralizes metadata management.
692-692: LGTM! Delegates metadata updates to centralized function.Replacing inline
document.titleand meta description updates withupdateMeta(selectedLanguage)improves maintainability by consolidating language-specific metadata logic inwiktionary_pron/scripts/dynamic_meta.js.wiktionary_pron/scripts/dynamic_meta.js (3)
3-39: LGTM! Comprehensive translations for meta descriptions.The
translatedMetamap provides native-language descriptions organized by transcription type (phonemic, phonetic, or both). This enhances SEO and user experience for non-English speakers.
82-88: LGTM! Proper error handling for initialization.The try/catch block appropriately handles potential errors during URL parameter parsing and initial metadata updates.
89-89: LGTM! Exports updateMeta for use by main.js.The named export correctly provides the
updateMetafunction towiktionary_pron/scripts/main.js(line 1), establishing a clean public API for metadata management.
| function updateMeta(selectedLanguage) { | ||
| if (selectedLanguage) { | ||
| document.title = `Online ${selectedLanguage} IPA transcription`; | ||
| const lang = languages[selectedLanguage]; | ||
| if (lang) { | ||
| const availableStyles = lang.styles.join(", "); | ||
| let availableStyles = " Dialects: " + lang.styles.join(", ").trim() + "."; | ||
| if (lang.styles[0] === "Default") { | ||
| availableStyles = ""; | ||
| } | ||
| const availableForms = lang.forms | ||
| .map((form) => form.toLowerCase()) | ||
| .join("/"); | ||
| document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator. Dialects: ${availableStyles}`; | ||
| document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator.${availableStyles} ${translatedMeta[selectedLanguage]}`; | ||
| } | ||
| document.querySelector("#text_to_transcribe").value = | ||
| sampleTexts[selectedLanguage]; | ||
| console.log("sample text", sampleTexts[selectedLanguage]); | ||
| } | ||
| } |
There was a problem hiding this comment.
Fix meta element access method.
Line 75 uses document.head.children.description.content, which is incorrect. The children property is an HTMLCollection indexed numerically, not by element name. This will fail at runtime.
Apply this diff to fix the meta element access:
function updateMeta(selectedLanguage) {
if (selectedLanguage) {
document.title = `Online ${selectedLanguage} IPA transcription`;
const lang = languages[selectedLanguage];
if (lang) {
let availableStyles = " Dialects: " + lang.styles.join(", ").trim() + ".";
if (lang.styles[0] === "Default") {
availableStyles = "";
}
const availableForms = lang.forms
.map((form) => form.toLowerCase())
.join("/");
- document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator.${availableStyles} ${translatedMeta[selectedLanguage]}`;
+ const metaDescription = document.querySelector('meta[name="description"]');
+ if (metaDescription) {
+ metaDescription.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator.${availableStyles} ${translatedMeta[selectedLanguage]}`;
+ }
}
document.querySelector("#text_to_transcribe").value =
sampleTexts[selectedLanguage];
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function updateMeta(selectedLanguage) { | |
| if (selectedLanguage) { | |
| document.title = `Online ${selectedLanguage} IPA transcription`; | |
| const lang = languages[selectedLanguage]; | |
| if (lang) { | |
| const availableStyles = lang.styles.join(", "); | |
| let availableStyles = " Dialects: " + lang.styles.join(", ").trim() + "."; | |
| if (lang.styles[0] === "Default") { | |
| availableStyles = ""; | |
| } | |
| const availableForms = lang.forms | |
| .map((form) => form.toLowerCase()) | |
| .join("/"); | |
| document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator. Dialects: ${availableStyles}`; | |
| document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator.${availableStyles} ${translatedMeta[selectedLanguage]}`; | |
| } | |
| document.querySelector("#text_to_transcribe").value = | |
| sampleTexts[selectedLanguage]; | |
| console.log("sample text", sampleTexts[selectedLanguage]); | |
| } | |
| } | |
| function updateMeta(selectedLanguage) { | |
| if (selectedLanguage) { | |
| document.title = `Online ${selectedLanguage} IPA transcription`; | |
| const lang = languages[selectedLanguage]; | |
| if (lang) { | |
| let availableStyles = " Dialects: " + lang.styles.join(", ").trim() + "."; | |
| if (lang.styles[0] === "Default") { | |
| availableStyles = ""; | |
| } | |
| const availableForms = lang.forms | |
| .map((form) => form.toLowerCase()) | |
| .join("/"); | |
| const metaDescription = document.querySelector('meta[name="description"]'); | |
| if (metaDescription) { | |
| metaDescription.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator.${availableStyles} ${translatedMeta[selectedLanguage]}`; | |
| } | |
| } | |
| document.querySelector("#text_to_transcribe").value = | |
| sampleTexts[selectedLanguage]; | |
| } | |
| } |
🤖 Prompt for AI Agents
In wiktionary_pron/scripts/dynamic_meta.js around lines 63 to 80, the code uses
document.head.children.description.content which is invalid because children is
numerically indexed; replace this with a proper meta lookup and assignment:
query for the description meta (e.g.,
document.querySelector('meta[name="description"]')), check it isn’t null, and
set its content to the generated string; if the meta doesn’t exist, create a
meta element with name="description", set its content, and append it to
document.head.
1 participant
Summary by CodeRabbit