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

Progressing on the CSS rework

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
app.vue
View File

@ -1,35 +1,55 @@
<script setup lang="ts">
const layout = ref();
const toggled = ref(false);
<style>
/* width */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
}
/* Handle */
::-webkit-scrollbar-thumb {
@apply bg-light-40;
@apply dark:bg-dark-40;
@apply rounded-md;
@apply border-2;
@apply border-solid;
@apply border-transparent;
@apply bg-clip-padding;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
@apply bg-light-50;
@apply dark:bg-dark-50;
}
.loading {
@apply w-full;
@apply h-full;
@apply flex;
@apply items-center;
@apply justify-center;
@apply before:border-4;
@apply before:border-accent-purple;
@apply before:border-t-transparent;
@apply before:rounded-full;
@apply before:w-8;
@apply before:h-8;
@apply before:animate-spin;
}
</style>
<script setup lang="ts">
const page = ref();
</script>
<template>
<div class="bg-light-0 dark:bg-dark-0">
<div class="bg-light-0 dark:bg-dark-0 px-12 py-3 sticky top-0 z-40 w-full flex align-middle justify-between lg:z-50 border-b gap-12 border-light-30 dark:border-dark-30">
<div class="flex flex-auto items-stretch gap-12">
<NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon icon="logo" :width=40 :height=40 /></NuxtLink>
<NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
<NuxtLink class="text-lg flex align-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
</div>
<div class="flex-auto"><SearchView /></div>
<div class="flex flex-auto align-center gap-6 justify-end">
<ThemeSwitch />
<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
</div>
</div>
<NuxtLayout ref="layout">
<template #mobile>
<div class="">
<NuxtLink class="" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
<NuxtLink class="" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="">Projets</NuxtLink>
<NuxtLink class="" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="">Editeur</NuxtLink>
</div>
</template>
<NuxtPage/>
</NuxtLayout>
<div class="">
<p>Copyright Peaceultime - 2024</p>
<NuxtLink :to="{ path: '/third-party', force: true }">Applications tierces et crédits</NuxtLink>
</div>
</div>
<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
<NuxtRouteAnnouncer></NuxtRouteAnnouncer>
<NuxtLayout>
<NuxtPage ref="page"></NuxtPage>
</NuxtLayout>
</div>
</template>

23
components/SearchView.vue
View File

@ -42,40 +42,41 @@ async function debounced()
<input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none w-full outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40" type="text" placeholder="Recherche" v-model="input" @input="search">
</div>
<Teleport to="#teleports" v-if="input !== '' && !!pos">
<div class=""
<div class="absolute z-50 border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 divide-y divide-light-35 dark:divide-dark-35 max-h-96 overflow-auto
scroll"
:style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
<div class="loading" v-if="loading"></div>
<template v-else>
<div class="" v-for="result of results.projects" :key="result.id"
<div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.projects" :key="result.id"
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
@mousedown.prevent="navigateTo(`/explorer/${result.id}${result.home}`); input = ''">
@mousedown.prevent="navigateTo(`/explorer/${result.id}/${result.home}`); input = ''">
<div class="">
<BoldContent class="" :text="result.name" :matched="input" />
<div class="">
<BoldContent class="text-lg" :text="result.name" :matched="input" />
<div class="flex justify-between text-sm">
<div class="">{{ result.username }}</div>
<div class="">{{ result.pages }} pages</div>
</div>
</div>
</div>
<div class="" v-for="result of results.files" :key="result.id"
<div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.files" :key="result.id"
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
@mousedown.prevent="navigateTo(`/explorer/${result.project}${result.path}`); input = ''">
@mousedown.prevent="navigateTo(`/explorer/${result.project}/${result.path}`); input = ''">
<div class="">
<BoldContent class="" :text="result.title" :matched="input" />
<div class="">
<BoldContent class="text-lg" :text="result.title" :matched="input" />
<div class="flex justify-between text-sm">
<div class="">{{ result.username }}</div>
<div class="">{{ result.comments }} commentaires</div>
</div>
</div>
</div>
<div class="" v-for="result of results.users" :key="result.id"
<div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.users" :key="result.id"
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
@mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
<div class="">
<BoldContent class="" :text="result.username" :matched="input" />
<BoldContent class="text-lg" :text="result.username" :matched="input" />
</div>
</div>
<div class=""

