core/pages/developers/docs/[first]/[second].tsx

import { NextPage } from 'next'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import dynamic from 'next/dynamic'
import { lstat, readdir, readFile } from 'fs/promises'
import { join } from 'path'

import { DocsData } from '@types'

import NotFound from 'pages/404'
import Message from '@components/Message'

const DeveloperLayout = dynamic(() => import('@components/DeveloperLayout'))
const Markdown = dynamic(() => import ('@components/Markdown'))

const docsDir = './api-docs/docs'
const Docs: NextPage<DocsProps> = ({ docs }) => {
	const router = useRouter()
	const [ document, setDoc ] = useState<DocsData>(null)
	useEffect(() => {
		if(!router.query.first) return
		let res = docs?.find(el => el.name === router.query.first)
		if(router.query.second) res = res?.list?.find(el => el.name === router.query.second)
		setDoc(res || { name: 'Not Found' })
		setTimeout(highlightBlocks, 100)
	}, [docs, router.query])

	useEffect(() => highlightBlocks, [document])
	if(document?.name === 'Not Found') return <NotFound />
	return <DeveloperLayout enabled='docs' docs={docs} currentDoc={(router.query.second || router.query.first) as string}>
		<div className='px-2'>
			{
				!document ? ''
					: <Markdown text={document.text} options={{ openLinksInNewWindow: false }} components={{ message: Message, code }} allowedTag={['message']} />
			}
		</div>
	</DeveloperLayout>
}

export async function getStaticPaths () {
	return {
		paths: [],
		fallback: true
	}
}

export async function getStaticProps () {
	const docs = (await Promise.all((await readdir(docsDir)).map(async el => {
		const isDir = (await lstat(join(docsDir, el))).isDirectory()
		if(!isDir) {
			return {
				name: el.split('.').slice(0, -1).join('.'),
				text: (await readFile(join(docsDir, el))).toString()
			}
		}
		else {
			return {
				name: el,
				list: await Promise.all((await readdir(join(docsDir, el))).map(async e => {
					return {
						name: e.split('.').slice(0, -1).join('.'),
						text: (await readFile(join(docsDir, el, e))).toString()
					}
				}))
			}
		}
	}))).sort((a, b) => {
		if('list' in b && 'text' in a) return -1
		return a.name.localeCompare(b.name)
	}) 

	return {
		props: { docs }
	}
}

function code({ children }:{ children: string }):JSX.Element {
	const methods = {
		get: 'text-emerald-400',
		post: 'text-amber-400',
		put: 'text-blue-500',
		patch: 'text-amber-400',
		delete: 'text-red-500'
	}
	return <code className={`${methods[String(children).toLowerCase()]}`}>
		{children}
	</code>
}
function highlightBlocks() {
	const nodes = window.document.querySelectorAll('pre code')
	nodes.forEach(el => {
		window.hljs.highlightBlock(el)
	})
}
interface DocsProps {
  docs: DocsData[]
}

export default Docs