tldraw/apps/docs/components/ArticleReferenceDocsPage.tsx
alex fba82ed924
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
2024-06-13 16:04:12 +00:00

39 lines
1.4 KiB
TypeScript

import { Article } from '@/types/content-types'
import { getDb } from '@/utils/ContentDatabase'
import { ArticleNavLinks } from './ArticleNavLinks'
import { Breadcrumb } from './Breadcrumb'
import { Header } from './Header'
import { Mdx } from './Mdx'
import { Sidebar } from './Sidebar'
import { TitleWithSourceLink } from './mdx-components/api-docs'
import { Image } from './mdx-components/generic'
export async function ArticleReferenceDocsPage({ article }: { article: Article }) {
const db = await getDb()
const section = await db.getSection(article.sectionId)
const category = await db.getCategory(article.categoryId)
const links = await db.getArticleLinks(article)
const sidebar = await db.getSidebarContentList({
sectionId: section.id,
categoryId: category.id,
articleId: article.id,
})
return (
<>
<Header sectionId={section.id} />
<Sidebar {...sidebar} />
<main className="main-content article article__api-docs">
<div className="page-header">
<Breadcrumb section={section} category={category} />
<TitleWithSourceLink source={article.sourceUrl} large tags={article.apiTags?.split(',')}>
<h1>{article.title}</h1>
</TitleWithSourceLink>
</div>
{article.hero && <Image alt="hero" title={article.title} src={`images/${article.hero}`} />}
{article.content && <Mdx content={article.content} />}
{links && <ArticleNavLinks links={links} />}
</main>
</>
)
}