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

package/app/components/main/connections/MainConnections.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import Deps from './Deps.vue';
+import Externals from './Externals.vue';
+
+const { connections } = defineProps<{ connections?: ContentConnections }>();
+
+const phrase = await usePhrases('connections');
+
+const currentType = ref<keyof ContentConnections | undefined>(
+    'hardDependencies',
+);
+
+const ownExternalsCount = computed(() => {
+    return connections?.externals?.find((ext) => ext.type === 'own')?.items
+        .length;
+});
+
+const parentExternalsCount = computed(() => {
+    return connections?.externals
+        ?.filter((ext) => ext.type === 'parent')
+        .reduce((sum, ext) => sum + ext.items.length, 0);
+});
+</script>
+
+<template>
+    <section v-if="connections" class="px-main py-main-half">
+        <MainSubTitle :title="phrase.connections + ':'" />
+        <div
+            class="gap-small micro:gap-normal micro:justify-start flex flex-wrap
+                justify-center"
+        >
+            <template
+                v-for="(items, type) of {
+                    hardDependencies: connections.hardDependencies,
+                    autoDependencies: connections.autoDependencies,
+                    dependents: connections.dependents,
+                }"
+            >
+                <MainConnectionsButton
+                    v-if="items && items.length > 0"
+                    :type="type"
+                    :count="items.length"
+                    :active="currentType === type"
+                    @click="
+                        currentType === type
+                            ? (currentType = undefined)
+                            : (currentType = type)
+                    "
+                />
+            </template>
+            <MainConnectionsButton
+                v-if="connections.externals"
+                type="externals"
+                :active="currentType === 'externals'"
+                @click="
+                    currentType === 'externals'
+                        ? (currentType = undefined)
+                        : (currentType = 'externals')
+                "
+            >
+                <template #after>
+                    <div
+                        v-if="connections.externals"
+                        class="gap-small *:border-border *:pl-small flex
+                            items-center font-bold *:border-l"
+                    >
+                        <div
+                            v-if="ownExternalsCount"
+                            class="flex items-center gap-1 text-amber-600
+                                dark:text-amber-400"
+                        >
+                            <MyIcon name="arrow/left" class="-scale-x-100" />
+                            <span>{{ ownExternalsCount }}</span>
+                        </div>
+                        <div
+                            v-if="parentExternalsCount"
+                            class="flex items-center gap-1"
+                        >
+                            <MyIcon name="arrow/up-to-right" />
+                            <span>{{ parentExternalsCount }}</span>
+                        </div>
+                    </div>
+                </template>
+            </MainConnectionsButton>
+        </div>
+        <template v-if="currentType && connections[currentType]">
+            <Deps
+                v-if="currentType !== 'externals'"
+                :deps="connections[currentType]!"
+            />
+            <Externals v-else :externals="connections[currentType]!" />
+        </template>
+    </section>
+</template>

package/app/components/main/connections/MainConnectionsButton.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+const { type, active } = defineProps<{
+    type: 'hardDependencies' | 'autoDependencies' | 'dependents' | 'externals';
+    active?: boolean;
+    count?: number;
+}>();
+
+const isHard = type === 'hardDependencies';
+
+const phrase = await usePhrases(
+    'need_to_know',
+    'depends_on',
+    'used_by',
+    'externals',
+);
+
+const title = (() => {
+    switch (type) {
+        case 'hardDependencies':
+            return phrase.need_to_know;
+        case 'autoDependencies':
+            return phrase.depends_on;
+        case 'dependents':
+            return phrase.used_by;
+        case 'externals':
+            return phrase.externals;
+    }
+})();
+
+const icon: MyIconName = (() => {
+    switch (type) {
+        case 'hardDependencies':
+            return 'warning';
+        case 'autoDependencies':
+            return 'arrow/to-circle';
+        case 'dependents':
+            return 'arrow/from-circle';
+        case 'externals':
+            return 'arrow/outward-box';
+    }
+})();
+
+const dynamicClasses = computed(() => {
+    if (isHard) {
+        if (active) {
+            return 'border-(--activeColor) text-(--activeColor) bg-(--activeColor)/10 hocus:ring-(--activeColor)/25';
+        } else {
+            return 'border-border bg-bg-aside text-text-muted hocus:ring-(--activeColor)/25 hocus:text-(--activeColor) hocus:border-(--activeColor)';
+        }
+    }
+
+    if (active) {
+        return 'border-(--activeColor) text-(--activeColor) bg-(--activeColor)/10 hocus:ring-(--activeColor)/25';
+    } else {
+        return 'border-border bg-bg-aside text-text-muted hocus:ring-(--activeColor)/25 hocus:text-(--activeColor) hocus:border-(--activeColor)';
+    }
+});
+</script>
+
+<template>
+    <button
+        :style="{
+            '--activeColor': isHard
+                ? 'light-dark(var(--color-red-700),var(--color-red-400))'
+                : 'var(--color-brand)',
+        }"
+        :class="[
+            `gap-small text-main-sm px-small flex cursor-pointer items-center
+            rounded border py-1 ring-2 ring-transparent
+            transition-[border,color,box-shadow,background]`,
+            dynamicClasses,
+        ]"
+    >
+        <MyIcon :name="icon" class="text-[1.2em]" />
+        <span>{{ formatText(title) }}</span>
+        <span v-if="count" class="font-bold">{{ count }}</span>
+        <slot name="after"></slot>
+    </button>
+</template>

