import { getMDXComponent } from "mdx-bundler/client" ; import { GetStaticProps } from "next" ; import React , { Fragment , useMemo } from "react" ; import { ChromaHighlight } from "@/components/FancyPants" ; import { ViewsCounter } from "@/components/ViewsCounter" ; import { Newsletter } from "@/components/blog/Newsletter" ; import { HighlightWithUseEffect , HighlightWithUseInterval } from "@/components/blog/rgb-text" ; import { MDXComponents } from "@/components/mdx" ; import { DocumentHead } from "@/components/shared/seo" ; import { Highlight , CustomBlockquote } from "@/styles/blog" ; import { MDXLink } from "@/styles/components" ; import { Center } from "@/styles/layouts" ; import { Sparkles } from "@/styles/special" ; import { Title , Heavy , MDXTitle , StyledAccentTextLink , TextGradient } from "@/styles/typography" ; import { TBlogPostPageProps } from "@/typings/blog" ; import { getMDXFileData , getRootPagesSlugs } from "@/utils/blog" ; import { getButtondownSubscriberCount } from "@/utils/misc" ; type TProps = TBlogPostPageProps & { subscriberCount : number ; } ; const Page = ( { code , frontmatter , subscriberCount } ) => { const Component = useMemo ( ( ) => getMDXComponent ( code ) , [ code ] ) ; return ( < Fragment > < DocumentHead title = { frontmatter . title } imageURL = { frontmatter ?. image } description = { frontmatter . summary } / > < Center > < Title size = { 5 } > /{frontmatter.title.toLowerCase()}</Title > < /Center> < Component components = { { MDXLink , MDXTitle , Sparkles , ChromaHighlight , HighlightWithUseEffect , HighlightWithUseInterval , Highlight , CustomBlockquote , TextGradient , Heavy , StyledAccentTextLink , ... MDXComponents , } } /> < ViewsCounter / > < Newsletter { ... { subscriberCount } } / > < /Fragment>); } ; export async function getStaticPaths ( ) { const postsData = await getRootPagesSlugs ( ) ; const paths = postsData . map ( ( post ) => ( { params : { page : post . page } , } ) ) ; return { paths , fallback : false } ; } export const getStaticProps = async ( { params } ) => { const subscriberCount = await getButtondownSubscriberCount ( ) ; if ( typeof params ?. page === "undefined" || Array . isArray ( params ?. page ) ) { return { props : { subscriberCount , } , } ; } const result = await getMDXFileData ( params ?. page ) ; return { props : { ... result , subscriberCount } } ; } ; export default Page ;