erudit 3.0.0-dev.20 → 3.0.0-dev.22

package/app/app.vue

@@ -145,6 +145,8 @@ if (import.meta.client) {
 </script>
 
 <template>
+    <NuxtLoadingIndicator color="var(--brand)" />
+
     <SiteAside :type="AsideType.Major"><AsideMajor /></SiteAside>
     <SiteAside :type="AsideType.Minor"><AsideMinor /></SiteAside>
 

package/app/assets/icons/cameo-add.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+<path d="M896 0h-768c-70.6 0-128 57.4-128 128v576c0 70.6 57.4 128 128 128h192v160c0 12.2 6.8 23.2 17.6 28.6s23.8 4.2 33.6-3l247.4-185.6h277.4c70.6 0 128-57.4 128-128v-576c0-70.6-57.4-128-128-128zM688.6 465.2h-127.4v127.4c0 27.2-22 49.2-49.2 49.2s-49.2-22-49.2-49.2v-127.4h-127.4c-27.2 0-49.2-22-49.2-49.2s22-49.2 49.2-49.2h127.4v-127.4c0-27.2 22-49.2 49.2-49.2s49.2 22 49.2 49.2v127.4h127.4c27.2 0 49.2 22 49.2 49.2s-22 49.2-49.2 49.2z"></path>
+</svg>

package/app/assets/icons/diamond.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <path class="cls-1" d="M12,22.5L.3,8.5,3.8,1.5h16.4l3.5,7-11.7,14.1ZM9.2,7.3h5.6l-1.8-3.5h-2l-1.8,3.5ZM10.8,17.5v-7.8h-6.5l6.5,7.8ZM13.2,17.5l6.5-7.8h-6.5v7.8ZM17.4,7.3h3.1l-1.8-3.5h-3.1l1.8,3.5ZM3.5,7.3h3.1l1.8-3.5h-3.1l-1.8,3.5Z"/>
+</svg>

package/app/components/Avatar.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+import { detectStrictFileType } from '@erudit/utils/ext';
+
+const props = defineProps<{
+    src?: string;
+    icon?: MyIconName;
+    color?: string;
+    styling?: Partial<{
+        glow: boolean;
+        border: boolean;
+    }>;
+}>();
+
+const assetRoute = useAssetRoute();
+
+const avatarSrc = computed(() => {
+    return props.src ? assetRoute(props.src) : undefined;
+});
+
+const fallbackVisible = computed(() => {
+    return !avatarSrc.value /* || failed to load src */;
+});
+
+const avatarType = computed(() => {
+    return avatarSrc.value
+        ? detectStrictFileType(avatarSrc.value, 'image', 'video')
+        : undefined;
+});
+</script>
+
+<template>
+    <div
+        :class="[
+            $style.avatar,
+            styling?.glow && $style.glow,
+            styling?.border && $style.border,
+        ]"
+        :style="{ ['--avatarColor']: props.color }"
+    >
+        <div :class="$style.inner">
+            <div v-if="fallbackVisible" :class="$style.fallback">
+                <MyIcon :name="icon || '__missing'" />
+            </div>
+            <template v-else>
+                <img
+                    v-if="avatarType === 'image'"
+                    :src="avatarSrc"
+                    loading="lazy"
+                />
+                <video
+                    v-else
+                    :src="avatarSrc"
+                    preload="metadata"
+                    autoplay
+                    loop
+                    muted
+                ></video>
+            </template>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+.avatar {
+    --avatarSize: 110px;
+    --avatarColor: var(--border);
+
+    width: var(--avatarSize);
+    height: var(--avatarSize);
+    border-radius: 50%;
+
+    .inner {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 50%;
+
+        img,
+        video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+
+    .fallback {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+            45deg,
+            color-mix(in srgb, var(--avatarColor), black 10%),
+            color-mix(in srgb, var(--avatarColor), white 40%)
+        );
+        color: color-mix(in srgb, black, var(--avatarColor) 50%);
+        font-size: calc(var(--avatarSize) / 1.85);
+    }
+
+    //
+    //
+    //
+
+    &.glow {
+        box-shadow: 0 0 7px 7px
+            color-mix(in srgb, var(--avatarColor), transparent 85%);
+    }
+
+    &.border {
+        border: 2px solid var(--avatarColor);
+        padding: 2px;
+    }
+}
+</style>

