docs: rework docs site to have different sections (#2686)

This PR starts putting in place the high-level changes we want to make
to the docs site.
- It makes separate sections for Reference and Examples and Community.
- Gets rid of the secondary sidebar and integrates it into the main
sidebar.
- Groups the reference articles by type.
- Pulls in the examples alongside code and a live playground so people
don't have to visit examples.tldraw.com separately.

<img width="1458" alt="Screenshot 2024-01-30 at 09 43 46"
src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8">

Again, this is the top-level changes and there's more to be done for the
next PR(s):
  - create quick start page
  - clean up installation page
  - add accordion to Examples page prbly
  - put fun stuff in header (from footer)
  - landing page
  - something for landing page of API
  - search cmd-k and border
  - cleanup _sidebarReferenceContentLinks
  - external links _blank
  - address potential skew issue with code examples
  - have a link to other examples (next.js, etc.)

### Change Type

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

### Test Plan

1. Make sure examples work!

### Release Notes

- Rework our docs site to pull together the examples app and reference
section more cohesively.

---------

Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com>
Co-authored-by: alex <alex@dytry.ch>
Co-authored-by: Lu Wilson <l2wilson94@gmail.com>
Co-authored-by: Dan Groshev <git@dgroshev.com>

apps/docs/components/ArticleDocsPage.tsx

@@ -3,8 +3,8 @@ import { getDb } from '@/utils/ContentDatabase'
 import { ArticleDetails } from './ArticleDetails'
 import { ArticleNavLinks } from './ArticleNavLinks'
 import { Breadcrumb } from './Breadcrumb'
+import ExampleCodeBlock from './ExampleCodeBlock'
 import { Header } from './Header'
-import { HeadingLinks } from './HeadingLinks'
 import { Mdx } from './Mdx'
 import { Sidebar } from './Sidebar'
 import { Image } from './mdx-components/generic'
@@ -21,23 +21,34 @@ export async function ArticleDocsPage({ article }: { article: Article }) {
 		articleId: article.id,
 	})
 
-	const isGenerated = article.sectionId === 'gen'
+	const isGenerated = article.sectionId === 'reference'
 
 	return (
 		<>
-			<Header activeId={article.id} />
-			<Sidebar {...sidebar} />
-			<main className={`article${isGenerated ? ' article__api-docs' : ''}`}>
+			<Header sectionId={section.id} />
+			<Sidebar headings={headings} {...sidebar} />
+			<main
+				className={`article${isGenerated ? ' article__api-docs' : ''}${article.componentCode ? ' article__example' : ''}`}
+			>
 				<div className="page-header">
 					<Breadcrumb section={section} category={category} />
 					<h1>{article.title}</h1>
 				</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'}
+					/>
+				)}
 				{isGenerated ? null : <ArticleDetails article={article} />}
 				{links && <ArticleNavLinks links={links} />}
 			</main>
-			{headings.length > 0 ? <HeadingLinks article={article} headingLinks={headings} /> : null}
 		</>
 	)
 }