Fix "Foundations" pages heading structure

[yanthomasdev]

This PR fixes the heading structure of pages under "Foundations". The content was jumping from an h2 to h4 which breaks the content hierarchy, can confuse assistive technologies and AI, etc.

This is a follow-up to #991 and will be split into a couple PRs to simplify reviewing.

[brody192]

I think we have them as h4s because they can be hash-linked to, but a bolded paragraph cannot.

[yanthomasdev]

I think we have them as h4s because they can be hash-linked to, but a bolded paragraph cannot.

I assume the reason would be to be able to link in support forums, Discord, etc? I'll point out that most browsers now have a "copy to highlight" button, so that could be used instead. For example, here's a highlight to "How Come My GitHub PR Won't Deploy". There's the disadvantage that if the docs change slightly the link my not be valid anymore, though!

Even so, having headings that break hierarchy shouldn't be negotiable because of the accessibility and SEO concerns. If copy to highlight is not an acceptable solution, then it would seem what is needed is a more in-depth content reorganization, maybe moving these headings to a FAQ or Troubleshooting section at the end of the page, so you'd have something like this:

[rest of the page]

## FAQ

### Question 1

### Question 2

Or even, having a component to create arbitrary hash-links to certain sections without being associated with a specific heading:

<Anchor id="github-deploy-faq" />
**How Come My GitHub PR Won't Deploy?**

Let me know what you and the team think @brody192, I am sure we can work something out.

[brody192]

Yeah, they are used to directly link to a section in support forums and I wouldn't want to break the links that have already been sent out.

The anchor is a good idea but it adds something extra that a contributor will need to do.

Could we provide a custom element to the markdown layer so that bolded standalone paragraphs automatically get an ID a copy-on-click hash link?

[yanthomasdev]

Could we provide a custom element to the markdown layer so that bolded standalone paragraphs automatically get an ID a copy-on-click hash link?

I think we could with a custom remark/rehype plugin, I generally don't like relying on a implicit behavior like that since that could cause confusion and the component shows a clear intent.

At least in my head, that component wouldn't be used much by the average contributor and would be more of an mechanism for community support staff to create anchors for things asked really frequently.

But again, this all sounds symptomatic of a bigger content organization issue. So before commiting to something like that, I'd like to hold on and see if we can solve this without any components or custom behavior. @m-abdelwahab mentioned some docs overhaul, so I'll let him in the know about this.