feat: added Docs

components/DeveloperLayout.tsx

@@ -1,36 +1,78 @@
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { ReactNode } from 'react'
-import Container from './Container'
 
+import { DocsData } from '@types'
+
+const Container = dynamic(() => import('@components/Container'))
+const Divider = dynamic(() => import('@components/Divider'))
 const SEO = dynamic(() => import('@components/SEO'))
 
-const DeveloperLayout = ({ children, enabled }:DeveloperLayout):JSX.Element => {
+const DeveloperLayout = ({ children, enabled, docs, currentDoc }:DeveloperLayout):JSX.Element => {
-	return <div className='flex h-screen'>
+	return <div className='flex min-h-screen'>
 		<SEO title='한디리 개발자' description='한국 디스코드봇 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.' />
-		<div className='w-1/8 lg:hidden pt-20 px-2 h-screen text-center bg-little-white dark:bg-discord-black'>
+		<div className='w-1/8 block lg:hidden h-screen relative'>
-			<h2 className='font-black text-koreanbots-blue pb-4'><i className='fas fa-tools'/></h2>
+			<div className='pt-20 px-2 h-full text-center bg-little-white dark:bg-discord-black fixed'>
-			<ul className='text-gray-300'>
+				<h2 className='font-black text-koreanbots-blue pb-4'><i className='fas fa-tools'/></h2>
-				<li className={`hover:text-white cursor-pointer py-2 px-4 mb-2 rounded-md ${enabled === 'applications' ? 'bg-discord-blurple text-white' : ''}`}>
+				<ul className='text-gray-600 dark:text-gray-300'>
-					<Link href='/developers/applications'><i className='fas fa-robot'/></Link>
+					<li className={`cursor-pointer py-2 px-4 mb-2 rounded-md ${enabled === 'applications' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-				</li>
+						<Link href='/developers/applications'><i className='fas fa-robot'/></Link>
-				<li className={`hover:text-white cursor-pointer py-2 px-4 my-2 rounded-md ${enabled === 'docs' ? 'bg-discord-blurple text-white' : ''}`}>
+					</li>
-					<Link href='/developers/docs'><i className='fas fa-book'/></Link>
+					<li className={`cursor-pointer py-2 px-4 my-2 rounded-md ${enabled === 'docs' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-				</li>
+						<Link href='/developers/docs'><i className='fas fa-book'/></Link>
-			</ul>
+					</li>
+				</ul>
+			</div>
 		</div>
-		<div className={'lg:w-1/6 bg-little-white dark:bg-discord-black pt-20 px-6 hidden lg:block h-screen'} >
+		<div className='hidden lg:block h-screen relative'>
-			<h2 className='font-black text-2xl pb-4 text-koreanbots-blue'>DEVELOPERS</h2>
+			<div className='bg-little-white dark:bg-discord-black pt-20 px-6 fixed h-full w-60'>
-			<ul className='text-base text-gray-300'>
+				<h2 className='font-black text-2xl pb-4 text-koreanbots-blue'>DEVELOPERS</h2>
-				<li className={`hover:text-white cursor-pointer py-2 px-4 rounded-md ${enabled === 'applications' ? 'bg-discord-blurple text-white' : ''}`}>
+				<ul className='text-base text-gray-600 dark:text-gray-300 mb-6'>
-					<Link href='/developers/applications'>나의 봇</Link>
+					<Link href='/developers/applications'>
-				</li>
+						<li className={`cursor-pointer py-2 px-4 rounded-md ${enabled === 'applications' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-				<li className={`hover:text-white cursor-pointer py-2 px-4 rounded-md ${enabled === 'docs' ? 'bg-discord-blurple text-white' : ''}`}>
+						나의 봇
-					<Link href='/developers/docs'>문서</Link>
+						</li>
-				</li>
+					</Link>
-			</ul>
+					<Link href='/developers/docs'>
+						<li className={`cursor-pointer py-2 px-4 rounded-md ${enabled === 'docs' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
+						문서
+						</li>
+					</Link>
+				</ul>
+				{
+					enabled === 'docs' && <>
+						<Divider />
+						<ul className='text-sm text-gray-600 dark:text-gray-300 px-0.5 mt-6'>
+							{
+								docs?.map(el => {
+									if(el.list) return <>
+
+										<ul key={el.name} className='text-sm py-3'>
+											<span className='text-gray-600 dark:text-gray-100 font-bold my-1'>{el.name}</span>
+											{
+												el.list.map(e => 
+													<Link key={e.name} href={`/developers/docs/${el.name}/${e.name}`}>
+														<li className={`cursor-pointer px-4 py-2 rounded-md ${currentDoc === e.name ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
+															{e.name}
+														</li>
+													</Link>
+												)
+											}
+										</ul>
+									</>
+									return <Link key={el.name} href={`/developers/docs/${el.name}`}>
+										<li className={`cursor-pointer py-2 px-4 rounded-md ${currentDoc === el.name ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
+											{el.name}
+										</li>
+									</Link>
+								})
+							}
+						</ul>
+					</>
+				}
+			</div>
 		</div>
-		<div className='w-full flex-grow py-24 overflow-y-scroll'>
+		<div className='w-full py-24 lg:pl-60'>
 			<Container>
 				{children}
 			</Container>
@@ -41,6 +83,8 @@ const DeveloperLayout = ({ children, enabled }:DeveloperLayout):JSX.Element => {
 interface DeveloperLayout {
   children: ReactNode
   enabled: 'applications' | 'docs'
+	docs?: DocsData[]
+	currentDoc?: string
 }
 
 export default DeveloperLayout

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

@@ -0,0 +1,72 @@
+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'
+
+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(() => {
+		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)
+	}, [docs, router.query])
+
+	if((!document && document !== null) || router.query.docs?.length > 2) return <NotFound />
+	return <DeveloperLayout enabled='docs' docs={docs} currentDoc={(router.query.second || router.query.first) as string}>
+		<div className='px-2'>
+			<Markdown text={document?.text} />
+		</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()
+					}
+				}))
+			}
+		}
+		
+	}))
+
+	return {
+		props: { docs }
+	}
+}
+
+interface DocsProps {
+  docs: DocsData[]
+}
+
+export default Docs

pages/developers/docs/[first]/index.tsx

@@ -0,0 +1 @@
+export { default, getStaticPaths, getStaticProps } from './[second]'

pages/developers/docs/index.tsx

@@ -0,0 +1,10 @@
+import { NextPage } from 'next'
+import { useRouter } from 'next/router'
+
+const Docs: NextPage = () => {
+	const router = useRouter()
+	router.push('/developers/docs/시작하기')
+	return <></>
+}
+
+export default Docs

types/index.ts

@@ -42,6 +42,12 @@ export interface BotSpec {
 	token: string
 }
 
+export interface DocsData {
+  name: string
+  list?: DocsData[]
+  text?: string
+}
+
 export enum UserFlags {
 	general = 0 << 0,
 	staff = 1 << 0,