erudit 4.0.0-dev.5 → 4.0.1

package/app/components/ads/provider/Yandex.vue

@@ -1,84 +1,84 @@
-<script lang="ts" setup>
-import type { EruditAdsYandex } from '@erudit-js/core/eruditConfig/ads';
-
-declare global {
-  interface Window {
-    yaContextCb: Array<() => void>;
-    __yandexScriptLoaded?: boolean;
-    __yandexScriptLoading?: boolean;
-  }
-
-  var Ya: any;
-}
-
-const props = defineProps<{ data: EruditAdsYandex }>();
-const uid = useId();
-
-const loadYandexScript = (): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    // Script already loaded
-    if (window.__yandexScriptLoaded) {
-      resolve();
-      return;
-    }
-
-    // Script is currently loading, wait for it
-    if (window.__yandexScriptLoading) {
-      const checkLoaded = () => {
-        if (window.__yandexScriptLoaded) {
-          resolve();
-        } else {
-          setTimeout(checkLoaded, 50);
-        }
-      };
-      checkLoaded();
-      return;
-    }
-
-    // Load script for the first time
-    window.__yandexScriptLoading = true;
-    window.yaContextCb = window.yaContextCb || [];
-
-    const script = document.createElement('script');
-    script.src = 'https://yandex.ru/ads/system/context.js';
-    script.async = true;
-
-    script.onload = () => {
-      window.__yandexScriptLoaded = true;
-      window.__yandexScriptLoading = false;
-      resolve();
-    };
-
-    script.onerror = () => {
-      window.__yandexScriptLoading = false;
-      reject(new Error('Failed to load Yandex context script'));
-    };
-
-    document.head.appendChild(script);
-  });
-};
-
-onMounted(async () => {
-  try {
-    await loadYandexScript();
-
-    const { binaryTheme } = useTheme();
-
-    window.yaContextCb.push(() => {
-      Ya?.Context?.AdvManager?.render({
-        blockId: props.data.blockId,
-        renderTo: uid,
-        darkTheme: binaryTheme.value === 'dark',
-      });
-    });
-  } catch (error) {
-    console.error('Failed to load Yandex ads:', error);
-  }
-});
-</script>
-
-<template>
-  <div :id="uid">
-    <AdsReplacer />
-  </div>
-</template>
+<script lang="ts" setup>
+import type { EruditAdsYandex } from '@erudit-js/core/eruditConfig/ads';
+
+declare global {
+  interface Window {
+    yaContextCb: Array<() => void>;
+    __yandexScriptLoaded?: boolean;
+    __yandexScriptLoading?: boolean;
+  }
+
+  var Ya: any;
+}
+
+const props = defineProps<{ data: EruditAdsYandex }>();
+const uid = useId();
+
+const loadYandexScript = (): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    // Script already loaded
+    if (window.__yandexScriptLoaded) {
+      resolve();
+      return;
+    }
+
+    // Script is currently loading, wait for it
+    if (window.__yandexScriptLoading) {
+      const checkLoaded = () => {
+        if (window.__yandexScriptLoaded) {
+          resolve();
+        } else {
+          setTimeout(checkLoaded, 50);
+        }
+      };
+      checkLoaded();
+      return;
+    }
+
+    // Load script for the first time
+    window.__yandexScriptLoading = true;
+    window.yaContextCb = window.yaContextCb || [];
+
+    const script = document.createElement('script');
+    script.src = 'https://yandex.ru/ads/system/context.js';
+    script.async = true;
+
+    script.onload = () => {
+      window.__yandexScriptLoaded = true;
+      window.__yandexScriptLoading = false;
+      resolve();
+    };
+
+    script.onerror = () => {
+      window.__yandexScriptLoading = false;
+      reject(new Error('Failed to load Yandex context script'));
+    };
+
+    document.head.appendChild(script);
+  });
+};
+
+onMounted(async () => {
+  try {
+    await loadYandexScript();
+
+    const { binaryTheme } = useTheme();
+
+    window.yaContextCb.push(() => {
+      Ya?.Context?.AdvManager?.render({
+        blockId: props.data.blockId,
+        renderTo: uid,
+        darkTheme: binaryTheme.value === 'dark',
+      });
+    });
+  } catch (error) {
+    console.error('Failed to load Yandex ads:', error);
+  }
+});
+</script>
+
+<template>
+  <div :id="uid">
+    <AdsReplacer />
+  </div>
+</template>

package/app/components/aside/AsideListItem.vue

