HTML output wildly different depending on Div class?

[Ashley Smith]

Hey everyone, does anyone know why hakyll / pandoc has wildly different output when I change a class name? I'm trying to wrap a header in haskell in a Div.. but some classnames make it so that the Div never appears and the header remains, others make the Div appear as a <section>. It's really confusing - could it be an extension?

I've made a comprehensive gist with all the information and some examples of code and what happens: https://gist.github.com/Ashe/21640c41aa1e4f9bee583f8c7ece2878

There's a link to the repo with a WiP commit if you want to scan all the code, and here's that link as well:  https://github.com/Ashe/ashe.github.io/blob/e4fd315da5361f4c508b378151dde61388bda10d/site-builder/src/Snippet/Section.hs#L15

The objective is to wrap all headers in a Div, and take the ID that is applied to that header to the div instead. The code in the snippet is the faulty code, but it's the code outside the snippet that handles the injection of content into the Div. The problem is that most of the time, that div is never created even though `toSectionHeader` is creating one. Furthermore, changing the class of this div can make it appear, albeit with an unexpected set of classes.

Help would be appreciated! I suspect this might be an extension or something?

[Alexander Batischev]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA256

Hi Ashley,

Thanks for an easily reproducible example of the issue! Pandoc's HTML5
writer seems to be the cause: it converts <div class="section"> into
<section>. This behaviour was introduced in
https://github.com/jgm/pandoc/commit/0e78eba791233b616f2435f2353586f9d3859480

I think the best you can do is just avoid this special class name.

- --
Regards,
Alexander Batischev

PGP key 356961A20C8BFD03
Fingerprint: CE6C 4307 9348 58E3 FD94 A00F 3569 61A2 0C8B FD03

-----BEGIN PGP SIGNATURE-----

iQIzBAEBCAAdFiEEzmxDB5NIWOP9lKAPNWlhogyL/QMFAmK94PUACgkQNWlhogyL
/QMTURAA4VRnOENU/D3FgpmM7fexMzGpsFBnjEVNXQKcLS/9EjHF2MT1VYIyWZup
cJDRR6eBTwDwSpHPPqNpd14+xeeGXhaqsFNcOmR9S1bSH0d3oM9Su/FEiQauDpNC
XRZ5PEHKplC1YBoua01PZGsFIA7n8zJfxu4RSNW5XoN3OVnZ3p2GTdwL99X9NnGK
LycBa+amdtTuZMONgnoyEzsVpGIApqsULbHPfE71YhOt5d8ARy18FuYm7tZZfqjC
TVG73p7GB0yrgRGqXwuTRE/6l/B2pS1W64uhhEoW6UaJ8HPgs/lTQeUUbg33+XcY
E+ZnkZD0qSOKUsIMmtLfqkR6RjdwSkplr3mVF+Nnpul/zOA0vQpHlAUG98sRai/C
gV7pDGW/Fx8HQa6GunZmvWoOh8gJrh8N8lTynEYvAJibscJ7ulm98ZG1eBpUk/nE
Xh49NJ8hKZijsJRw4UlbJzLnMZKhnG1naEclfL3uNUf9BT6WAk0nE5ZWGYHCrbax
3WpT31F4jPMbmCFrco3xcvaVQYyzDgBkYzFpdymKrkO6PS5NvmPlY5eNnKNWQR7N
V6HRYmnAEGT1vmduH1Fm7TE3Nd68H58TutAyEc6PHUnvocpzAFkZu0LdiIKWAyPV
p14+HJh1wnceYtRrAMGJhC59fjkfO6pGMjD/zsGj3hDE4PpWM4g=
=Z+K8
-----END PGP SIGNATURE-----

[Ashley Smith]

Thank you for taking the time to look into this and reply!

Unfortunately, what you just described isn't what I'm experiencing. Having the word 'section' as the classname DOES NOT create a section at all.

The following screenshot is the DOM when 'section' is apparently the class name of the div. Notice that no <div> or <section> tags are created to wrap the headers and subsequent content:

Next, this is what happens when the class = "". A <section> tag is created and wraps the content. This is pretty much what I want! Except..  There's an additional class in each section which I don't want! I don't believe this is my code doing this but feel free to correct me if I'm wrong. The 'anchor-header' class should only be on the header tags, whereas now its both on the header and the section div:

Finally, whatever I put in the classname appends to the list of classes of that section. It's a little confusing as to how this happens?

I suppose I can mitigate this through CSS, but I'm trying to understand why I don't have the control over the dom that I'm expecting. I've gone through my code but I really don't think it's that.

I can do things in the short term to fix the issues, such as changing my css and removing the anchor-header class, but I just thought I'd ask in case there were any gotchas I should know about going forwards!

Thanks again!

Ashley Smith

https://aas.sh

--
You received this message because you are subscribed to a topic in the Google Groups "hakyll" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/hakyll/F4ptqirRrZk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to hakyll+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/hakyll/Yr3g/kP50/s4oCzh%40firefly.

[Alexander Batischev]

On Thu, Jun 30, 2022 at 07:22:12PM +0100, Ashley Smith wrote:
>Unfortunately, what you just described isn't what I'm experiencing.
>Having the word 'section' as the classname DOES NOT create a section at
>all.

My bad -- I only tested a simple example with plain text inside a <div
class="section">; that does produce a <section>. I then immediately got
suspicious about the class name, found code that handles it, and
concluded that it is the cause of the issue. Now I also tried your full
example, reproducing the problem like this:

$ pandoc --version
pandoc 2.9.2.1
Compiled with pandoc-types 1.20, texmath 0.12.0.2, skylighting 0.8.5
(snip)

$ pandoc -f native -t html
Div
( "myownid"
, ["section"]
, []
)
[ Header
1
("", ["anchor-header"], [])
[ Span ("", [], []) [Str "Hello"]
, Link
("", ["anchor", "las", "la-link"], [])
[]
("#myownid", "myownid")
]
]
<h1 class="anchor-header" id="myownid"><span>Hello</span><a href="#myownid" class="anchor las la-link" title="myownid"></a></h1>

(I pressed Enter and Control-D after typing the Haskell code, and Pandoc
printed out HTML.)

Same for your other example, the one that adds "anchor-header" class
both to <section> and <h1>:

$ pandoc -f native -t html
Div ("myownid", [""], []) [Header 1 ("", ["anchor-header"], []) [Span ("", [], []) [Str "Hello"], Link ("", ["anchor", "las", "la-link"], []) [] ("#myownid", "myownid")]]
<section id="myownid" class="anchor-header "><h1 class="anchor-header"><span>Hello</span><a href="#myownid" class="anchor las la-link" title="myownid"></a></h1></section>

So yeah, you're right, <section> is missing if class "section" is used.
I don't know why, though. Have you tried asking in Pandoc's help
channels? https://pandoc.org/help.html

>I'm trying to understand why I don't have the control over the dom that
>I'm expecting.

I fear the answer would be that you're expecting a bit too much. Pandoc
is a converter first and foremost. If you need tight control over the
resulting DOM, you should probably create a custom Pandoc writer. (But
I'm not an expert, so please do ask on the Pandoc user group to see if
they have better ideas.)

[Ashley Smith]

Thank you for pointing me in the right direction, I'll go and investigate pandoc :) 

Kindest regards

Ashley Smith

https://aas.sh

--
You received this message because you are subscribed to a topic in the Google Groups "hakyll" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/hakyll/F4ptqirRrZk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to hakyll+un...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/hakyll/Yr34E/1SSpRro1l3%40firefly.