Get Blog Post TOC rendering with numbers

[travjenkins]

Changes

#278

• Switched to an ol
• Updated styling a bit

Tests / Screenshots

[travjenkins]

This will mark with numbers but also I feel like a more appropriate tag to use semantically.

[github-actions]

Visit the preview URL for this PR (updated for commit 5f49f10):

https://estuary-marketing--pr391-travjenkins-bug-add-inma2ym6.web.app

_{(expires Thu, 15 Aug 2024 14:15:19 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 76f6b095a0752e5d9c6c890267f9fdc3e392161e}

[Brenosalv]

Lgtm

[travjenkins]

The main change for SEO is not that we need numbers but that we should display nested headers as well to at least 1 level of depth.

[Brenosalv]

In my commit, I made the following changes:

• Set the accordion to be expanded by default.
• Set the same line height for both main and nested items.
• Replaced bullet points with numbers.
• Included nested items to update the selected item on scrolling.
• Added an underline with a 4px offset to all link items, not just nested ones.
• Changed the text color of items to black instead of default link blue color.
• Removed the extra margin from the accordion summary.
• Migrated
• styles to classes .tocItem and .isItemSelected.

[travjenkins]

Can you timebox to like an hour and see if you can tweak the auto selection of the TOC items. I feel like the item should not be selected right as the user has the heading in view. More like they are a little bit into the section.

[Brenosalv]

The sections do not have a wrapper, so it's hard to detect if they are a little bit or half into the section or not. That's why it's changing the selected link from TOC when the heading shows up.

Instead of:

<section id="section-1">
<h4>
<p>
<p>
<p>
</section>
<section id="section-2">
<h4>
<p>
<p>
<p>
</section>
...

We have:

<h4 id="section-1">
<p>
<p>
<p>
<h4 id="section-2">
<p>
<p>
<p>
...

[travjenkins]

Okay - that makes sense so we can keep it as is.