furo icon indicating copy to clipboard operation
furo copied to clipboard

page.html: Position the flyout to bottom-left, on ReadTheDocs

Open ferdnyc opened this issue 11 months ago • 1 comments

As we know, ReadTheDocs has developed a new backend for their content integrations, including the floating menu of different versions and other links that's displayed when docs are built on the ReadTheDocs site. This new menu is built as an "addon" which can be configured in their system, but which can't be styled by theme CSS since it lives in a shadow DOM.

Recently (see readthedocs/addons#395), the ability to configure the position of that menu was added — the position can be set to any of bottom-right, bottom-left, top-right, or top-left. Positioning can be overridden in the project settings, but the new default setting for projects is "Default (from theme or Read the Docs)".

The Read the Docs default positioning is bottom-right, which in Furo docs tends to overlap content. The theme default can be changed, however, by adding a new tag to the content body:

<readthedocs-flyout position="{bottom,top}-{left,right}"></readthedocs-flyout>

This PR adds that tag to the page.html template, making the Furo default position for the flyout bottom-left instead of bottom-right. Again, individual projects can still override this in their settings; this merely sets the default for the theme.

I don't know if this is the best place to put such a tag, I only know that this worked for me in a test project. So consider this PR as more of a change suggestion than a change proposal. If there's a better implementation, I'm happy to make any changes necessary, or to close this entirely in favor of a better fix.

ferdnyc avatar Jan 21 '25 21:01 ferdnyc

The ReadTheDocs team are also working on a position="inline" mode for the tag (readthedocs/addons#500), which would allow the flyout to be placed at a specific location in the theme DOM.

This might be an even better option for Furo docs, particularly ones that have sidebar TOCs long enough to exceed the browser height in length (where the flyout would normally overlap the bottom of the TOC even in position="bottom-left" mode). The flyout could be pinned to the very bottom of the sidebar, below all of the TOC entries, instead of floating above the ones at the bottom of the window area.

ferdnyc avatar Jan 28 '25 23:01 ferdnyc