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' 😊