@@ -1,61 +1,61 @@
-<script lang="ts" setup>
-import type { MaybeMyIconName } from '#my-icons';
-
-const { to, hoverable = true } = defineProps<{
-  to?: string;
-  icon?: MaybeMyIconName;
-  main?: string;
-  secondary?: string | number;
-  active?: boolean;
-  hoverable?: boolean;
-}>();
-
-const isExternalLink = computed(() => {
-  return to?.startsWith('http');
-});
-</script>
-
-<template>
-  <EruditLink
-    :class="[
-      `border-border block min-h-(--h-min-aside-item) border-b bg-transparent
-      text-sm transition-[background,color]`,
-      hoverable && 'hocus:bg-bg-accent cursor-pointer',
-      active
-        ? 'text-brand'
-        : ['text-text-muted', hoverable && 'hocus:text-text'],
-    ]"
-    :to
-  >
-    <slot>
-      <div
-        class="gap-normal px-normal flex min-h-(--h-min-aside-item)
-          items-center"
-      >
-        <MaybeMyIcon v-if="icon" :name="icon" class="shrink-0 text-[23px]" />
-        <slot name="icon" v-else-if="$slots.icon"></slot>
-
-        <span v-if="main" class="relative">
-          {{ main }}
-          <MyIcon
-            v-if="isExternalLink"
-            name="arrow/outward"
-            class="text-text-dimmed absolute -top-[1px] -right-[16px] text-xs"
-          />
-        </span>
-        <slot name="main" v-else-if="$slots.main"></slot>
-
-        <span
-          v-if="secondary"
-          :class="[
-            'text-text-dimmed text-xs font-[500]',
-            isExternalLink && 'ps-[5px]',
-          ]"
-        >
-          {{ secondary }}
-        </span>
-        <slot name="secondary" v-else-if="$slots.secondary"></slot>
-      </div>
-    </slot>
-  </EruditLink>
-</template>
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+
+const { to, hoverable = true } = defineProps<{
+  to?: string;
+  icon?: MaybeMyIconName;
+  main?: string;
+  secondary?: string | number;
+  active?: boolean;
+  hoverable?: boolean;
+}>();
+
+const isExternalLink = computed(() => {
+  return to?.startsWith('http');
+});
+</script>
+
+<template>
+  <EruditLink
+    :class="[
+      `border-border block min-h-(--h-min-aside-item) border-b bg-transparent
+      text-sm transition-[background,color]`,
+      hoverable && 'hocus:bg-bg-accent cursor-pointer',
+      active
+        ? 'text-brand'
+        : ['text-text-muted', hoverable && 'hocus:text-text'],
+    ]"
+    :to
+  >
+    <slot>
+      <div
+        class="gap-normal px-normal flex min-h-(--h-min-aside-item)
+          items-center"
+      >
+        <MaybeMyIcon v-if="icon" :name="icon" class="shrink-0 text-[23px]" />
+        <slot name="icon" v-else-if="$slots.icon"></slot>
+
+        <span v-if="main" class="relative">
+          {{ main }}
+          <MyIcon
+            v-if="isExternalLink"
+            name="arrow/outward"
+            class="text-text-dimmed absolute -top-[1px] -right-[16px] text-xs"
+          />
+        </span>
+        <slot name="main" v-else-if="$slots.main"></slot>
+
+        <span
+          v-if="secondary"
+          :class="[
+            'text-text-dimmed text-xs font-[500]',
+            isExternalLink && 'ps-[5px]',
+          ]"
+        >
+          {{ secondary }}
+        </span>
+        <slot name="secondary" v-else-if="$slots.secondary"></slot>
+      </div>
+    </slot>
+  </EruditLink>
+</template>

package/app/components/aside/AsideMajor.vue

@@ -1,8 +1,8 @@
-<template>
-  <div class="flex h-full flex-col">
-    <AsideMajorSiteInfo />
-    <AsideMajorPaneSwitcher />
-    <AsideMajorPaneHolder />
-    <AdsBannerAside v-if="adsAsideAllowed()" />
-  </div>
-</template>
+<template>
+  <div class="flex h-full flex-col">
+    <AsideMajorSiteInfo />
+    <AsideMajorPaneSwitcher />
+    <AsideMajorPaneHolder />
+    <AdsBannerAside v-if="adsAsideAllowed()" />
+  </div>
+</template>

package/app/components/aside/AsideMinor.vue

