Tldraw/apps/docs/pages/index.tsx

53 wiersze
1.7 KiB
TypeScript

import { ArticleDetails } from '@/components/ArticleDetails'
import { ArticleNavLinks } from '@/components/ArticleNavLinks'
import { Mdx } from '@/components/Mdx'
import { Sidebar } from '@/components/Sidebar'
import { Article, ArticleLinks, SidebarContentList } from '@/types/content-types'
import { getArticle, getArticleSource, getLinks } from '@/utils/content'
import { getSidebarContentList } from '@/utils/getSidebarContentList'
import { GetStaticProps } from 'next'
import { MDXRemoteSerializeResult } from 'next-mdx-remote'
import { useTheme } from 'next-themes'
interface Props {
article: Article
links: ArticleLinks
sidebar: SidebarContentList
mdxSource: MDXRemoteSerializeResult
}
export default function ArticlePage({ mdxSource, links, sidebar, article }: Props) {
const theme = useTheme()
return (
<div className="layout">
<Sidebar {...sidebar} />
<main className={`article ${theme.theme ?? 'light'}`}>
<div
className="lockup"
style={{
mask: `url(/lockup.svg) center 100% / 100% no-repeat`,
WebkitMask: `url(/lockup.svg) center 100% / 100% no-repeat`,
}}
/>
<Mdx mdxSource={mdxSource} />
<ArticleDetails article={article} />
<ArticleNavLinks links={links} />
</main>
</div>
)
}
const sectionId = 'docs'
const categoryId = 'ucg'
const articleId = 'introduction'
export const getStaticProps: GetStaticProps<Props> = async () => {
const sidebar = await getSidebarContentList({ sectionId, categoryId, articleId })
const article = await getArticle(articleId)
const links = await getLinks(articleId)
const mdxSource = await getArticleSource(articleId)
return { props: { article, sidebar, links, mdxSource } }
}