erudit 3.0.0-dev.9 → 4.0.0-dev.1

package/app/components/preview/PreviewScreen.vue

@@ -1,141 +1,65 @@
-<script lang="ts" setup>
-import type { PreviewRequest } from '@app/scripts/preview/request';
-import { type PreviewData } from '@app/scripts/preview/data';
-import { buildPreviewData } from '@app/scripts/preview/build';
-import { getPreviewDisplayComponent } from '@app/scripts/preview/display';
-import { createPreviewError } from '@app/scripts/preview/data/alert';
-
-import { PreviewDisplayAlert } from '#components';
-
-const { request } = defineProps<{ request: PreviewRequest }>();
-const height = defineModel<number>('height');
-
-const loading = ref(true);
-const suspensePending = ref(true);
-const effectiveLoading = computed(() => loading.value || suspensePending.value);
-
-const loadingElem = useTemplateRef('loadingElem');
-const screenElem = useTemplateRef('screenElem');
-const screenSizeObserver = new ResizeObserver(updateContentHeight);
-
-const DisplayComponent = shallowRef<Component>();
-const previewData = shallowRef<PreviewData>();
-
-const setupDisplay = setTimeout(async () => {
-    //await new Promise(resolve => setTimeout(resolve, 5000));
-
-    try {
-        previewData.value = await buildPreviewData(request);
-        DisplayComponent.value = getPreviewDisplayComponent(previewData.value);
-    } catch (error) {
-        console.error(error);
-
-        previewData.value = createPreviewError({
-            // @ts-ignore
-            message: error?.message || error,
-        });
-
-        DisplayComponent.value = PreviewDisplayAlert;
-    }
-
-    await nextTick();
-    loading.value = false;
-});
-
-function updateContentHeight() {
-    // Use the proper element for height calculation based on which one is visible
-    const targetElem = effectiveLoading.value
-        ? loadingElem.value
-        : screenElem.value;
-    if (!targetElem) return;
-
-    height.value = targetElem.offsetHeight;
-}
-
-function onSuspenseResolve() {
-    suspensePending.value = false;
-}
-
-onMounted(() => {
-    // Initialize height with either element that's available
-    const initialElement = loadingElem.value || screenElem.value;
-    height.value = initialElement?.offsetHeight ?? 0;
-
-    // Observe both elements for size changes
-    watch(
-        [loadingElem, screenElem, effectiveLoading],
-        () => {
-            screenSizeObserver.disconnect();
-
-            // Observe loading element when it's visible
-            if (effectiveLoading.value && loadingElem.value) {
-                screenSizeObserver.observe(loadingElem.value);
-            }
-            // Otherwise observe content element
-            else if (screenElem.value) {
-                screenSizeObserver.observe(screenElem.value);
-            }
-
-            // Update height after elements change
-            updateContentHeight();
-        },
-        { immediate: true },
-    );
-});
-
-onUnmounted(() => {
-    clearTimeout(setupDisplay);
-    screenSizeObserver.disconnect();
-});
-</script>
-
-<template>
-    <div :class="$style.screenContainer">
-        <TransitionFade>
-            <div
-                v-if="effectiveLoading"
-                ref="loadingElem"
-                :class="$style.loadingOverlay"
-            >
-                <PreviewLoading />
-            </div>
-        </TransitionFade>
-
-        <div ref="screenElem" :class="$style.screen">
-            <Suspense @resolve="onSuspenseResolve" v-if="DisplayComponent">
-                <component :is="DisplayComponent" :data="previewData" />
-                <template #fallback>
-                    <div></div>
-                </template>
-            </Suspense>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-.screenContainer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.loadingOverlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: auto;
-    z-index: 2;
-    background-color: var(--_previewThemeBg, var(--bgAside));
-}
-
-.screen {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 1;
-}
-</style>
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+
+defineProps<{
+    icon: MaybeMyIconName;
+    main: string;
+    secondary?: string;
+    link?: string;
+    external?: boolean;
+}>();
+
+const { closePreview, hasPreviousRequest, setPreviousPreview } = usePreview();
+</script>
+
+<template>
+    <div class="flex max-h-[inherit] flex-col">
+        <div class="nice-scrollbars flex-1 overflow-auto">
+            <slot></slot>
+        </div>
+        <div
+            class="border-border gap-small micro:gap-normal micro:h-[60px]
+                px-main flex h-[54px] shrink-0 items-center border-t
+                transition-[border]"
+        >
+            <MaybeMyIcon
+                :name="icon"
+                class="text-text-muted micro:text-[34px] shrink-0 text-[30px]"
+            />
+            <div class="flex flex-1 flex-col justify-center overflow-hidden">
+                <div
+                    class="micro:text-sm overflow-hidden text-xs font-bold
+                        text-nowrap overflow-ellipsis"
+                >
+                    {{ main }}
+                </div>
+                <div
+                    v-if="secondary"
+                    class="text-text-muted text-tiny micro:text-xs
+                        overflow-hidden text-nowrap overflow-ellipsis"
+                >
+                    {{ secondary }}
+                </div>
+            </div>
+            <div class="gap-small flex shrink-0 items-center">
+                <PreviewScreenButton
+                    :class="hasPreviousRequest ? '' : 'opacity-0'"
+                    icon="arrow/left"
+                    :external="true"
+                    @click="setPreviousPreview"
+                />
+                <PreviewScreenButton
+                    icon="plus"
+                    @click="closePreview"
+                    :external="true"
+                />
+                <PreviewScreenButton
+                    icon="arrow/outward"
+                    :link
+                    :external
+                    :state="link ? 'brand' : 'disabled'"
+                />
+            </div>
+        </div>
+    </div>
+</template>

