Fix content read pages and proses getting content. Start working on CanvasEditor.

This commit is contained in:
Clément Pons
2025-04-01 17:23:26 +02:00
parent 1d41514b26
commit 6100fd9411
7 changed files with 222 additions and 88 deletions

View File

@@ -1,10 +1,11 @@
import { dom, icon, type NodeChildren, type Node, type NodeProperties, type Class, mergeClasses } from "./dom.util";
import { dom, icon, type NodeChildren, type Node, type NodeProperties, type Class, mergeClasses } from "#shared/dom.util";
import { parseURL } from 'ufo';
import render from "./markdown.util";
import render from "#shared/markdown.util";
import { popper } from "#shared/floating.util";
import { Canvas } from "./canvas.util";
import { Content, iconByType, type LocalContent } from "./content.util";
import { Canvas } from "#shared/canvas.util";
import { Content, iconByType, type LocalContent } from "#shared/content.util";
import type { RouteLocationAsRelativeTyped, RouteMapGeneric } from "vue-router";
import { unifySlug } from "#shared/general.util";
export type CustomProse = (properties: any, children: NodeChildren) => Node;
export type Prose = { class: string } | { custom: CustomProse };
@@ -12,7 +13,7 @@ export const tag: Prose = {
custom(properties, children) {
const tag = properties.tag as string;
const el = dom('span', { class: "before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30" }, children);
const overview = Content.overview('tags');
const overview = Content.getFromPath('tags');
let rendered = false;
@@ -28,8 +29,8 @@ export const tag: Prose = {
onShow(content: HTMLDivElement) {
if(!rendered)
{
Content.content('tags').then((overview) => {
content.replaceChild(render((overview as LocalContent<'markdown'>).content ?? '', tag, { class: 'max-w-[600px] max-h-[600px] w-full overflow-auto py-4 px-6' }), content.children[0]);
Content.getContent(overview.id).then((_content) => {
content.replaceChild(render((_content as LocalContent<'markdown'>).content ?? '', tag, { class: 'max-w-[600px] max-h-[600px] w-full overflow-auto py-4 px-6' }), content.children[0]);
});
rendered = true;
}
@@ -46,7 +47,7 @@ export const a: Prose = {
const { hash, pathname } = parseURL(href);
const router = useRouter();
const overview = Content.overview(pathname === '' && hash.length > 0 ? router.currentRoute.value.params.path[0] : pathname);
const overview = Content.getFromPath(pathname === '' && hash.length > 0 ? unifySlug(router.currentRoute.value.params.path) : pathname);
const link = overview ? { name: 'explore-path', params: { path: overview.path }, hash: hash } : href, nav = router.resolve(link);
@@ -76,14 +77,15 @@ export const a: Prose = {
onShow(content: HTMLDivElement) {
if(!rendered)
{
Content.content(overview.path).then((overview) => {
if(overview?.type === 'markdown')
console.log('')
Content.getContent(overview.id).then((_content) => {
if(_content?.type === 'markdown')
{
content.replaceChild(render((overview as LocalContent<'markdown'>).content ?? '', hash.length > 0 ? hash.substring(1) : undefined, { class: 'min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto py-4 px-6' }), content.children[0]);
content.replaceChild(render((_content as LocalContent<'markdown'>).content ?? '', hash.length > 0 ? hash.substring(1) : undefined, { class: 'min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto py-4 px-6' }), content.children[0]);
}
if(overview?.type === 'canvas')
if(_content?.type === 'canvas')
{
const canvas = new Canvas((overview as LocalContent<'canvas'>).content);
const canvas = new Canvas((_content as LocalContent<'canvas'>).content);
content.replaceChild(dom('div', { class: 'w-[600px] h-[600px] relative' }, [canvas.container]), content.children[0]);
canvas.mount();
}
@@ -103,7 +105,7 @@ export const fakeA: Prose = {
const { hash, pathname } = parseURL(href);
const router = useRouter();
const overview = Content.overview(pathname === '' && hash.length > 0 ? router.currentRoute.value.params.path[0] : pathname);
const overview = Content.getFromPath(pathname === '' && hash.length > 0 ? unifySlug(router.currentRoute.value.params.path) : pathname);
const el = dom('span', { class: 'cursor-pointer text-accent-blue inline-flex items-center' }, [
dom('span', {}, [
@@ -127,14 +129,14 @@ export const fakeA: Prose = {
return false;
content.replaceChild(loading("large"), content.children[0]);
Content.content(overview.path).then((overview) => {
if(overview?.type === 'markdown')
Content.getContent(overview.id).then((_content) => {
if(_content?.type === 'markdown')
{
content.replaceChild(render((overview as LocalContent<'markdown'>).content ?? '', hash.length > 0 ? hash.substring(1) : undefined, { class: 'min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto py-4 px-6' }), content.children[0]);
content.replaceChild(render((_content as LocalContent<'markdown'>).content ?? '', hash.length > 0 ? hash.substring(1) : undefined, { class: 'min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto py-4 px-6' }), content.children[0]);
}
if(overview?.type === 'canvas')
if(_content?.type === 'canvas')
{
const canvas = new Canvas((overview as LocalContent<'canvas'>).content);
const canvas = new Canvas((_content as LocalContent<'canvas'>).content);
content.replaceChild(dom('div', { class: 'w-[600px] h-[600px] relative' }, [canvas.container]), content.children[0]);
canvas.mount();
}