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/types/content-types.ts

@@ -10,7 +10,7 @@ export type InputSection = {
 	title: string
 	description: string
 	categories: InputCategory[]
-	sidebar_behavior: 'show-links' | 'show-title'
+	sidebar_behavior: 'show-links' | 'show-title' | 'hidden' | 'reference'
 }
 
 export type InputGroup = {
@@ -55,7 +55,7 @@ export interface Section extends ContentPage {
 	/** An array of this section's categories. */
 	categories: Category[]
 	/** How the section should appear in the sidebar. */
-	sidebar_behavior: 'show-links' | 'show-title'
+	sidebar_behavior: 'show-links' | 'show-title' | 'hidden' | 'reference'
 }
 
 export interface Category extends ContentPage {
@@ -104,6 +104,10 @@ export interface Article extends ContentPage {
 	keywords: string[]
 	/** The URL where the article's source can be found. */
 	sourceUrl: string | null
+	/** The article's code example (optional). */
+	componentCode: string | null
+	/** The article's code example files, JSON stringified (optional). */
+	componentCodeFiles: string | null
 }
 
 export enum ArticleStatus {
@@ -155,7 +159,8 @@ export interface SidebarContentCategoryLink extends BaseSidebarLink {
 
 export interface SidebarContentArticleLink extends BaseSidebarLink {
 	type: 'article'
-	articleId: string
+	articleId: string | null
+	groupId: string | null
 }
 
 export type SidebarContentLink =
@@ -164,10 +169,14 @@ export type SidebarContentLink =
 	| SidebarContentArticleLink
 
 export type SidebarContentList = {
+	headings?: ArticleHeadings
 	sectionId: string | null
 	categoryId: string | null
 	articleId: string | null
 	links: SidebarContentLink[]
+	activeId?: string | null
+	searchQuery?: string
+	searchType?: string
 }
 
 /* ---------- Finished / generated content ---------- */