Skip to content

Commit c1ea98e

Browse files
committed
Addons: integrate with new beta addons flyout
Initial experimentation to use the `CustomEvent` triggered by the addons called `readthedocsdataready` event (from readthedocs/addons#64) to build the Read the Docs flyout being integrated into the theme keeping the original look & feel. * Related: readthedocs/addons#64 * Closes #1523
1 parent 8ce23ce commit c1ea98e

File tree

2 files changed

+31
-17
lines changed

2 files changed

+31
-17
lines changed

sphinx_rtd_theme/layout.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<html class="{{ sphinx_writer }}" lang="{{ lang_attr }}"{% if sphinx_version_info >= (7, 2) %} data-content_root="{{ content_root }}"{% endif %}>
1818
<head>
1919
<meta charset="utf-8" />
20+
<meta name="readthedocs-api-version" content="1">
2021
{{- metatags }}
2122
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2223
{%- block htmltitle %}

sphinx_rtd_theme/versions.html

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,47 @@
1-
{% if READTHEDOCS %}
2-
{# Add rst-badge after rst-versions for small badge style. #}
3-
<div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}">
1+
<script language="javascript" src="http://localhost:8000/readthedocs-addons.js"></script>
2+
<script language="javascript">
3+
document.addEventListener("readthedocsdataready", function(event) {
4+
const config = event.detail;
5+
6+
const flyout = `
7+
<div class="rst-versions" data-toggle="rst-versions" role="note">
48
<span class="rst-current-version" data-toggle="rst-current-version">
59
<span class="fa fa-book"> Read the Docs</span>
6-
v: {{ current_version }}
10+
v: ${ config.versions.current.slug }
711
<span class="fa fa-caret-down"></span>
812
</span>
913
<div class="rst-other-versions">
1014
<dl>
11-
<dt>{{ _('Versions') }}</dt>
12-
{% for slug, url in versions %}
13-
<dd><a href="{{ url }}">{{ slug }}</a></dd>
14-
{% endfor %}
15+
<dt>Languages</dt>
16+
${ config.addons.flyout.translations.map(
17+
(language) => `<dd><a href="${ language.url }">${ language.slug }</a></dd>`)}
1518
</dl>
1619
<dl>
17-
<dt>{{ _('Downloads') }}</dt>
18-
{% for type, url in downloads %}
19-
<dd><a href="{{ url }}">{{ type }}</a></dd>
20-
{% endfor %}
20+
<dt>Versions</dt>
21+
${ config.addons.flyout.versions.map(
22+
(version) => `<dd><a href="${ version.url }">${ version.slug }</a></dd>`)}
2123
</dl>
2224
<dl>
23-
{# Translators: The phrase "Read the Docs" is not translated #}
24-
<dt>{{ _('On Read the Docs') }}</dt>
25+
<dt>Downloads</dt>
26+
${ config.addons.flyout.downloads.map(
27+
(download) => `<dd><a href="${ download.url }">${ download.name }</a></dd>`)}
28+
</dl>
29+
<dl>
30+
<dt>On Read the Docs</dt>
2531
<dd>
26-
<a href="//{{ PRODUCTION_DOMAIN }}/projects/{{ slug }}/?fromdocs={{ slug }}">{{ _('Project Home') }}</a>
32+
<a href="//${ config.domains.dashboard }/projects/${ config.projects.current.slug }/">Project Home</a>
2733
</dd>
2834
<dd>
29-
<a href="//{{ PRODUCTION_DOMAIN }}/builds/{{ slug }}/?fromdocs={{ slug }}">{{ _('Builds') }}</a>
35+
<a href="//${ config.domains.dashboard }/projects/${ config.projects.current.slug }/builds/">Builds</a>
3036
</dd>
3137
</dl>
3238
</div>
3339
</div>
34-
{% endif %}
40+
`;
41+
42+
document.body.insertAdjacentHTML("beforeend", flyout);
43+
44+
{# TODO: disable the flyout auto-injected by `readthedocs-addons.js` somehow #}
45+
document.querySelector("readthedocs-flyout").remove();
46+
});
47+
</script>

0 commit comments

Comments
 (0)