erudit 4.0.0-dev.4 → 4.0.0-dev.5

package/app/components/preview/Preview.vue

@@ -3,9 +3,9 @@ import type { PreviewType } from '@erudit-js/core/preview/type';
 import type { PreviewRequest } from '@erudit-js/core/preview/request';
 
 import {
-    LazyPreviewScreenContentPage,
-    LazyPreviewScreenDirectLink,
-    LazyPreviewScreenUnique,
+  LazyPreviewScreenContentPage,
+  LazyPreviewScreenDirectLink,
+  LazyPreviewScreenUnique,
 } from '#components';
 
 const previewElement = useTemplateRef('preview');
@@ -17,9 +17,9 @@ const screenKey = ref(0);
 const loading = ref(true);
 
 const screenComponents: Record<PreviewType, Component> = {
-    ['direct-link']: LazyPreviewScreenDirectLink,
-    ['content-page']: LazyPreviewScreenContentPage,
-    ['unique']: LazyPreviewScreenUnique,
+  ['direct-link']: LazyPreviewScreenDirectLink,
+  ['content-page']: LazyPreviewScreenContentPage,
+  ['unique']: LazyPreviewScreenUnique,
 };
 
 const currentRequest = shallowRef<PreviewRequest>();
@@ -32,138 +32,130 @@ 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`;
-        }
-    },
-);
+  () => previewState.value.request,
+  (newRequest) => {
+    if (newRequest === undefined) {
+      // Still render last request for nice closing animation
+      return;
+    }
 
-function updatePreviewHeight() {
-    if (!previewElement.value) return;
+    lastHeight.value = previewElement.value?.offsetHeight || lastHeight.value;
+
+    currentRequest.value = newRequest;
+    CurrentScreen.value = screenComponents[newRequest.type];
 
-    // While loading, keep previous (or fallback) height
-    if (loading.value) {
-        previewElement.value.style.height = `${Math.max(lastHeight.value, LOADING_FALLBACK_HEIGHT)}px`;
-        return;
+    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`;
     }
+  },
+);
 
-    if (previewScreenElement.value) {
-        const h = previewScreenElement.value.offsetHeight;
-        previewElement.value.style.height = `${h}px`;
-        if (h > 0) {
-            lastHeight.value = h;
-        }
+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);
+  await nextTick();
+  await new Promise(requestAnimationFrame);
 }
 
 async function suspenseResolved() {
-    await nextPaint();
-    updatePreviewHeight();
-    resizeObserver ||= new ResizeObserver(updatePreviewHeight);
-    resizeObserver.disconnect();
-    resizeObserver.observe(previewScreenElement.value!);
+  await nextPaint();
+  updatePreviewHeight();
+  resizeObserver ||= new ResizeObserver(updatePreviewHeight);
+  resizeObserver.disconnect();
+  resizeObserver.observe(previewScreenElement.value!);
 
-    await nextPaint();
-    loading.value = false;
+  await nextPaint();
+  loading.value = false;
 
-    await nextPaint();
-    updatePreviewHeight();
+  await nextPaint();
+  updatePreviewHeight();
 }
 
 // Prefetch phrases
 await usePhrases(
-    'book',
-    'page',
-    'group',
-    'topic',
-    'article',
-    'summary',
-    'practice',
-    'preview_content_page_description',
+  'book',
+  'page',
+  'group',
+  'topic',
+  'article',
+  'summary',
+  'practice',
+  'preview_content_page_description',
 );
 </script>
 
 <template>
