39 lines
1.4 KiB
Vue
39 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { ArticleMeta } from '~/components/ArticleCard.vue'
|
|
|
|
definePageMeta({ transition: { name: 'page', mode: 'out-in' } })
|
|
|
|
const api = `${useRuntimeConfig().public.apiBase}/api`
|
|
const route = useRoute()
|
|
const slug = computed(() => String(route.params.slug))
|
|
const { t } = useI18n()
|
|
const { th } = useAppLocale()
|
|
|
|
const { data: article, status, error } = await useFetch<ArticleMeta & { content?: string }>(
|
|
`${api}/articles/slug/${encodeURIComponent(slug.value)}`,
|
|
{ key: `article-${slug.value}-edit` }
|
|
)
|
|
|
|
useSeoMeta({ title: () => t('editor.metaEditing', { title: article.value?.title ?? slug.value }) })
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div v-if="error" class="empty" style="padding-top: 96px">
|
|
<div class="glyph">∄</div>
|
|
<h3>{{ t('editor.nothingToEdit') }}</h3>
|
|
<p v-html="th('editor.noArticleAt', { path: `/wiki/${slug}` })"></p>
|
|
<NuxtLink to="/new" class="btn btn-primary">{{ t('editor.createInstead') }}</NuxtLink>
|
|
</div>
|
|
|
|
<div v-else-if="status === 'pending'" style="padding-top: 48px">
|
|
<div class="skeleton" style="height: 40px; width: 40%; margin-bottom: 14px; border-radius: 8px" />
|
|
<div class="skeleton" style="height: 420px" />
|
|
</div>
|
|
|
|
<AuthGate v-else-if="article" :heading="t('editor.gateEdit', { title: article.title })">
|
|
<ArticleForm mode="edit" :article="article" :key="article._id" />
|
|
</AuthGate>
|
|
</div>
|
|
</template>
|