79
components/canvas/CanvasRenderer.vue
View File

@ -216,47 +216,45 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
<Suspense>
<template #default>
<div id="canvas" ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.passive="onTouchStart"
@dragstart.prevent="" class="canvas-wrapper node-insert-event mod-zoomed-out"
@dragstart.prevent="" class="relative overflow-hidden"
:style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
<div class="canvas-controls" style="z-index: 999;">
<div class="canvas-control-group">
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="canvas-control-item"
aria-label="Zoom in" data-tooltip-position="left">
<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-plus">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div @click="zoom = 1" class="canvas-control-item" aria-label="Reset zoom"
data-tooltip-position="left">
<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-rotate-cw">
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
</svg>
</div>
<div @click="reset" class="canvas-control-item" aria-label="Zoom to fit"
data-tooltip-position="left">
<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-maximize">
<path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
<path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
<path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
<path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
</svg>
</div>
<div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="canvas-control-item"
aria-label="Zoom out" data-tooltip-position="left">
<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-minus">
<path d="M5 12h14"></path>
</svg>
</div>
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute top-2 left-2 z-[100] overflow-hidden">
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
aria-label="Zoom in" data-tooltip-position="left">
<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">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" aria-label="Reset zoom"
data-tooltip-position="left">
<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">
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
</svg>
</div>
<div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" aria-label="Zoom to fit"
data-tooltip-position="left">
<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">
<path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
<path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
<path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
<path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
</svg>
</div>
<div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
aria-label="Zoom out" data-tooltip-position="left">
<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">
<path d="M5 12h14"></path>
</svg>
</div>
</div>
<div class="canvas"
@ -274,7 +272,6 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
</div>
</template>
</div>
<span v-if="TMP_dragPoint" :style="{ display: 'block', backgroundColor: 'red', borderRadius: '8px', width: '8px', height: '8px', transform: `translate(-4px, -4px) translate(${TMP_dragPoint.x}px, ${TMP_dragPoint.y}px)` }"></span>
</div>
</template>
<template #fallback>

6
components/explorer/ExplorerNavigation.vue
View File

@ -12,9 +12,9 @@ if(!isNaN(project.value))
</script>
<template>
<div class="tree-item">
<div class="tree-item-children">
<NavigationLink v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
<div class="relative flex-auto">
<div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto px-4">
<NavigationLink class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
</div>
</div>
</template>

26
components/explorer/NavigationLink.vue
View File

@ -15,28 +15,24 @@ const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.p
</script>
<template>
<div class="tree-item" v-if="project && !isNaN(project)">
<div class="py-1" v-if="project && !isNaN(project)">
<template v-if="hasChildren">
<div class="tree-item-self"
:class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }"
data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed"
:data-type="link.private ? 'privé' : undefined">
<div v-if="hasChildren" class="tree-item-icon collapse-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 right-triangle">
<div class="flex gap-2 items-center cursor-pointer hover:text-opacity-75 text-light-100 dark:text-dark-100" @click="collapsed = hasChildren && !collapsed" :data-type="link.private ? 'privé' : undefined">
<div v-if="hasChildren" class="w-4 h-4 transition-transform" :class="{'-rotate-90': collapsed}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 8L12 17L21 8"></path>
</svg>
</div>
<div class="tree-item-inner">{{ link.title }}</div>
<div class="font-semibold">{{ link.title }}</div>
</div>
<div v-if="!collapsed" class="tree-item-children">
<NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
<div v-if="!collapsed">
<NavigationLink class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
</div>
</template>
<NuxtLink v-else class="tree-item-self" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
:active-class="'mod-active'" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
<div class="tree-item-inner">{{ link.title }}</div>
<NuxtLink v-else class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
active-class="!text-accent-blue relative before:border-l-2 before:border-accent-blue before:absolute before:-top-1 before:-bottom-1 before:-left-4 before:-mx-px" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
<div class="">{{ link.title }}</div>
</NuxtLink>
</div>
</template>

30
components/explorer/PreviewContent.vue
View File