-    <div class="sticky top-0 z-100">
+  <div
+    ref="preview"
+    :class="[
+      `fixed-main bg-bg-main micro:max-h-[70dvh] border-border
+      pointer-events-auto bottom-0 z-100 max-h-[90dvh] touch-auto
+      overflow-hidden rounded-[25px] rounded-b-none border-t
+      transition-[max-height,height,translate,box-shadow]`,
+      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-transparent',
+    ]"
+  >
+    <!-- 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"
+      >
+        <Loading 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="pointer-events-none absolute top-0 right-0 left-0 h-dvh
-                touch-none"
-        >
-            <div
-                ref="preview"
-                :class="[
-                    `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
-                    transition-[max-height,height,translate]`,
-                    previewState.opened
-                        ? `border-border translate-y-0 border-t
-                            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"
-                    >
-                        <Loading 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>
+          class="bg-brand animate-opacity-blink absolute top-0 left-0 h-full
+            w-full opacity-0"
+        ></div>
+      </div>
+    </TransitionFade>
+  </div>
 </template>

package/app/components/preview/PreviewError.vue

@@ -3,8 +3,8 @@ defineProps<{ message: string }>();
 </script>
 
 <template>
-    <div class="h-[230px] bg-red-400">
-        <strong>Error occurred!</strong>
-        <div v-html="message"></div>
-    </div>
+  <div class="h-[230px] bg-red-400">
+    <strong>Error occurred!</strong>
+    <div v-html="message"></div>
+  </div>
 </template>

package/app/components/preview/PreviewLoading.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex h-[230px] items-center justify-center">
-        <Loading class="text-text-dimmed text-[50px]" />
-    </div>
+  <div class="flex h-[230px] items-center justify-center">
+    <Loading class="text-text-dimmed text-[50px]" />
+  </div>
 </template>

package/app/components/preview/PreviewScreen.vue

@@ -2,63 +2,63 @@
 import type { MaybeMyIconName } from '#my-icons';
 
 defineProps<{
-    icon: MaybeMyIconName;
-    main: string;
-    secondary?: string;
-    link?: string;
-    external?: boolean;
+  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 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"
+    >
+      <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
-            class="border-border gap-small micro:gap-normal micro:h-[60px]
-                px-main flex h-[54px] shrink-0 items-center border-t"
+          v-if="secondary"
+          class="text-text-muted text-tiny micro:text-xs overflow-hidden
+            text-nowrap overflow-ellipsis"
         >
-            <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>
+          {{ 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

@@ -3,37 +3,37 @@ import type { MaybeMyIconName } from '#my-icons';
 import EruditLink from '../EruditLink';
 
 const { external } = defineProps<{
-    icon: MaybeMyIconName;
-    link?: string;
-    state?: 'brand' | 'disabled';
-    external?: boolean;
+  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>
+  <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

@@ -4,47 +4,44 @@ import type { PreviewRequestContentPage } from '@erudit-js/core/preview/request'
 const { request } = defineProps<{ request: PreviewRequestContentPage }>();
 
 const contentTypeKey =
-    request.contentType === 'topic' ? request.topicPart : request.contentType;
+  request.contentType === 'topic' ? request.topicPart : request.contentType;
 
 const previewData: PreviewContentPage = await $fetch(
-    '/api/preview/contentPage/' +
-        stringifyContentTypePath(contentTypeKey, request.fullId) +
-        '.json',
-    {
-        responseType: 'json',
-    },
+  '/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',
+  'book',
+  'group',
+  'topic',
+  'article',
+  'summary',
+  'practice',
+  'page',
+  'preview_content_page_description',
 );
 
 const secondary =
-    phrase[contentTypeKey] +
-    (previewData.bookTitle ? ` • ${previewData.bookTitle}` : '');
+  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>
+  <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

@@ -7,17 +7,17 @@ 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>
+  <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

@@ -4,14 +4,14 @@ import type { PreviewRequestUnique } from '@erudit-js/core/preview/request';
 const { request } = defineProps<{ request: PreviewRequestUnique }>();
 
 const contentTypeKey =
-    request.contentType === 'topic' ? request.topicPart : request.contentType;
+  request.contentType === 'topic' ? request.topicPart : request.contentType;
 
 const previewData = await $fetch<PreviewContentUnique>(
-    `/api/preview/contentUnique/${stringifyContentTypePath(contentTypeKey, request.contentFullId)}/${request.uniqueName}` +
-        '.json',
-    {
-        responseType: 'json',
-    },
+  `/api/preview/contentUnique/${stringifyContentTypePath(contentTypeKey, request.contentFullId)}/${request.uniqueName}` +
+    '.json',
+  {
+    responseType: 'json',
+  },
 );
 
 const elementIcon = await getElementIcon(previewData.schemaName);
@@ -19,36 +19,35 @@ const elementPhrase = await getElementPhrase(previewData.schemaName);
 
 const main = previewData.elementTitle || elementPhrase.element_name;
 const secondary = (() => {
-    if (!previewData.elementTitle) {
-        return previewData.contentTitle;
-    }
+  if (!previewData.elementTitle) {
+    return previewData.contentTitle;
+  }
 
-    return `${elementPhrase.element_name} • ${previewData.contentTitle}`;
+  return `${elementPhrase.element_name} • ${previewData.contentTitle}`;
 })();
 </script>
 
 <template>
-    <PreviewScreen
-        :icon="elementIcon"
-        :main="main"
-        :secondary="secondary"
-        :link="previewData.link"
+  <PreviewScreen
+    :icon="elementIcon"
+    :main="main"
+    :secondary="secondary"
+    :link="previewData.link"
+  >
+    <div
+      class="nice-scrollbars py-small relative max-h-[inherit] overflow-auto"
     >
-        <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>
+      <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>