package/app/components/main/connections/ScrollPane.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup></script>
+
+<template>
+    <div
+        class="nice-scrollbars border-border mt-normal relative overflow-auto
+            border-t border-b"
+    >
+        <slot></slot>
+    </div>
+</template>

package/app/components/main/contentStats/Item.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+const { mode = 'detailed' } = defineProps<{
+    mode?: 'compact' | 'detailed';
+    icon: string;
+    label: string;
+    count: number;
+}>();
+</script>
+
+<template>
+    <div
+        v-if="mode === 'compact'"
+        :title="label"
+        class="gap-small flex cursor-help items-center"
+    >
+        <MaybeMyIcon
+            :name="icon"
+            class="text-text-dimmed -mr-0.5 text-[1.2em]"
+        />
+        <span class="text-text-muted font-bold">{{ count }}</span>
+    </div>
+    <div
+        v-else
+        class="gap-small px-small text-main-sm border-border bg-bg-aside flex
+            items-center rounded-xl border py-1"
+    >
+        <MaybeMyIcon
+            :name="icon"
+            class="text-text-dimmed -mr-0.5 text-[1.2em]"
+        />
+        <span class="text-text-muted">{{ label }}</span>
+        <span class="text-text-muted font-bold">{{ count }}</span>
+    </div>
+</template>

package/app/components/main/contentStats/ItemElement.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import Item from './Item.vue';
+
+const { schemaName } = defineProps<{
+    schemaName: string;
+    count: number;
+}>();
+
+const elementIcon = await getElementIcon(schemaName);
+const elementPhrase = await getElementPhrase(schemaName);
+</script>
+
+<template>
+    <Item
+        :icon="elementIcon"
+        :label="elementPhrase.element_name"
+        :count="count"
+    />
+</template>

package/app/components/main/contentStats/ItemMaterials.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import Item from './Item.vue';
+
+defineProps<{ count: number }>();
+
+const phrase = await usePhrases('materials');
+</script>
+
+<template>
+    <Item icon="files" :label="phrase.materials" :count="count" />
+</template>

package/app/components/main/contentStats/MainContentStats.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import ItemElement from './ItemElement.vue';
+import ItemMaterials from './ItemMaterials.vue';
+
+defineProps<{
+    mode: 'single' | 'children';
+    stats?: ContentStats;
+}>();
+
+const phrase = await usePhrases('stats');
+</script>
+
+<template>
+    <template v-if="stats">
+        <section v-if="mode === 'single'" class="px-main py-main-half">
+            <MainSubTitle :title="phrase.stats + ':'" />
+            <div
+                class="micro:justify-start gap-small micro:gap-normal flex
+                    flex-wrap justify-center"
+            >
+                <ItemMaterials
+                    v-if="stats.materials"
+                    :count="stats.materials"
+                    mode="detailed"
+                />
+                <ItemElement
+                    v-if="stats.elements"
+                    v-for="(count, schemaName) of stats.elements"
+                    :schemaName
+                    :count
+                    mode="detailed"
+                />
+            </div>
+        </section>
+        <div
+            v-else
+            class="gap-small micro:gap-normal text-main-sm flex flex-wrap"
+        >
+            <ItemMaterials
+                v-if="stats.materials"
+                :count="stats.materials"
+                mode="compact"
+            />
+            <ItemElement
+                v-if="stats.elements"
+                v-for="(count, schemaName) of stats.elements"
+                :schemaName
+                :count
+                mode="compact"
+            />
+        </div>
+    </template>
+</template>

package/app/components/preview/Preview.vue

