Add user deletion, ProseA hover cards, Canvas

This commit is contained in:
2024-11-10 22:29:59 +01:00
parent 057efb848c
commit 42658558c5
23 changed files with 476 additions and 100 deletions

View File

@@ -1,50 +1,60 @@
<template>
<span class="text-accent-blue inline-flex items-center cursor-pointer hover:text-opacity-85"><slot v-bind="$attrs"></slot></span>
<!-- <Suspense suspensible>
<NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
:to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
<PreviewContent :project="project" :path="data[0].path" :anchor="hash">
<template #default>
<slot v-bind="$attrs"></slot>
<Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
:icon="`icons/link-${data[0].type.toLowerCase()}`" />
<NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
:to="{ name: 'explore-path', params: { path: data[0].path }, hash: hash }" :class="class">
<HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': data[0].type === 'canvas'}">
<template #content>
<template v-if="data[0].type === 'markdown'">
<div class="px-10">
<Markdown :content="data[0].content" />
</div>
</template>
</PreviewContent>
</NuxtLink>
<NuxtLink no-prefetch v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
<slot v-bind="$attrs"></slot>
<Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
:icon="`icons/link-${data[0].type.toLowerCase()}`" />
</NuxtLink>
<slot :class="class" v-else v-bind="$attrs"></slot>
</Suspense> -->
<template v-else-if="data[0].type === 'canvas'">
<div class="w-[600px] h-[600px] relative">
<Canvas :canvas="JSON.parse(data[0].content)" />
</div>
</template>
</template>
<template #default>
<slot v-bind="$attrs"></slot>
<Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'markdown'" :icon="iconByType[data[0].type]" />
</template>
</HoverCard>
</NuxtLink>
<NuxtLink no-prefetch v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
<slot v-bind="$attrs"></slot>
<Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'markdown'" :height="20" :width="20"
:icon="`icons/link-${data[0].type.toLowerCase()}`" />
</NuxtLink>
<slot :class="class" v-else v-bind="$attrs"></slot>
</template>
<!--<script setup lang="ts">
<script setup lang="ts">
import { parseURL } from 'ufo';
import { Icon } from '@iconify/vue/dist/iconify.js';
const props = defineProps({
href: {
type: String,
required: false,
},
class: {
type: String,
required: false,
}
});
const iconByType: Record<string, string> = {
'folder': 'circum:folder-on',
'canvas': 'ph:graph-light',
'file': 'radix-icons:file',
}
const { href } = defineProps<{
href: string
class?: string
}>();
const route = useRoute();
const { hash, pathname, protocol } = parseURL(props.href);
const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
const data = ref();
const { hash, pathname, protocol } = parseURL(href);
const data = ref(), loading = ref(false);
if(!!pathname && !protocol)
{
data.value = await $fetch(`/api/project/${project.value}/file`, {
query: {
search: `%${pathname}`
},
ignoreResponseError: true,
});
loading.value = true;
try {
data.value = await $fetch(`/api/file`, {
query: {
search: `%${pathname}`
},
});
} catch(e) { }
loading.value = false;
}
</script>-->
</script>

View File

@@ -162,17 +162,14 @@ blockquote:empty
@apply w-6;
@apply h-6;
@apply stroke-2;
}
.callout-title
{
@apply flex;
@apply items-center;
@apply gap-2;
@apply float-start;
@apply me-2;
}
.callout-title-inner
{
@apply inline-block;
@apply block;
@apply font-bold;
@apply ps-8;
}
.callout > p
{

View File

@@ -1,5 +1,5 @@
<template>
<h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2 relative sm:right-8 right-4">
<h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2 relative sm:right-4 right-2">
<slot />
</h2>
</template>