55 lines
2.0 KiB
Vue
55 lines
2.0 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 { t } = useI18n()
|
|
const { th } = useAppLocale()
|
|
|
|
/* ?translate=<slug> — start the editor from an existing article instead of
|
|
from scratch: the text opens ready to rewrite, and the save publishes a new
|
|
language version of that same article. */
|
|
const translateSlug = computed(() => String(route.query.translate ?? '').trim())
|
|
|
|
const { data: original, status } = await useFetch<ArticleMeta & { content?: string }>(
|
|
() => `${api}/articles/slug/${encodeURIComponent(translateSlug.value)}`,
|
|
{ enabled: computed(() => Boolean(translateSlug.value)), default: null }
|
|
)
|
|
|
|
const takenLanguages = computed(() => (original.value?.versions ?? []).map((v) => v.language))
|
|
|
|
useSeoMeta({
|
|
title: () => (original.value ? t('editor.metaTranslate', { title: original.value!.title }) : t('editor.newTitle')),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- the editor itself only shows with an account behind it (AuthGate) -->
|
|
<AuthGate :heading="t('editor.gateStart')">
|
|
<ArticleForm
|
|
v-if="original"
|
|
mode="create"
|
|
:translate-from="original"
|
|
:taken-languages="takenLanguages"
|
|
:key="`translate-${original._id}`"
|
|
/>
|
|
|
|
<template v-else-if="translateSlug">
|
|
<div v-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>
|
|
<div v-else class="empty" style="padding-top: 96px">
|
|
<div class="glyph">∄</div>
|
|
<h3>{{ t('editor.nothingToTranslate') }}</h3>
|
|
<p v-html="th('editor.noArticleAt', { path: `/wiki/${translateSlug}` })"></p>
|
|
<NuxtLink to="/" class="btn btn-primary">{{ t('editor.backToSearch') }}</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<ArticleForm v-else mode="create" />
|
|
</AuthGate>
|
|
</template>
|