@@ -1,68 +1,68 @@
-<script lang="ts" setup>
-const { asideMinorState } = useAsideMinor();
-const mouted = ref(false);
-const showLoadingIcon = ref(false);
-const loadingIconDelay = 500;
-let loadingTimer: ReturnType<typeof setTimeout> | null = null;
-
-onMounted(() => {
-  mouted.value = true;
-});
-
-watch(
-  asideMinorState,
-  () => {
-    if (loadingTimer) {
-      clearTimeout(loadingTimer);
-      loadingTimer = null;
-    }
-
-    showLoadingIcon.value = false;
-
-    loadingTimer = setTimeout(() => {
-      showLoadingIcon.value = true;
-    }, loadingIconDelay);
-  },
-  { immediate: true },
-);
-
-onUnmounted(() => {
-  if (loadingTimer) {
-    clearTimeout(loadingTimer);
-  }
-});
-</script>
-
-<template>
-  <div class="absolute top-0 left-0 h-full w-full">
-    <TransitionFade>
-      <Suspense v-if="mouted" :key="asideMinorState?.type">
-        <template #default :timeout="10">
-          <LazyAsideMinorNews v-if="asideMinorState?.type === 'news'" />
-          <LazyAsideMinorContributor
-            v-else-if="asideMinorState?.type === 'contributor'"
-          />
-          <LazyAsideMinorContentContributions
-            v-else-if="asideMinorState?.type === 'content-contributions'"
-          />
-          <LazyAsideMinorContentPage
-            v-else-if="asideMinorState?.type === 'content-page'"
-          />
-          <LazyAsideMinorContentTopic
-            v-else-if="asideMinorState?.type === 'content-topic'"
-          />
-          <div v-else></div>
-        </template>
-        <template #fallback>
-          <div
-            v-if="showLoadingIcon"
-            class="absolute top-0 left-0 grid h-full w-full place-items-center"
-          >
-            <Loading class="text-text-disabled text-[65px]" />
-          </div>
-          <div v-else></div>
-        </template>
-      </Suspense>
-    </TransitionFade>
-  </div>
-</template>
+<script lang="ts" setup>
+const { asideMinorState } = useAsideMinor();
+const mouted = ref(false);
+const showLoadingIcon = ref(false);
+const loadingIconDelay = 500;
+let loadingTimer: ReturnType<typeof setTimeout> | null = null;
+
+onMounted(() => {
+  mouted.value = true;
+});
+
+watch(
+  asideMinorState,
+  () => {
+    if (loadingTimer) {
+      clearTimeout(loadingTimer);
+      loadingTimer = null;
+    }
+
+    showLoadingIcon.value = false;
+
+    loadingTimer = setTimeout(() => {
+      showLoadingIcon.value = true;
+    }, loadingIconDelay);
+  },
+  { immediate: true },
+);
+
+onUnmounted(() => {
+  if (loadingTimer) {
+    clearTimeout(loadingTimer);
+  }
+});
+</script>
+
+<template>
+  <div class="absolute top-0 left-0 h-full w-full">
+    <TransitionFade>
+      <Suspense v-if="mouted" :key="asideMinorState?.type">
+        <template #default :timeout="10">
+          <LazyAsideMinorNews v-if="asideMinorState?.type === 'news'" />
+          <LazyAsideMinorContributor
+            v-else-if="asideMinorState?.type === 'contributor'"
+          />
+          <LazyAsideMinorContentContributions
+            v-else-if="asideMinorState?.type === 'content-contributions'"
+          />
+          <LazyAsideMinorContentPage
+            v-else-if="asideMinorState?.type === 'content-page'"
+          />
+          <LazyAsideMinorContentTopic
+            v-else-if="asideMinorState?.type === 'content-topic'"
+          />
+          <div v-else></div>
+        </template>
+        <template #fallback>
+          <div
+            v-if="showLoadingIcon"
+            class="absolute top-0 left-0 grid h-full w-full place-items-center"
+          >
+            <Loading class="text-text-disabled text-[65px]" />
+          </div>
+          <div v-else></div>
+        </template>
+      </Suspense>
+    </TransitionFade>
+  </div>
+</template>

package/app/components/aside/AsidePlainMessage.vue

@@ -1,9 +1,9 @@
-<script lang="ts" setup>
-defineProps<{ text: string }>();
-</script>
-
-<template>
-  <p class="text-text-dimmed px-normal py-big text-center font-semibold">
-    {{ formatText(text) }}
-  </p>
-</template>
+<script lang="ts" setup>
+defineProps<{ text: string }>();
+</script>
+
+<template>
+  <p class="text-text-dimmed px-normal py-big text-center font-semibold">
+    {{ formatText(text) }}
+  </p>
+</template>

package/app/components/aside/AsideSwitch.vue

