Details directive not redering properly with dirhtml builder

[mhostetter]

Like you all, I am using the sphinxcontrib-details-directive .. details:: directive. A while ago I noticed it stopped working (not appearing as a dropdown section). I also noticed you all did some work on patching that directive (#45).

Today I tried to get that directive working again. I'm replicating your use of .. details:: in this project's docs and just can't reproduce the functionality. Any thoughts?

I'm using the latest everything:

• sphinx v5.3.0
• sphinx-immaterial from commit 000192d (latest on main)
• sphinxcontrib-details-directive v0.1.0

Example

foo-183.zip

.. details:: Details with no class

   This is a details section.

.. details:: Details with 'example' class
   :class: example

   This is a details section.

renders as

Build output

$ rm -rf docs/build && rm -rf docs/api && sphinx-build -b dirhtml -v docs/ docs/build/
Running Sphinx v5.3.0
/usr/lib/python3/dist-packages/requests/__init__.py:89: RequestsDependencyWarning: urllib3 (1.26.11) or chardet (3.0.4) doesn't match a supported version!
  warnings.warn("urllib3 ({}) or chardet ({}) doesn't match a supported "
making output directory... done
locale_dir /mnt/c/Users/matth/repos/foo-183/docs/locales/en/LC_MESSAGES does not exists
loading intersphinx inventory from https://docs.python.org/3/objects.inv...
loading intersphinx inventory from https://numpy.org/doc/stable/objects.inv...
locale_dir /mnt/c/Users/matth/repos/foo-183/docs/locales/en/LC_MESSAGES does not exists
building [mo]: targets for 0 po files that are out of date
building [dirhtml]: targets for 1 source files that are out of date
updating environment: locale_dir /mnt/c/Users/matth/repos/foo-183/docs/locales/en/LC_MESSAGES does not exists
[new config] 1 added, 0 changed, 0 removed
reading sources... [100%] index

looking for now-outdated files... none found
pickling environment... done
checking consistency... done
preparing documents... done
writing output... [100%] index

generating indices... genindex done
writing additional pages... done
copying static files... done
copying extra files... done
dumping search index in English (code: en)... done
dumping object inventory... done
Generating sitemap for 2 pages in /mnt/c/Users/matth/repos/foo-183/docs/build/sitemap.xml
build succeeded.

The HTML pages are in docs/build.

HTML of index.html

                <div class="md-content" data-md-component="content">
                    <article class="md-content__inner md-typeset" role="main">
                        <h1 id="foo">foo<a class="headerlink" href="#foo" title="Permalink to this heading">¶</a></h1>
                        <div class="docutils container">
                            <p>Details with no class</p>
                            <p>This is a details section.</p>
                        </div>
                        <div class="example docutils container">
                            <p>Details with ‘example’ class</p>
                            <p>This is a details section.</p>
                        </div>

                        <hr>
                        <div class="md-source-file">
                            <small>
                                Last update:
                                Nov 01, 2022
                            </small>
                        </div>
                    </article>
                </div>

[mhostetter]

My docs appear to use a simple <div> section

where your docs use a <details> section

[2bndy5]

I can't reproduce this from the example project you uploaded. Note, that I started a fresh python env to test the example submitted. At first, I removed the dependency for sphinx-design (not actually used in the example). After the admonitions rendered correctly, I re-enabled (& installed) sphinx-design. The results were the same regardless (expected behavior).

In looking at your posts, the fact that div elements were used indicates (to me) that the DetailsTransform isn't getting used in the ext. This might happen if the sphinxcontrib-details-directive ext is not installed correctly. I was worried about sphinx-design overriding the transformation, but that doesn't seem to be the case.

[2bndy5]

-b dirhtml

This might have something to do with the lack of transformation (from div to details/summary elements). I inspected the CI build of our docs with the dirhtml builder, and it shows the same problem:

This isn't really a problem with the theme because the DetailsTransform class is registered only for the html builder. It should be possible to add the dirhtml builder to the transform in our monkeypatch though.

A quick test build using the dirhtml builder for our docs with the following patch

--- a/sphinx_immaterial/details_patch.py
+++ b/sphinx_immaterial/details_patch.py
@@ -3,7 +3,7 @@ from docutils import nodes

 try:
     from sphinxcontrib.details.directive import (  # pytype: disable=import-error
-        DetailsDirective,
+        DetailsDirective, DetailsTransform
     )

     IS_INSTALLED = True
@@ -36,3 +36,4 @@ def monkey_patch_details_run():

 if IS_INSTALLED:
     monkey_patch_details_run()
+    DetailsTransform.builders = ("html", "dirhtml")

renders the .. details:: directives properly.

[mhostetter]

@2bndy5 thanks for finding and resolving this!