package/app/components/preview/PreviewScreenButton.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+import EruditLink from '../EruditLink';
+
+const { external } = defineProps<{
+    icon: MaybeMyIconName;
+    link?: string;
+    state?: 'brand' | 'disabled';
+    external?: boolean;
+}>();
+
+const LinkComponent = external ? h('a') : EruditLink;
+</script>
+
+<template>
+    <component
+        :is="LinkComponent"
+        v-bind="{
+            [external ? 'href' : 'to']: link,
+        }"
+        tabindex="0"
+        target="_blank"
+        :class="{
+            [`micro:size-[32px] size-[28px] cursor-pointer rounded
+            bg-transparent transition-[background,color,opacity]`]: true,
+            'pointer-events-none opacity-15': state === 'disabled',
+            'text-brand hocus:bg-brand/20': state === 'brand',
+            'text-text-muted hocus:text-text hocus:bg-bg-accent': !state,
+        }"
+    >
+        <MaybeMyIcon
+            :name="icon"
+            :class="{
+                'size-full': true,
+                'scale-120 rotate-45': icon === 'plus',
+            }"
+        />
+    </component>
+</template>

package/app/components/preview/screen/ContentPage.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { PreviewRequestContentPage } from '@erudit-js/core/preview/request';
+
+const { request } = defineProps<{ request: PreviewRequestContentPage }>();
+
+const contentTypeKey =
+    request.contentType === 'topic' ? request.topicPart : request.contentType;
+
+const previewData: PreviewContentPage = await $fetch(
+    '/api/preview/contentPage/' +
+        stringifyContentTypePath(contentTypeKey, request.fullId) +
+        '.json',
+    {
+        responseType: 'json',
+    },
+);
+
+const icon = ICONS[contentTypeKey];
+
+const phrase = await usePhrases(
+    'book',
+    'group',
+    'topic',
+    'article',
+    'summary',
+    'practice',
+    'page',
+    'preview_content_page_description',
+);
+
+const secondary =
+    phrase[contentTypeKey] +
+    (previewData.bookTitle ? ` • ${previewData.bookTitle}` : '');
+</script>
+
+<template>
+    <PreviewScreen
+        :icon
+        :link="previewData.link"
+        :main="previewData.title"
+        :secondary
+    >
+        <div class="micro:text-base px-main py-main text-sm">
+            {{
+                previewData.description ??
+                phrase.preview_content_page_description
+            }}
+        </div>
+    </PreviewScreen>
+</template>

package/app/components/preview/screen/DirectLink.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { PreviewRequestDirectLink } from '@erudit-js/core/preview/request';
+
+defineProps<{ request: PreviewRequestDirectLink }>();
+
+const phrase = await usePhrases('direct_link', 'direct_link_explain');
+</script>
+
+<template>
+    <PreviewScreen
+        icon="arrow/outward-box"
+        :main="phrase.direct_link"
+        :link="request.href"
+        :external="true"
+    >
+        <div class="micro:text-base px-main py-main text-sm">
+            <div>{{ phrase.direct_link_explain }}</div>
+            <div class="mt-small font-mono wrap-break-word underline">
+                {{ request.href }}
+            </div>
+        </div>
+    </PreviewScreen>
+</template>

