9a6f4e8c4b
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]
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { Article } from '@/types/content-types'
|
|
import { getDb } from '@/utils/ContentDatabase'
|
|
import { ArticleNavLinks } from './ArticleNavLinks'
|
|
import ExampleCodeBlock from './ExampleCodeBlock'
|
|
import { Header } from './Header'
|
|
import { Mdx } from './Mdx'
|
|
import { Sidebar } from './Sidebar'
|
|
|
|
export async function ExampleDocsPage({ 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__example`}>
|
|
<div className="page-header">
|
|
<h1>{article.title}</h1>
|
|
{article.description && <p>{article.description}</p>}
|
|
</div>
|
|
{article.content && <Mdx content={article.content} />}
|
|
<ExampleCodeBlock
|
|
articleId={article.id}
|
|
files={{
|
|
'App.tsx': article.componentCode,
|
|
...(article.componentCodeFiles ? JSON.parse(article.componentCodeFiles) : null),
|
|
}}
|
|
activeFile={'App.tsx'}
|
|
/>
|
|
{links && <ArticleNavLinks links={links} />}
|
|
</main>
|
|
</>
|
|
)
|
|
}
|