Add spanish tutorial (tutorial_es.md). Contributed by Edos.

- Also add a language selector to the tutorial page
This commit is contained in:
Chris Wilson
2020-09-19 15:20:13 -04:00
parent c2f83f6215
commit 71200baa98
3 changed files with 211 additions and 1 deletions

View File

@@ -1,3 +1,8 @@
const availableLanguages = {
en: 'English',
es: 'Español',
};
window.addEventListener('load', () => {
const tutorialWrapper = document.getElementById('tutorial-wrapper');
new Promise((resolve, reject) => {
@@ -18,8 +23,24 @@ window.addEventListener('load', () => {
`${tutorialWrapper.getAttribute('data-language')}.md`, true);
ajax.send();
}).then((results) => {
// Build the language selector
const currentLanguage = window.location.href.split('/').pop();
const languageSelectorWrapper = document.createElement('div');
languageSelectorWrapper.setAttribute('id', 'language-selector-wrapper')
const languageSelector = document.createElement('select');
languageSelector.setAttribute('id', 'language-selector');
for (const lang of Object.keys(availableLanguages)) {
const option = document.createElement('option');
option.value = lang;
option.innerText = availableLanguages[lang];
if (lang === currentLanguage) { option.setAttribute('selected', '1'); }
languageSelector.appendChild(option);
}
languageSelectorWrapper.appendChild(languageSelector);
tutorialWrapper.appendChild(languageSelectorWrapper);
// Populate page with HTML generated from markdown
tutorialWrapper.innerHTML = (new showdown.Converter()).makeHtml(results);
tutorialWrapper.innerHTML += (new showdown.Converter()).makeHtml(results);
// Reset the id of all header divs to something nicer
const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
@@ -40,6 +61,11 @@ window.addEventListener('load', () => {
console.error(error);
}
}
document.getElementById('language-selector').addEventListener('change', (event) => {
console.info(window.location.hostname);
window.location.href = `http://${window.location.hostname}/tutorial/${event.target.value}`;
});
}).catch((error) => {
tutorialWrapper.innerHTML =
`<h2>${error}</h2>