@@ -1,186 +1,172 @@
-<script lang="ts" setup>
-import type { PreviewRequest } from '@app/scripts/preview/request';
-import {
-    closePreview,
-    previewBlinkTrigger,
-    previewRequest,
-    previewTheme,
-    previewVisible,
-    unsetPreviewTheme,
-} from '@app/scripts/preview/state';
-
-import PreviewScreen from './PreviewScreen.vue';
-
-const height = ref<number>(0);
-const request = shallowRef<PreviewRequest>();
-const screenKey = ref(0); // Need to change this every time for Vue transition to work
-const route = useRoute();
-
-watch(previewRequest, () => {
-    if (previewRequest.value) {
-        request.value = structuredClone(toRaw(previewRequest.value));
-        unsetPreviewTheme();
-        screenKey.value++;
-    }
-});
-
-watch(
-    () => route.path,
-    () => {
-        closePreview();
-    },
-);
-</script>
-
-<template>
-    <div :class="$style.previewSticky">
-        <div :class="$style.previewOverlay">
-            <section
-                :class="[$style.preview, previewVisible && $style.visible]"
-                :style="{
-                    '--_previewHeightInner': `min(${height}px, var(--_previewMaxHeight))`,
-                }"
-                :data-erudit-preview-theme="previewTheme"
-            >
-                <TransitionFade>
-                    <PreviewScreen
-                        v-if="request"
-                        :request
-                        :key="screenKey"
-                        v-model:height="height"
-                    />
-                </TransitionFade>
-                <div
-                    :key="previewBlinkTrigger"
-                    :class="$style.blinkOverlay"
-                ></div>
-            </section>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-@use '$/def/z';
-@use '$/def/bp';
-
-.previewSticky {
-    position: sticky;
-    top: 0;
-    z-index: z.$preview;
-}
-
-.previewOverlay {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100dvh;
-    //background: rgba(255, 0, 0, 0.121);
-    overflow: hidden;
-    pointer-events: none;
-    touch-action: none;
-}
-
-.preview {
-    --previewBorderRadius: 15px;
-
-    --_previewMaxHeight: 70dvh;
-    --_previewHeightInner: 0px;
-    --_previewHeight: calc(var(--_previewHeightInner) + 1px /* Top border */);
-
-    pointer-events: initial;
-    touch-action: initial;
-
-    overflow: hidden;
-
-    position: absolute;
-    bottom: 0;
-    height: var(--_previewHeight);
-    max-height: var(--_previewMaxHeight);
-    width: 100%;
-    background: var(--_previewThemeBg, var(--bgAside));
-
-    border: 1px solid var(--_previewThemeBorder, var(--border));
-    border-bottom: none;
-    border-top-left-radius: var(--previewBorderRadius);
-    border-top-right-radius: var(--previewBorderRadius);
-
-    box-shadow: 0px -10px 12px 0px
-        light-dark(rgba(black, 0.11), rgba(white, 0.03));
-
-    @include transition(bottom, height, box-shadow, background);
-
-    @media (max-height: 500px) {
-        --_previewMaxHeight: 85dvh;
-    }
-
-    @include bp.below('aside2') {
-        border-right: transparent;
-    }
-    @include bp.below('aside1') {
-        border-left: transparent;
-    }
-
-    &:not(.visible) {
-        bottom: calc(-1 * var(--_previewHeight));
-        box-shadow: none;
-        overflow: hidden;
-    }
-}
-
-.blinkOverlay {
-    position: absolute;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    touch-action: none;
-    background: var(--brand);
-    opacity: 0;
-    animation: blink 0.5s ease-out;
-}
-
-@keyframes blink {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.6;
-    }
-    100% {
-        opacity: 0;
-    }
-}
-
-//
-// Themes
-//
-
-.preview {
-    --_previewThemeBg: var(--bgAside);
-    --_previewThemeBorder: var(--border);
-    --_previewThemeText: var(--text);
-
-    @mixin previewTheme($themeName, $baseColor) {
-        &[data-erudit-preview-theme='#{$themeName}'] {
-            --_previewThemeBg: color-mix(
-                in srgb,
-                #{$baseColor},
-                var(--bgAside) 92%
-            );
-            --_previewThemeBorder: color-mix(
-                in srgb,
-                #{$baseColor},
-                var(--border) 80%
-            );
-            --_previewThemeText: #{$baseColor};
-        }
-    }
-
-    @include previewTheme(error, var(--error));
-    @include previewTheme(warn, var(--warn));
-    @include previewTheme(success, var(--success));
-    @include previewTheme(brand, var(--brand));
-}
-</style>
+<script lang="ts" setup>
+import type { PreviewType } from '@erudit-js/core/preview/type';
+import type { PreviewRequest } from '@erudit-js/core/preview/request';
+
+import {
+    LazyPreviewScreenContentPage,
+    LazyPreviewScreenDirectLink,
+    LazyPreviewScreenUnique,
+} from '#components';
+
+const previewElement = useTemplateRef('preview');
+const previewScreenElement = useTemplateRef('previewScreen');
+const { previewState, closePreview } = usePreview();
+const route = useRoute();
+
+const screenKey = ref(0);
+const loading = ref(true);
+
+const screenComponents: Record<PreviewType, Component> = {
+    ['direct-link']: LazyPreviewScreenDirectLink,
+    ['content-page']: LazyPreviewScreenContentPage,
+    ['unique']: LazyPreviewScreenUnique,
+};
+
+const currentRequest = shallowRef<PreviewRequest>();
+const CurrentScreen = shallowRef<Component>();
+
+const LOADING_FALLBACK_HEIGHT = 200;
+const lastHeight = ref(LOADING_FALLBACK_HEIGHT);
+let resizeObserver: ResizeObserver;
+
+watch(() => route.path, closePreview);
+
+watch(
+    () => previewState.value.request,
+    (newRequest) => {
+        if (newRequest === undefined) {
+            // Still render last request for nice closing animation
+            return;
+        }
+
+        lastHeight.value =
+            previewElement.value?.offsetHeight || lastHeight.value;
+
+        currentRequest.value = newRequest;
+        CurrentScreen.value = screenComponents[newRequest.type];
+
+        screenKey.value++;
+        loading.value = true;
+
+        // Lock height during loading so it does not collapse
+        if (previewElement.value) {
+            previewElement.value.style.height = `${Math.max(lastHeight.value, LOADING_FALLBACK_HEIGHT)}px`;
+        }
+    },
+);
+
+function updatePreviewHeight() {
+    if (!previewElement.value) return;
+
+    // While loading, keep previous (or fallback) height
+    if (loading.value) {
+        previewElement.value.style.height = `${Math.max(lastHeight.value, LOADING_FALLBACK_HEIGHT)}px`;
+        return;
+    }
+
+    if (previewScreenElement.value) {
+        const h = previewScreenElement.value.offsetHeight;
+        previewElement.value.style.height = `${h}px`;
+        if (h > 0) {
+            lastHeight.value = h;
+        }
+    }
+}
+
+async function nextPaint() {
+    await nextTick();
+    await new Promise(requestAnimationFrame);
+}
+
+async function suspenseResolved() {
+    await nextPaint();
+    updatePreviewHeight();
+    resizeObserver ||= new ResizeObserver(updatePreviewHeight);
+    resizeObserver.disconnect();
+    resizeObserver.observe(previewScreenElement.value!);
+
+    await nextPaint();
+    loading.value = false;
+
+    await nextPaint();
+    updatePreviewHeight();
+}
+
+// Prefetch phrases
+await usePhrases(
+    'book',
+    'page',
+    'group',
+    'topic',
+    'article',
+    'summary',
+    'practice',
+    'preview_content_page_description',
+);
+</script>
+
+<template>
+    <div class="sticky top-0 z-100">
+        <div
+            class="pointer-events-none absolute top-0 right-0 left-0 h-dvh
+                touch-none"
+        >
+            <div
+                ref="preview"
+                :class="[
+                    `border-border bg-bg-main micro:max-h-[70dvh]
+                    pointer-events-auto absolute bottom-0 max-h-[90dvh] w-full
+                    touch-auto overflow-hidden rounded-[25px] rounded-b-none
+                    border-t transition-[max-height,height,translate]`,
+                    previewState.opened
+                        ? `translate-y-0
+                            shadow-[0px_-10px_15px_5px_light-dark(rgba(0,0,0,0.1),rgba(255,255,255,0.05))]`
+                        : 'translate-y-full shadow-none',
+                ]"
+            >
+                <!-- Screen -->
+                <TransitionFade>
+                    <div
+                        v-if="CurrentScreen"
+                        :key="screenKey"
+                        ref="previewScreen"
+                        class="absolute bottom-0 max-h-[inherit] w-full"
+                    >
+                        <Suspense @resolve="suspenseResolved">
+                            <CurrentScreen :request="currentRequest" />
+                        </Suspense>
+                    </div>
+                </TransitionFade>
+
+                <!-- Loading overlay -->
+                <TransitionFade>
+                    <div
+                        v-if="loading"
+                        class="bg-bg-main absolute bottom-0 flex h-full w-full
+                            items-center justify-center"
+                    >
+                        <MyRuntimeIcon
+                            :svg="loadingSvg"
+                            class="text-text-dimmed text-[50px]"
+                        />
+                    </div>
+                </TransitionFade>
+
+                <!-- Blink overlay -->
+                <TransitionFade>
+                    <div
+                        v-if="previewState.blink"
+                        :key="previewState.blink"
+                        class="pointer-events-none absolute top-0 left-0 h-full
+                            w-full touch-none"
+                    >
+                        <div
+                            class="bg-brand animate-opacity-blink absolute top-0
+                                left-0 h-full w-full opacity-0"
+                        ></div>
+                    </div>
+                </TransitionFade>
+            </div>
+        </div>
+    </div>
+</template>