erudit 4.0.0-dev.5 → 4.0.1

package/app/components/Prose.vue

@@ -1,55 +1,55 @@
-<script lang="ts" setup>
-import type { AnySchema, GenericStorage, ProseElement } from '@jsprose/core';
-import type { EruditMode } from '@erudit-js/core/mode';
-import { Prose, type ProseContext } from '@erudit-js/prose/app';
-
-import { EruditLink, MaybeMyIcon, TransitionFade } from '#components';
-
-const { element, storage, useHashUrl } = defineProps<{
-  element: ProseElement<AnySchema>;
-  storage: GenericStorage;
-  useHashUrl: boolean;
-}>();
-
-const runtimeConfig = useRuntimeConfig();
-
-const loadingSvg = useLoadingSvg();
-const route = useRoute();
-
-const hashUrl = computed(() => {
-  return useHashUrl
-    ? route.hash
-      ? route.hash.slice(1)
-      : undefined
-    : undefined;
-});
-
-const { setPreview, closePreview } = usePreview();
-
-const context: ProseContext = {
-  appElements,
-  mode: runtimeConfig.public.eruditMode as EruditMode,
-  languageCode: ERUDIT.config.language.current,
-  formatText,
-  pathUrl: route.path,
-  baseUrl: runtimeConfig.app.baseURL,
-  hashUrl,
-  eruditIcons: ICONS,
-  EruditIcon: MaybeMyIcon,
-  EruditTransition: TransitionFade,
-  EruditLink,
-  setPreview,
-  closePreview,
-  loadingSvg,
-};
-</script>
-
-<template>
-  <Prose
-    :element
-    :storage
-    :context
-    :style="{ '--proseGap': 'calc(var(--spacing-main)*1.1)' }"
-    class="py-main px-[calc(var(--proseGap)-var(--proseAsideWidth))]"
-  />
-</template>
+<script lang="ts" setup>
+import type { AnySchema, GenericStorage, ProseElement } from '@jsprose/core';
+import type { EruditMode } from '@erudit-js/core/mode';
+import { Prose, type ProseContext } from '@erudit-js/prose/app';
+
+import { EruditLink, MaybeMyIcon, TransitionFade } from '#components';
+
+const { element, storage, useHashUrl } = defineProps<{
+  element: ProseElement<AnySchema>;
+  storage: GenericStorage;
+  useHashUrl: boolean;
+}>();
+
+const runtimeConfig = useRuntimeConfig();
+
+const loadingSvg = useLoadingSvg();
+const route = useRoute();
+
+const hashUrl = computed(() => {
+  return useHashUrl
+    ? route.hash
+      ? route.hash.slice(1)
+      : undefined
+    : undefined;
+});
+
+const { setPreview, closePreview } = usePreview();
+
+const context: ProseContext = {
+  appElements,
+  mode: runtimeConfig.public.eruditMode as EruditMode,
+  languageCode: ERUDIT.config.language.current,
+  formatText,
+  pathUrl: route.path,
+  baseUrl: runtimeConfig.app.baseURL,
+  hashUrl,
+  eruditIcons: ICONS,
+  EruditIcon: MaybeMyIcon,
+  EruditTransition: TransitionFade,
+  EruditLink,
+  setPreview,
+  closePreview,
+  loadingSvg,
+};
+</script>
+
+<template>
+  <Prose
+    :element
+    :storage
+    :context
+    :style="{ '--proseGap': 'calc(var(--spacing-main)*1.1)' }"
+    class="py-main px-[calc(var(--proseGap)-var(--proseAsideWidth))]"
+  />
+</template>

package/app/components/ScrollHolder.vue

@@ -1,20 +1,20 @@
-<script lang="ts" setup>
-const { direction = 'ltr' } = defineProps<{
-  direction?: 'ltr' | 'rtl';
-}>();
-</script>
-
-<template>
-  <template v-if="direction === 'ltr'">
-    <div class="nice-scrollbars h-full w-full overflow-auto">
-      <slot></slot>
-    </div>
-  </template>
-  <template v-else>
-    <div dir="rtl" class="nice-scrollbars h-full w-full overflow-auto">
-      <div dir="ltr">
-        <slot></slot>
-      </div>
-    </div>
-  </template>
-</template>
+<script lang="ts" setup>
+const { direction = 'ltr' } = defineProps<{
+  direction?: 'ltr' | 'rtl';
+}>();
+</script>
+
+<template>
+  <template v-if="direction === 'ltr'">
+    <div class="nice-scrollbars h-full w-full overflow-auto">
+      <slot></slot>
+    </div>
+  </template>
+  <template v-else>
+    <div dir="rtl" class="nice-scrollbars h-full w-full overflow-auto">
+      <div dir="ltr">
+        <slot></slot>
+      </div>
+    </div>
+  </template>
+</template>

