Markdown lint: Maximum number of sections per lesson

[nikitarevenco]

Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

Some lessons have too many h3 headings, which negatively impacts user experience. Consider:

The Node.js deployment lesson has 16 h3 headings, which make the extra headings overflow at the maximum zoom before the lesson overview sidebar disappears. The maximum number of h3 headings that can be displayed at the maximum zoom is 11.

When I scroll further, the sidebar doesn't scroll down but we can't actually see the current section that we are in
Most lessons don't actually need more than 11 headings. For example, the Deployment lesson could be re-structured to have each provider use a h4 heading instead

Path

Other / NA

Lesson Url

N/A

(Optional) Discord Name

Revenco

(Optional) Additional Comments

No response

[wise-king-sullyman]

Makes sense to me, @thatblindgeye WDYT?

[thatblindgeye]

I agree that the deployment lesson needs to be restructured; each of the PaaS sections should be h4's, not h3's.

However, I'm not sure if this is an issue the linter should flag. No matter what number we choose for the "maximum" headings, it will be pretty arbitrary. An individual user's browser settings may also vary wildly as to when content gets cut off.

My Chrome on Mac at 100% zoom and font size of medium shows all the headings, but zoom at 125% the side nav gets cut off at the "Debugging and troubleshooting" link. Changing the font size varies even further, where 125% zoom and Large font size causes even 11 headings to be too many.

This could be something we resolve with the styling perhaps? Add a scrollbar to the side nav if it gets too large.

[nikitarevenco]

I agree that the deployment lesson needs to be restructured; each of the PaaS sections should be h4's, not h3's.

However, I'm not sure if this is an issue the linter should flag. No matter what number we choose for the "maximum" headings, it will be pretty arbitrary. An individual user's browser settings may also vary wildly as to when content gets cut off.

My Chrome on Mac at 100% zoom and font size of medium shows all the headings, but zoom at 125% the side nav gets cut off at the "Debugging and troubleshooting" link. Changing the font size varies even further, where 125% zoom and Large font size causes even 11 headings to be too many.

This could be something we resolve with the styling perhaps? Add a scrollbar to the side nav if it gets too large.

Yeah, I think that's a good idea. I can make a PR to change the Deployment lesson for the Ruby and Node paths, and raise an issue in the site repo to add a scrollbar to the side nav if it can't be fully displayed to the user. How does that sound?

[thatblindgeye]

Sounds like a plan!