package/app/components/EruditLink.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+const props = defineProps<{
+    to?: string;
+    prefetch?: boolean;
+}>();
+
+const EruditLink = defineNuxtLink({
+    prefetch: props.prefetch ?? true,
+    trailingSlash: 'append',
+});
+</script>
+
+<template>
+    <EruditLink :to="props.to">
+        <slot></slot>
+    </EruditLink>
+</template>

package/app/components/SiteMain.vue

@@ -11,9 +11,8 @@
 @use '$/def/bp';
 
 .main {
-    --_pMainBase: var(--gapBig);
-    --_pMainX: var(--_pMainBase);
-    --_pMainY: calc(var(--_pMainBase) / 2);
+    --_pMainX: 30px;
+    --_pMainY: 18px;
 
     position: relative;
     min-height: 100dvh;
@@ -21,7 +20,8 @@
     font-size: 18px;
 
     @include bp.below('mobile') {
-        --_pMainBase: var(--_bitran_asideWidth);
+        --_pMainX: 18px;
+        --_pMainY: 14px;
         font-size: 15px;
     }
 

package/app/components/ads/Ads.vue

@@ -4,9 +4,7 @@ import type { EruditAds } from '@erudit-js/cog/schema';
 import { LazyAdsProviderCustom, LazyAdsProviderYandex } from '#components';
 
 const props = defineProps<{ data: EruditAds }>();
-
 const route = useRoute();
-watch(() => route.path, updateAds);
 
 const adsKey = ref(0);
 const AdsComponent = shallowRef<Component>();
@@ -26,7 +24,7 @@ function updateAds() {
 }
 
 onMounted(() => {
-    updateAds();
+    watch(() => route.path, updateAds, { immediate: true });
 });
 </script>
 

package/app/components/ads/AdsProviderYandex.vue

@@ -4,39 +4,76 @@ import type { EruditAdsYandex } from '@erudit-js/cog/schema';
 declare global {
     interface Window {
         yaContextCb: Array<() => void>;
+        __yandexScriptLoaded?: boolean;
+        __yandexScriptLoading?: boolean;
     }
 
     var Ya: any;
 }
 
 const props = defineProps<{ data: EruditAdsYandex }>();
+const uid = useId();
 
-useHead({
-    script: [
-        {
-            key: '__darkMagicYandexCb',
-            innerHTML: 'window.yaContextCb=window.yaContextCb||[]',
-        },
-        {
-            key: '__darkMagicYandexContext',
-            src: 'https://yandex.ru/ads/system/context.js',
-            async: true,
-        },
-    ],
-});
+const loadYandexScript = (): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        // Script already loaded
+        if (window.__yandexScriptLoaded) {
+            resolve();
+            return;
+        }
 
-const uid = useId();
+        // Script is currently loading, wait for it
+        if (window.__yandexScriptLoading) {
+            const checkLoaded = () => {
+                if (window.__yandexScriptLoaded) {
+                    resolve();
+                } else {
+                    setTimeout(checkLoaded, 50);
+                }
+            };
+            checkLoaded();
+            return;
+        }
 
-onMounted(() => {
-    const theme = useTheme();
+        // Load script for the first time
+        window.__yandexScriptLoading = true;
+        window.yaContextCb = window.yaContextCb || [];
 
-    window?.yaContextCb?.push(() => {
-        Ya?.Context?.AdvManager?.render({
-            blockId: props.data.blockId,
-            renderTo: uid,
-            darkTheme: theme.binaryTheme.value === 'dark',
-        });
+        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 theme = useTheme();
+
+        window.yaContextCb.push(() => {
+            Ya?.Context?.AdvManager?.render({
+                blockId: props.data.blockId,
+                renderTo: uid,
+                darkTheme: theme.binaryTheme.value === 'dark',
+            });
+        });
+    } catch (error) {
+        console.error('Failed to load Yandex ads:', error);
+    }
 });
 </script>
 

package/app/components/aside/AsideListItem.vue

@@ -1,25 +1,42 @@
 <script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
+import { isMyIcon, type MyIconName } from '#my-icons';
+import { computed } from 'vue';
 
 const props = defineProps<{
     link?: string;
-    icon?: MyIconName;
+    icon?: string;
     main?: string;
     active?: boolean;
     secondary?: string;
 }>();
 
-const vnode = h(props.link ? defineNuxtLink({}) : 'div');
+const isExternalLink = computed(() => {
+    if (!props.link) return false;
+    return (
+        props.link.startsWith('http://') ||
+        props.link.startsWith('https://') ||
+        props.link.startsWith('//')
+    );
+});
+
+const vnode = h(
+    props.link ? defineNuxtLink({ trailingSlash: 'append' }) : 'div',
+);
 </script>
 
 <template>
     <component
         :is="vnode"
         :to="link"
+        :target="isExternalLink ? '_blank' : undefined"
+        :rel="isExternalLink ? 'noopener noreferrer' : undefined"
         :class="[$style.asideListItem, active ? $style.active : '']"
     >
         <slot>
-            <MyIcon v-if="icon" :name="icon" />
+            <template v-if="icon">
+                <MyIcon v-if="isMyIcon(icon)" :name="icon as MyIconName" />
+                <MyRuntimeIcon v-else name="AsideListItem Icon" :svg="icon" />
+            </template>
             <div :class="$style.main">{{ main }}</div>
             <div v-if="secondary" :class="$style.secondary">
                 {{ secondary }}

package/app/components/aside/AsideMinor.vue

@@ -2,7 +2,7 @@
 import { isTopicPart } from '@erudit-js/cog/schema';
 
 import { type AsideMinorNews, type AsideMinorData } from '@shared/aside/minor';
-import { trailingSlash } from '@erudit/utils/slash';
+import { trailingSlash } from '@erudit/utils/url';
 import { asideMinorKey } from '@app/scripts/aside/minor/state';
 
 import {

package/app/components/aside/major/SiteInfo.vue

@@ -29,14 +29,14 @@ const siteInfo = computed<SiteInfo>(() => {
 
 <template>
     <section :class="$style.siteInfo">
-        <NuxtLink v-if="siteInfo.logotype" to="/" :class="$style.logo">
+        <EruditLink v-if="siteInfo.logotype" to="/" :class="$style.logo">
             <img :src="baseUrlPath(siteInfo.logotype)" :alt="siteInfo.title" />
-        </NuxtLink>
+        </EruditLink>
         <div :class="[$style.textInfo, !siteInfo.logotype && $style.noLogo]">
             <h1 :class="$style.title">
-                <NuxtLink to="/">{{
+                <EruditLink to="/">{{
                     siteInfo.title || phrase.site_info_title
-                }}</NuxtLink>
+                }}</EruditLink>
             </h1>
             <div v-if="siteInfo.slogan" :class="$style.description">
                 {{ siteInfo.slogan }}

package/app/components/aside/major/panes/Pages.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
+import eruditConfig from '#erudit/config';
 import PaneContentScroll from '../PaneContentScroll.vue';
 
 const route = useRoute();
 
-const phrase = await usePhrases('main_page', 'contributors');
+const phrase = await usePhrases('main_page', 'contributors', 'sponsors');
 
 const { data: contributorCount } = await useAsyncData<number>(
     'contributor-count',
     () => $fetch('/api/contributor/count'),
 );
+
+const { data: sponsorCount } = await useAsyncData<number>('sponsor-count', () =>
+    $fetch('/api/sponsor/count'),
+);
 </script>
 
 <template>
@@ -27,5 +32,19 @@ const { data: contributorCount } = await useAsyncData<number>(
             :main="phrase.contributors"
             :secondary="contributorCount!.toString()"
         />
+        <AsideListItem
+            v-if="eruditConfig.sponsors"
+            icon="diamond"
+            link="/sponsors/"
+            :active="route.path === '/sponsors/'"
+            :main="phrase.sponsors"
+            :secondary="sponsorCount ? sponsorCount.toString() : ''"
+        />
+        <AsideListItem
+            v-for="customLink in eruditConfig.customLinks"
+            :link="customLink.href"
+            :main="customLink.label"
+            :icon="customLink.icon || 'link-external'"
+        />
     </PaneContentScroll>
 </template>

package/app/components/aside/major/panes/nav/fnav/FNavSeparator.vue

@@ -23,7 +23,7 @@ watch(navState!.value[props.navItem.id]!, onStateUpdate);
 
 <template>
     <div>
-        <NuxtLink
+        <EruditLink
             :to="`/group/${navItem.id}`"
             :class="[
                 $style.header,
@@ -38,7 +38,7 @@ watch(navState!.value[props.navItem.id]!, onStateUpdate);
                 v-if="navItem.flags"
                 :flags="navItem.flags"
             />
-        </NuxtLink>
+        </EruditLink>
         <FNavItem v-for="childItem of navItem.children" :navItem="childItem" />
     </div>
 </template>

package/app/components/aside/minor/AsideMinorTopLink.vue

@@ -2,13 +2,12 @@
 import type { MyIconName } from '#my-icons';
 
 defineProps<{ link?: string; icon: MyIconName; active?: boolean }>();
-
-const Link = defineNuxtLink({ prefetch: false });
 </script>
 
 <template>
-    <Link
+    <EruditLink
         :to="link"
+        :prefetch="false"
         :class="[
             $style.asideMinorTopLink,
             !link && $style.noLink,
@@ -16,7 +15,7 @@ const Link = defineNuxtLink({ prefetch: false });
         ]"
     >
         <MyIcon :name="icon" />
-    </Link>
+    </EruditLink>
 </template>
 
 <style lang="scss" module>

package/app/components/aside/minor/contributor/AsideMinorContributor.vue

@@ -8,23 +8,23 @@ import BookContribution from './BookContribution.vue';
 const contributorData = injectAsideData<AsideMinorContributor>();
 const phrase = await usePhrases('contribution');
 
-const bookContributions = (() => {
+const bookIdContributions = (() => {
     const grouped: Record<string, typeof contributorData.value.contributions> =
         {};
 
     contributorData.value.contributions.forEach((contribution) => {
-        const bookTitle = contribution.bookTitle || '';
-        if (!grouped[bookTitle]) {
-            grouped[bookTitle] = [];
+        const bookId = contribution.bookId || '';
+        if (!grouped[bookId]) {
+            grouped[bookId] = [];
         }
-        grouped[bookTitle].push(contribution);
+        grouped[bookId].push(contribution);
     });
 
     return grouped;
 })();
 
-const topLevelContributions = bookContributions[''];
-delete bookContributions[''];
+const topLevelContributions = bookIdContributions[''];
+delete bookIdContributions[''];
 </script>
 
 <template>
@@ -43,8 +43,8 @@ delete bookContributions[''];
                     />
                 </template>
                 <BookContribution
-                    v-for="(contributions, bookTitle) in bookContributions"
-                    :bookTitle
+                    v-for="(contributions, bookId) in bookIdContributions"
+                    :bookTitle="contributions[0]!.bookTitle!"
                     :contributions
                 />
             </TreeContainer>

package/app/components/aside/minor/topic/AsideMinorTopic.vue

@@ -9,7 +9,9 @@ import TopicContributors from './TopicContributors.vue';
 const topicData = injectAsideData<AsideMinorTopic>();
 const contributePaneVisible = ref(false);
 
-watch(topicData, () => (contributePaneVisible.value = false));
+watch(topicData, () => {
+    contributePaneVisible.value = false;
+});
 </script>
 
 <template>

package/app/components/aside/minor/topic/TopicContributors.vue

@@ -44,11 +44,16 @@ onMounted(() => {
     <section :class="$style.topicContributors" @click="listPaneVisible = true">
         <div :class="$style.showcase">
             <template v-if="showcase">
-                <ContributorAvatar
+                <Avatar
                     v-for="contributor of showcase"
-                    :contributorId="contributor.contributorId"
-                    :avatar="contributor.avatar"
+                    icon="user"
+                    :src="
+                        contributor.avatar
+                            ? `/contributors/${contributor.avatar}`
+                            : undefined
+                    "
                     :class="$style.avatar"
+                    :color="stringColor(contributor.contributorId)"
                 />
             </template>
             <template v-else>
@@ -112,6 +117,7 @@ onMounted(() => {
 
     .avatar,
     .avatarReplacer {
+        --avatarSize: #{$showcaseAvatarSize};
         width: #{$showcaseAvatarSize};
         height: #{$showcaseAvatarSize};
     }

package/app/components/aside/minor/topic/TopicNav.vue

@@ -10,7 +10,7 @@ const phrase = await usePhrases('article', 'summary', 'practice');
 const topicData = injectAsideData<AsideMinorTopic>();
 
 const currentTopicPart = computed(() => {
-    return topicData.value.part as TopicPart;
+    return topicData.value.part;
 });
 </script>
 

package/app/components/aside/minor/topic/TopicToc.vue

@@ -2,7 +2,6 @@
 import { headingName } from '@erudit-js/bitran-elements/heading/shared';
 
 import type { TocItem } from '@erudit/shared/bitran/toc';
-import { topicLocation } from '@app/scripts/aside/minor/topic';
 import { injectAsideData } from '@app/scripts/aside/minor/state';
 import type { AsideMinorTopic } from '@shared/aside/minor';
 
@@ -21,9 +20,9 @@ interface RuntimeTocItem extends TocItem {
 type RuntimeToc = RuntimeTocItem[];
 
 const topicData = injectAsideData<AsideMinorTopic>();
-const phrase = await usePhrases('empty_toc');
 const runtimeToc = ref<RuntimeToc>([]);
 const tocStateKey = ref(0);
+const phrase = await usePhrases('empty_toc');
 
 watch(topicData, setupRuntimeToc);
 setupRuntimeToc();
@@ -165,18 +164,18 @@ function intersectionTrigger(entries: IntersectionObserverEntry[]): void {
     }
 }
 
-onMounted(() => {
-    watch(
-        [topicData, topicLocation],
-        () => {
-            disableLiveToc();
-
-            if (!topicData.value.part || !topicLocation.value) return;
-
+watch(
+    () => topicData.value.part,
+    () => {
+        disableLiveToc();
+        nextTick().then(() => {
             enableLiveToc();
-        },
-        { immediate: true },
-    );
+        });
+    },
+);
+
+onMounted(() => {
+    enableLiveToc();
 });
 
 onUnmounted(() => {

package/app/components/aside/minor/topic/TopicTocItem.vue

@@ -5,28 +5,15 @@ const props = defineProps<{ tocItem: TocItem; active: boolean }>();
 const productName = props.tocItem.productName;
 const productIcon = await useBitranElementIcon(productName);
 const productPhrase = await useBitranElementLanguage(productName);
-
 const pretty = useFormatText();
-
-function tocItemClick(event: MouseEvent): void {
-    navigateTo({
-        query: {
-            element: props.tocItem.id,
-        },
-        //hash: props.tocItem.id, // Apply page hash as requested in the comment
-    });
-    event.preventDefault();
-    event.stopPropagation();
-}
 </script>
 
 <template>
     <TreeItem
         :label="pretty(tocItem.title || productPhrase('_element_title'))"
         :level="tocItem.level"
-        :link="`?element=${tocItem.id}`"
+        :link="`#${tocItem.id}`"
         :svg="productIcon"
         :active
-        @click="tocItemClick"
     />
 </template>

package/app/components/bitran/BitranContent.vue

@@ -5,7 +5,6 @@ import { setEruditBitranRuntime } from '@erudit-js/cog/schema';
 import eruditConfig from '#erudit/config';
 import type { RawBitranContent } from '@shared/bitran/content';
 import RenderWrapper from './RenderWrapper.vue';
-import { HeadingNode } from '@erudit-js/bitran-elements/heading/shared';
 
 const props = defineProps<{
     rawContent: RawBitranContent;