Configuring custom element classes

[spl]

I'm just trying out posthtml-toc. It's nice and simple, and it seems to do what it says. Thanks for putting it out there!

Currently, it seems like I have to style the table of contents using #toc in my external CSS. For some approaches to CSS, such as the utility-first approach, it would be significantly more convenient to set the classes on the generated elements (specifically, each of div#toc, h2, ul, li). That is, I could end up with something like this (using Tailwind):

<div id="toc" class="flex flex-col">
  <h2 class="mx-4 mb-2">Contents</h2>
  <ul class="mx-4">
    <li class="mb-2"><a href="#people">People</a></li>
    <li class="mb-2"><a href="#places">Places</a></li>
    <li class="mb-2"><a href="#things">Things</a></li>
  </ul>
</div>

Is there a way to do that either within or outside posthtml-toc? If not, is that something you would consider adding?

[spl]

Is there a way to do that either within or outside posthtml-toc?

It seems like I could possibly do this by working around posthtml-toc using posthtml-extra-attributes to inject the classes, assuming the latter supports child selectors. Is that correct?

[Scrum]

@spl He uses a match for matches i.e. yes it bypasses all the nodes. Let me know if this doesn't solve your first problem and I'll think about it. You can also feel free in relation to PR

[spl]

While looking at the code and thinking about this issue, I'm wondering about a few things that maybe you could give me feedback on.

First, it seems like the toggle code is rather specialized for posthtml-toc. That is, I wonder if posthtml-toc could be improved and simplified by taking it out and, perhaps, turning it into a separate feature or package.

On that note, I wonder if it would be an improvement to turn the part that produces the result into a callback. I imagine the callback would have a signature like:

function ({ level, href, text, children }) { ...; return [{ tag, content, attrs }] }

The callback provides the most flexibility to the user while still doing the hardest part with posthtml-toc.

Then, posthtml-toc could provide one or some of the following:

• a very simple implementation of the callback (i.e. one that has no customization) as the default
• the current implementation as the default
• a very flexible implementation of the callback that allow customizing the tags, classes, attributes, etc. as the default
• different implementations to choose from

Alternatively, different implementations of the callback can be offered by other packages.

Those are just some thoughts passing through my head.

[spl]

As an aside, I think <details> with <summary> can provide something similar to the toctoggle implementation, and it would be a useful implementation for a TOC.

[spl]

I would like to work on a feature that would allow me to do something like what I described at the top of the issue. How should I proceed? Should I add the basic ability to set classes on the generated HTML? Or should I try something more general, as discussed in https://github.com/posthtml/posthtml-toc/issues/3#issuecomment-681835799? If it's the latter, I would like your thoughts on what that approach should look like. Thanks!

[spl]

Any thoughts? Thanks!

[Scrum]

// @voischev

[voischev]

I would leave the TOC code clean. And added classes using sub plugins.

It would be cool to see PR how would you do it?