feat: implement short description in page content header

[gui-santos]

Purpose of PR

• Moves all components related to PageContent to a separated folder in /components and it exports only the thing used by files outside of that folder
• It implements a functionality to get every text before the first heading (##) in a mdx file and uses that as the "short intro"
• Makes the first paragraph of the "short intro" bigger like in the designs

I managed to create a system to edit the header of the content easily without us losing any features of MDX

Basically, during the creation of the page, we will extract from the MDX file everything that comes before a heading (a sentence in mdx that starts with #)

In this example, everything after the frontmatter and before "## Import" will be extracted and stored in a prop to be used later by PageContentHeader

// PageContent.tsx line 77
<PageContentHeader title={title} github={github} status={status}>
  {source.shortIntro && <MdxRenderer source={source.shortIntro} />}
</PageContentHeader>

If the page has a "shortIntro" we will render another MdxRenderer in the PageContentHeader with the text we selected earlier

This system is good because it will work immediately with every page and it does not change how we write the pages

... but that's also a problem, when I say it works in every page I meant EVERY PAGE

E-V-E-R-Y P-A-G-E

That's why I'm going trough every page and adding some headings or moving the content to avoid this huge headers with tables and lists

WDYT?

PR Checklist

• I have read the relevant readme.md file(s)
• All commits follow our Git commit message convention
• Tests are added/updated/not required
• Tests are passing
• Storybook stories are added/updated/not required
• Usage notes are added/updated/not required
• Has been tested based on Contentful's browser support
• Doesn't contain any sensitive information

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/contentful-apps/forma-36/pVdoiFGhB6Tp3FCHQUDvta1kmNtR
✅ Preview: https://forma-36-git-feat-website-page-content-contentful-apps.vercel.app

[bgutsol]

Looks good! A bit hacky, but if we want to have it working out of the box, there are not many other ways.

My only concern is that it could be challenging to come up with a short and concise description for every component. Sometimes one line sentence is not enough.