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.

apps/docs/components/ExampleDocsPage.tsx

@@ -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>
 		</>

apps/docs/styles/globals.css

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