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

Finish PreviewContent and add ProseA icon for none markdown files

Browse Source
This commit is contained in:
Peaceultime
2024-08-20 23:51:00 +02:00
parent 04785ecf27
commit 7e318d4a12
22 changed files with 270 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
layouts/default.vue
View File

@@ -1,68 +1,10 @@
<script lang="ts">
let icon: HTMLDivElement | null;
function toggleLeftPanel(_: Event): void {
document.querySelector('.published-container')?.classList.toggle('is-left-column-open');
}
function hideLeftPanel(_: Event): void {
document.querySelector('.published-container')?.classList.remove('is-left-column-open');
}
</script>
<script setup lang="ts">
const { id: project, home, get } = useProject();
if(project.value !== 0 && home.value === null)
{
await useAsyncData(`project:get:${project}`, get);
}
const toggled = ref(false);
onMounted(() => {
icon = document.querySelector('.site-nav-bar .clickable-icon');
icon?.removeEventListener('click', toggleLeftPanel);
icon?.addEventListener('click', toggleLeftPanel);
defineExpose({
navigation: false,
});
</script>
<template>
<div class="site-nav-bar">
<div>
<div class="clickable-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="svg-icon lucide-menu">
<line x1="4" y1="12" x2="20" y2="12"></line>
<line x1="4" y1="6" x2="20" y2="6"></line>
<line x1="4" y1="18" x2="20" y2="18"></line>
</svg>
</div>
<div class="gapx-3 flex align-stretch">
<NuxtLink @click="hideLeftPanel" class="site-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }">
<ThemeIcon icon="logo" :width=40 :height=40 />
</NuxtLink>
<div class="site-nav-bar-text mobile-hidden">
<NuxtLink aria-label="Projet" :to="{ path: project === 0 ? `/explorer` : `/explorer/${project}${home}`, force: true }"
:class="{'mod-active': $route.path.startsWith('/explorer')}">Projet</NuxtLink>
<div class="arrow-down" :class="{active: toggled}" @click="toggled = !toggled"></div>
<div class="arrow-group" @click="toggled = false">
<NuxtLink class="arrow-group-item" aria-label="Projets" :to="{ path: '/explorer', force: true }">Liste des projets</NuxtLink>
</div>
</div>
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Editeur" :to="{ path: '/editing', force: true }"
:class="{'mod-active': $route.path.startsWith('/editing')}">Editeur</NuxtLink>
</div>
</div>
<div class="mobile-bigger">
<SearchView />
</div>
<div class="ps-1 gapx-1 flex align-center">
<ThemeSwitch class="mobile-hidden" />
<NuxtLink class="site-login" :to="{ path: '/user/profile', force: true }">
<ThemeIcon icon="user" :width=32 :height=32 />
</NuxtLink>
</div>
</div>
<div class="site-body">
<slot />
</div>

64
layouts/explorer.vue
View File

@@ -1,70 +1,12 @@
<script lang="ts">
let icon: HTMLDivElement | null;
function toggleLeftPanel(_: Event): void {
document.querySelector('.published-container')?.classList.toggle('is-left-column-open');
}
function hideLeftPanel(_: Event): void {
document.querySelector('.published-container')?.classList.remove('is-left-column-open');
}
</script>
<script setup lang="ts">
const { id: project, home, get } = useProject();
if(project.value !== 0 && home.value === null)
{
await useAsyncData(`project:get:${project}`, get);
}
const toggled = ref(false);
onMounted(() => {
icon = document.querySelector('.site-nav-bar .clickable-icon');
icon?.removeEventListener('click', toggleLeftPanel);
icon?.addEventListener('click', toggleLeftPanel);
defineExpose({
navigation: true,
});
</script>
<template>
<div class="site-nav-bar">
<div>
<div class="clickable-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="svg-icon lucide-menu">
<line x1="4" y1="12" x2="20" y2="12"></line>
<line x1="4" y1="6" x2="20" y2="6"></line>
<line x1="4" y1="18" x2="20" y2="18"></line>
</svg>
</div>
<div class="gapx-3 flex align-stretch">
<NuxtLink @click="hideLeftPanel" class="site-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }">
<ThemeIcon icon="logo" :width=40 :height=40 />
</NuxtLink>
<div class="site-nav-bar-text mobile-hidden">
<NuxtLink aria-label="Projet" :to="{ path: project === 0 ? `/explorer` : `/explorer/${project}${home}`, force: true }"
:class="{'mod-active': $route.path.startsWith('/explorer')}">Projet</NuxtLink>
<div class="arrow-down" :class="{active: toggled}" @click="toggled = !toggled"></div>
<div class="arrow-group" @click="toggled = false">
<NuxtLink class="arrow-group-item" aria-label="Projets" :to="{ path: '/explorer', force: true }">Liste des projets</NuxtLink>
</div>
</div>
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Editeur" :to="{ path: '/editing', force: true }"
:class="{'mod-active': $route.path.startsWith('/editing')}">Editeur</NuxtLink>
</div>
</div>
<div class="mobile-bigger">
<SearchView />
</div>
<div class="ps-1 gapx-1 flex align-center">
<ThemeSwitch class="mobile-hidden" />
<NuxtLink class="site-login" :to="{ path: '/user/profile', force: true }">
<ThemeIcon icon="user" :width=32 :height=32 />
</NuxtLink>
</div>
</div>
<div class="site-body">
<ExplorerNavigation></ExplorerNavigation>
<ExplorerNavigation></ExplorerNavigation>
<slot></slot>
</div>
</template>