Link to static asset is broken for code blocks in the `root_doc`

[pradyunsg]

Describe the bug

sphinx-copybutton/sphinx_copybutton/_static/copybutton.js_t

Line 85 in d13f7d1

<img src="${DOCUMENTATION_OPTIONS.URL_ROOT}_static/{{ copybutton_image_path }}" alt="${messages[locale]['copy_to_clipboard']}">

The code uses ${DOCUMENTATION_OPTIONS.URL_ROOT} to locate the static file. However, that is # for the root_doc when building on RTD (likely with dirhtml). This means that the link for the static asset is changed to #_static/copy-button.svg, which doesn't work.

To Reproduce

Steps to reproduce the behavior:

1. Build any Sphinx documentation with a code block in root_doc, and host it on RTD.
2. See missing image.

See https://cpython-devguide--679.org.readthedocs.build/ for example.

Expected behavior

The link to the image should be _static/copy-button.svg.

Environment

See https://readthedocs.org/projects/cpython-devguide/builds/13630239/, which is about as much as I know. :)

Additional context

Cross-referencing with python/devguide#679, because... why not. :)

[choldgraf]

ah yeah - this definitely needs a better story around linking the proper libraries...TBH I had no idea what I was doing when I first set up this extension

[pablogsal]

We recently switched to use this extension in the Python devguide: https://devguide.python.org/, which is very cool: thanks for writing the extension!

Unfortunately, we are hitting this error on the front page. Is there any way we could help to solve this issue?

Mybe is possible to fetch the current path when the js is executing:

var scripts = document.getElementsByTagName("script");
src = scripts[scripts.length-1].src;

[choldgraf]

I think we might be able to fix this by using pathto( jinja logic in the line that @pradyunsg notes above. For example, check out its use here in the pydata sphinx theme: https://github.com/pydata/pydata-sphinx-theme/blob/e5b9765d383ce6217d443053906a979b1da1f301/pydata_sphinx_theme/static/webpack-macros.html

[choldgraf]

Actually, I think it's more complicated than that. I've tried to fix it in #129 but hit a bunch of snags. Specifically:

• I tried using pathto directly in the copybutton.js_t file, but pathto was not yet defined, I think because it is only converted into a static file at the beginning of the build, not once per page.
• I tried defining a javascript variable with pathto and adding it to each page with add_js_file(None, body="<my js>"). However, this appends to the output HTML in an additive fashion, so we are adding more and more lines with each new page. This is fixed in more recent versions of Sphinx but won't work on older versions.

I think that's the reason we are using the URL_ROOT pattern described here. So perhaps the easiest thing to do is simply to do a JS string replacement to remove the leading # if the URL_ROOT begins with #.

Also just a note - I don't think this is always a problem with RTD. Most of the Executable Books documentation is hosted on RTD and the copy buttons work fine (e.g.: https://sphinx-book-theme.readthedocs.io/en/latest/)

[pradyunsg]

Can't we just have an if statement, for determining the prefix? We don't really need to do any fancy pathto stuff -- the existing logic works everywhere except on the root document, which we can special case?

if documentation root url == `#`:
    prefix = ""
else:
   prefix = documentation root url

Am I missing something?

[choldgraf]

Am I missing something?

Nope i think you're just being more pragmatic than i am 😅

[pablogsal]

@choldgraf would you be ok with @pradyunsg workaround?

[choldgraf]

oh totally, sorry that wasn't clear in my post above haha 👍