@ -1,32 +1,24 @@
<template>
<Teleport to="#teleports" v-if="display && (!fetched || loaded)">
<div class="popover hover-popover" :class="{'is-loaded': fetched}" :style="pos"
<div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] overflow-auto bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :class="{'is-loaded': fetched}" :style="pos"
@mouseenter="debounce(show, 250)" @mouseleave="debounce(() => display = false, 250)">
<div v-if="pending" class="loading"></div>
<template v-else-if="content !==''">
<div v-if="type === 'Markdown'" class=" markdown-embed">
<div class="markdown-embed-content">
<div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
<div class="markdown-preview-sizer markdown-preview-section">
<h1>{{ title }}</h1>
<Markdown v-model="content"></Markdown>
</div>
</div>
</div>
<div v-if="type === 'Markdown'" class="p-6">
<ProseH1>{{ title }}</ProseH1>
<Markdown v-model="content"></Markdown>
</div>
<div v-else-if="type === 'Canvas'" class="canvas-embed is-loaded">
<div v-else-if="type === 'Canvas'" class="">
<CanvasRenderer :canvas="JSON.parse(content) " />
</div>
<div class="not-found-container" v-else>
<div class="not-found-image"></div>
<div class="not-found-title">Fichier vide</div>
<div class="not-found-description">Cette page est vide</div>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
</div>
</template>
<div class="not-found-container" v-else>
<div class="not-found-image"></div>
<div class="not-found-title">Impossible d'afficher</div>
<div class="not-found-description">Cette page est impossible à traiter</div>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
</div>
</div>
</Teleport>

14
components/prose/ProseA.vue
View File

@ -1,15 +1,17 @@
<template>
<NuxtLink class="preview-link" v-if="data && data[0] && status !== 'pending'"
<NuxtLink class="text-accent-blue" v-if="data && data[0] && status !== 'pending'"
:to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
<PreviewContent :project="project" :path="data[0].path" :anchor="hash">
<slot v-bind="$attrs"></slot>
<ThemeIcon class="link-icon" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
:icon="`link-${data[0].type.toLowerCase()}`" />
<div class="inline-flex items-center">
<slot v-bind="$attrs"></slot>
<ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
:icon="`link-${data[0].type.toLowerCase()}`" />
</div>
</PreviewContent>
</NuxtLink>
<NuxtLink v-else-if="href" :to="href" :class="class">
<NuxtLink v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
<slot v-bind="$attrs"></slot>
<ThemeIcon class="link-icon" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
<ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
:icon="`link-${data[0].type.toLowerCase()}`" />
</NuxtLink>
<slot :class="class" v-else v-bind="$attrs"></slot>

161
components/prose/ProseBlockquote.vue
View File

