012e54959d
Before: <img width="667" alt="Screenshot 2024-06-12 at 15 54 38" src="https://github.com/tldraw/tldraw/assets/1489520/3a5fc43c-fa2e-4b08-8e8b-c1c66decf7fa"> After: <img width="654" alt="Screenshot 2024-06-12 at 15 55 10" src="https://github.com/tldraw/tldraw/assets/1489520/8c8abcaa-f156-4be4-a5e9-d1a4eff39ff4"> Previously, when items in our documentation referred to each other in code snippets, we'd put the links to their documentation pages in a separate "references" section at the bottom of the docs. Generally I find that this makes links harder to find (they're not in-context) and adds a fair bit of visual noise to our API documentation. This diff moves those links inline by adding a post-processing step to our highlighted code. This is slightly more involved than I wanted it to be (see the comments in code.tsx for an explanation of why) but it gets the job done. I've added small link icons next to linked code items - i experimented with underlines and a 🔗 icon too, but this seemed to look the best. ### Change Type - [x] `docs` — Changes to the documentation, examples, or templates. - [x] `improvement` — Improving existing features
63 lines
891 B
TypeScript
63 lines
891 B
TypeScript
import * as customComponents from '../article-components'
|
|
import * as apiComponents from './api-docs'
|
|
import { Code, CodeBlock, CodeLinkProvider } from './code'
|
|
import {
|
|
A,
|
|
ApiHeading,
|
|
Blockquote,
|
|
Callout,
|
|
Divider,
|
|
Embed,
|
|
Heading1,
|
|
Heading2,
|
|
Heading3,
|
|
Heading4,
|
|
Heading5,
|
|
Heading6,
|
|
Image,
|
|
ListItem,
|
|
OrderedList,
|
|
Paragraph,
|
|
Pre,
|
|
Small,
|
|
TD,
|
|
THead,
|
|
TR,
|
|
Table,
|
|
UnorderedList,
|
|
Video,
|
|
} from './generic'
|
|
|
|
export const components = {
|
|
a: A,
|
|
blockquote: Blockquote,
|
|
code: Code,
|
|
CodeLinkProvider,
|
|
h1: Heading1,
|
|
h2: Heading2,
|
|
h3: Heading3,
|
|
h4: Heading4,
|
|
h5: Heading5,
|
|
h6: Heading6,
|
|
hr: Divider,
|
|
img: Image,
|
|
li: ListItem,
|
|
ol: OrderedList,
|
|
p: Paragraph,
|
|
pre: Pre,
|
|
table: Table,
|
|
td: TD,
|
|
thead: THead,
|
|
tr: TR,
|
|
ul: UnorderedList,
|
|
video: Video,
|
|
ApiHeading,
|
|
CodeBlock,
|
|
Embed,
|
|
Image,
|
|
Small: Small,
|
|
Video,
|
|
Callout,
|
|
...customComponents,
|
|
...apiComponents,
|
|
}
|