feat: /render (#879)

* feat: /render

* style: dark mode

---------

Co-authored-by: MasterIceZ <64594596+MasterIceZ@users.noreply.github.com>

Author: leomotors

src/app/api/render/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest } from 'next/server'
+
+import { mdxToHtml } from '@/lib/renderMarkdown'
+import { badRequest, json } from '@/utils/apiResponse'
+
+export async function POST(req: NextRequest) {
+  const body = await req.json()
+
+  const { content } = body
+
+  if (!('content' in body) || typeof content !== 'string') {
+    return badRequest()
+  }
+
+  const mdxSource = await mdxToHtml(content)
+  return json(mdxSource)
+}

src/app/render/page.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useState } from 'react'
+
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+
+import components from '@/components/common/MDXComponents'
+
+import 'katex/dist/katex.min.css'
+
+export default function Render() {
+  const [md, setMd] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const [rendered, setRendered] = useState<MDXRemoteSerializeResult>()
+
+  async function render() {
+    setLoading(true)
+    const res = await fetch('/api/render', {
+      method: 'POST',
+      body: JSON.stringify({ content: md })
+    })
+    setRendered(await res.json())
+    setLoading(false)
+  }
+
+  return (
+    <div className="flex w-screen flex-col items-center gap-4 py-4">
+      <div>
+        <button
+          className="trasition-colors mt-4 inline rounded-md bg-prog-primary-500 px-9 py-2.5 text-lg font-bold text-white hover:bg-prog-primary-600"
+          onClick={() => render()}
+          disabled={loading}
+        >
+          Render
+        </button>
+      </div>
+
+      <div className="flex w-screen items-start justify-between px-8">
+        <textarea
+          className="w-[45vw] rounded-md border border-black p-2"
+          cols={80}
+          rows={100}
+          value={md}
+          onChange={e => setMd(e.currentTarget.value)}
+        />
+
+        <article className="prose w-[45vw] max-w-none dark:prose-invert dark:prose-headings:text-white">
+          {loading ? (
+            <h1>Loading...</h1>
+          ) : (
+            rendered && <MDXRemote {...rendered} components={components} />
+          )}
+        </article>
+      </div>
+    </div>
+  )
+}