-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Addons: integrate with new beta addons flyout (#1526)
* 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 * `READTHEDOCS` variable has to be passed to the `html_context` This is because we are not executing the Read the Docs magic that modifies the `conf.py` file on the fly :/ * Update code to match the latest changes * Use `.join` to avoid rendering the Array with `,` * Update code to use the v1 API structure response * Don't auto-remove the original flyout This can be disabled per-project by using the settings UI from the dashboard. * Join the values to avoid strange `,`s * Support translations Use the current pattern to translate string generated for the flyout. * Remove HTML tags for testing * Show "Search" section on flyout * Render footer * Add some styling * TODO comments to work on * add `div.injected` * Apply suggestions from code review Co-authored-by: Anthony <[email protected]> * Translate privacy policy * Add `.rtd-current-item` class to selected version/language * Refactor code to show sections only if there is content * Epub instead of EPUB for backward compatibility * Show the modal when clicking on the "Search docs" from navbar * Remove privacy policy link from flyout * Add UTM analytics * Move CSS style into SASS file * Move the `script` tag into its own file * Rename JS file to mark it as a Sphinx template * Build css/js files Run `npm ci` and `npm run build` using NodeJS 14.20.1. * Add the JS template in the package --------- Co-authored-by: Anthony <[email protected]>
- Loading branch information
Showing
8 changed files
with
144 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 %} | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters