29044867dd
This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
149 lines
3.1 KiB
TypeScript
149 lines
3.1 KiB
TypeScript
/* ---------------------- Lists --------------------- */
|
|
|
|
import React from 'react'
|
|
|
|
export const UnorderedList = (props: any) => {
|
|
return <ul {...props} />
|
|
}
|
|
|
|
export const OrderedList = (props: any) => {
|
|
return <ol {...props} />
|
|
}
|
|
|
|
export const ListItem = (props: any) => {
|
|
return <li {...props} />
|
|
}
|
|
|
|
/* ------------------- Typography ------------------- */
|
|
|
|
type Heading = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
|
|
|
function heading(heading: Heading, props: any) {
|
|
const Element = ({ ...props }) => React.createElement(heading, props)
|
|
if (props.id) {
|
|
return (
|
|
<Element {...props}>
|
|
<a className="anchor" href={`#${props.id}`}>
|
|
{props.children}
|
|
</a>
|
|
</Element>
|
|
)
|
|
}
|
|
|
|
return <Element {...props} />
|
|
}
|
|
|
|
export const Heading1 = (props: any) => {
|
|
return heading('h1', props)
|
|
}
|
|
|
|
export const Heading2 = (props: any) => {
|
|
return heading('h2', props)
|
|
}
|
|
|
|
export const Heading3 = (props: any) => {
|
|
return heading('h3', props)
|
|
}
|
|
|
|
export const Heading4 = (props: any) => {
|
|
return heading('h4', props)
|
|
}
|
|
|
|
export const Heading5 = (props: any) => {
|
|
return heading('h5', props)
|
|
}
|
|
|
|
export const Heading6 = (props: any) => {
|
|
return heading('h6', props)
|
|
}
|
|
|
|
export const Paragraph = (props: any) => {
|
|
return <p {...props} />
|
|
}
|
|
|
|
export const A = (props: any) => {
|
|
return <a {...props} />
|
|
}
|
|
|
|
export const Divider = (props: any) => {
|
|
return <hr {...props} />
|
|
}
|
|
|
|
export const Blockquote = (props: any) => {
|
|
return <blockquote {...props} />
|
|
}
|
|
|
|
export const Small = (props: any) => {
|
|
return (
|
|
<p className="article__small">
|
|
<small {...props} />
|
|
</p>
|
|
)
|
|
}
|
|
|
|
/* --------------------- Tables --------------------- */
|
|
|
|
export const Table = (props: any) => {
|
|
return <table {...props} />
|
|
}
|
|
|
|
export const THead = (props: any) => {
|
|
return <thead {...props} />
|
|
}
|
|
|
|
export const TR = (props: any) => {
|
|
return <tr {...props} />
|
|
}
|
|
|
|
export const TD = (props: any) => {
|
|
return <td {...props} />
|
|
}
|
|
|
|
/* --------------------- Media --------------------- */
|
|
|
|
export const Image = (props: any) => {
|
|
return (
|
|
<a className="article__image" href={props.href ?? props.src}>
|
|
<img alt={props.title} {...props} />
|
|
{props.caption && <span className="article__caption">{props.caption}</span>}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export const Video = (props: any) => {
|
|
return (
|
|
<span className="article__video">
|
|
<video alt={props.title} {...props} />
|
|
{props.caption && <span className="article__caption">{props.caption}</span>}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
/* ------------------- Code Blocks ------------------ */
|
|
|
|
export const Pre = (props: any) => {
|
|
return <pre {...props} />
|
|
}
|
|
|
|
export const Code = (props: any) => {
|
|
return <code {...props} />
|
|
}
|
|
|
|
export const Footnotes = (props: any) => {
|
|
return <div {...props} />
|
|
}
|
|
|
|
/* -------------------- API docs -------------------- */
|
|
|
|
export const ApiHeading = (props: any) => {
|
|
return <div className="article__api-heading" {...props} />
|
|
}
|
|
|
|
export const Embed = (props: any) => {
|
|
return (
|
|
<div className="article__embed">
|
|
<iframe className="iframe" src={props.src} width="100%" height="600p" frameBorder="0" />
|
|
{props.caption && <span className="article__caption">{props.caption}</span>}
|
|
</div>
|
|
)
|
|
}
|