package/app/components/SmartMedia.vue

@@ -1,107 +1,107 @@
-<script lang="ts" setup>
-import { isMyIcon, type MyIconName } from '#my-icons';
-import { computed, ref, watch } from 'vue';
-
-const { url } = defineProps<{ url?: MyIconName | (string & {}) }>();
-
-const mediaType = computed<'icon' | 'image' | 'video' | null>(() => {
-  if (!url) {
-    return null;
-  }
-
-  const extension = url.split('.').pop() || '';
-
-  if (isMyIcon(url)) {
-    return 'icon';
-  }
-
-  if (['mp4', 'webm', 'ogg'].includes(extension)) {
-    return 'video';
-  }
-
-  if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(extension)) {
-    return 'image';
-  }
-
-  throw new Error(`Unknown media type for URL: ${url}`);
-});
-
-const visible = ref(false);
-const loaded = ref(false);
-const loading = computed(() => !url || !loaded.value || !visible.value);
-
-const mediaElement = useTemplateRef('media');
-
-watch(
-  () => url,
-  () => {
-    loaded.value = false;
-  },
-);
-
-onMounted(() => {
-  const intersectionObserver = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      visible.value = entry.isIntersecting;
-    });
-  });
-
-  if (mediaElement.value) {
-    intersectionObserver.observe(mediaElement.value);
-  }
-});
-</script>
-
-<template>
-  <div
-    ref="media"
-    class="overflow-hidden"
-    :style="{
-      '--_mediaColor': 'var(--mediaColor,var(--color-text-disabled))',
-    }"
-  >
-    <div class="relative h-full w-full">
-      <TransitionFade>
-        <div v-if="loading">
-          <div
-            class="absolute z-10 h-full w-full animate-pulse
-              bg-(--_mediaColor)/50 transition-[opacity,background]"
-          ></div>
-        </div>
-      </TransitionFade>
-      <TransitionFade>
-        <template v-if="visible">
-          <div v-if="mediaType === 'icon'" class="absolute h-full w-full">
-            <div
-              class="grid size-full place-items-center bg-(--_mediaColor)/30
-                text-(--_mediaColor) transition-[color,background]"
-            >
-              <MyIcon
-                @vue:mounted="loaded = true"
-                :name="url as MyIconName"
-                class="h-2/3 w-2/3"
-              />
-            </div>
-          </div>
-          <img
-            v-if="mediaType === 'image'"
-            :src="url"
-            loading="lazy"
-            @load="loaded = true"
-            class="absolute block h-full w-full object-cover"
-          />
-          <video
-            v-else-if="mediaType === 'video'"
-            :src="url"
-            @loadeddata="loaded = true"
-            autoplay
-            muted
-            loop
-            playsinline
-            class="absolute block h-full w-full object-cover"
-          ></video>
-        </template>
-      </TransitionFade>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import { isMyIcon, type MyIconName } from '#my-icons';
+import { computed, ref, watch } from 'vue';
+
+const { url } = defineProps<{ url?: MyIconName | (string & {}) }>();
+
+const mediaType = computed<'icon' | 'image' | 'video' | null>(() => {
+  if (!url) {
+    return null;
+  }
+
+  const extension = url.split('.').pop() || '';
+
+  if (isMyIcon(url)) {
+    return 'icon';
+  }
+
+  if (['mp4', 'webm', 'ogg'].includes(extension)) {
+    return 'video';
+  }
+
+  if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(extension)) {
+    return 'image';
+  }
+
+  throw new Error(`Unknown media type for URL: ${url}`);
+});
+
+const visible = ref(false);
+const loaded = ref(false);
+const loading = computed(() => !url || !loaded.value || !visible.value);
+
+const mediaElement = useTemplateRef('media');
+
+watch(
+  () => url,
+  () => {
+    loaded.value = false;
+  },
+);
+
+onMounted(() => {
+  const intersectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      visible.value = entry.isIntersecting;
+    });
+  });
+
+  if (mediaElement.value) {
+    intersectionObserver.observe(mediaElement.value);
+  }
+});
+</script>
+
+<template>
+  <div
+    ref="media"
+    class="overflow-hidden"
+    :style="{
+      '--_mediaColor': 'var(--mediaColor,var(--color-text-disabled))',
+    }"
+  >
+    <div class="relative h-full w-full">
+      <TransitionFade>
+        <div v-if="loading">
+          <div
+            class="absolute z-10 h-full w-full animate-pulse
+              bg-(--_mediaColor)/50 transition-[opacity,background]"
+          ></div>
+        </div>
+      </TransitionFade>
+      <TransitionFade>
+        <template v-if="visible">
+          <div v-if="mediaType === 'icon'" class="absolute h-full w-full">
+            <div
+              class="grid size-full place-items-center bg-(--_mediaColor)/30
+                text-(--_mediaColor) transition-[color,background]"
+            >
+              <MyIcon
+                @vue:mounted="loaded = true"
+                :name="url as MyIconName"
+                class="h-2/3 w-2/3"
+              />
+            </div>
+          </div>
+          <img
+            v-if="mediaType === 'image'"
+            :src="url"
+            loading="lazy"
+            @load="loaded = true"
+            class="absolute block h-full w-full object-cover"
+          />
+          <video
+            v-else-if="mediaType === 'video'"
+            :src="url"
+            @loadeddata="loaded = true"
+            autoplay
+            muted
+            loop
+            playsinline
+            class="absolute block h-full w-full object-cover"
+          ></video>
+        </template>
+      </TransitionFade>
+    </div>
+  </div>
+</template>

