Remove `<details>` / `<summary>` css

[genericallyterrible]

• Follow-up from: https://github.com/JuliaPluto/PlutoUI.jl/pull/288#pullrequestreview-1880829370
• [x] Pending: https://github.com/fonsp/Pluto.jl/pull/2814 (released: v0.19.39)

[github-actions[bot]]

Try this Pull Request!

Open Julia and type:

  julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/genericallyterrible/PlutoUI.jl", rev="details-css")
julia> using PlutoUI

Or run this code in your browser:

[rgouveiamendes]

Thank you for this implementation! I wonder if the <summary> could not allow Markdown content instead of a String. For example, you could like to format part of the sentence with italics. Actually, in several notebooks I am doing it defining this function:

begin
    struct Foldable{MD}
        title::MD
        content::MD
    end

    function Base.show(io, mime::MIME"text/html", fld::Foldable)
        write(io,"<details><summary>")
        show(io, mime, fld.title)
        write(io,"</summary><p>")
        show(io, mime, fld.content)
        write(io,"</p></details>")
    end
end

In my case, both parts are usually Markdown. But now that I saw the details() function in action, new uses came to my mind! Thank you!

[genericallyterrible]

Initially I had hoped to allow arbitrary @md/@htl strings, but couldn't guarantee good default behavior for headings/non-inline elements.

After a little noodling I've prototyped a pretty simple solution.

I'll turn your suggestion into an issue and start a new PR for that feature specifically. Thanks for the extra push to try again!

[genericallyterrible]

With v0.19.39 released this should be ready to go, yeah?

Binder doesn't seem to be on the latest Pluto version so it doesn't show up right, but after updating Pluto everything looks good with this branch locally (for all the good that does 🙄) in Firefox and Chrome.

[rgouveiamendes]

Great! Looking forward to the merge! Is there any particular reason why you prefer display: inline-block; to display: inline-flex;? The difference I see is the position of the triangle at the top or bottom of the block. I prefer it at the top. It seems more natural. Just saying... But I can change this particular behaviour to suit my taste! Thank you very much, once again!