Better example intros (#2912)

Moves the article content above the iframe and adds the description to
the title.


- [x] `documentation` — Changes to the documentation only[^2]


### Release Notes

- Adds more info to the examples section of the docs.
This commit is contained in:
Taha 2024-02-22 09:05:35 +00:00 committed by GitHub
parent ee5b70dfc7
commit f3f8475fc5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 2 deletions

View file

@ -28,9 +28,10 @@ export async function ExampleDocsPage({ article }: { article: Article }) {
<div className="page-header">
<Breadcrumb section={section} category={category} />
<h1>{article.title}</h1>
{article.description && <p>{article.description}</p>}
</div>
{article.hero && <Image alt="hero" title={article.title} src={`images/${article.hero}`} />}
{article.description && <Mdx content={article.description} />}
{article.content && <Mdx content={article.content} />}
{article.componentCode && (
<ExampleCodeBlock
articleId={article.id}
@ -41,7 +42,6 @@ export async function ExampleDocsPage({ article }: { article: Article }) {
activeFile={'App.tsx'}
/>
)}
{article.content && <Mdx content={article.content} />}
{links && <ArticleNavLinks links={links} />}
</main>
</>

View file

@ -549,6 +549,11 @@ body {
margin: 0;
}
.page-header > p {
margin-top: 1rem;
}
.article table {
margin: 20px 0px;
border-radius: var(--border-radius-menu);