Segments for different HTTP tools not tabbed as in example in Python 3.9

[Problembeloeser]

Hello,

I am trying to create the view as in your example documentation, but for my use case, the single parts don't show up as tabbed but as single code blocks, taking a lot of space.

See here:

I am using the most up to date package available on pypi (1.1)

[datakurre]

Which Sphinx version? 5.3.0 seems to be the latest one I have tried out personally.

Technically the issue is required static resources not being included

https://github.com/collective/sphinxcontrib-httpexample/tree/master/src/sphinxcontrib/httpexample/static

You may fix the issue "temporarily" locally by including CSS an JS from those files into your doc.

Now I see that JS side expects jQuery, which was ubiquitous in themes "back then". But those are not so special, so you may be able to adapt them.

[datakurre]

Could also be docutils version. It seems that I have only used docutils < 0.18. (Version probably affects available CSS classes, breaking those scripts and styles.)

[Problembeloeser]

Sphinx version is 7.2.4, docutils is 0.18.1 (newest available)

Edit: Downgrading to 5.3.0 fixed the issue, still the trouble that newer version break this behaviour stands

[stevepiercy]

I've also experienced this with Sphinx==7.4.7 and docutils==0.21.2. I'm trying to apply plone-sphinx-theme to plone.restapi docs.

The HTML markup has changed. The <p> tag lost its class in code blocks.

- <p class="caption"><span class="caption-text">http</span></p>
+ <p><span class="caption-text">http</span></p>

When I use Developer Tools to inspect the element, none of the attributes get inserted by sphinxcontrib-httpexample.js, and therefore none of the styles from sphinxcontrib-httpexample.css get applied.

If I edit the CSS to use the p selector instead of .caption, then those styles get applied. But I think something else prevents the JavaScript from actually running or finding the elements to apply attributes.

I also tried html_js_files = ["jquery-3.7.1.min.js"] in conf.py to add jQuery, but it had no effect.

[stevepiercy]

I tried installing sphinxcontrib-httpexample from source, made a few changes to build the docs with the latest Sphinx and docutils, and confirmed that it does in fact work.

Then I made a couple more changes to use plone-sphinx-theme instead of sphinx_rtd_theme. The JavaScript does not apply the HTML attributes, so tabs break. This is a theme problem.

