Skip to content

Commit

Permalink
Doc: render version/language selector on Read the Docs
Browse files Browse the repository at this point in the history
Integrate the new Read the Docs Addons JavaScript into the Python Docs Sphinx
theme to render versions and languages selector nicely.

References:

* Discord thread: https://discord.com/channels/935215565872693329/1159601953265942589
* Implementation of Addons JavaScript `CustomEvent`: readthedocs/addons#64
* Conversation about using Read the Docs: python/docs-community#5
  • Loading branch information
humitos committed Mar 18, 2024
1 parent f6cdc6b commit fc66a22
Showing 1 changed file with 55 additions and 0 deletions.
55 changes: 55 additions & 0 deletions Doc/tools/templates/layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,59 @@
{{ "}" }}
</style>
{{ super() }}

<meta name="readthedocs-addons-api-version" content="0">
<script type="text/javascript">
function onSwitch(event) {
const option = event.target.selectedIndex;
const item = event.target.options[option];
window.location.href = item.dataset.url;
}

document.addEventListener("readthedocs-addons-data-ready", function(event) {
const config = event.detail;
const languageMapping = {
en: "English",
es: "Spanish",
// ...
}

// TODO: add `selected="selected"` to option
const versionSelect = `
<select id="version_select">
${ config.addons.flyout.versions.map(
(version) => `
<option
value="${ version.slug }"
${ config.versions.current.slug === version.slug ? 'selected="selected"' : '' }
data-url="${ version.url }">
${ version.slug }
</option>`
).join("\n") }
</select>
`;

const languageSelect = `
<select id="language_select">
${ config.addons.flyout.translations.map(
(translation) => `
<option
value="${ translation.slug }"
${ config.projects.current.language.code === translation.slug ? 'selected="selected"' : '' }
data-url="${ translation.url }">
${ languageMapping[translation.slug] }
</option>`
).join("\n") }
</select>
`;

const selectVersionElement = document.querySelector("li.switchers div.version_switcher_placeholder");
selectVersionElement.innerHTML = versionSelect;
document.querySelector("li.switchers div.version_switcher_placeholder").addEventListener("change", onSwitch);

const selectLanguageElement = document.querySelector("li.switchers div.language_switcher_placeholder");
selectLanguageElement.innerHTML = languageSelect;
document.querySelector("li.switchers div.language_switcher_placeholder select").addEventListener("change", onSwitch);
});
</script>
{% endblock %}

0 comments on commit fc66a22

Please sign in to comment.