package/app/components/preview/screen/Unique.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { PreviewRequestUnique } from '@erudit-js/core/preview/request';
+
+const { request } = defineProps<{ request: PreviewRequestUnique }>();
+
+const contentTypeKey =
+    request.contentType === 'topic' ? request.topicPart : request.contentType;
+
+const previewData = await $fetch<PreviewContentUnique>(
+    `/api/preview/contentUnique/${stringifyContentTypePath(contentTypeKey, request.contentFullId)}/${request.uniqueName}` +
+        '.json',
+    {
+        responseType: 'json',
+    },
+);
+
+const elementIcon = await getElementIcon(previewData.schemaName);
+const elementPhrase = await getElementPhrase(previewData.schemaName);
+
+const main = previewData.elementTitle || elementPhrase.element_name;
+const secondary = (() => {
+    if (!previewData.elementTitle) {
+        return previewData.contentTitle;
+    }
+
+    return `${elementPhrase.element_name} • ${previewData.contentTitle}`;
+})();
+</script>
+
+<template>
+    <PreviewScreen
+        :icon="elementIcon"
+        :main="main"
+        :secondary="secondary"
+        :link="previewData.link"
+    >
+        <div
+            class="nice-scrollbars py-small relative max-h-[inherit]
+                overflow-auto"
+        >
+            <Prose
+                :element="previewData.proseElement"
+                :storage="previewData.storage"
+                :urlPath="'/' + previewData.link.split('#')[0]"
+                :useHashUrl="false"
+            />
+            <div
+                v-if="previewData.fadeOverlay"
+                class="to-bg-main pointer-events-none absolute bottom-0 left-0
+                    h-full w-full touch-none bg-linear-to-b from-transparent"
+            ></div>
+        </div>
+    </PreviewScreen>
+</template>

package/app/components/site/SiteAside.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+const props = defineProps<{ type: AsideType }>();
+provide(asideTypeSymbol, props.type);
+
+const asideState = useAsideState();
+
+const isMajor = computed(() => props.type === AsideType.Major);
+const isMinor = computed(() => props.type === AsideType.Minor);
+
+const opened = computed(() => {
+    return props.type === asideState.value.opened;
+});
+</script>
+
+<template>
+    <aside
+        :class="[
+            `absolute top-0 z-30 h-full w-(--w-aside) text-[18px]
+            transition-[left,right]`,
+            opened
+                ? isMajor
+                    ? 'left-0'
+                    : 'right-0'
+                : isMajor
+                  ? 'aside1:left-0 -left-(--w-aside)'
+                  : 'aside2:right-0 -right-(--w-aside)',
+        ]"
+    >
+        <div class="sticky top-0 h-dvh">
+            <AsideSwitch />
+            <div
+                :class="[
+                    `bg-bg-aside absolute top-0 left-0 h-full w-full
+                    border-[light-dark(var(--color-neutral-200),var(--color-neutral-800))]
+                    transition-[background,border,backdrop-filter,box-shadow]`,
+                    {
+                        'border-e': isMajor,
+                        'border-s': isMinor,
+                        [`max-aside1:border-e-2 max-aside1:bg-bg-aside/96
+                        max-aside1:backdrop-blur-sm
+                        max-aside1:shadow-[0_0_20px_12px_light-dark(rgba(0,0,0,.14),rgba(255,255,255,.05))]`]:
+                            opened && isMajor,
+                        [`max-aside2:border-s-2 max-aside2:bg-bg-aside/96
+                        max-aside2:backdrop-blur-sm
+                        max-aside2:shadow-[0_0_20px_12px_light-dark(rgba(0,0,0,.14),rgba(255,255,255,.05))]`]:
+                            opened && isMinor,
+                    },
+                ]"
+            >
+                <AsideMajor v-if="type === AsideType.Major" />
+                <AsideMinor v-else />
+                <!-- Inner aside shadow to separate aside from main content -->
+                <div
+                    :class="[
+                        `pointer-events-none absolute top-0 h-full w-full
+                        touch-none bg-linear-to-l
+                        from-[light-dark(rgba(0,0,0,0.02),rgba(0,0,0,0.1))]
+                        via-transparent via-[3px] opacity-100
+                        transition-opacity`,
+                        {
+                            '-scale-100': isMinor,
+                            'max-aside1:opacity-0': opened && isMajor,
+                            'max-aside2:opacity-0': opened && isMinor,
+                        },
+                    ]"
+                ></div>
+            </div>
+        </div>
+    </aside>
+</template>