To attempt to debug, I inserted console.log statements:

  console.log("1")
  jQuery(function($) {
    console.log("2")

And I see that the JS loads (1 appears in the console), but the function does not run (2 does not appear). Could this be a relic of jQuery?

[datakurre]

The addon relies on jQuery and specific docutils markup. Therefore missing jQuery or docutils changes may break it. There is not much JS / CSS so this should not much work as such. Unfortunately JS side is missing acceptance tests and backwards compatibility would be nice.

Steve Piercy @.***> kirjoitti 28.7.2024 kello 0.54:

 I tried installing sphinxcontrib-httpexample from source, made a few changes to build the docs with the latest Sphinx and docutils, and confirmed that it does in fact work.

Then I made a couple more changes to use plone-sphinx-theme instead of sphinx_rtd_theme. The JavaScript does not apply the HTML attributes, so tabs break. This is a theme problem.

To attempt to debug, I inserted console.log statements:

console.log("1") jQuery(function($) { console.log("2") And I see that the JS loads (1 appears in the console), but the function does not run (2 does not appear). Could this be a relic of jQuery?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

[stevepiercy]

I decided to start from a working example. Here's how to reproduce it.

docutils==0.17.1
Sphinx==5.3.0
sphinx-rtd-theme==2.0.0

Here's the generated HTML.

<p>Rendering:</p>
<div class="http-example docutils container">
<div class="http-example-http docutils container" id="id1">
<p><span class="caption-text">http</span></p>
<div class="highlight-http notranslate"><div class="highlight"><pre><span></span><span class="nf">GET</span> <span class="nn">/Plone/front-page</span> <span class="kr">HTTP</span><span class="o">/</span><span class="m">1.1</span>
<span class="na">Host</span><span class="o">:</span> <span class="l">localhost:8080</span>
<span class="na">Accept</span><span class="o">:</span> <span class="l">application/json</span>
<span class="na">Authorization</span><span class="o">:</span> <span class="l">Basic YWRtaW46YWRtaW4=</span>
</pre></div>
</div>
</div>
<div class="http-example-curl docutils container" id="id2">
<p><span class="caption-text">curl</span></p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>curl<span class="w"> </span>-i<span class="w"> </span>-X<span class="w"> </span>GET<span class="w"> </span>http://localhost:8080/Plone/front-page<span class="w"> </span>-H<span class="w"> </span><span class="s2">&quot;Accept: application/json&quot;</span><span class="w"> </span>--user<span class="w"> </span>admin:admin
</pre></div>
</div>
</div>
<div class="http-example-wget docutils container" id="id3">
<p><span class="caption-text">wget</span></p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>wget<span class="w"> </span>-S<span class="w"> </span>-O-<span class="w"> </span>http://localhost:8080/Plone/front-page<span class="w"> </span>--header<span class="o">=</span><span class="s2">&quot;Accept: application/json&quot;</span><span class="w"> </span>--auth-no-challenge<span class="w"> </span>--user<span class="o">=</span>admin<span class="w"> </span>--password<span class="o">=</span>admin
</pre></div>
</div>
</div>
<div class="http-example-httpie docutils container" id="id4">
<p><span class="caption-text">httpie</span></p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>http<span class="w"> </span>http://localhost:8080/Plone/front-page<span class="w"> </span>Accept:application/json<span class="w"> </span>-a<span class="w"> </span>admin:admin
</pre></div>
</div>
</div>
<div class="http-example-python-requests docutils container" id="id5">
<p><span class="caption-text">python-requests</span></p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">requests</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s1">&#39;http://localhost:8080/Plone/front-page&#39;</span><span class="p">,</span> <span class="n">headers</span><span class="o">=</span><span class="p">{</span><span class="s1">&#39;Accept&#39;</span><span class="p">:</span> <span class="s1">&#39;application/json&#39;</span><span class="p">},</span> <span class="n">auth</span><span class="o">=</span><span class="p">(</span><span class="s1">&#39;admin&#39;</span><span class="p">,</span> <span class="s1">&#39;admin&#39;</span><span class="p">))</span>
</pre></div>
</div>
</div>
</div>

I also modified the JavaScript to log to console with:

  console.log("1")
  jQuery(function($) {
    console.log("2")

Which did in fact display:

1
2

Next I tried to reproduce this with these options.

docutils==0.20.1
Sphinx==7.4.7
plone-sphinx-theme==0.0.10

Adjusting conf.py:

html_theme = 'plone_sphinx_theme'

html_js_files = [
    'jquery-3.6.0.min.js',
]

And rebuilt the docs. Here's the HTML. It is identical to the previous example. That eliminates a change in HTML markup due to a change in docutils.

<p>Rendering:</p>
<div class="http-example docutils container">
<div class="http-example-http docutils container" id="id1">
<p><span class="caption-text">http</span></p>
<div class="highlight-http notranslate"><div class="highlight"><pre><span></span><span class="nf">GET</span> <span class="nn">/Plone/front-page</span> <span class="kr">HTTP</span><span class="o">/</span><span class="m">1.1</span>
<span class="na">Host</span><span class="o">:</span> <span class="l">localhost:8080</span>
<span class="na">Accept</span><span class="o">:</span> <span class="l">application/json</span>
<span class="na">Authorization</span><span class="o">:</span> <span class="l">Basic YWRtaW46YWRtaW4=</span>
</pre></div>
</div>
</div>
<div class="http-example-curl docutils container" id="id2">
<p><span class="caption-text">curl</span></p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>curl<span class="w"> </span>-i<span class="w"> </span>-X<span class="w"> </span>GET<span class="w"> </span>http://localhost:8080/Plone/front-page<span class="w"> </span>-H<span class="w"> </span><span class="s2">&quot;Accept: application/json&quot;</span><span class="w"> </span>--user<span class="w"> </span>admin:admin
</pre></div>
</div>
</div>
<div class="http-example-wget docutils container" id="id3">
<p><span class="caption-text">wget</span></p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>wget<span class="w"> </span>-S<span class="w"> </span>-O-<span class="w"> </span>http://localhost:8080/Plone/front-page<span class="w"> </span>--header<span class="o">=</span><span class="s2">&quot;Accept: application/json&quot;</span><span class="w"> </span>--auth-no-challenge<span class="w"> </span>--user<span class="o">=</span>admin<span class="w"> </span>--password<span class="o">=</span>admin
</pre></div>
</div>
</div>
<div class="http-example-httpie docutils container" id="id4">
<p><span class="caption-text">httpie</span></p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>http<span class="w"> </span>http://localhost:8080/Plone/front-page<span class="w"> </span>Accept:application/json<span class="w"> </span>-a<span class="w"> </span>admin:admin
</pre></div>
</div>
</div>
<div class="http-example-python-requests docutils container" id="id5">
<p><span class="caption-text">python-requests</span></p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">requests</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s1">&#39;http://localhost:8080/Plone/front-page&#39;</span><span class="p">,</span> <span class="n">headers</span><span class="o">=</span><span class="p">{</span><span class="s1">&#39;Accept&#39;</span><span class="p">:</span> <span class="s1">&#39;application/json&#39;</span><span class="p">},</span> <span class="n">auth</span><span class="o">=</span><span class="p">(</span><span class="s1">&#39;admin&#39;</span><span class="p">,</span> <span class="s1">&#39;admin&#39;</span><span class="p">))</span>
</pre></div>
</div>
</div>
</div>

I also see that the local jQuery loads. This is the same jQuery version used in older Sphinx and sphinx_rtd_theme.

    <script src="_static/jquery-3.6.0.min.js?v=5d32c60e"></script>

But the console only shows:

1

It's not the HTML markup and it's not the lack of jQuery.

I created a pull request with the changes to see if someone can reproduce what I see and offer some help. I've run out of ideas.

[stevepiercy]

This is a blocker to using plone-sphinx-theme for the main Plone 6 documentation.

[datakurre]

@stevepiercy Thank you Steve for trying this out. I'll take care of this. The issue sounds like maybe something in the modern theme is overriding the hook jQuery is using for document ready event.

https://youmightnotneedjquery.com/#ready

[stevepiercy]

@datakurre thank you sooo much! I even tried some jQuery to ES6 converters in an attempt to remove the jQuery dependency, but it was beyond my experience to easily handle.

[datakurre]

@stevepiercy I did confirm that it was a jQuery activation issue. I converted the code to work without jQuery and it worked. I'll try to finish this later this week.

[stevepiercy]

Yay! Thank you again!

[datakurre]

@stevepiercy I'm sorry for the inconvenience, but I have not forgotten this :pray: :crossed_fingers:

[stevepiercy]

@datakurre I haven't forgotten either! 😁 I've had lots of client work to occupy me, so I wouldn't have done any work on the parent theme anyway.