readthedocs · humitos · Jul 15, 2024 · Sep 13, 2023 · Sep 13, 2023 · Sep 20, 2023
@@ -7,6 +7,7 @@ recursive-include sphinx_rtd_theme *.css
 recursive-include sphinx_rtd_theme *.eot
 recursive-include sphinx_rtd_theme *.html
 recursive-include sphinx_rtd_theme *.js
+recursive-include sphinx_rtd_theme *.js_t
 recursive-include sphinx_rtd_theme *.svg
 recursive-include sphinx_rtd_theme *.ttf
 recursive-include sphinx_rtd_theme *.woff

@@ -68,6 +68,10 @@
         range(1, 100)
     ))
 
+if 'READTHEDOCS' in os.environ:
+    html_context['READTHEDOCS'] = True
+    html_context['READTHEDOCS_PROJECT'] = os.environ.get("READTHEDOCS_PROJECT")
+
 html_logo = "demo/static/logo-wordmark-light.svg"
 html_show_sourcelink = True
 html_favicon = "demo/static/favicon.ico"

@@ -16,6 +16,9 @@
 <html class="writer-html5" lang="{{ lang_attr }}"{% if sphinx_version_info >= (7, 2) %} data-content_root="{{ content_root }}"{% endif %}>
 <head>
   <meta charset="utf-8" />
+  {%- if READTHEDOCS and not embedded %}
+  <meta name="readthedocs-addons-api-version" content="1">
+  {%- endif %}
   {{- metatags }}
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   {%- block htmltitle %}
@@ -64,6 +67,10 @@
     {%- endfor %}
     <script src="{{ pathto('_static/js/theme.js', 1) }}"></script>
 
+    {%- if READTHEDOCS %}
+    <script src="{{ pathto('_static/js/versions.js', 1) }}"></script>
+    {%- endif %}
+
     {#- OPENSEARCH #}
     {%- if use_opensearch %}
     <link rel="search" type="application/opensearchdescription+xml"

@@ -0,0 +1,125 @@
+function renderLanguages(config) {
+   if (!config.projects.translations.length) {
+     return "";
+   }
+
+   const languagesHTML = `
+     <dl>
+       <dt>{{ _('Languages') }}</dt>
+       ${ config.projects.translations.map(
+       (translation) => `
+       <dd ${ translation.slug == config.projects.current.slug ? 'class="rtd-current-item"' : '' }>
+         <a href="${ translation.urls.documentation }">${ translation.language.code }</a>
+       </dd>
+       `).join("\n")}
+     </dl>
+   `;
+   return languagesHTML;
+ }
+
+  function renderVersions(config) {
+    if (!config.versions.active.length) {
+      return "";
+    }
+    const versionsHTML = `
+      <dl>
+        <dt>{{ _('Versions') }}</dt>
+        ${ config.versions.active.map(
+        (version) => `
+        <dd ${ version.slug === config.versions.current.slug ? 'class="rtd-current-item"' : '' }>
+          <a href="${ version.urls.documentation }">${ version.slug }</a>
+        </dd>
+        `).join("\n")}
+      </dl>
+    `;
+    return versionsHTML;
+  }
+
+  function renderDownloads(config) {
+    if (!Object.keys(config.versions.current.downloads).length) {
+      return "";
+    }
+    const downloadsNameDisplay = {
+      pdf: "PDF",
+      epub: "Epub",
+      htmlzip: "HTML",
+    };
+
+    const downloadsHTML = `
+      <dl>
+        <dt>{{ _('Downloads') }}</dt>
+        ${ Object.entries(config.versions.current.downloads).map(
+        ([name, url]) => `
+          <dd>
+            <a href="${ url }">${ downloadsNameDisplay[name] }</a>
+          </dd>
+        `).join("\n")}
+      </dl>
+    `;
+    return downloadsHTML;
+  }
+
+  document.addEventListener("readthedocs-addons-data-ready", function(event) {
+    const config = event.detail.data();
+
+    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: ${ config.versions.current.slug }
+          <span class="fa fa-caret-down"></span>
+        </span>
+        <div class="rst-other-versions">
+          <div class="injected">
+            ${ renderLanguages(config) }
+            ${ renderVersions(config) }
+            ${ renderDownloads(config) }
+            <dl>
+              <dt>{{ _('On Read the Docs') }}</dt>
+              <dd>
+                <a href="${ config.projects.current.urls.home }">{{ _('Project Home') }}</a>
+              </dd>
+              <dd>
+                <a href="${ config.projects.current.urls.builds }">{{ _('Builds') }}</a>
+              </dd>
+              <dd>
+                <a href="${ config.projects.current.urls.downloads }">{{ _('Downloads') }}</a>
+              </dd>
+            </dl>
+            <dl>
+              <dt>{{ _('Search') }}</dt>
+              <dd>
+                <form id="flyout-search-form">
+                  <input
+                    class="wy-form"
+                    type="text"
+                    name="q"
+                    aria-label="{{ _('Search docs') }}"
+                    placeholder="{{ _('Search docs') }}"
+                    />
+                </form>
+              </dd>
+            </dl>
+            <hr />
+            <small>
+              <span>Hosted by <a href="https://about.readthedocs.org/?utm_source={{ READTHEDOCS_PROJECT }}&utm_content=flyout">Read the Docs</a></span>
+            </small>
+          </div>
+        </div>
+    `;
+
+    // Inject the generated flyout into the body HTML element.
+    document.body.insertAdjacentHTML("beforeend", flyout);
+
+    // Trigger the Read the Docs Addons Search modal when clicking on the "Search docs" input from inside the flyout.
+    document.querySelector("#flyout-search-form").addEventListener("focusin", () => {
+      const event = new CustomEvent("readthedocs-search-show");
+      document.dispatchEvent(event);
+    });
+
+    // Trigger the Read the Docs Addons Search modal when clicking on "Search docs" input from the topnav.
+    document.querySelector("[role='search'] input").addEventListener("focusin", () => {
+      const event = new CustomEvent("readthedocs-search-show");
+      document.dispatchEvent(event);
+    });
+ });
@@ -1,34 +0,0 @@
-{% 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') }}">
-    <span class="rst-current-version" data-toggle="rst-current-version">
-      <span class="fa fa-book"> Read the Docs</span>
-      v: {{ current_version }}
-      <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 %}
-      </dl>
-      <dl>
-        <dt>{{ _('Downloads') }}</dt>
-        {% for type, url in downloads %}
-          <dd><a href="{{ url }}">{{ type }}</a></dd>
-        {% endfor %}
-      </dl>
-      <dl>
-        {# Translators: The phrase "Read the Docs" is not translated #}
-        <dt>{{ _('On Read the Docs') }}</dt>
-          <dd>
-            <a href="//{{ PRODUCTION_DOMAIN }}/projects/{{ slug }}/?fromdocs={{ slug }}">{{ _('Project Home') }}</a>
-          </dd>
-          <dd>
-            <a href="//{{ PRODUCTION_DOMAIN }}/builds/{{ slug }}/?fromdocs={{ slug }}">{{ _('Builds') }}</a>
-          </dd>
-      </dl>
-    </div>
-  </div>
-{% endif %}

@@ -58,6 +58,8 @@
         display: inline-block
         padding: $base-line-height / 4
         color: $section-background-color
+    .rtd-current-item
+      font-weight: bold
   &.rst-badge
     width: auto
     bottom: 20px
@@ -92,3 +94,6 @@
     display: none
     &.shift
       display: block
+
+#flyout-search-form
+  padding: 6px