53 lines
1.7 KiB
TypeScript
53 lines
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 } }
|
||
|
|
}
|