package/app/components/site/SiteAsideOverlay.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+//
+// This overlay is needed to prevent accident link/image/button clicks when user just wants to close opened aside.
+//
+
+const asideState = useAsideState();
+
+function overlayClick() {
+    asideState.value.opened = undefined;
+    // Allow switches to immediately reappear if nothing else prevents it
+    asideState.value.scrolledUp = true;
+}
+</script>
+
+<template>
+    <div
+        class="fixed top-0 left-0 z-20 h-dvh w-dvh"
+        v-if="asideState.opened"
+        @click="overlayClick"
+    ></div>
+</template>

package/app/components/site/SiteMain.vue

@@ -0,0 +1,16 @@
+<template>
+    <main
+        class="aside1:ps-(--w-aside) aside2:pe-(--w-aside) micro:text-[18px]
+            relative px-0 text-[15px] transition-[padding]"
+    >
+        <div class="text-main" data-erudit-main>
+            <Preview />
+            <div
+                class="bg-bg-main min-h-dvh transition-[background]
+                    dark:bg-[#212121]"
+            >
+                <slot></slot>
+            </div>
+        </div>
+    </main>
+</template>

package/app/components/transition/Fade.vue

@@ -1,19 +1,30 @@
-<template>
-    <Transition name="EruditTransitionFade">
-        <slot></slot>
-    </Transition>
-</template>
-
-<style lang="scss">
-.EruditTransitionFade {
-    &-enter-active,
-    &-leave-active {
-        transition: opacity var(--transitionSpeed) var(--transitionFunction);
-    }
-
-    &-enter-from,
-    &-leave-to {
-        opacity: 0;
-    }
-}
-</style>
+<script lang="ts" setup>
+const styles = useCssModule();
+
+function setTransition(el: Element) {
+    el.classList.add(styles.fadeTransition);
+}
+</script>
+
+<template>
+    <Transition
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+        @before-enter="setTransition"
+        @after-enter="setTransition"
+        @enter-cancelled="setTransition"
+        @before-leave="setTransition"
+        @after-leave="setTransition"
+        @leave-cancelled="setTransition"
+    >
+        <slot></slot>
+    </Transition>
+</template>
+
+<style module>
+.fadeTransition {
+    transition-property: opacity;
+    transition-duration: var(--default-transition-duration);
+    transition-timing-function: var(--default-transition-timing-function);
+}
+</style>

package/app/components/transition/Slide.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+const styles = useCssModule();
+
+const { direction = 'forward' } = defineProps<{
+    direction: 'forward' | 'backward';
+}>();
+
+function setTransition(el: Element) {
+    el.classList.add(styles.slideTransition);
+}
+
+const transitionClasses = computed(() => {
+    const isForward = direction !== 'backward';
+    return {
+        enterFrom: isForward ? 'translate-x-full' : '-translate-x-full',
+        enterTo: 'translate-x-0',
+        leaveFrom: 'translate-x-0',
+        leaveTo: isForward ? '-translate-x-full' : 'translate-x-full',
+    };
+});
+</script>
+
+<template>
+    <Transition
+        :enter-from-class="transitionClasses.enterFrom"
+        :enter-to-class="transitionClasses.enterTo"
+        :leave-from-class="transitionClasses.leaveFrom"
+        :leave-to-class="transitionClasses.leaveTo"
+        @before-enter="setTransition"
+        @after-enter="setTransition"
+        @enter-cancelled="setTransition"
+        @before-leave="setTransition"
+        @after-leave="setTransition"
+        @leave-cancelled="setTransition"
+    >
+        <slot></slot>
+    </Transition>
+</template>
+
+<style module>
+.slideTransition {
+    transition-property: translate;
+    transition-duration: var(--default-transition-duration);
+    transition-timing-function: var(--default-transition-timing-function);
+    backface-visibility: hidden;
+}
+</style>

package/app/components/tree/TreeContainer.vue

@@ -1,11 +1,5 @@
-<template>
-    <div :class="$style.treeContainer">
-        <slot></slot>
-    </div>
-</template>
-
-<style lang="scss" module>
-.treeContainer {
-    padding: calc(var(--gap) / 2) 0;
-}
-</style>
+<template>
+    <div class="py-small px-0">
+        <slot></slot>
+    </div>
+</template>