[docs] design shuffle (#2951)

This PR incorporates design tweaks from #2922 without the home page or
content changes.

These are:
- Replacing all `hello@tldraw.com` with `sales@tldraw.com`
- Fix mailto links.
- Showing the first item in a section on direct routes to the section
- Splitting the article page for human-written content from article page
for generated content
- Splitting the layout for the landing page from the rest of the site
(temporarily identical to the regular content)
- Removing headings from left sidebar
- Restoring headings in right sidebar for human-written pages with > 1
heading link
- Styling block quote
- Adjusting section link appearance / layout in header / menu
- Changing the order of search results to preference docs over examples
- Updating copy on events
- Removing copy on user interface menus
- Adding hero as prop to all articles
- Updated icon
- Fixing a few broken links
- Replaces the sandpack code blocks with hljs code blocks, except in
examples.

### Change Type

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

apps/docs/components/ExampleDocsPage.tsx

@@ -1,18 +1,15 @@
 import { Article } from '@/types/content-types'
 import { getDb } from '@/utils/ContentDatabase'
 import { ArticleNavLinks } from './ArticleNavLinks'
-import { Breadcrumb } from './Breadcrumb'
 import ExampleCodeBlock from './ExampleCodeBlock'
 import { Header } from './Header'
 import { Mdx } from './Mdx'
 import { Sidebar } from './Sidebar'
-import { Image } from './mdx-components/generic'
 
 export async function ExampleDocsPage({ article }: { article: Article }) {
 	const db = await getDb()
 	const section = await db.getSection(article.sectionId)
 	const category = await db.getCategory(article.categoryId)
-	const headings = await db.getArticleHeadings(article.id)
 	const links = await db.getArticleLinks(article)
 	const sidebar = await db.getSidebarContentList({
 		sectionId: section.id,
@@ -23,25 +20,21 @@ export async function ExampleDocsPage({ article }: { article: Article }) {
 	return (
 		<>
 			<Header sectionId={section.id} />
-			<Sidebar headings={headings} {...sidebar} />
-			<main className={`article article__example`}>
+			<Sidebar {...sidebar} />
+			<main className={`main-content article article__example`}>
 				<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.content && <Mdx content={article.content} />}
-				{article.componentCode && (
-					<ExampleCodeBlock
-						articleId={article.id}
-						files={{
-							'App.tsx': article.componentCode,
-							...(article.componentCodeFiles ? JSON.parse(article.componentCodeFiles) : null),
-						}}
-						activeFile={'App.tsx'}
-					/>
-				)}
+				<ExampleCodeBlock
+					articleId={article.id}
+					files={{
+						'App.tsx': article.componentCode,
+						...(article.componentCodeFiles ? JSON.parse(article.componentCodeFiles) : null),
+					}}
+					activeFile={'App.tsx'}
+				/>
 				{links && <ArticleNavLinks links={links} />}
 			</main>
 		</>