62 lines
2.7 KiB
Vue
62 lines
2.7 KiB
Vue
<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 { page } = useContent()
|
|
useContentHead(page);
|
|
|
|
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>
|
|
|
|
<template>
|
|
<template v-if="!!page && page._type == 'markdown' && page.body.children.length > 0">
|
|
<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 v-if="!(page as MarkdownParsedContent).body.children.find((e: MarkdownNode) => e.tag === 'h1')">{{(page as MarkdownParsedContent).title}}</h1>
|
|
<ContentRenderer :key="page._id" :value="page" />
|
|
</div>
|
|
</div>
|
|
<div class="extra-title">
|
|
<span class="extra-title-text">Home</span>
|
|
<span aria-label="Close page" role="button">
|
|
<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-x">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<RightComponent />
|
|
</template>
|
|
<CanvasRenderer v-else-if="!!page && page._type == 'canvas'" :key="page._id" :canvas="page" />
|
|
<div v-else-if="!!page">
|
|
<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>
|
|
</template> |