Show anchor links to each headings on hover
srid opened this issue · 8 comments
Hello @srid , I'd like to work on this. Not sure what you had in mind, but do you think we could modify the noteDoc in renderLmlHtml using such a transformation?:
addSectionLinks :: Pandoc -> Pandoc
addSectionLinks = walk f
where
f (Header n attr@(idAttr, _, _) inlines) =
let link = Link ("", ["anchor"], []) [Str "§"] ("#" <> idAttr, "")
in Header (n + 1) attr ([link, Space] <> inlines)
f x = xSure, you can work on this. I was thinking more like doing that HTML layout in pandoc.tpl here:
emanote/emanote/default/templates/components/pandoc.tpl
Lines 99 to 106 in bf573e7
Possibly similar to how we do for footnotes:
emanote/emanote/default/templates/components/pandoc.tpl
Lines 47 to 53 in bf573e7
This would allow the user to customize their apperance in .tpl without needing to fork emanote.
Doing this however might require some Haskell changes; I haven't taken a good look at that code yet.
Great, thanks for the footnote example. I guess we need a change in Heist.Extra.Splices.Pandoc to pass the heading id and content?
I think you need to edit https://github.com/srid/heist-extra/blob/master/src/Heist/Extra/Splices/Pandoc/Render.hs
Checkout how other non-trivial nodes are rendered, like DefinitionList.
One possible shape:
<Header>
<Header:Main>
<h1 class="pb-2 mb-2 text-5xl font-bold text-center"> <inlines /> </h1>
...
</Header:Main>
<!-- custom HTML goes here, or above -->
<a href="...">#${header:anchor}</a>
</Header>Or something like that.
Ok, so I managed to get something working with:
<Header>
<Header:Main>
<h2 id="${header:id}" class="mt-6 mb-4 text-4xl font-bold text-gray-700 border-b-2"> <inlines /> </h2>
</Header:Main>
<a href="#${header:id}">⛓</a>
</Header>
Though I'm not familiar with heist. Should we make one splice (e.g. Header:Main1, Header:Main2, ...) per levels?
I don't understand how the default template renders one of the hN element correctly with:
<Header>
<h1 class="pb-2 mb-2 text-5xl font-bold text-center" />
<h2 class="mt-6 mb-4 text-4xl font-bold text-gray-700 border-b-2" />
</Header>
… but once I add the <inlines /> then it works differently, e.g. this render both h1 and h2:
<Header>
<Header:Main>
<h1 class="pb-2 mb-2 text-5xl font-bold text-center"> <inlines /> </h1>
<h2 id="${header:id}" class="mt-6 mb-4 text-4xl font-bold text-gray-700 border-b-2"> <inlines /> </h2>
</Header:Main>
</Header>
I must be doing something wrong in srid/heist-extra#6 , could you please have a look when you have a moment? Thanks in advance!
Hey @TristanCacqueray - could you open a draft PR in emanote with what you have? I'll play with it.
(I might be late to respond due to https://nixos.asia/en/event/srid-nix-dev and other things)
Sure, good luck with your demo!
Just took a brief look:
I don't understand how the default template renders one of the hN element correctly with:
I think perhaps this would be simpler and clear?
<Header>
<Header:2>
<h2 id="${header:id}" class="mt-6 mb-4 text-4xl font-bold text-gray-700 border-b-2">
<inlines />
<a href="#${header:id}">⛓</a>
</h2>
</Header:2>
<!-- ... Likewise, for 1, 3-7 -->
</Header>We may be able to DRY-refactor the anchor HTML using <bind tag="..">, cf.
emanote/emanote/default/templates/layouts/default.tpl
Lines 5 to 11 in b38035c