package/app/components/ads/Ads.vue

@@ -1,39 +1,39 @@
-<script lang="ts" setup>
-import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
-
-import {
-  LazyAdsProviderCustom,
-  LazyAdsProviderYandex,
-  LazyAdsReplacer,
-} from '#components';
-
-const props = defineProps<{ data: EruditAds }>();
-const route = useRoute();
-
-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;
-    }
-
-    return undefined;
-  })();
-  adsKey.value++;
-}
-
-onMounted(() => {
-  watch(() => route.path, updateAds, { immediate: true });
-});
-</script>
-
-<template>
-  <AdsComponent v-if="AdsComponent" :data :key="adsKey" />
-</template>
+<script lang="ts" setup>
+import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
+
+import {
+  LazyAdsProviderCustom,
+  LazyAdsProviderYandex,
+  LazyAdsReplacer,
+} from '#components';
+
+const props = defineProps<{ data: EruditAds }>();
+const route = useRoute();
+
+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;
+    }
+
+    return undefined;
+  })();
+  adsKey.value++;
+}
+
+onMounted(() => {
+  watch(() => route.path, updateAds, { immediate: true });
+});
+</script>
+
+<template>
+  <AdsComponent v-if="AdsComponent" :data :key="adsKey" />
+</template>

package/app/components/ads/AdsBannerAside.vue

@@ -1,45 +1,45 @@
-<script setup lang="ts">
-import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
-
-const adsData = ref<EruditAds>();
-
-onMounted(() => {
-  const asideAds = ERUDIT.config.ads!.aside!;
-
-  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;
-    }
-
-    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"
-  >
-    <div
-      class="relative max-h-[300px] overflow-hidden
-        [@media(max-height:700px)]:max-h-[100px]"
-    >
-      <Ads :data="adsData" />
-    </div>
-  </section>
-</template>
+<script setup lang="ts">
+import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
+
+const adsData = ref<EruditAds>();
+
+onMounted(() => {
+  const asideAds = ERUDIT.config.ads!.aside!;
+
+  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;
+    }
+
+    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"
+  >
+    <div
+      class="relative max-h-[300px] overflow-hidden
+        [@media(max-height:700px)]:max-h-[100px]"
+    >
+      <Ads :data="adsData" />
+    </div>
+  </section>
+</template>

package/app/components/ads/AdsBannerBottom.vue

@@ -1,17 +1,17 @@
-<script lang="ts" setup>
-import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
-
-const adsData = ref<EruditAds>();
-
-onMounted(() => {
-  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>
-</template>
+<script lang="ts" setup>
+import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
+
+const adsData = ref<EruditAds>();
+
+onMounted(() => {
+  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>
+</template>

package/app/components/ads/AdsReplacer.vue

@@ -1,26 +1,26 @@
-<script lang="ts" setup>
-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>
-</template>
+<script lang="ts" setup>
+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>
+</template>

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

@@ -1,19 +1,19 @@
-<script lang="ts" setup>
-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)]!;
-</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>
-</template>
+<script lang="ts" setup>
+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)]!;
+</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>
+</template>