---
import { getBlog } from '../../lib/apis/legacy/blog'
import FullLayoutV1 from '../../layout/FullLayoutV1.astro'
import { MarkdocTreeRender } from '../../components/MarkdocRenderer.tsx'
import { toMarkdocTree } from '../../lib/markdoc'

export const prerender = false

const { blog_id = '' } = Astro.params
const blog_id_num = parseInt(blog_id)

if (isNaN(blog_id_num) || blog_id_num < 0) {
  return Astro.redirect('/404')
}

const blogData = await getBlog(blog_id_num)
if (blogData === null) {
  return Astro.redirect('/404')
}

const tree = await toMarkdocTree(blogData.content)
---

<FullLayoutV1 title={blogData.title}>
  <div class="__dev__caution">
    <h1>仍在开发中，界面会崩坏</h1>
  </div>
  <MarkdocTreeRender tree={tree} client:load />
</FullLayoutV1>

<style>
  .__dev__caution {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;

    & > h1 {
      font-size: 72px;
      font-weight: 800;
    }
  }
</style>
