First commit

frontend/app/pages/wiki/[lang]/[slug]/index.vue

@@ -0,0 +1,58 @@
+<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>