Make language alert keep tab

and a few other misc changes

_includes/common-js.html

@@ -1,4 +1,4 @@
-<script src="/assets/js/language-alert.js" type="module"></script>
+<script src="/assets/js/language-alert.js"></script>
 <script src="/assets/js/rescript.js" type="module"></script>
 
 {% if content contains "tab-container" %}

_includes/language-alert.html

@@ -1,6 +1,7 @@
 <div class="row">
 	<div class="col-12">
 		<div id="language-alert" class="alert alert-secondary alert-dismissible fade show d-none mt-3 mb-0" role="alert">
+			<a id="language-alert-link" href="#" accesskey="l">This page is available in your language!</a>
 			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ site.data[page.collection].strings.close }}"></button>
 		</div>
 	</div>

_sass/base.scss

@@ -541,8 +541,8 @@ a.footnote::after {
 
 	.tab-link {
 		border: 1px solid $borders;
+		border-bottom-width: 0;
 		padding: 0.5rem 1rem;
-		margin-bottom: -1px;
 		transition: 150ms ease;
 	}
 	.tab-link:not(:first-of-type) {

assets/js/language-alert.js

@@ -1,22 +1,28 @@
 ---
 ---
 
+// Have liquid insert the language info
+const languages = [{% for collection in site.collections %}"{{ collection.label }}"{% unless forloop.last %}, {% endunless %}{% endfor %}];
+const rtl = [{% for lang in site.data.rtl %}"{{ lang }}"{% unless forloop.last %}, {% endunless %}{% endfor %}];
+
+let languageID = null;
+
+function updateLanguageAlert() {
+	if(languageID)
+		document.getElementById("language-alert-link").href = (languageID == "en-US" ? "" : ("/" + languageID)) + window.location.pathname.replace(/[a-z]{2}-[A-Z]{2}\//, "") + (window.location.search ?? "") + (window.location.hash ?? "");
+}
+
 if(!sessionStorage.languageAlertDismissed) {
-	// Have liquid insert the language info
-	const languages = [{% for collection in site.collections %}"{{ collection.label }}"{% unless forloop.last %}, {% endunless %}{% endfor %}];
-	const rtl = [{% for lang in site.data.rtl %}"{{ lang }}"{% unless forloop.last %}, {% endunless %}{% endfor %}];
-
 	// Find which language the popup should be for, if any
-	let languageID = null;
 	// Crowdin In-Context, keep as is
-	if(document.documentElement.lang == "ic-IC"){
+	if(document.documentElement.lang == "ic-IC") {
 		languageID = "ic-IC";
 	// If the current language isn't in the browser's allowed languages, show the popup for the first language that has a page
-	} else if(!window.navigator.languages.find(r => document.documentElement.lang.toLowerCase().includes(r.toLowerCase()))) {
+	} else if(!window.navigator.languages.find(function(lang) { return document.documentElement.lang.toLowerCase().includes(lang.toLowerCase()); })) {
-		for(let wl of window.navigator.languages) {
+		for(let windowLang of window.navigator.languages) {
-			let l = languages.find(r => r.substr(0, 2) == wl.substr(0, 2));
+			let lang = languages.find(lang => lang.substr(0, 2) == windowLang.substr(0, 2));
-			if(l) {
+			if(lang) {
-				languageID = `${l.substr(0, 2)}-${l.substr(3, 3).toUpperCase()}`;
+				languageID = lang.substr(0, 2) + "-" + lang.substr(3, 3).toUpperCase();
 				break;
 			}
 		}
@@ -27,21 +33,10 @@ if(!sessionStorage.languageAlertDismissed) {
 		for(let language of document.getElementById("language-dropdown").children) {
 			if(language.children[0].dataset.languageId == languageID) {
 				// Unhide language alert and set text direction
-				let languageAlert = document.getElementById("language-alert");
+				const languageAlert = document.getElementById("language-alert");
 				languageAlert.classList.remove("d-none");
 				languageAlert.dir = rtl.includes(languageID) ? "rtl" : "ltr";
 
-				// Create link to make in the preferred language
-				let a = document.createElement("a");
-				a.href = `${languageID == "en-US" ? "" : ("/" + languageID)}${window.location.pathname.replace(/[a-z][a-z]-[A-Z][A-Z]\//, "")}`;
-				a.accessKey = "l";
-				languageAlert.prepend(a);
-
-				// Set text from language file if it exists
-				import(`./i18n/${languageID}.js`).then(obj => {
-					a.innerHTML = obj.default.pageIsInYourLanguage;
-				}).catch(() => a.innerHTML = "This page is available in your language!");
-
 				// Set lang of the element so the correct forms of characters are used (mainly for Chinese characters)
 				languageAlert.lang = languageID;
 
@@ -50,8 +45,21 @@ if(!sessionStorage.languageAlertDismissed) {
 					if(sessionStorage)
 						sessionStorage.languageAlertDismissed = true;
 				});
+
+				const langAlertLink = document.getElementById("language-alert-link");
+
+				// Set text from language file if it exists
+				import(`./i18n/${languageID}.js`).then(function(obj) {
+					langAlertLink.innerHTML = obj.default.pageIsInYourLanguage;
+				}).catch(function() {
+					langAlertLink.innerHTML = "This page is available in your language!";
+				});
+
+				updateLanguageAlert();
 				break;
 			}
 		}
 	}
 }
+
+window.addEventListener("hashchange", updateLanguageAlert);

assets/js/tabs.js

@@ -14,8 +14,10 @@ function setTab(tab) {
 		url = url.replace(/(?=#|$)/, "?tab=" + tab);
 	}
 
-	if(url != window.location.href) // Don't update if not changed
+	if(url != window.location.href) { // Don't update if not changed
 		history.pushState({}, "", encodeURI(url));
+		if(typeof updateLanguageAlert != "undefined") updateLanguageAlert(); // Language alert requires modern JS
+	}
 }
 
 function findTab(tabGroup, tabName) {