<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import "./index.css"

const ctx = ctxRef(new Context())

</script>

<template>
	<div class="doc-box">
		<div class="toc-box" v-html="ctx.rootTOC"></div>
		<div class="content-box" v-html="ctx.content"></div>
		<div class="toc-box right" v-html="ctx.toc"></div>
	</div>
</template>

<style lang="postcss" scoped>
:deep(h1) {
	@apply text-3xl mt-4 mb-4;
}

:deep(h2) {
	@apply text-2xl mt-4 mb-2;
}

:deep(h3), :deep(h4), :deep(h5) {
	@apply text-xl mt-4 mb-2;
}

:deep(.content-box ul) {
	@apply list-disc;
}

:deep(.content-box ol) {
	@apply list-decimal;
}
</style>