@ -20,4 +20,163 @@ onUnmounted(() => {
function toggle() {
el.value?.classList?.toggle('is-collapsed');
}
</script>
</script>
<style>
blockquote:not(.callout)
{
@apply ps-4;
@apply my-2;
@apply relative;
@apply before:absolute;
@apply before:-top-1;
@apply before:-bottom-1;
@apply before:left-0;
@apply before:w-1;
@apply before:bg-light-30;
@apply dark:before:bg-dark-30;
}
blockquote:empty
{
@apply before:hidden;
}
.callout {
@apply bg-light-blue;
@apply dark:bg-dark-blue;
}
.callout.is-collapsible .callout-title
{
@apply cursor-pointer;
}
.callout .fold
{
@apply transition-transform;
}
.callout.is-collapsed .fold
{
@apply -rotate-90;
}
.callout.is-collapsed > p
{
@apply hidden;
}
.callout[datacallout="abstract"],
.callout[datacallout="summary"],
.callout[datacallout="tldr"] {
@apply bg-light-cyan;
@apply dark:bg-dark-cyan;
@apply text-light-cyan;
@apply dark:text-dark-cyan;
}
.callout[datacallout="info"] {
@apply bg-light-blue;
@apply dark:bg-dark-blue;
@apply text-light-blue;
@apply dark:text-dark-blue;
}
.callout[datacallout="todo"] {
@apply bg-light-blue;
@apply dark:bg-dark-blue;
@apply text-light-blue;
@apply dark:text-dark-blue;
}
.callout[datacallout="important"] {
@apply bg-light-cyan;
@apply dark:bg-dark-cyan;
@apply text-light-cyan;
@apply dark:text-dark-cyan;
}
.callout[datacallout="tip"],
.callout[datacallout="hint"] {
@apply bg-light-cyan;
@apply dark:bg-dark-cyan;
@apply text-light-cyan;
@apply dark:text-dark-cyan;
}
.callout[datacallout="success"],
.callout[datacallout="check"],
.callout[datacallout="done"] {
@apply bg-light-green;
@apply dark:bg-dark-green;
@apply text-light-green;
@apply dark:text-dark-green;
}
.callout[datacallout="question"],
.callout[datacallout="help"],
.callout[datacallout="faq"] {
@apply bg-light-orange;
@apply dark:bg-dark-orange;
@apply text-light-orange;
@apply dark:text-dark-orange;
}
.callout[datacallout="warning"],
.callout[datacallout="caution"],
.callout[datacallout="attention"] {
@apply bg-light-orange;
@apply dark:bg-dark-orange;
@apply text-light-orange;
@apply dark:text-dark-orange;
}
.callout[datacallout="failure"],
.callout[datacallout="fail"],
.callout[datacallout="missing"] {
@apply bg-light-red;
@apply dark:bg-dark-red;
@apply text-light-red;
@apply dark:text-dark-red;
}
.callout[datacallout="danger"],
.callout[datacallout="error"] {
@apply bg-light-red;
@apply dark:bg-dark-red;
@apply text-light-red;
@apply dark:text-dark-red;
}
.callout[datacallout="bug"] {
@apply bg-light-red;
@apply dark:bg-dark-red;
@apply text-light-red;
@apply dark:text-dark-red;
}
.callout[datacallout="example"] {
@apply bg-light-purple;
@apply dark:bg-dark-purple;
@apply text-light-purple;
@apply dark:text-dark-purple;
}
.callout
{
@apply overflow-hidden;
@apply my-4;
@apply p-3;
@apply ps-6;
@apply bg-blend-lighten;
@apply !bg-opacity-25;
@apply border-l-4;
@apply inline-block;
@apply pe-8;
}
.callout-icon
{
@apply w-6;
@apply h-6;
@apply stroke-2;
}
.callout-title
{
@apply flex;
@apply items-center;
@apply gap-2;
}
.callout-title-inner
{
@apply inline-block;
@apply font-bold;
}
.callout > p
{
@apply mt-2;
@apply font-semibold;
}
</style>

2
components/prose/ProseH1.vue
View File

@ -1,5 +1,5 @@
<template>
<h1 :id="id">
<h1 :id="id" class="text-3xl font-semibold my-3 first:pt-0 pt-2">
<slot />
</h1>
</template>

2
components/prose/ProseH2.vue
View File

@ -1,5 +1,5 @@
<template>
<h2 :id="id">
<h2 :id="id" class="text-2xl font-semibold my-3 ms-1 first:pt-0 pt-2">
<slot />
</h2>
</template>

2
components/prose/ProseH3.vue
View File

@ -1,5 +1,5 @@
<template>
<h3 :id="id">
<h3 :id="id" class="text-xl font-semibold my-2 ms-4">
<slot />
</h3>
</template>

2
components/prose/ProseH4.vue
View File

@ -1,5 +1,5 @@
<template>
<h4 :id="id">
<h4 :id="id" class="text-lg font-semibold my-2 ms-4">
<slot />
</h4>
</template>

2
components/prose/ProseH5.vue
View File

@ -1,5 +1,5 @@
<template>
<h5 :id="id">
<h5 :id="id" class="text-base font-semibold my-1 ms-4">
<slot />
</h5>
</template>

2
components/prose/ProseHr.vue
View File

@ -1,3 +1,3 @@
<template>
<hr>
<hr class="border-light-35 dark:border-dark-35 m-4">
</template>

2
components/prose/ProseLi.vue
View File

@ -1,3 +1,3 @@
<template>
<li><slot /></li>
<li class="before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4"><slot /></li>
</template>

9
components/prose/ProseP.vue
View File

@ -1,3 +1,12 @@
<template>
<p><slot /></p>
</template>
<style>
.text-comment
{
@apply text-light-50;
@apply dark:text-dark-50;
@apply text-sm;
}
</style>

2
components/prose/ProseTable.vue
View File

@ -1,5 +1,5 @@
<template>
<table>
<table class="mx-4 my-8 border-collapse border border-light-35 dark:border-dark-35">
<slot />
</table>
</template>

2
components/prose/ProseTd.vue
View File

@ -1,5 +1,5 @@
<template>
<td>
<td class="border border-light-35 dark:border-dark-35 py-1 px-2">
<slot />
</td>
</template>

2
components/prose/ProseTh.vue
View File

@ -1,5 +1,5 @@
<template>
<th>
<th class="border border-light-35 dark:border-dark-35 px-4 first:pt-0">
<slot />
</th>
</template>

BIN
db.sqlite
View File

Binary file not shown.

33
layouts/default.vue
View File

@ -1,22 +1,23 @@
<script setup lang="ts">
defineExpose({
navigation: false,
});
</script>
<template>
<div class="site-body">
<div class="site-body-left-column desktop-hidden mobile-block">
<div class="site-body-left-column-inner">
<div class="nav-view-outer">
<div class="nav-view">
<div class="mobile-slot">
<slot name="mobile"></slot>
</div>
</div>
<div class="bg-light-0 my-8 dark:bg-dark-0 px-6 py-3 top-0 z-40 w-96 lg:z-50 border-r border-light-30 dark:border-dark-30 flex flex-col justify-between">
<div class="relative bottom-6 flex flex-col gap-4 overflow-auto">
<div class="flex justify-between items-center">
<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
<div class="flex gap-4 items-center">
<ThemeSwitch />
<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
</div>
</div>
<div class="flex-auto"><SearchView /></div>
<NuxtLink class="px-6 text-lg flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
<NuxtLink class="px-6 text-lg flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
</div>
<slot />
<div class="text-center text-sm text-light-70 dark:text-dark-70">
<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
<p>Copyright Peaceultime - 2024</p>
</div>
</div>
<div class="flex-1 flex items-baseline overflow-auto">
<slot></slot>
</div>
</template>

34
layouts/explorer.vue
View File

@ -1,23 +1,25 @@
<script setup lang="ts">
defineExpose({
navigation: true,
});
</script>
<template>
<div class="site-body">
<div class="site-body-left-column">
<div class="site-body-left-column-inner">
<div class="nav-view-outer">
<div class="nav-view">
<div class="mobile-slot desktop-hidden mobile-block">
<slot name="mobile"></slot>
</div>
<ExplorerNavigation></ExplorerNavigation>
</div>
<div class="bg-light-0 my-8 py-3 dark:bg-dark-0 top-0 z-40 w-96 lg:z-50 border-r border-light-30 dark:border-dark-30 flex flex-col justify-between">
<div class="relative bottom-6 flex flex-1 flex-col gap-4 px-6">
<div class="flex justify-between items-center">
<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
<div class="flex gap-4 items-center">
<ThemeSwitch />
<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
</div>
</div>
<div class="flex"><SearchView /></div>
<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
<hr class="border-light-35 dark:border-dark-35"/>
<ExplorerNavigation></ExplorerNavigation>
</div>
<div class="text-center text-sm text-light-70 dark:text-dark-70">
<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
<p>Copyright Peaceultime - 2024</p>
</div>
</div>
<div class="flex-1 flex items-baseline overflow-auto">
<slot></slot>
</div>
</template>

7
nuxt.config.ts
View File

@ -19,7 +19,6 @@ export default defineNuxtConfig({
colors: {
transparent: 'transparent',
current: 'currentColor',
accent: '#8a5cf5',
light: {
red: '#e93147',
orange: '#ec7500',
@ -63,7 +62,11 @@ export default defineNuxtConfig({
60: '#999999',
70: '#b3b3b3',
100: '#dadada',
}
},
accent: {
purple: '#8a5cf5',
blue: '#53aaf5',
},
}
}
}

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>

10
pages/index.vue
View File

@ -2,12 +2,8 @@
<Head>
<Title>Accueil</Title>
</Head>
<div class="site-body-center-column">
<div class="render-container">
<div class="not-found-container">
<ThemeIcon icon="logo" :width=128 :height=128 />
<div class="not-found-title">Coucou :) :) :) :)</div>
</div>
</div>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
<ThemeIcon icon="logo" :width=128 :height=128 />
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Coucou :) :) :) :)</div>
</div>
</template>