Addons: integrate with new beta addons flyout

humitos · humitos · commit c1ea98eb5987 · 2023-09-13T17:49:09.000+02:00
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
diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html
@@ -17,6 +17,7 @@
 <html class="{{ sphinx_writer }}" lang="{{ lang_attr }}"{% if sphinx_version_info >= (7, 2) %} data-content_root="{{ content_root }}"{% endif %}>
 <head>
   <meta charset="utf-8" />
+  <meta name="readthedocs-api-version" content="1">
   {{- metatags }}
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   {%- block htmltitle %}
diff --git a/sphinx_rtd_theme/versions.html b/sphinx_rtd_theme/versions.html
@@ -1,34 +1,47 @@
-{% if READTHEDOCS %}
-{# Add rst-badge after rst-versions for small badge style. #}
-  <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}">
+<script language="javascript" src="http://localhost:8000/readthedocs-addons.js"></script>
+<script language="javascript">
+ document.addEventListener("readthedocsdataready", function(event) {
+     const config = event.detail;
+
+     const flyout = `
+  <div class="rst-versions" data-toggle="rst-versions" role="note">
     <span class="rst-current-version" data-toggle="rst-current-version">
       <span class="fa fa-book"> Read the Docs</span>
-      v: {{ current_version }}
+      v: ${ config.versions.current.slug }
       <span class="fa fa-caret-down"></span>
     </span>
     <div class="rst-other-versions">
       <dl>
-        <dt>{{ _('Versions') }}</dt>
-        {% for slug, url in versions %}
-          <dd><a href="{{ url }}">{{ slug }}</a></dd>
-        {% endfor %}
+        <dt>Languages</dt>
+        ${ config.addons.flyout.translations.map(
+          (language) => `<dd><a href="${ language.url }">${ language.slug }</a></dd>`)}
       </dl>
       <dl>
-        <dt>{{ _('Downloads') }}</dt>
-        {% for type, url in downloads %}
-          <dd><a href="{{ url }}">{{ type }}</a></dd>
-        {% endfor %}
+        <dt>Versions</dt>
+        ${ config.addons.flyout.versions.map(
+          (version) => `<dd><a href="${ version.url }">${ version.slug }</a></dd>`)}
       </dl>
       <dl>
-        {# Translators: The phrase "Read the Docs" is not translated #}
-        <dt>{{ _('On Read the Docs') }}</dt>
+        <dt>Downloads</dt>
+        ${ config.addons.flyout.downloads.map(
+          (download) => `<dd><a href="${ download.url }">${ download.name }</a></dd>`)}
+      </dl>
+      <dl>
+        <dt>On Read the Docs</dt>
           <dd>
-            <a href="//{{ PRODUCTION_DOMAIN }}/projects/{{ slug }}/?fromdocs={{ slug }}">{{ _('Project Home') }}</a>
+            <a href="//${ config.domains.dashboard }/projects/${ config.projects.current.slug }/">Project Home</a>
           </dd>
           <dd>
-            <a href="//{{ PRODUCTION_DOMAIN }}/builds/{{ slug }}/?fromdocs={{ slug }}">{{ _('Builds') }}</a>
+            <a href="//${ config.domains.dashboard }/projects/${ config.projects.current.slug }/builds/">Builds</a>
           </dd>
       </dl>
     </div>
   </div>
-{% endif %}
+          `;
+
+     document.body.insertAdjacentHTML("beforeend", flyout);
+
+     {# TODO: disable the flyout auto-injected by `readthedocs-addons.js` somehow #}
+     document.querySelector("readthedocs-flyout").remove();
+ });
+</script>
