---
import { PageHeader } from "@components/features/page-header";
import Markdown from "@components/misc/Markdown.astro";
import { getEntry, render } from "astro:content";

import I18nKey from "../i18n/i18nKey";
import { i18n } from "../i18n/translation";
import MainGridLayout from "../layouts/MainGridLayout.astro";

const aboutPost = await getEntry("spec", "about");

if (!aboutPost) {
	throw new Error("About page content not found");
}

const { Content } = await render(aboutPost);
const title = i18n(I18nKey.about);
---

<MainGridLayout title={title}>
	<!-- 引入右侧边栏布局管理器 -->
	<script>
		import("../scripts/right-sidebar-layout.js");
	</script>
	<div
		class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32"
	>
		<div class="card-base z-10 px-9 py-6 relative w-full">
			<PageHeader title={title} />

			<!-- 从MD文件读取的内容 -->
			<Markdown class="mt-2">
				<Content />
			</Markdown>
		</div>
	</div>
</MainGridLayout>
