import fs from 'fs' ; import path from 'path' ; import matter from 'gray-matter' ; import renderToString from 'next-mdx-remote/render-to-string' ; import hydrate from 'next-mdx-remote/hydrate' ; import DefaultLayout from '../components/DefaultLayout' ; import { Alert , Typography } from '@supabase/ui' ; import ReactMarkdown from 'react-markdown' ; const components = { Alert } ; export default function Home ( { source , frontmatter , toc } ) { const gfm = require ( 'remark-gfm' ) ; const content = hydrate ( source , { components } ) ; const TableOfContents = toc && ( < div className = "toc" > < Typography . Title level = { 5 } > Contents < /Typography.Title> < ReactMarkdown plugins = { [ gfm ] } > { toc . content } < /ReactMarkdown> < /div>); return ( < DefaultLayout > < div className = "grid grid-cols-12 container px-0 lg:py-8 mx-auto lg:gap-16" > < article className = "col-span-12 lg:col-span-9 xl:col-span-7" > < Typography . Title > { frontmatter . title } < /Typography.Title> < Typography . Title level = { 3 } > { frontmatter . description } < /Typography.Title> < Typography > { content } < /Typography> < /article> < div className = "hidden lg:block lg:col-span-3 xl:col-span-2 col-start-11" > { TableOfContents } < /div> < /div> < /DefaultLayout>); } export async function getStaticProps ( ) { const gfm = require ( 'remark-gfm' ) ; const slug = require ( 'rehype-slug' ) ; const toc = require ( 'markdown-toc' ) ; const filePath = `Introduction` ; const postDirectory = path . join ( process . cwd ( ) , '_posts' ) ; const fullPath = path . join ( postDirectory , `${ filePath }.mdx` ) ; const fileContent = fs . readFileSync ( fullPath , 'utf8' ) ; const { data , content } = matter ( fileContent ) ; const mdxSource = await renderToString ( content , { components , scope : data , mdxOptions : { remarkPlugins : [ gfm ] , rehypePlugins : [ slug ] , } , } ) ; return { props : { source : mdxSource , frontmatter : { ... data , } , toc : toc ( content , { maxdepth : 3 } ) , } , } ; }