29 lines
1.4 KiB
Vue
29 lines
1.4 KiB
Vue
<template>
|
|
<div v-if="status === 'pending'" class="flex"><Loading /></div>
|
|
<div class="flex flex-1 justify-start items-start" v-if="page">
|
|
<template v-if="page.type === 'markdown'">
|
|
<div class="flex flex-1 justify-start items-start flex-col px-24 py-6">
|
|
<div class="flex flex-1 flex-row justify-between items-center">
|
|
<ProseH1>{{ page.title }}</ProseH1>
|
|
<Button v-if="isOwner"><NuxtLink :href="{ name: 'explore-edit-path', params: { path: path } }">Modifier</NuxtLink></Button>
|
|
</div>
|
|
<Markdown :content="page.content" />
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<span>Contenu non traitable</span>
|
|
</template>
|
|
</div>
|
|
<div v-else-if="status === 'pending'"><Loading /></div>
|
|
<div v-else-if="status === 'error'">{{ error?.message }}</div>
|
|
<div v-else>Impossible de retrouver le contenu demandé</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRouter().currentRoute;
|
|
const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
|
|
const { loggedIn, user } = useUserSession();
|
|
|
|
const { data: page, status, error } = await useFetch(`/api/file/${encodeURIComponent(path.value)}`, { watch: [route, path], });
|
|
const isOwner = computed(() => user.value?.id === page.value?.owner);
|
|
</script> |