<script lang="ts">
import Vue, { VNode, CreateElement } from 'vue'

export default Vue.extend({
  async asyncData({ params }) {
    const md = await import(`~/docs/${params.chapter}/${params.level}.md`)
    return { md: md.default }
  },

  data() {
    return {
      md: ''
    }
  },

  render(h: CreateElement): VNode {
    const $article = h('article', { domProps: { innerHTML: this.md }, class: ['markdown-body'] })
    const markdown = h('v-container', { class: [] }, [$article])
    return h('v-responsive', { class: ['mx-auto'], attrs: { 'max-width': 1024 } }, [markdown])
  }
})
</script>