@@ -1,76 +1,76 @@
-<script lang="ts" setup>
-const asideState = useAsideState();
-const canShowSwitches = useCanShowAsideSwitches();
-const asideType = inject(asideTypeSymbol);
-
-const isMajor = computed(() => asideType === AsideType.Major);
-const isMinor = computed(() => asideType === AsideType.Minor);
-
-if (import.meta.client) {
-  callOnce(async () => {
-    // Wait for possible layout shifts triggering scroll events
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    let lastY = window.scrollY;
-    let sumDelta = 0;
-    let scrollTimeout: any;
-
-    window.addEventListener('scroll', () => {
-      const currentY = window.scrollY;
-      const delta = currentY - lastY;
-
-      sumDelta += delta;
-
-      asideState.value.scrolledUp = sumDelta <= 5;
-
-      lastY = currentY;
-
-      clearTimeout(scrollTimeout);
-      scrollTimeout = setTimeout(() => {
-        sumDelta = 0;
-      }, 200);
-    });
-  });
-}
-</script>
-
-<template>
-  <div
-    :class="[
-      /* Variables */
-      `micro:[--_switchSize:110px] [--_switchGap:var(--spacing-main)]
-      [--_switchSize:80px]`,
-      /* */
-      `fixed bottom-0 flex size-(--_switchSize) items-center justify-center
-      pb-(--_switchGap) pl-(--_switchGap) transition-[left,right,opacity]`,
-      {
-        //
-        // Major Global
-        //
-        'aside1:opacity-0': isMajor,
-        // Major Can Show
-        'left-0 opacity-100': isMajor && canShowSwitches,
-        // Major Cannot Show
-        '-left-(--_switchSize) opacity-0': isMajor && !canShowSwitches,
-
-        //
-        // Minor Global
-        //
-        'aside2:opacity-0 -scale-x-100': isMinor,
-        // Minor Can Show
-        'right-0 opacity-100': isMinor && canShowSwitches,
-        // Minor Cannot Show
-        '-right-(--_switchSize) opacity-0': isMinor && !canShowSwitches,
-      },
-    ]"
-  >
-    <button
-      @click="asideState.opened = asideType"
-      class="hocus:opacity-100 flex size-full cursor-pointer items-center
-        justify-center bg-neutral-500 opacity-90
-        shadow-[0_0_20px_20px_var(--color-bg-main)] transition-opacity"
-    >
-      <MyIcon name="aside-open" class="text-bg-main size-[60%]" />
-    </button>
-  </div>
-</template>
+<script lang="ts" setup>
+const asideState = useAsideState();
+const canShowSwitches = useCanShowAsideSwitches();
+const asideType = inject(asideTypeSymbol);
+
+const isMajor = computed(() => asideType === AsideType.Major);
+const isMinor = computed(() => asideType === AsideType.Minor);
+
+if (import.meta.client) {
+  callOnce(async () => {
+    // Wait for possible layout shifts triggering scroll events
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    let lastY = window.scrollY;
+    let sumDelta = 0;
+    let scrollTimeout: any;
+
+    window.addEventListener('scroll', () => {
+      const currentY = window.scrollY;
+      const delta = currentY - lastY;
+
+      sumDelta += delta;
+
+      asideState.value.scrolledUp = sumDelta <= 5;
+
+      lastY = currentY;
+
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        sumDelta = 0;
+      }, 200);
+    });
+  });
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      /* Variables */
+      `micro:[--_switchSize:110px] [--_switchGap:var(--spacing-main)]
+      [--_switchSize:80px]`,
+      /* */
+      `fixed bottom-0 flex size-(--_switchSize) items-center justify-center
+      pb-(--_switchGap) pl-(--_switchGap) transition-[left,right,opacity]`,
+      {
+        //
+        // Major Global
+        //
+        'aside1:opacity-0': isMajor,
+        // Major Can Show
+        'left-0 opacity-100': isMajor && canShowSwitches,
+        // Major Cannot Show
+        '-left-(--_switchSize) opacity-0': isMajor && !canShowSwitches,
+
+        //
+        // Minor Global
+        //
+        'aside2:opacity-0 -scale-x-100': isMinor,
+        // Minor Can Show
+        'right-0 opacity-100': isMinor && canShowSwitches,
+        // Minor Cannot Show
+        '-right-(--_switchSize) opacity-0': isMinor && !canShowSwitches,
+      },
+    ]"
+  >
+    <button
+      @click="asideState.opened = asideType"
+      class="hocus:opacity-100 flex size-full cursor-pointer items-center
+        justify-center bg-neutral-500 opacity-90
+        shadow-[0_0_20px_20px_var(--color-bg-main)] transition-opacity"
+    >
+      <MyIcon name="aside-open" class="text-bg-main size-[60%]" />
+    </button>
+  </div>
+</template>