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

package/app/components/ads/Ads.vue

@@ -2,9 +2,9 @@
 import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
 
 import {
-    LazyAdsProviderCustom,
-    LazyAdsProviderYandex,
-    LazyAdsReplacer,
+  LazyAdsProviderCustom,
+  LazyAdsProviderYandex,
+  LazyAdsReplacer,
 } from '#components';
 
 const props = defineProps<{ data: EruditAds }>();
@@ -14,26 +14,26 @@ const adsKey = ref(0);
 const AdsComponent = shallowRef<Component>();
 
 function updateAds() {
-    AdsComponent.value = (() => {
-        switch (props.data?.provider) {
-            case 'replacer':
-                return LazyAdsReplacer;
-            case 'yandex':
-                return LazyAdsProviderYandex;
-            case 'custom':
-                return LazyAdsProviderCustom;
-        }
+  AdsComponent.value = (() => {
+    switch (props.data?.provider) {
+      case 'replacer':
+        return LazyAdsReplacer;
+      case 'yandex':
+        return LazyAdsProviderYandex;
+      case 'custom':
+        return LazyAdsProviderCustom;
+    }
 
-        return undefined;
-    })();
-    adsKey.value++;
+    return undefined;
+  })();
+  adsKey.value++;
 }
 
 onMounted(() => {
-    watch(() => route.path, updateAds, { immediate: true });
+  watch(() => route.path, updateAds, { immediate: true });
 });
 </script>
 
 <template>
-    <AdsComponent v-if="AdsComponent" :data :key="adsKey" />
+  <AdsComponent v-if="AdsComponent" :data :key="adsKey" />
 </template>

package/app/components/ads/AdsBannerAside.vue

