New useContent composable to store global navigation state. Fixes for Markdown and Canvas
This commit is contained in:
parent
031a51c2fe
commit
9515132659
2
app.vue
2
app.vue
|
|
@ -5,7 +5,7 @@
|
|||
<TooltipProvider>
|
||||
<NuxtLayout>
|
||||
<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full relative">
|
||||
<NuxtPage></NuxtPage>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
<Toaster v-model="list" />
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import type { Root } from 'hast';
|
|||
|
||||
const { content, proses, filter } = defineProps<{
|
||||
content: string
|
||||
proses?: Array<string | Component>
|
||||
proses?: Record<string, string | Component>
|
||||
filter?: string
|
||||
}>();
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ watch([node], () => {
|
|||
while(end < node.value.children.length)
|
||||
{
|
||||
end++;
|
||||
if(heading(node.value.children[end]) && headingRank(node.value.children[end])! >= rank)
|
||||
if(heading(node.value.children[end]) && headingRank(node.value.children[end])! <= rank)
|
||||
break;
|
||||
}
|
||||
data.value = { ...node.value, children: node.value.children.slice(start, end) };
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span :class="{'w-6 h-6 border-4 after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 border-2 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 border-[6px] after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}" class="rounded-full border-light-35 dark:border-dark-35 after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
|
||||
<span :class="{'w-6 h-6 after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}" class="after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import type { CanvasNode } from '~/types/canvas';
|
|||
|
||||
interface Props {
|
||||
node: CanvasNode;
|
||||
zoom: number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
|
@ -35,16 +34,9 @@ const colors = computed(() => {
|
|||
<div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
|
||||
<div :class="[colors.border]" class="border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex">
|
||||
<div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="colors.bg">
|
||||
<template v-if="node.type === 'group' || zoom > Math.min(0.4, 1000 / size)">
|
||||
<div v-if="node.text?.length > 0" class="flex items-center">
|
||||
<MarkdownRenderer :content="node.text" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex flex-1 justify-center items-center bg-light-30 dark:bg-dark-30">
|
||||
<Icon icon="radix-icons:text-align-left" class="w-8 h-8"/>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="node.text?.length > 0" class="flex items-center">
|
||||
<MarkdownRenderer :content="node.text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="node.type === 'group' && node.label !== undefined" :class="[colors.border]" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none">
|
||||
<div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none" v-if="canvas">
|
||||
<div>
|
||||
<CanvasNode v-for="node of canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
|
||||
<CanvasNode v-for="node of canvas.nodes" :key="node.id" :node="node" />
|
||||
</div>
|
||||
<template v-for="edge of canvas.edges">
|
||||
<div :key="edge.id" v-if="edge.label" class="absolute z-10"
|
||||
|
|
@ -11,17 +11,29 @@
|
|||
</template>
|
||||
<svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
|
||||
<CanvasEdge v-for="edge of canvas.edges" :key="edge.id"
|
||||
:path="path(getNode(canvas.nodes, edge.fromNode)!, edge.fromSide, getNode(canvas.nodes, edge.toNode)!, edge.toSide)"
|
||||
:path="getPath(getNode(canvas.nodes, edge.fromNode)!, edge.fromSide, getNode(canvas.nodes, edge.toNode)!, edge.toSide)"
|
||||
:color="edge.color" :label="edge.label" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { canvas, zoom } = defineProps<{
|
||||
canvas: CanvasContent
|
||||
zoom: number
|
||||
const { path } = defineProps<{
|
||||
path: string
|
||||
}>();
|
||||
|
||||
const { content, get } = useContent();
|
||||
const overview = computed(() => content.value.find(e => e.path === path));
|
||||
|
||||
const loading = ref(false);
|
||||
if(overview.value && !overview.value.content)
|
||||
{
|
||||
loading.value = true;
|
||||
await get(path);
|
||||
loading.value = false;
|
||||
}
|
||||
const canvas = computed(() => overview.value && overview.value.content ? JSON.parse(overview.value.content) as CanvasContent : undefined);
|
||||
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -71,7 +83,7 @@ function posFromDir(e: { minX: number, minY: number, maxX: number, maxY: number
|
|||
function getBbox(node: CanvasNode): { minX: number, minY: number, maxX: number, maxY: number } {
|
||||
return { minX: node.x, minY: node.y, maxX: node.x + node.width, maxY: node.y + node.height };
|
||||
}
|
||||
function path(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
|
||||
function getPath(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
|
||||
if(from === undefined || to === undefined)
|
||||
{
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -7,21 +7,15 @@ function cancelEvent(e: Event)
|
|||
|
||||
<script setup lang="ts">
|
||||
import { useDrag, useHover, usePinch, useWheel } from '@vueuse/gesture';
|
||||
import type { CanvasContent } from '~/types/canvas';
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
import { clamp } from '#shared/general.utils';
|
||||
|
||||
type CanvasOverview = any;
|
||||
const { overview } = defineProps<{
|
||||
overview: CanvasOverview
|
||||
}>();
|
||||
|
||||
const { data: canvas, status } = await useFetch(`/api/file/content/${encodeURIComponent(overview.path)}`, {
|
||||
transform: (input) => input && input.content ? JSON.parse(input?.content) as CanvasContent : undefined
|
||||
});
|
||||
|
||||
const { path } = defineProps<{ path: string }>();
|
||||
const { user } = useUserSession();
|
||||
const isOwner = computed(() => user.value?.id === overview.owner);
|
||||
const { content } = useContent();
|
||||
const overview = computed(() => content.value.find(e => e.path === path));
|
||||
|
||||
const isOwner = computed(() => user.value?.id === overview.value?.owner);
|
||||
|
||||
const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
|
||||
const canvasRef = useTemplateRef('canvasRef');
|
||||
|
|
@ -86,7 +80,7 @@ dark:border-dark-purple
|
|||
|
||||
*/
|
||||
|
||||
const cancelEvent = (e: Event) => e.preventDefault()
|
||||
/*const cancelEvent = (e: Event) => e.preventDefault()
|
||||
useHover(({ hovering }) => {
|
||||
if (!hovering) {
|
||||
//@ts-ignore
|
||||
|
|
@ -101,65 +95,61 @@ useHover(({ hovering }) => {
|
|||
document.addEventListener('gesturechange', cancelEvent)
|
||||
}, {
|
||||
domTarget: canvasRef,
|
||||
})
|
||||
});*/
|
||||
|
||||
const dragHandler = useDrag(({ delta: [x, y] }: { delta: number[] }) => {
|
||||
dispX.value += x / zoom.value;
|
||||
dispY.value += y / zoom.value;
|
||||
}, {
|
||||
domTarget: canvasRef,
|
||||
passive: true,
|
||||
});
|
||||
const wheelHandler = useWheel(({ delta: [x, y] }: { delta: number[] }) => {
|
||||
zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
|
||||
}, {
|
||||
domTarget: canvasRef,
|
||||
passive: true,
|
||||
});
|
||||
const pinchHandler = usePinch(({ offset: [z] }: { offset: number[] }) => {
|
||||
zoom.value = clamp(z / 2048, minZoom.value, 3);
|
||||
}, {
|
||||
domTarget: canvasRef,
|
||||
passive: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Loading v-if="status === 'pending'" />
|
||||
<div v-else-if="canvas">
|
||||
<div ref="canvasRef" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none" :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
|
||||
<div class="flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4">
|
||||
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
|
||||
<Tooltip message="Zoom avant" side="right">
|
||||
<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">
|
||||
<Icon icon="radix-icons:plus" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip message="Reset" side="right">
|
||||
<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">
|
||||
<Icon icon="radix-icons:reload" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip message="Tout contenir" side="right">
|
||||
<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">
|
||||
<Icon icon="radix-icons:corners" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip message="Zoom arrière" side="right">
|
||||
<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">
|
||||
<Icon icon="radix-icons:minus" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10" v-if="isOwner">
|
||||
<Tooltip message="Modifier" side="right">
|
||||
<NuxtLink :to="{ name: 'explore-edit', hash: '#' + overview.path }" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
|
||||
<Icon icon="radix-icons:pencil-1" />
|
||||
</NuxtLink>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div ref="canvasRef" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none" :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
|
||||
<div class="flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4">
|
||||
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
|
||||
<Tooltip message="Zoom avant" side="right">
|
||||
<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">
|
||||
<Icon icon="radix-icons:plus" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip message="Reset" side="right">
|
||||
<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">
|
||||
<Icon icon="radix-icons:reload" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip message="Tout contenir" side="right">
|
||||
<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">
|
||||
<Icon icon="radix-icons:corners" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip message="Zoom arrière" side="right">
|
||||
<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">
|
||||
<Icon icon="radix-icons:minus" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<CanvasRenderer :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}" :canvas="canvas" :zoom="zoom" />
|
||||
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10" v-if="isOwner">
|
||||
<Tooltip message="Modifier" side="right">
|
||||
<NuxtLink :to="{ name: 'explore-edit', hash: '#' + path }" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
|
||||
<Icon icon="radix-icons:pencil-1" />
|
||||
</NuxtLink>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}" >
|
||||
<CanvasRenderer :path="path" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,26 +1,38 @@
|
|||
<script setup lang="ts">
|
||||
type MarkdownOverview = any;
|
||||
const { overview } = defineProps<{
|
||||
overview: MarkdownOverview
|
||||
|
||||
const { path } = defineProps<{
|
||||
path: string
|
||||
filter?: string,
|
||||
popover?: boolean
|
||||
}>();
|
||||
|
||||
const { data: content, status } = await useFetch(`/api/file/content/${encodeURIComponent(overview.path)}`, { watch: [overview] });
|
||||
|
||||
const { user } = useUserSession();
|
||||
const isOwner = computed(() => user.value?.id === overview.owner);
|
||||
const { content, get } = useContent();
|
||||
const overview = computed(() => content.value.find(e => e.path === path));
|
||||
const isOwner = computed(() => user.value?.id === overview.value?.owner);
|
||||
|
||||
const loading = ref(false);
|
||||
if(overview.value && !overview.value.content)
|
||||
{
|
||||
loading.value = true;
|
||||
await get(path);
|
||||
loading.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
|
||||
<Loading v-if="status === 'pending'" />
|
||||
<template v-else>
|
||||
<div class="flex flex-1 flex-row justify-between items-center">
|
||||
<Loading v-if="loading" />
|
||||
<template v-else-if="overview">
|
||||
<div v-if="!popover" class="flex flex-1 flex-row justify-between items-center">
|
||||
<ProseH1>{{ overview.title }}</ProseH1>
|
||||
<div class="flex gap-4">
|
||||
<NuxtLink :href="{ name: 'explore-edit', hash: '#' + overview.path }" v-if="isOwner"><Button>Modifier</Button></NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<MarkdownRenderer v-if="content" :content="content.content" />
|
||||
<MarkdownRenderer v-if="overview.content" :content="overview.content" :filter="filter" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div><ProseH2>Impossible d'afficher le contenu demandé</ProseH2></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,16 +1,14 @@
|
|||
<template>
|
||||
<NuxtLink class="text-accent-blue inline-flex items-center"
|
||||
:to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: hash } : href" :class="class">
|
||||
<HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" @open="load" :disabled="!overview">
|
||||
<NuxtLink class="text-accent-blue inline-flex items-center" :to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: hash } : href" :class="class">
|
||||
<HoverCard nuxt-client class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" :disabled="!overview">
|
||||
<template #content>
|
||||
<Loading v-if="loading" />
|
||||
<MarkdownRenderer v-else-if="overview?.type === 'markdown'" class="px-10" :content="content!.content" :filter="hash.substring(1)" />
|
||||
<Canvas v-else-if="overview?.type === 'canvas'" class="w-[600px] h-[600px] relative" :canvas="JSON.parse(content!.content)" />
|
||||
<Markdown v-if="overview?.type === 'markdown'" class="!px-10" :path="pathname" :filter="hash.substring(1)" popover />
|
||||
<template v-else-if="overview?.type === 'canvas'"><div class="w-[600px] h-[600px] relative"><Canvas :path="pathname" /></div></template>
|
||||
</template>
|
||||
<template #default>
|
||||
<span>
|
||||
<slot v-bind="$attrs"></slot>
|
||||
<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
|
||||
</template>
|
||||
</span>
|
||||
</HoverCard>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -25,37 +23,8 @@ const { href } = defineProps<{
|
|||
class?: string
|
||||
}>();
|
||||
|
||||
const { hash, pathname, protocol } = parseURL(href);
|
||||
const overview = ref<{
|
||||
path: string;
|
||||
owner: number;
|
||||
title: string;
|
||||
type: "file" | "folder" | "markdown" | "canvas";
|
||||
navigable: boolean;
|
||||
private: boolean;
|
||||
order: number;
|
||||
visit: number;
|
||||
}>(), content = ref<{
|
||||
content: string;
|
||||
}>(), loading = ref(false), fetched = ref(false);
|
||||
const { hash, pathname } = parseURL(href);
|
||||
|
||||
if(!!pathname && !protocol)
|
||||
{
|
||||
try {
|
||||
overview.value = await $fetch(`/api/file/overview/${encodeURIComponent(pathname)}`);
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
async function load()
|
||||
{
|
||||
if(fetched.value === true)
|
||||
return;
|
||||
|
||||
fetched.value = true;
|
||||
loading.value = true;
|
||||
try {
|
||||
content.value = await $fetch(`/api/file/content/${encodeURIComponent(pathname)}`);
|
||||
} catch(e) { }
|
||||
loading.value = false;
|
||||
}
|
||||
const { content } = useContent();
|
||||
const overview = computed(() => content.value.find(e => e.path === pathname));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import type { ExploreContent, ContentComposable, TreeItem } from '~/types/content';
|
||||
|
||||
const useContentState = () => useState<ExploreContent[]>('content', () => []);
|
||||
|
||||
export function useContent(): ContentComposable {
|
||||
const contentState = useContentState();
|
||||
return {
|
||||
content: contentState,
|
||||
tree: computed(() => {
|
||||
const arr: TreeItem[] = [];
|
||||
for(const element of contentState.value)
|
||||
{
|
||||
addChild(arr, element);
|
||||
}
|
||||
return arr;
|
||||
}),
|
||||
fetch,
|
||||
get,
|
||||
}
|
||||
}
|
||||
|
||||
async function fetch(force: boolean) {
|
||||
const content = useContentState();
|
||||
if(content.value.length === 0 || force)
|
||||
content.value = await $fetch('/api/file/overview');
|
||||
}
|
||||
|
||||
async function get(path: string) {
|
||||
const content = useContentState()
|
||||
const value = content.value;
|
||||
const item = value.find(e => e.path === path);
|
||||
if(item)
|
||||
{
|
||||
item.content = await $fetch(`/api/file/content/${encodeURIComponent(path)}`);
|
||||
}
|
||||
|
||||
content.value = value;
|
||||
}
|
||||
|
||||
function addChild(arr: TreeItem[], e: ExploreContent): void {
|
||||
const parent = arr.find(f => e.path.startsWith(f.path));
|
||||
|
||||
if(parent)
|
||||
{
|
||||
if(!parent.children)
|
||||
parent.children = [];
|
||||
|
||||
addChild(parent.children, e);
|
||||
}
|
||||
else
|
||||
{
|
||||
arr.push({ ...e });
|
||||
arr.sort((a, b) => {
|
||||
if(a.order !== b.order)
|
||||
return a.order - b.order;
|
||||
return a.title.localeCompare(b.title);
|
||||
});
|
||||
}
|
||||
}
|
||||
BIN
db.sqlite-shm
BIN
db.sqlite-shm
Binary file not shown.
BIN
db.sqlite-wal
BIN
db.sqlite-wal
Binary file not shown.
|
|
@ -89,10 +89,10 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
import type { NavigationTreeItem } from '~/server/api/navigation.get';
|
||||
import { iconByType } from '#shared/general.utils';
|
||||
import type { DropdownOption } from '~/components/base/DropdownMenu.vue';
|
||||
import { hasPermissions } from '~/shared/auth.util';
|
||||
import type { TreeItem } from '~/types/content';
|
||||
|
||||
const options = ref<DropdownOption[]>([{
|
||||
type: 'item',
|
||||
|
|
@ -114,13 +114,10 @@ watch(route, () => {
|
|||
open.value = false;
|
||||
});
|
||||
|
||||
const { data: pages } = await useLazyFetch('/api/navigation', {
|
||||
transform: transform,
|
||||
watch: [useRouter().currentRoute]
|
||||
});
|
||||
|
||||
function transform(list: NavigationTreeItem[] | undefined): NavigationTreeItem[] | undefined
|
||||
const { tree } = useContent();
|
||||
const pages = computed(() => transform(tree.value));
|
||||
function transform(list: TreeItem[] | undefined): TreeItem[] | undefined
|
||||
{
|
||||
return list?.map(e => ({ ...e, open: path.value?.startsWith(e.path), children: transform(e.children) }));
|
||||
return list?.filter(e => e.navigable)?.map(e => ({ ...e, open: path.value?.startsWith(e.path), children: transform(e.children) }));
|
||||
}
|
||||
</script>
|
||||
|
|
@ -34,5 +34,8 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
|
|||
}
|
||||
}
|
||||
|
||||
const { fetch: fetchContent } = useContent();
|
||||
await fetchContent(false);
|
||||
|
||||
return;
|
||||
});
|
||||
|
|
@ -157,6 +157,9 @@ export default defineNuxtConfig({
|
|||
sources: ['/api/__sitemap__/urls']
|
||||
},
|
||||
experimental: {
|
||||
componentIslands: {
|
||||
selectiveClient: true,
|
||||
},
|
||||
defaults: {
|
||||
nuxtLink: {
|
||||
prefetchOn: {
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -9,9 +9,9 @@
|
|||
"dependencies": {
|
||||
"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
|
||||
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
|
||||
"@iconify/vue": "^4.1.2",
|
||||
"@iconify/vue": "^4.2.0",
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@nuxtjs/sitemap": "^7.0.0",
|
||||
"@nuxtjs/sitemap": "^7.0.1",
|
||||
"@nuxtjs/tailwindcss": "^6.12.2",
|
||||
"@vueuse/gesture": "^2.0.0",
|
||||
"@vueuse/math": "^11.3.0",
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
"nodemailer": "^6.9.16",
|
||||
"nuxt": "^3.14.1592",
|
||||
"nuxt-security": "^2.1.5",
|
||||
"radix-vue": "^1.9.10",
|
||||
"radix-vue": "^1.9.11",
|
||||
"rehype-raw": "^7.0.0",
|
||||
"remark-breaks": "^4.0.0",
|
||||
"remark-frontmatter": "^5.0.0",
|
||||
|
|
@ -39,15 +39,15 @@
|
|||
"unist-util-visit": "^5.0.0",
|
||||
"vue": "latest",
|
||||
"vue-router": "latest",
|
||||
"zod": "^3.23.8"
|
||||
"zod": "^3.24.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.1.14",
|
||||
"@types/lodash.capitalize": "^4.2.9",
|
||||
"@types/nodemailer": "^6.4.17",
|
||||
"@types/unist": "^3.0.3",
|
||||
"better-sqlite3": "^11.6.0",
|
||||
"bun-types": "^1.1.38",
|
||||
"better-sqlite3": "^11.7.0",
|
||||
"bun-types": "^1.1.42",
|
||||
"drizzle-kit": "^0.26.2",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"rehype-stringify": "^10.0.1"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@ async function fetch()
|
|||
|
||||
if(schema)
|
||||
{
|
||||
console.log(payload);
|
||||
const parsedPayload = schema.parse(payload);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,12 @@
|
|||
<template>
|
||||
<div v-if="status === 'pending'" class="flex">
|
||||
<Head>
|
||||
<Title>d[any] - Chargement</Title>
|
||||
</Head>
|
||||
<Loading />
|
||||
</div>
|
||||
<div class="flex flex-1 justify-start items-start" v-else-if="overview">
|
||||
<div class="flex flex-1 justify-start items-start" v-if="overview">
|
||||
<Head>
|
||||
<Title>d[any] - {{ overview.title }}</Title>
|
||||
</Head>
|
||||
<Markdown v-if="overview.type === 'markdown'" :overview="overview" />
|
||||
<Canvas v-else-if="overview.type === 'canvas'" :overview="overview" />
|
||||
<Markdown v-if="overview.type === 'markdown'" :path="path" />
|
||||
<Canvas v-else-if="overview.type === 'canvas'" :path="path" />
|
||||
<ProseH2 v-else class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
|
||||
</div>
|
||||
<div v-else-if="status === 'error'">
|
||||
<Head>
|
||||
<Title>d[any] - Erreur</Title>
|
||||
</Head>
|
||||
<span>{{ error?.message }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Head>
|
||||
<Title>d[any] - Erreur</Title>
|
||||
|
|
@ -31,5 +19,6 @@
|
|||
const route = useRouter().currentRoute;
|
||||
const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
|
||||
|
||||
const { data: overview, status, error } = await useFetch(`/api/file/overview/${encodeURIComponent(path.value)}`, { watch: [route, path], });
|
||||
const { content } = useContent();
|
||||
const overview = computed(() => content.value.find(e => e.path === path.value));
|
||||
</script>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<DraggableTree class="ps-4 pe-2 xl:text-base text-sm"
|
||||
:items="navigation ?? undefined" :get-key="(item: Partial<ProjectExtendedItem>) => item.path !== undefined ? getPath(item as ProjectExtendedItem) : ''" @updateTree="drop"
|
||||
:items="navigation ?? undefined" :get-key="(item: Partial<TreeItemEditable>) => item.path !== undefined ? getPath(item as TreeItemEditable) : ''" @updateTree="drop"
|
||||
v-model="selected" :defaultExpanded="defaultExpanded" >
|
||||
<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, item }">
|
||||
<div class="flex flex-1 items-center px-2 max-w-full pe-4" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level - 0.5}em` }">
|
||||
|
|
@ -175,20 +175,16 @@
|
|||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
|
||||
import { parsePath } from '#shared/general.utils';
|
||||
import type { ProjectItem } from '~/schemas/project';
|
||||
import type { FileType } from '~/schemas/file';
|
||||
import type { FileType, TreeItem } from '~/types/content';
|
||||
import { iconByType } from '#shared/general.utils';
|
||||
import FakeA from '~/components/prose/FakeA.vue';
|
||||
|
||||
interface ProjectExtendedItem extends ProjectItem
|
||||
export interface TreeItemEditable extends TreeItem
|
||||
{
|
||||
customPath: boolean
|
||||
content?: string
|
||||
children?: ProjectExtendedItem[]
|
||||
}
|
||||
interface ProjectExtended
|
||||
{
|
||||
items: ProjectExtendedItem[]
|
||||
parent: string;
|
||||
name: string;
|
||||
customPath: boolean;
|
||||
children?: TreeItemEditable[];
|
||||
}
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -202,27 +198,9 @@ const open = ref(true);
|
|||
const toaster = useToast();
|
||||
const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
|
||||
|
||||
const { data: project } = await useFetch(`/api/project`, {
|
||||
transform: (project) => {
|
||||
if(project)
|
||||
(project as ProjectExtended).items = transform(project.items)!;
|
||||
|
||||
return project as ProjectExtended;
|
||||
}
|
||||
});
|
||||
const navigation = computed<ProjectExtendedItem[] | undefined>({
|
||||
get: () => project.value?.items,
|
||||
set: (value) => {
|
||||
const proj = project.value;
|
||||
edited.value = true;
|
||||
|
||||
if(proj && value)
|
||||
proj.items = value;
|
||||
|
||||
project.value = proj;
|
||||
}
|
||||
});
|
||||
const selected = ref<ProjectExtendedItem>(), edited = ref(false);
|
||||
const { content: complete, tree: project } = useContent();
|
||||
const navigation = ref<TreeItemEditable[]>(transform(JSON.parse(JSON.stringify(project.value)))!);
|
||||
const selected = ref<TreeItemEditable>(), edited = ref(false);
|
||||
const contentStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), contentError = ref<string>();
|
||||
|
||||
watch(selected, async (value, old) => {
|
||||
|
|
@ -242,7 +220,7 @@ watch(selected, async (value, old) => {
|
|||
}
|
||||
else
|
||||
{
|
||||
selected.value.content = (await $fetch(`/api/file/content/${encodeURIComponent(selected.value.path)}`, { query: { type: 'editing'} }))?.content;
|
||||
selected.value.content = (await $fetch(`/api/file/content/${encodeURIComponent(selected.value.path)}`, { query: { type: 'editing'} }));
|
||||
contentStatus.value = 'success';
|
||||
}
|
||||
|
||||
|
|
@ -282,7 +260,7 @@ useShortcuts({
|
|||
})
|
||||
|
||||
const tree = {
|
||||
remove(data: ProjectExtendedItem[], id: string): ProjectExtendedItem[] {
|
||||
remove(data: TreeItemEditable[], id: string): TreeItemEditable[] {
|
||||
return data
|
||||
.filter(item => getPath(item) !== id)
|
||||
.map((item) => {
|
||||
|
|
@ -295,7 +273,7 @@ const tree = {
|
|||
return item;
|
||||
});
|
||||
},
|
||||
insertBefore(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
|
||||
insertBefore(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
|
||||
return data.flatMap((item) => {
|
||||
if (getPath(item) === targetId)
|
||||
return [newItem, item];
|
||||
|
|
@ -309,7 +287,7 @@ const tree = {
|
|||
return item;
|
||||
});
|
||||
},
|
||||
insertAfter(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
|
||||
insertAfter(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
|
||||
return data.flatMap((item) => {
|
||||
if (getPath(item) === targetId)
|
||||
return [item, newItem];
|
||||
|
|
@ -324,7 +302,7 @@ const tree = {
|
|||
return item;
|
||||
});
|
||||
},
|
||||
insertChild(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
|
||||
insertChild(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
|
||||
return data.flatMap((item) => {
|
||||
if (getPath(item) === targetId) {
|
||||
// already a parent: add as first child
|
||||
|
|
@ -345,7 +323,7 @@ const tree = {
|
|||
};
|
||||
});
|
||||
},
|
||||
find(data: ProjectExtendedItem[], itemId: string): ProjectExtendedItem | undefined {
|
||||
find(data: TreeItemEditable[], itemId: string): TreeItemEditable | undefined {
|
||||
for (const item of data) {
|
||||
if (getPath(item) === itemId)
|
||||
return item;
|
||||
|
|
@ -357,7 +335,7 @@ const tree = {
|
|||
}
|
||||
}
|
||||
},
|
||||
search(data: ProjectExtendedItem[], prop: keyof ProjectExtendedItem, value: string): ProjectExtendedItem[] {
|
||||
search(data: TreeItemEditable[], prop: keyof TreeItemEditable, value: string): TreeItemEditable[] {
|
||||
const arr = [];
|
||||
|
||||
for (const item of data)
|
||||
|
|
@ -377,7 +355,7 @@ const tree = {
|
|||
targetId,
|
||||
parentIds = [],
|
||||
}: {
|
||||
current: ProjectExtendedItem[]
|
||||
current: TreeItemEditable[]
|
||||
targetId: string
|
||||
parentIds?: string[]
|
||||
}): string[] | undefined {
|
||||
|
|
@ -394,7 +372,7 @@ const tree = {
|
|||
return nested;
|
||||
}
|
||||
},
|
||||
hasChildren(item: ProjectExtendedItem): boolean {
|
||||
hasChildren(item: TreeItemEditable): boolean {
|
||||
return (item.children ?? []).length > 0;
|
||||
},
|
||||
}
|
||||
|
|
@ -408,7 +386,7 @@ function add(type: FileType): void
|
|||
|
||||
const news = [...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
|
||||
const title = `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`;
|
||||
const item: ProjectExtendedItem = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: type === 'folder' ? [] : undefined, customPath: false, content: type === 'markdown' ? '' : undefined };
|
||||
const item: TreeItemEditable = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: type === 'folder' ? [] : undefined, customPath: false, content: type === 'markdown' ? '' : undefined, owner: -1, timestamp: new Date(), visit: 0 };
|
||||
|
||||
if(!selected.value)
|
||||
{
|
||||
|
|
@ -424,7 +402,7 @@ function add(type: FileType): void
|
|||
navigation.value = tree.insertAfter(navigation.value, getPath(selected.value), item);
|
||||
}
|
||||
}
|
||||
function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectExtendedItem[] | undefined {
|
||||
function updateTree(instruction: Instruction, itemId: string, targetId: string) : TreeItemEditable[] | undefined {
|
||||
if(!navigation.value)
|
||||
return;
|
||||
|
||||
|
|
@ -478,15 +456,25 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
|
|||
|
||||
return navigation.value;
|
||||
}
|
||||
function transform(items: ProjectItem[] | undefined): ProjectExtendedItem[] | undefined
|
||||
function transform(items: TreeItem[] | undefined): TreeItemEditable[] | undefined
|
||||
{
|
||||
return items?.map(e => ({...e, customPath: e.name !== parsePath(e.title), children: transform(e.children)}));
|
||||
return items?.map(e => ({
|
||||
...e,
|
||||
parent: e.path.substring(0, e.path.lastIndexOf('/')),
|
||||
name: e.path.substring(e.path.lastIndexOf('/') + 1),
|
||||
customPath: e.path.substring(e.path.lastIndexOf('/') + 1) !== parsePath(e.title),
|
||||
children: transform(e.children)
|
||||
})) as TreeItemEditable[] | undefined;
|
||||
}
|
||||
function flatten(items: TreeItemEditable[] | undefined): TreeItemEditable[]
|
||||
{
|
||||
return items?.flatMap(e => [e, ...flatten(e.children)]) ?? [];
|
||||
}
|
||||
function drop(instruction: Instruction, itemId: string, targetId: string)
|
||||
{
|
||||
navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value ?? [];
|
||||
}
|
||||
function rebuildPath(tree: ProjectExtendedItem[] | null | undefined, parentPath: string)
|
||||
function rebuildPath(tree: TreeItemEditable[] | null | undefined, parentPath: string)
|
||||
{
|
||||
if(!tree)
|
||||
return;
|
||||
|
|
@ -500,9 +488,9 @@ async function save(redirect: boolean): Promise<void>
|
|||
{
|
||||
saveStatus.value = 'pending';
|
||||
try {
|
||||
await $fetch(`/api/project`, {
|
||||
const result = await $fetch(`/api/project`, {
|
||||
method: 'post',
|
||||
body: project.value,
|
||||
body: navigation.value,
|
||||
});
|
||||
saveStatus.value = 'success';
|
||||
edited.value = false;
|
||||
|
|
@ -513,6 +501,7 @@ async function save(redirect: boolean): Promise<void>
|
|||
type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
|
||||
});
|
||||
|
||||
complete.value = result;
|
||||
if(redirect) router.go(-1);
|
||||
} catch(e: any) {
|
||||
toaster.add({
|
||||
|
|
@ -521,7 +510,7 @@ async function save(redirect: boolean): Promise<void>
|
|||
saveStatus.value = 'error';
|
||||
}
|
||||
}
|
||||
function getPath(item: ProjectExtendedItem): string
|
||||
function getPath(item: TreeItemEditable): string
|
||||
{
|
||||
return [item.parent, parsePath(item.customPath ? item.name : item.title)].filter(e => !!e).join('/');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,11 +15,9 @@ const baseItem = z.object({
|
|||
export const item: z.ZodType<ProjectItem> = baseItem.extend({
|
||||
children: z.lazy(() => item.array().optional()),
|
||||
});
|
||||
export const project = z.object({
|
||||
items: z.array(item),
|
||||
});
|
||||
export const project = z.array(item);
|
||||
|
||||
export type Project = z.infer<typeof project>;
|
||||
export type ProjectItem = z.infer<typeof baseItem> & {
|
||||
type Project = z.infer<typeof project>;
|
||||
type ProjectItem = z.infer<typeof baseItem> & {
|
||||
children?: ProjectItem[]
|
||||
};
|
||||
|
|
@ -50,7 +50,7 @@ export default defineEventHandler(async (e) => {
|
|||
content.content = convertFromStorableLinks(content.content);
|
||||
}
|
||||
|
||||
return { content: content.content };
|
||||
return content.content;
|
||||
}
|
||||
|
||||
setResponseStatus(e, 404);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import useDatabase from '~/composables/useDatabase';
|
||||
import { getTableColumns } from 'drizzle-orm';
|
||||
import { explorerContentTable } from '~/db/schema';
|
||||
|
||||
export default defineEventHandler(async (e) => {
|
||||
const { user } = await getUserSession(e);
|
||||
|
||||
const db = useDatabase();
|
||||
const { content: _, ...columns } = getTableColumns(explorerContentTable);
|
||||
const content = db.select(columns).from(explorerContentTable).all();
|
||||
|
||||
content.sort((a, b) => {
|
||||
return a.path.split('/').length - b.path.split('/').length;
|
||||
});
|
||||
|
||||
if(content.length > 0)
|
||||
{
|
||||
for(const idx in content)
|
||||
{
|
||||
const item = content[idx];
|
||||
if(!!item.private && (user?.id ?? -1) !== item.owner)
|
||||
{
|
||||
delete content[idx];
|
||||
continue;
|
||||
}
|
||||
|
||||
const parent = item.path.includes('/') ? item.path.substring(0, item.path.lastIndexOf('/')) : undefined;
|
||||
|
||||
if(parent && !content.find(e => e && e.path === parent))
|
||||
{
|
||||
delete content[idx];
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
return content.filter(e => !!e);
|
||||
}
|
||||
|
||||
setResponseStatus(e, 404);
|
||||
return;
|
||||
});
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import { hasPermissions } from "#shared/auth.util";
|
||||
import useDatabase from '~/composables/useDatabase';
|
||||
import { explorerContentTable } from '~/db/schema';
|
||||
import { project, type ProjectItem } from '~/schemas/project';
|
||||
import { project } from '~/schemas/project';
|
||||
import { parsePath } from "#shared/general.utils";
|
||||
import { eq, getTableColumns, sql } from "drizzle-orm";
|
||||
import type { ExploreContent } from "~/types/content";
|
||||
import type { TreeItemEditable } from "~/pages/explore/edit/index.vue";
|
||||
|
||||
export default defineEventHandler(async (e) => {
|
||||
const { user } = await getUserSession(e);
|
||||
|
|
@ -20,7 +22,7 @@ export default defineEventHandler(async (e) => {
|
|||
throw body.error;
|
||||
}
|
||||
|
||||
const items = buildOrder(body.data.items) as Array<ProjectItem & { match?: number }>;
|
||||
const items = buildOrder(body.data) as Array<TreeItemEditable & { match?: number }>;
|
||||
|
||||
const db = useDatabase();
|
||||
const { ...cols } = getTableColumns(explorerContentTable);
|
||||
|
|
@ -78,6 +80,19 @@ export default defineEventHandler(async (e) => {
|
|||
tx.delete(explorerContentTable).where(eq(explorerContentTable.path, full[i].path)).run();
|
||||
}
|
||||
});
|
||||
|
||||
return items.map(e => ({
|
||||
path: e.path,
|
||||
owner: e.owner,
|
||||
title: e.title,
|
||||
type: e.type,
|
||||
content: e.content,
|
||||
navigable: e.navigable,
|
||||
private: e.private,
|
||||
order: e.order,
|
||||
visit: e.visit,
|
||||
timestamp: e.timestamp,
|
||||
})) as ExploreContent[];
|
||||
});
|
||||
|
||||
function buildOrder(items: ProjectItem[]): ProjectItem[]
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@ export default defineEventHandler(async (e) => {
|
|||
throw body.error;
|
||||
|
||||
const db = useDatabase();
|
||||
console.log(body.data.oldPassword, await Bun.password.hash(body.data.oldPassword));
|
||||
const check = db.select({ hash: usersTable.hash }).from(usersTable).where(eq(usersTable.id, session.user.id)).get();
|
||||
|
||||
if(!check || !check.hash)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import useDatabase from "~/composables/useDatabase";
|
||||
import { extname, basename } from 'node:path';
|
||||
import type { FileType } from '~/types/api';
|
||||
import type { FileType } from '~/types/content';
|
||||
import type { CanvasColor, CanvasContent } from "~/types/canvas";
|
||||
import { explorerContentTable } from "~/db/schema";
|
||||
import { convertToStorableLinks } from "../api/file.post";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import useDatabase from "~/composables/useDatabase";
|
||||
import type { FileType } from '~/types/api';
|
||||
import type { FileType } from '~/types/content';
|
||||
import { explorerContentTable } from "~/db/schema";
|
||||
import { eq, ne } from "drizzle-orm";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { FileType } from "~/schemas/file";
|
||||
import type { FileType } from '~/types/content';
|
||||
|
||||
export function unifySlug(slug: string | string[]): string
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import type { FileType } from '~/types/content';
|
||||
|
||||
export interface SuccessHandler
|
||||
{
|
||||
success: true;
|
||||
|
|
@ -25,9 +27,7 @@ export interface Navigation {
|
|||
children?: Navigation[];
|
||||
}
|
||||
export type FileMetadata = Record<string, boolean | string | number>;
|
||||
export type FileType = 'markdown' | 'canvas' | 'file' | 'folder';
|
||||
export interface File {
|
||||
project: number;
|
||||
path: string;
|
||||
owner: number;
|
||||
title: string;
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ export interface UserRawData {
|
|||
}
|
||||
|
||||
export interface UserExtendedData {
|
||||
signin: Date;
|
||||
lastTimestamp: Date;
|
||||
signin: string;
|
||||
lastTimestamp: string;
|
||||
logCount: number;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import { explorerContentTable } from "~/db/schema";
|
||||
import type { CanvasContent } from "./canvas";
|
||||
|
||||
export type FileType = typeof explorerContentTable.$inferSelect.type;
|
||||
export type Overview = Omit<typeof explorerContentTable.$inferSelect, 'content'>;
|
||||
export type Content = { content: string };
|
||||
export type ExploreContent= Overview & Partial<Content>;
|
||||
export type TreeItem = ExploreContent & { children?: TreeItem[] };
|
||||
|
||||
export interface ContentComposable {
|
||||
content: Ref<ExploreContent[]>
|
||||
tree: ComputedRef<TreeItem[]>
|
||||
/**
|
||||
* Fetch the overview of every content from the server.
|
||||
*/
|
||||
fetch: (force: boolean) => Promise<void>
|
||||
/**
|
||||
* Get the given content from the server.
|
||||
*/
|
||||
get: (path: string) => Promise<void>
|
||||
}
|
||||
|
||||
export type MarkdownContent = string;
|
||||
export type FileContent = any;
|
||||
export type FolderContent = null;
|
||||
|
||||
export interface ContentTypeMap
|
||||
{
|
||||
markdown: MarkdownContent;
|
||||
canvas: CanvasContent;
|
||||
file: FileContent;
|
||||
folder: FolderContent;
|
||||
}
|
||||
Loading…
Reference in New Issue