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/SectionDocsPage.tsx

@@ -1,65 +1,21 @@
-import { Article, Category, Section } from '@/types/content-types'
+import { Section } from '@/types/content-types'
 import { getDb } from '@/utils/ContentDatabase'
-import Link from 'next/link'
 import { Header } from './Header'
 import { Sidebar } from './Sidebar'
 
 export async function SectionDocsPage({ section }: { section: Section }) {
 	const db = await getDb()
-
 	const sidebar = await db.getSidebarContentList({ sectionId: section.id })
 
-	const categories = [] as Category[]
-	const articles: Article[] = []
-
-	const sectionCategories = await db.getCategoriesForSection(section.id)
-
-	for (const category of sectionCategories) {
-		if (category.id === section.id + '_ucg') {
-			const categoryArticles = await db.getCategoryArticles(section.id, category.id)
-			for (const article of categoryArticles) {
-				articles.push(article)
-			}
-		} else {
-			// If the count of articles for this category is greater than zero...
-			const articleCount = await db.getCategoryArticlesCount(section.id, category.id)
-
-			if (articleCount > 0) {
-				categories.push(category)
-			}
-		}
-	}
-
 	return (
 		<>
-			<Header activeId={section.id} />
+			<Header sectionId={section.id} />
 			<Sidebar {...sidebar} />
 			<main className="article">
 				<div className="page-header">
 					<h1>{section.title}</h1>
 				</div>
-				{articles.length > 0 && (
-					<ul>
-						{articles.map((articleLink) => {
-							return (
-								<Link key={articleLink.id} href={articleLink.path!}>
-									<li>{articleLink.title}</li>
-								</Link>
-							)
-						})}
-					</ul>
-				)}
-				{categories.length > 0 && (
-					<ul>
-						{categories.map((category) =>
-							category.id === 'ucg' ? null : (
-								<Link key={category.id} href={`/${section.id}/${category.id}`}>
-									{category.id === 'ucg' ? null : <li>{category.title}</li>}
-								</Link>
-							)
-						)}
-					</ul>
-				)}
+				Choose your adventure on the left.
 			</main>
 		</>
 	)