v0.13 has broken utterances

[callumrollo]

Describe the bug

When I build jupyter-book with v0.13 utterances no longer works.

I believe the cause of this is the use of <section> rather than <div, class="section"> to mark sections

In previous versions of jupyter-book (v0.12.3) the section named questions would be declared like this

<div class="section" id="questions">

in v0.13 it is now created like

<section id="questions">

This causes utterances to break, as utterances uses this block of javascript to find sections

sections = document.querySelectorAll("div.section");
if (sections !== null) {
    section = sections[sections.length-1];
    section.appendChild(script);
}

With the new section definition, it finds no div.section to use for the separate comments sections.

This is different from #1025 as utterances was working fine in previous versions. With no changes to our repo except the change to new jupyter-book version, utterances break

@soerenthomsen @jbusecke

Reproduce the bug

Build with jupyter-book==v0.13 no utterances at bottom of page https://62ac73ebe1212751fc424c2a--oxygensop.netlify.app/readme

source https://github.com/OceanGlidersCommunity/Oxygen_SOP/pull/233

As above pinning jupyter-book==v0.12.3 utterances present https://62b1e50faa8c745985b7d135--oxygensop.netlify.app/readme

source https://github.com/OceanGlidersCommunity/Oxygen_SOP/pull/235

List your environment

jupyter-book==v0.13

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[AlFontal]

This is still an issue, just tested in a repo and pinning to v0.12.3 makes the comments appear again.

Inspecting the site with v13 pointed indeed to the section definition in Javascript that @callumrollo described.

[anjackson]

It looks like the changes in Sphinx 4 upgrade moved from using div.section to section elements, and not everything got updated. Searching across the executablebooks repositories shows a few places where CSS selector div.section is in use: https://github.com/search?q=org%3Aexecutablebooks%20div.section%20&type=code (mostly in sphinx-comments which it turn breaks Utterances).

I think the right approach is to replace CSS selectors like div.section with things like div.section, section in those modules. so both old and new versions are supported. I'll look at doing a PR on sphinx-comments.

[jkitchin]

I think this also affects hypothesis comments.