Making meta tags update on page load.

Author: hellpanderrr

wiktionary_pron/index.html

@@ -185,7 +185,7 @@ <h1 style="flex: 1;">Online IPA Converter</h1>
             id="export_csv"
             name="submit"
             type="button"
-            title="Export as CSV"
+            title="Export as CSV (layout depends on selected transcription format)"
             value=""
     >Export as
         <i style="color:#03731e;font-size:30px;" class="icon icon-csv">

wiktionary_pron/scripts/dynamic_meta.js

@@ -0,0 +1,19 @@
+import { languages } from "./languages.js";
+
+try {
+  const urlParams = new URLSearchParams(window.location.search);
+  const selectedLanguage = urlParams.get("lang");
+  if (selectedLanguage) {
+    document.title = `Online ${selectedLanguage} IPA transcription`;
+    const lang = languages[selectedLanguage];
+    if (lang) {
+      const availableStyles = lang.styles.join(", ");
+      const availableForms = lang.forms
+        .map((form) => form.toLowerCase())
+        .join("/");
+      document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator. Dialects: ${availableStyles}`;
+    }
+  }
+} catch (err) {
+  console.log(err);
+}

wiktionary_pron/scripts/languages.js

@@ -0,0 +1,93 @@
+export const languages = {
+  Latin: {
+    styles: ["Classical", "Ecclesiastical", "Vulgar"],
+    forms: ["Phonetic", "Phonemic"],
+    langCode: "la",
+    ttsCode: "it-IT",
+  },
+  German: {
+    styles: ["Default"],
+    forms: ["Phonemic", "Phonetic"],
+    langCode: "de",
+    ttsCode: "de-DE",
+  },
+  Portuguese: {
+    styles: ["Brazil", "Portugal"],
+    forms: ["Phonetic", "Phonemic"],
+    langCode: "pt",
+    ttsCode: "pt-BR",
+  },
+  Spanish: {
+    styles: ["Castilian", "Latin_American "],
+    forms: ["Phonetic", "Phonemic"],
+    langCode: "es",
+    ttsCode: "es-ES",
+  },
+  French: {
+    styles: ["Default", "Parisian (experimental)"],
+    forms: ["Phonemic"],
+    langCode: "fr",
+    ttsCode: "fr-FR",
+  },
+  Russian: {
+    styles: ["Default"],
+    forms: ["Phonetic"],
+    langCode: "ru",
+    ttsCode: "ru-RU",
+  },
+  Belorussian: {
+    styles: ["Default"],
+    forms: ["Phonemic"],
+    langCode: "be",
+    ttsCode: "be-BY",
+  },
+  Polish: {
+    styles: ["Default"],
+    forms: ["Phonemic"],
+    langCode: "pl",
+    ttsCode: "pl-PL",
+  },
+  Bulgarian: {
+    styles: ["Default"],
+    forms: ["Phonemic"],
+    langCode: "bg",
+    ttsCode: "bg-BG",
+  },
+  Ukrainian: {
+    styles: ["Default"],
+    forms: ["Phonetic"],
+    langCode: "uk",
+    ttsCode: "uk-UA",
+  },
+  Lithuanian: {
+    styles: ["Default"],
+    forms: ["Phonemic"],
+    langCode: "lt",
+    ttsCode: "lt-LT",
+  },
+  Czech: {
+    styles: ["Default"],
+    forms: ["Phonemic"],
+    langCode: "cs",
+    ttsCode: "cs-CZ",
+  },
+  Armenian: {
+    styles: ["Western", "Eastern"],
+    forms: ["Phonemic", "Phonetic"],
+    langCode: "hy",
+    ttsCode: "hy-AM",
+  },
+  Greek: {
+    styles: [
+      "5th BCE Attic",
+      "1st CE Egyptian",
+      "4th CE Koine",
+      "10th CE Byzantine",
+      "15th CE Constantinopolitan",
+    ],
+    forms: ["Phonemic"],
+    langCode: "grc",
+    ttsCode: "el-GR",
+  },
+};
+export default { languages };

wiktionary_pron/scripts/main.js

@@ -1,3 +1,5 @@
+import "./dynamic_meta.js";
+import { languages } from "./languages.js";
 import { loadLanguage } from "./lua_init.js";
 
 import {
@@ -458,99 +460,6 @@ function getLangStyleForm() {
   return { lang, langStyle, langForm };
 }
 
-const languages = {
-  Latin: {
-    styles: ["Classical", "Ecclesiastical", "Vulgar"],
-    forms: ["Phonetic", "Phonemic"],
-    langCode: "la",
-    ttsCode: "it-IT",
-  },
-  German: {
-    styles: ["Default"],
-    forms: ["Phonemic", "Phonetic"],
-    langCode: "de",
-    ttsCode: "de-DE",
-  },
-  Portuguese: {
-    styles: ["Brazil", "Portugal"],
-    forms: ["Phonetic", "Phonemic"],
-    langCode: "pt",
-    ttsCode: "pt-BR",
-  },
-  Spanish: {
-    styles: ["Castilian", "Latin_American "],
-    forms: ["Phonetic", "Phonemic"],
-    langCode: "es",
-    ttsCode: "es-ES",
-  },
-  French: {
-    styles: ["Default", "Parisian (experimental)"],
-    forms: ["Phonemic"],
-    langCode: "fr",
-    ttsCode: "fr-FR",
-  },
-  Russian: {
-    styles: ["Default"],
-    forms: ["Phonetic"],
-    langCode: "ru",
-    ttsCode: "ru-RU",
-  },
-  Belorussian: {
-    styles: ["Default"],
-    forms: ["Phonemic"],
-    langCode: "be",
-    ttsCode: "be-BY",
-  },
-  Polish: {
-    styles: ["Default"],
-    forms: ["Phonemic"],
-    langCode: "pl",
-    ttsCode: "pl-PL",
-  },
-  Bulgarian: {
-    styles: ["Default"],
-    forms: ["Phonemic"],
-    langCode: "bg",
-    ttsCode: "bg-BG",
-  },
-  Ukrainian: {
-    styles: ["Default"],
-    forms: ["Phonetic"],
-    langCode: "uk",
-    ttsCode: "uk-UA",
-  },
-  Lithuanian: {
-    styles: ["Default"],
-    forms: ["Phonemic"],
-    langCode: "lt",
-    ttsCode: "lt-LT",
-  },
-  Czech: {
-    styles: ["Default"],
-    forms: ["Phonemic"],
-    langCode: "cs",
-    ttsCode: "cs-CZ",
-  },
-  Armenian: {
-    styles: ["Western", "Eastern"],
-    forms: ["Phonemic", "Phonetic"],
-    langCode: "hy",
-    ttsCode: "hy-AM",
-  },
-  Greek: {
-    styles: [
-      "5th BCE Attic",
-      "1st CE Egyptian",
-      "4th CE Koine",
-      "10th CE Byzantine",
-      "15th CE Constantinopolitan",
-    ],
-    forms: ["Phonemic"],
-    langCode: "grc",
-    ttsCode: "el-GR",
-  },
-};
-
 const langSelect = document.querySelector("#lang");
 const styleSelect = document.querySelector("#lang_style");
 const formSelect = document.querySelector("#lang_form");
@@ -656,6 +565,9 @@ async function updateOptionsUponLanguageSelection(event) {
   updateSelectOptions(selectedLanguage, formSelect, formOptions);
 
   document.title = `Online ${selectedLanguage} IPA transcription`;
+  const availableStyles = lang.styles.join(", ");
+  const availableForms = lang.forms.map((form) => form.toLowerCase()).join("/");
+  document.head.children.description.content = `Online ${selectedLanguage} to IPA ${availableForms} transcription generator. Dialects: ${availableStyles}`;
 
   console.log("Finished changing language to ", selectedLanguage);
   await processTextParam();