Allow choosing component heading levels

[addshore]

So, hvaing this in the front matter

aside: true
outline: true

out of the box results in a very verbose set of headings.

It might be nice for the default heading levels (or tags used) to present themselves a little nicer in the asied outline!

[enzonotario]

Can you please share a reproduction of this?

I don't see any issue, using outline: [1, 2] for example: #45

[addshore]

TLDR this was partly my fauly, but whole explanation below...

in my opiion it might still be nice to be able to pass in a choice for the top level heading of the component, then I might pass in h2, so that the main title is h2 rather than h1, and then the sub headings would in turn be h3 instead of h2

---

So, my origional screenshot is perhaps a little missleading now I realize, as I had the following...

<OAOperation operationId="post-users-login" :spec="spec2" :isDark="isDark" :hideDefaultFooter="true">
  <template v-slot:header><h2>V2: Get an access token</h2></template>
</OAOperation>

So, while having feature/docs-outline checked out, with the following

<OAOperation operationId="post-users-login" :spec="spec2" :isDark="isDark" :hideDefaultFooter="true"/>

I see the following in the side bar when using [1,2]

Ideally I want to be able to hid the Request Body Responses and Sample in the aside bar. And I now think the "best" way for me to get there is by changing my custom headings.

I now have sometihng similar to this, 3 times over, with <hr> custom added between, rather than relying on the styling of h2 perviously.

<OAOperation operationId="post-users-login" :spec="spec2" :isDark="isDark" :hideDefaultFooter="true">
  <template v-slot:header><h1 id="v2-login">V2: Get an access token</h1></template>
</OAOperation>

Then with

---
aside: true
outline: 1
---

I end up with

[enzonotario]

Nice! Can you please check if it's solved by #48 ?

[addshore]

This appears to work well, but I would have one thought for my usecase at least. I use the component in 2 different ways.

1) As a full page component, where the component is the only content, in which case it makes sense to have h1 as the top level heading 2) As a component on part of a larger page, and sometimes there are 3 or so of these components on that page. That page already has a main h1 header, maybe even some h2 headers, and thus the component header needs to be adjusted to match its location within other content

As a result, setting the global header sizes is useful, but being able to override per component in addition to this would be even better!

[enzonotario]

You could set it by page with useTheme().setHeadlingLevels({ h1: 2, ... })

Can you please check if it works for you by setting it per page?

Otherwise, a more granular configuration by OAPath component could also be done; we just have to think in the better way to do this.

[addshore]

Yep, this works well! Thanks!