First commit

frontend/app/pages/wiki/[slug]/edit.vue

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