Generated docs cleanup (#3935)

Our generated docs are pretty verbose and space inefficient. This diff
has a few design tweaks to try and make sure that the information that's
emphasised is the stuff that's most important, and makes the typical
docs item use a bit less space in the process.


![image](https://github.com/tldraw/tldraw/assets/1489520/df433ae0-1400-4f5b-951e-e25869621a40)



### Change Type

- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `improvement` — Improving existing features

apps/docs/components/mdx-components/api-docs.tsx

@@ -1,4 +1,6 @@
+import classNames from 'classnames'
 import { ReactNode } from 'react'
+import { Icon } from '../Icon'
 
 export function ParametersTable({ children }: { children: ReactNode }) {
 	return (
@@ -27,3 +29,38 @@ export function ParametersTableName({ children }: { children: ReactNode }) {
 export function ParametersTableDescription({ children }: { children: ReactNode }) {
 	return <td className="article__parameters-table__description">{children}</td>
 }
+
+export function TitleWithSourceLink({
+	children,
+	source,
+	large,
+	tags,
+}: {
+	children: ReactNode
+	source?: string | null
+	large?: boolean
+	tags?: string[]
+}) {
+	return (
+		<div
+			className={classNames(
+				'article__title-with-source-link',
+				large && 'article__title-with-source-link--large'
+			)}
+		>
+			{children}
+			<div className="article__title-with-source-link__meta">
+				{tags?.map((tag) => <Tag key={tag}>{tag}</Tag>)}
+				{source && (
+					<a href={source} target="_blank" rel="noopener noreferrer" title="Source code">
+						<Icon icon="code" />
+					</a>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export function Tag({ children }: { children: string }) {
+	return <span className={classNames(`article__tag`, `article__tag--${children}`)}>{children}</span>
+}