Add anchor links to markdown titles from `<h2>` to `<h4>`

[damienwebdev]

Feature description

Add heading anchor link button to h2,h3,h4 in dgeni so that they can be styled in daff.io with click handlers added.

• https://next.daff.io/docs/guides/getting-started
• https://next.daff.io/docs/packages/analytics
• https://next.daff.io/docs/design/theming/modes

Use case

I want to be able to send a direct link to a content section to someone.

Prior work

https://github.com/graycoreio/daffodil/commit/1ea416294a8954f73c6d25911c6977a3a78a0e2d added this for headings built into daff.io, but we need the same for markdown rendered content.

Daffodil version

0.88.1

Additional context

Add the DOM for the buttons here: https://github.com/graycoreio/daffodil/blob/986534dd5ee37a0197298c210a1fae24c288f998/tools/dgeni/src/processors/markdown.ts#L59-L63

[joannalauu]

I'm interested in working on this issue, could I be assigned to it please?

[ali-toghiani]

Hi @sunray4, I saw a similar issue to this one (adding copy button to code snippets) and since that one was a little bit more challenging, thought maybe it's better to start familiarizing with this markdown parsing process, by working on this issue. I've prototyped a fix using native HTML anchors in the markdown renderer (no Angular components to keep it simple). Here's a draft PR if you'd like to review/take over: https://github.com/graycoreio/daffodil/pull/4023. Happy to iterate or hand it off!

[joannalauu]

@ali-toghiani All good I'll leave it to the maintainers to review your pr!! Since you already have this issue covered I'll work on a different issue instead.

[damienwebdev]

Thanks to the both of your for your assistance here! <3 I've assigned to @ali-toghiani since he has a PR open.

[griest024]

@damienwebdev I'm really thinking that this should be implemented with a custom element. Adding everything from daffio feels wrong

[damienwebdev]

@griest024 give it a try as a custom element. If the perf hit is trivial, then we go that route.

[griest024]

@griest024 give it a try as a custom element. If the perf hit is trivial, then we go that route.

well the tricky part is getting CE support in SSR, I think its worth seeing if the new angular SSR supports it somehow

[griest024]

@ali-toghiani so I want to do a more complex solution here in retrospect. Are you down for trying that or do you want to hand this issue off? If you still want to try it I'll detail the steps for you.

[damienwebdev]

For the specification of the SSR output (before client side render)

Best

<ce-daffio-heading [size]="h1">
    <h1>Some content</h1>
</ce-daffio-heading>

Good

<ce-daffio-heading [size]="h1">Some content</ce-daffio-heading>

Failure

<ce-daffio-heading [size]="h1"></ce-daffio-heading>

[ali-toghiani]

@griest024 Let's do it, I've worked with web components before, if that's your plan.

[ali-toghiani]

@griest024 @damienwebdev I created a new draft, this one uses a ce-heading component, let me know what you think!

[joannalauu]

@damienwebdev Hey, is anyone still working on this? If there isn't, I could work on this while my current PR is awaiting review.

[damienwebdev]

@sunray4 feel free to tackle this!

[joannalauu]

@damienwebdev Hey I'm looking into this issue, and I understand that the purpose of this issue is to create heading anchors for markdown content like the ones made in lea4162.

However, may I ask if the url path should be copied to clipboard when users click on the anchor icon? The existing anchors in daff.io only redirects the user to that url, but doesn't copy the url.