BookRoot.vue

<template>
  <div class="max-w-3xl mx-auto">
    <PageError
      v-if="error"
      :error="error"
      :subtitle="config.lang.zh ? '书籍 >_<' : 'Books >_<'"
    />

    <div v-else-if="!state" class="px-4 py-6 font-sans text-xl text-gray-500">
      <div v-if="config.lang.zh" class="font-bold">书籍加载中⋯⋯</div>
      <div v-else class="font-bold">Loading book ...</div>
      <LinkInfo class="py-4" :link="link" />
    </div>

    <BookContents v-else-if="frontMatter === 'contents'" :state="state" />
    <BookPage v-else-if="state.link.path" :state="state" />
    <BookTitlePage v-else :state="state" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onErrorCaptured } from "vue"
import { useMeta } from "vue-meta"
import { Link } from "../../models/link"
import { BookState as State } from "./book-state"
import { config } from "../../states/config"

import LinkInfo from "../../components/link-info/LinkInfo.vue"
import PageError from "../../layouts/page-layout/PageError.vue"
import BookTitlePage from "./BookTitlePage.vue"
import BookContents from "./BookContents.vue"
import BookPage from "./BookPage.vue"

const props = defineProps<{
  link: string
  frontMatter?: string
  backMatter?: string
}>()

const state = ref<State | null>(null)
const error = ref<unknown | null>(null)

const link = computed(() => Link.parse(props.link))

onErrorCaptured((e, component, info) => {
  error.value = e
  return false
})

watch(
  link,
  async () => {
    try {
      await updateState(link.value)
    } catch (e) {
      error.value = e
    }
  },
  { immediate: true }
)

async function updateState(link: Link): Promise<void> {
  if (
    state.value &&
    state.value.link.root().format() === link.root().format()
  ) {
    state.value.link = link
  } else {
    state.value = await State.build(link)
  }

  state.value.saveHistory()
}

const meta = computed(() => {
  return state.value ? { title: state.value.title } : {}
})

useMeta(meta)
</script>