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

Layouts, ProseA rework and PreviewContent creation. Trying to fix hydration by making better SSR.

Browse Source
This commit is contained in:
Peaceultime
2024-08-20 18:02:16 +02:00
parent 2e92c389a2
commit 04785ecf27
20 changed files with 344 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,8 @@
<script setup lang="ts">
definePageMeta({
layout: 'explorer'
})
const route = useRoute();
const { data: content } = await useFetch(`/api/project/${route.params.projectId}/file`, {
@@ -6,10 +10,6 @@ const { data: content } = await useFetch(`/api/project/${route.params.projectId}
path: unifySlug(route.params.slug)
}
});
const { set } = useProject();
await set(parseInt(route.params.projectId as string));
</script>
<template>
@@ -24,14 +24,14 @@ await set(parseInt(route.params.projectId as string));
<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 v-model="content[0].content"></Markdown>
</div>
</div>
</div>
</div>
<RightComponent/>
<CommentSide></CommentSide>
</template>
<CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)" />
<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>

89
pages/explorer/[projectId]/tags/[...slug].vue
View File

@@ -1,89 +0,0 @@
<!--<script lang="ts">
let icon: HTMLDivElement | null;
function toggleLeftPanel(_: Event) {
icon!.parentElement!.parentElement!.parentElement!.parentElement!.classList.toggle('is-left-column-open');
}
</script>
<script setup lang="ts">
const route = useRoute();
const tag = computed(() => {
return Array.isArray(route.params.slug) ? route.params.slug.join('/') : route.params.slug;
});
const descriptions = inject('tags/descriptions') as ParsedContent;
function sluggify(s: string): string {
return s
.split("/")
.map((segment) => segment.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/^\d\. */g, '').replace(/\s/g, "-").replace(/%/g, "-percent").replace(/\?/g, "-q").toLowerCase()) // slugify all segments
.filter(e => !!e)
.join("/") // always use / as sep
.replace(/\/$/, "")
}
function flatten(val: TocLink[]): TocLink[] {
return val.flatMap ? val?.flatMap((e: TocLink) => e.children ? [e, ...flatten(e.children)] : e) : val;
}
function getContent(content: ParsedContent)
{
const body = JSON.parse(JSON.stringify(content.body)) as MarkdownRoot;
const id = flatten(body?.toc?.links ?? []).find(e => sluggify(e.id) === tag.value.replaceAll('/', ''));
const htag = `h${id?.depth ?? 0}`;
const startIdx = body.children.findIndex(e => e.tag === htag && e?.props?.id === id?.id) ?? 0;
const nbr = body.children.findIndex((e, i) => i > startIdx && e.tag?.match(new RegExp(`h[1-${id?.depth ?? 1}]`)));
body.children = [...body.children].splice(startIdx + 1, (nbr === -1 ? body.children.length : nbr) - (startIdx + 1));
return { ... content, body };
}
onMounted(() => {
document.querySelectorAll('.callout.is-collapsible .callout-title').forEach(e => {
e.addEventListener('click', (_) => {
e.parentElement!.classList.toggle('is-collapsed');
})
})
icon = document.querySelector('.site-header .clickable-icon');
icon?.removeEventListener('click', toggleLeftPanel);
icon?.addEventListener('click', toggleLeftPanel);
})
</script>
<style>
.card-container {
display: flex;
flex-wrap: wrap;
}
</style>
<template>
<LeftComponent />
<ContentList :query="{ where: { frontmatter: { tags: { $contains: tag }}}}">
<template #default="{ list }">
<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>#{{ tag }}</h1>
<ContentRenderer :value="getContent(descriptions)" />
<h2>Pages contenant le tag</h2>
<div class="card-container">
<NuxtLink :key="item._id" :to="{ path: '/explorer' + item._path, force: true }" v-for="item of list" class="tag"> {{ item.title }} </NuxtLink>
</div>
</div>
</div>
</div>
</div>
</template>
<template #not-found>
<div 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>
</template>
</ContentList>
</template>-->
<template></template>