Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progressing on the CSS rework

Browse Source
This commit is contained in:
Peaceultime
2024-08-28 18:14:19 +02:00
parent d1450a1c99
commit c694d28982
26 changed files with 386 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
pages/explorer/[projectId]/[...slug].vue
View File

@@ -1,8 +1,4 @@
<script setup lang="ts">
definePageMeta({
layout: 'explorer'
})
const route = useRoute();
const { data: content } = await useFetch(`/api/project/${route.params.projectId}/file`, {
@@ -10,40 +6,32 @@ const { data: content } = await useFetch(`/api/project/${route.params.projectId}
path: unifySlug(route.params.slug)
}
});
definePageMeta({
layout: "explorer",
})
</script>
<template>
<Head>
<Title v-if="content && content[0]">{{ content[0].title }}</Title>
</Head>
<div class="site-body-center-column">
<div class="render-container">
<template v-if="!!content && content[0] && content[0].type == 'Markdown' && !!content[0].content">
<div class="render-container-inner">
<div class="publish-renderer">
<div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
<div class="markdown-preview-sizer markdown-preview-section" style="padding-bottom: 0px;">
<h1>{{ content[0].title }}</h1>
<Markdown v-model="content[0].content"></Markdown>
</div>
</div>
</div>
</div>
<CommentSide></CommentSide>
</template>
<CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)"></CanvasRenderer>
<div v-else-if="!!content && content[0]">
<div class="not-found-container">
<div class="not-found-image"></div>
<div class="not-found-title">Impossible d'afficher (ou vide)</div>
<div class="not-found-description">Cette page est actuellement vide ou impossible à traiter</div>
</div>
</div>
<div v-else class="not-found-container">
<div class="not-found-image"></div>
<div class="not-found-title">Introuvable</div>
<div class="not-found-description">Cette page n'existe pas</div>
<div class="flex-1 flex overflow-hidden">
<template v-if="!!content && content[0] && content[0].type == 'Markdown' && !!content[0].content">
<div>
<ProseH1>{{ content[0].title }}</ProseH1>
<Markdown v-model="content[0].content"></Markdown>
</div>
<CommentSide class="hidden"></CommentSide>
</template>
<CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)"></CanvasRenderer>
<div v-else-if="!!content && content[0]" class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher (ou vide)</div>
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est actuellement vide ou impossible à traiter</div>
</div>
<div v-else class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Introuvable</div>
<div class="text-lg text-light-60 dark:text-dark-60">Cette page n'existe pas</div>
</div>
</div>
</template>

20
pages/explorer/index.vue
View File

@@ -8,17 +8,19 @@ const { data: projects, status, error } = await useFetch('/api/project');
<Head>
<Title>Liste des projets</Title>
</Head>
<div class="site-body-center-column">
<div class="projects-container">
<div v-if="status === 'success'" class="project-list">
<div v-for="p of projects" class="project-item">
<NuxtLink class="project-title" :to="{ path: `/explorer/${p.id}/${p.home}`, force: true }">{{ p.name }}</NuxtLink>
<div class="project-user">Par {{ p.username }}</div>
<div class="project-pages">{{ p.pages }} pages</div>
<div class="project-summary">{{ p.summary ?? "Sans contenu" }}</div>
<div v-if="status === 'success'" class="grid grid-cols-2 gap-4">
<div v-for="p of projects" class="border border-light-35 dark:border-dark-35 px-4 py-2">
<div class="flex justify-between">
<div>
<NuxtLink class="text-accent-blue text-xl font-semibold hover:text-opacity-75" :to="{ path: `/explorer/${p.id}/${p.home}`, force: true }">{{ p.name }}</NuxtLink>
<div class="italic">Par <NuxtLink class="font-semibold hover:underline" :to="{ path: `/users/${p.owner}`, force: true }">{{ p.username }}</NuxtLink></div>
</div>
<div>
<div class="">{{ p.pages }} pages</div>
</div>
</div>
<div v-else-if="status === 'pending'" class="loading"></div>
<div class="">{{ p.summary ?? "Sans contenu" }}</div>
</div>
</div>
<div v-else-if="status === 'pending'" class="loading"></div>
</template>