59 lines
2.1 KiB
Vue
59 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
/* One language version's address — /wiki/fr/bayes-theorem — is a thin host for
|
|
the same book page the article itself opens on. The open-article middleware
|
|
has already laid this version on the library's shelf, so all that is left to
|
|
do here is speak for the URL: the title, the visitor's "recently viewed"
|
|
line, and the words said when nothing lives at the address — this article,
|
|
or none in this language. */
|
|
definePageMeta({ middleware: 'open-article' })
|
|
|
|
const route = useRoute()
|
|
const identity = computed(() => String(route.params.slug))
|
|
const lang = computed(() => String(route.params.lang))
|
|
|
|
const { t } = useI18n()
|
|
const { th } = useAppLocale()
|
|
const { getVersion, unreadable } = useArticleLibrary()
|
|
const article = computed(() => getVersion(identity.value, lang.value))
|
|
|
|
const { record } = useRecentlyViewed()
|
|
watch(
|
|
article,
|
|
(a) => {
|
|
if (import.meta.client && a?.slug && a?.title) record({ slug: a.slug, title: a.title })
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
useSeoMeta({
|
|
title: () =>
|
|
article.value ? `${article.value.title} · ${languageName(lang.value)}` : t('card.kickerArticle'),
|
|
})
|
|
|
|
/* what the shelf could not bring in, the API said why */
|
|
const missingStatus = computed(
|
|
() => (article.value ? 0 : unreadable.value[versionKey(identity.value, lang.value)] ?? 0)
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="reader-host">
|
|
<div v-if="!article" class="reader-note">
|
|
<div class="empty" style="padding-top: 64px">
|
|
<template v-if="missingStatus === 404">
|
|
<div class="glyph">∄</div>
|
|
<h3>{{ t('reader.noVersionTitle', { lang: languageName(lang) }) }}</h3>
|
|
<p v-html="th('reader.noVersionText', { path: `/wiki/${lang}/${identity}` })"></p>
|
|
<NuxtLink to="/new" class="btn btn-primary">{{ t('reader.writeTopic') }}</NuxtLink>
|
|
</template>
|
|
<template v-else>
|
|
<div class="glyph">!</div>
|
|
<h3>{{ t('reader.loadFailTitle') }}</h3>
|
|
<p v-html="t('common.apiShort')"></p>
|
|
<NuxtLink to="/" class="btn btn-ghost">{{ t('common.backHome') }}</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|