@@ -4,42 +4,42 @@ import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
 const adsData = ref<EruditAds>();
 
 onMounted(() => {
-    const asideAds = ERUDIT.config.project.ads!.aside!;
+  const asideAds = ERUDIT.config.ads!.aside!;
 
-    if (asideAds.provider === 'custom') {
-        let banners =
-            window.innerHeight <= 700
-                ? asideAds.banners.mobile
-                : asideAds.banners.full;
+  if (asideAds.provider === 'custom') {
+    let banners =
+      window.innerHeight <= 700
+        ? asideAds.banners.mobile
+        : asideAds.banners.full;
 
-        if (!banners) {
-            banners = asideAds.banners.full || asideAds.banners.mobile;
-        }
-
-        if (!banners) {
-            return;
-        }
+    if (!banners) {
+      banners = asideAds.banners.full || asideAds.banners.mobile;
+    }
 
-        adsData.value = {
-            provider: 'custom',
-            banners: banners,
-        };
-    } else {
-        adsData.value = asideAds;
+    if (!banners) {
+      return;
     }
+
+    adsData.value = {
+      provider: 'custom',
+      banners: banners,
+    };
+  } else {
+    adsData.value = asideAds;
+  }
 });
 </script>
 
 <template>
-    <section
-        v-if="adsData"
-        class="p-small border-border border-t [@media(max-height:500px)]:hidden"
+  <section
+    v-if="adsData"
+    class="p-small border-border border-t [@media(max-height:500px)]:hidden"
+  >
+    <div
+      class="relative max-h-[300px] overflow-hidden
+        [@media(max-height:700px)]:max-h-[100px]"
     >
-        <div
-            class="relative max-h-[300px] overflow-hidden
-                [@media(max-height:700px)]:max-h-[100px]"
-        >
-            <Ads :data="adsData" />
-        </div>
-    </section>
+      <Ads :data="adsData" />
+    </div>
+  </section>
 </template>

package/app/components/ads/AdsBannerBottom.vue

@@ -4,14 +4,14 @@ import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
 const adsData = ref<EruditAds>();
 
 onMounted(() => {
-    adsData.value = ERUDIT.config.project.ads!.bottom!;
+  adsData.value = ERUDIT.config.ads!.bottom!;
 });
 </script>
 
 <template>
-    <section v-if="adsData" class="px-main py-main">
-        <div class="relative max-h-[300px] overflow-hidden">
-            <Ads :data="adsData" />
-        </div>
-    </section>
+  <section v-if="adsData" class="px-main py-main">
+    <div class="relative max-h-[300px] overflow-hidden">
+      <Ads :data="adsData" />
+    </div>
+  </section>
 </template>

package/app/components/ads/AdsReplacer.vue

@@ -3,26 +3,24 @@ const phrase = await usePhrases('ads_replacer');
 </script>
 
 <template>
-    <div class="max-h-[inherit] overflow-hidden">
-        <div class="h-dvh w-dvw"></div>
-        <div class="[container-type:size] absolute top-0 left-0 h-full w-full">
-            <div
-                class="text-text-muted gap-normal @max-[550px]:gap-small flex
-                    h-full w-full flex-row items-center justify-center
-                    bg-neutral-200
-                    shadow-[inset_0px_0px_5px_0px_light-dark(rgba(0,0,0,0.12),rgba(255,255,255,0.08))]
-                    @max-[550px]:flex-col @max-[550px]:text-center
-                    dark:bg-neutral-800"
-            >
-                <MyIcon
-                    name="handshake"
-                    class="text-[70px] [@container(max-height:150px)]:hidden"
-                />
-                <div
-                    v-html="phrase.ads_replacer"
-                    class="p-small text-lg @max-[550px]:text-sm"
-                ></div>
-            </div>
-        </div>
+  <div class="max-h-[inherit] overflow-hidden">
+    <div class="h-dvh w-dvw"></div>
+    <div class="[container-type:size] absolute top-0 left-0 h-full w-full">
+      <div
+        class="text-text-muted gap-normal @max-[550px]:gap-small flex h-full
+          w-full flex-row items-center justify-center bg-neutral-200
+          shadow-[inset_0px_0px_5px_0px_light-dark(rgba(0,0,0,0.12),rgba(255,255,255,0.08))]
+          @max-[550px]:flex-col @max-[550px]:text-center dark:bg-neutral-800"
+      >
+        <MyIcon
+          name="handshake"
+          class="text-[70px] [@container(max-height:150px)]:hidden"
+        />
+        <div
+          v-html="phrase.ads_replacer"
+          class="p-small text-lg @max-[550px]:text-sm"
+        ></div>
+      </div>
     </div>
+  </div>
 </template>

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

@@ -4,16 +4,16 @@ import type { EruditAdsCustom } from '@erudit-js/core/eruditConfig/ads';
 const props = defineProps<{ data: EruditAdsCustom }>();
 
 const randomBanner =
-    props.data.banners[Math.floor(Math.random() * props.data.banners.length)]!;
+  props.data.banners[Math.floor(Math.random() * props.data.banners.length)]!;
 </script>
 
 <template>
-    <div>
-        <a :href="randomBanner.link" target="_blank" class="block">
-            <img
-                :src="randomBanner.src"
-                class="mx-auto my-0 block object-contain object-center"
-            />
-        </a>
-    </div>
+  <div>
+    <a :href="randomBanner.link" target="_blank" class="block">
+      <img
+        :src="randomBanner.src"
+        class="mx-auto my-0 block object-contain object-center"
+      />
+    </a>
+  </div>
 </template>

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

@@ -2,83 +2,83 @@
 import type { EruditAdsYandex } from '@erudit-js/core/eruditConfig/ads';
 
 declare global {
-    interface Window {
-        yaContextCb: Array<() => void>;
-        __yandexScriptLoaded?: boolean;
-        __yandexScriptLoading?: boolean;
-    }
+  interface Window {
+    yaContextCb: Array<() => void>;
+    __yandexScriptLoaded?: boolean;
+    __yandexScriptLoading?: boolean;
+  }
 
-    var Ya: any;
+  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;
-        }
+  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;
+    // 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 || [];
+    // 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;
+    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.onload = () => {
+      window.__yandexScriptLoaded = true;
+      window.__yandexScriptLoading = false;
+      resolve();
+    };
 
-        script.onerror = () => {
-            window.__yandexScriptLoading = false;
-            reject(new Error('Failed to load Yandex context script'));
-        };
+    script.onerror = () => {
+      window.__yandexScriptLoading = false;
+      reject(new Error('Failed to load Yandex context script'));
+    };
 
-        document.head.appendChild(script);
-    });
+    document.head.appendChild(script);
+  });
 };
 
 onMounted(async () => {
-    try {
-        await loadYandexScript();
+  try {
+    await loadYandexScript();
 
-        const { binaryTheme } = useTheme();
+    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);
-    }
+    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>
+  <div :id="uid">
+    <AdsReplacer />
+  </div>
 </template>

package/app/components/aside/AsideListItem.vue

@@ -2,65 +2,60 @@
 import type { MaybeMyIconName } from '#my-icons';
 
 const { to, hoverable = true } = defineProps<{
-    to?: string;
-    icon?: MaybeMyIconName;
-    main?: string;
-    secondary?: string | number;
-    active?: boolean;
-    hoverable?: boolean;
+  to?: string;
+  icon?: MaybeMyIconName;
+  main?: string;
+  secondary?: string | number;
+  active?: boolean;
+  hoverable?: boolean;
 }>();
 
 const isExternalLink = computed(() => {
-    return to?.startsWith('http');
+  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>
+  <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="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>
+        <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>
+  <div class="flex h-full flex-col">
+    <AsideMajorSiteInfo />
+    <AsideMajorPaneSwitcher />
+    <AsideMajorPaneHolder />
+    <AdsBannerAside v-if="adsAsideAllowed()" />
+  </div>
 </template>

package/app/components/aside/AsideMinor.vue

@@ -6,68 +6,63 @@ const loadingIconDelay = 500;
 let loadingTimer: ReturnType<typeof setTimeout> | null = null;
 
 onMounted(() => {
-    mouted.value = true;
+  mouted.value = true;
 });
 
 watch(
-    asideMinorState,
-    () => {
-        if (loadingTimer) {
-            clearTimeout(loadingTimer);
-            loadingTimer = null;
-        }
+  asideMinorState,
+  () => {
+    if (loadingTimer) {
+      clearTimeout(loadingTimer);
+      loadingTimer = null;
+    }
 
-        showLoadingIcon.value = false;
+    showLoadingIcon.value = false;
 
-        loadingTimer = setTimeout(() => {
-            showLoadingIcon.value = true;
-        }, loadingIconDelay);
-    },
-    { immediate: true },
+    loadingTimer = setTimeout(() => {
+      showLoadingIcon.value = true;
+    }, loadingIconDelay);
+  },
+  { immediate: true },
 );
 
 onUnmounted(() => {
-    if (loadingTimer) {
-        clearTimeout(loadingTimer);
-    }
+  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>
+  <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>