Visually differentiate H2 from H3 headings in Metabar Table of Contents

[bmuenzenmeyer]

Visually indicate the difference between an H2 and H3 heading.
This could be indentation or other textual formatting. Whatever it is, make sure it is responsive and does not create a lot of flow problems. For instance, do not indent many many pixels, as that just makes the headings wrap and become longer.

---

You should use smaller headings or we should limit depth of what goes on Table of Contents

I like the heading hierarchy of the content - it'd be nice if we visually indicated the indentation level. I think H2 and H3 only.

Look at content like https://nodejs.org/en/learn/test-runner/mocking for similar needs.

Originally posted by @bmuenzenmeyer in #7215 (comment)

[AugustinMauroy]

+1 for that

[nafisreza]

Hello, I am interested to work on this. Do you think adding text-indent: 10px on the h3 will solve it?

[bmuenzenmeyer]

visually perhaps, but the headings are not rendered as h2, h3 etc in the metabar, it's a definition list entry

see the code at

nodejs.org/apps/site/components/Containers/MetaBar/index.tsx

Lines 41 to 53 in fbd443d

	{heading.length > 0 && (
	<>
	<dt>{t('components.metabar.tableOfContents')}</dt>
	<dd>
	<ol>
	{heading.map(head => (
	<li key={head.value}>
	<Link href={`#${head?.data?.id}`}>{head.value}</Link>
	</li>
	))}
	</ol>
	</dd>
	</>

- which does have the heading context - but i am yet unsure if it knows of the heading size - some plumbing or additional context values may be necessary when tracing it all the way back

see https://nodejs.org/en/learn/test-runner/mocking

<div class="MetaBar_wrapper__Th_dl">
  <dl>
    <dt>Table of Contents</dt>
    <dd>
      <ol>
        <li>
          <a href="#when-and-not-to-mock">When and not to mock</a>
        </li>
        <li>
          <a href="#own-code">Own code</a>
        </li>
        <li>
          <a href="#why">Why</a>
        </li>
        <li>
          <a href="#why-not">Why not</a>
        </li>
        <li>
          <a href="#external-code">External code</a>
        </li>
        <li>
          <a href="#why-1">Why</a>
        </li>
        <li>
          <a href="#why-not-1">Why not</a>
        </li>
        <li>
          <a href="#external-system">External system</a>
        </li>
        <li>
          <a href="#what-to-mock">What to mock</a>
        </li>
        <li>
          <a href="#modules--units">Modules + units</a>
        </li>
        <li>
          <a href="#apis">APIs</a>
        </li>
        <li>
          <a href="#time">Time</a>
        </li>
      </ol>
    </dd>
  </dl>
</div>;

[faridomarAf]

Hello @bmuenzenmeyer
can i push the changes which I had made, if it still not solved. and if it looks good, although it affects on the 'Reading Time' and 'Author' 😊

[yaten2302]

@AugustinMauroy @bmuenzenmeyer may I work on this issue?
Also, @bmuenzenmeyer , as you mentioned, that the headings are not rendered as h2 or h3... so, is it like, we've to change something more rather than just changing the font size, which won't work simply I assume 👀?
I'll try out this on my local first and then will share my approach here 👍

[AugustinMauroy]

You can work on we don't assign issue