tldraw/apps/docs/components/CategoryDocsPage.tsx
Steve Ruiz 9a6f4e8c4b
[docs] design shuffle (#2951)
This PR incorporates design tweaks from #2922 without the home page or
content changes.

These are:
- Replacing all `hello@tldraw.com` with `sales@tldraw.com`
- Fix mailto links.
- Showing the first item in a section on direct routes to the section
- Splitting the article page for human-written content from article page
for generated content
- Splitting the layout for the landing page from the rest of the site
(temporarily identical to the regular content)
- Removing headings from left sidebar
- Restoring headings in right sidebar for human-written pages with > 1
heading link
- Styling block quote
- Adjusting section link appearance / layout in header / menu
- Changing the order of search results to preference docs over examples
- Updating copy on events
- Removing copy on user interface menus
- Adding hero as prop to all articles
- Updated icon
- Fixing a few broken links
- Replaces the sandpack code blocks with hljs code blocks, except in
examples.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00

35 lines
1 KiB
TypeScript

import { Category } from '@/types/content-types'
import { getDb } from '@/utils/ContentDatabase'
import Link from 'next/link'
import { Breadcrumb } from './Breadcrumb'
import { Header } from './Header'
import { Sidebar } from './Sidebar'
export async function CategoryDocsPage({ category }: { category: Category }) {
const db = await getDb()
const section = await db.getSection(category.sectionId)
const sidebar = await db.getSidebarContentList({ sectionId: category.sectionId })
const articles = await db.getCategoryArticles(section.id, category.id)
return (
<>
<Header sectionId={section.id} />
<Sidebar {...sidebar} />
<main className={'article'}>
<div className="page-header">
<Breadcrumb section={section} category={category} />
<h1>{category.title}</h1>
</div>
{articles.length > 0 && (
<ul>
{articles.map((article) => (
<li key={article.id}>
<Link href={`/${section.id}/${category.id}/${article.id}`}>{article.title}</Link>
</li>
))}
</ul>
)}
</main>
</>
)
}