erudit 2.0.0-dev.9 → 3.0.0-dev.10

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { headingName } from '@erudit-js/bitran-elements/heading/shared';
 
-import { stringifyBitranLocation } from '@shared/bitran/location';
+import { stringifyBitranLocation } from '@erudit-js/cog/schema';
 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 { topicLocation } from '@app/scripts/aside/minor/topic';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
 import type { AsideMinorTopic } from '@shared/aside/minor';
 
 import TopicTocItem from './TopicTocItem.vue';
@@ -23,13 +23,13 @@ type RuntimeToc = RuntimeTocItem[];
 
 const topicData = injectAsideData<AsideMinorTopic>();
 const phrase = await usePhrases('empty_toc');
-const runtimeToc = ref<RuntimeToc>();
+const runtimeToc = ref<RuntimeToc>([]);
 const tocStateKey = ref(0);
 
 watch(topicData, setupRuntimeToc);
 setupRuntimeToc();
 
-function setupRuntimeToc() {
+function setupRuntimeToc(): void {
     const _newToc: RuntimeToc = [];
 
     for (let i = 0; i < topicData.value.toc.length; i++) {
@@ -40,71 +40,81 @@ function setupRuntimeToc() {
         });
     }
 
-    tocStateKey.value++;
     runtimeToc.value = _newToc;
+    tocStateKey.value++;
 }
 
 //
 // Live TOC
 //
 
-let observer: IntersectionObserver;
+let observer: IntersectionObserver | null = null;
 let id2TocItemIndex: Record<string, number> = {};
 
-const windowEvents = ['DOMContentLoaded', 'load', 'resize', 'scroll'];
-let headings: RuntimeTocItem[];
-let closestAboveHeading: RuntimeTocItem;
+const windowEvents = ['DOMContentLoaded', 'load', 'resize', 'scroll'] as const;
+let headings: RuntimeTocItem[] = [];
+let closestAboveHeading: RuntimeTocItem | null = null;
 
-function disableLiveToc() {
-    // Live TOC heading with `window` events
+function disableLiveToc(): void {
+    // Skip if not in client-side
+    if (import.meta.server) return;
 
-    for (const event of windowEvents)
+    // Live TOC heading with `window` events
+    for (const event of windowEvents) {
         window.removeEventListener(event, updateActiveTopHeading);
+    }
 
-    headings = closestAboveHeading = null;
+    headings = [];
+    closestAboveHeading = null;
 
     // Live TOC with Intersection Observer
+    id2TocItemIndex = {};
 
-    id2TocItemIndex = null;
-
-    observer?.disconnect();
-    observer = null;
-
-    //
+    if (observer) {
+        observer.disconnect();
+        observer = null;
+    }
 
+    // Reset active state
     if (runtimeToc.value?.length) {
-        for (const tocItem of runtimeToc.value) tocItem._active = 0;
+        for (const tocItem of runtimeToc.value) {
+            tocItem._active = 0;
+        }
     }
 }
 
-function enableLiveToc() {
+function enableLiveToc(): void {
+    // Skip if not in client-side
+    if (import.meta.server) return;
     if (!runtimeToc.value?.length) return;
 
     // Live TOC heading with `window` events
-
     headings = runtimeToc.value.filter(
         (item) => item.productName === headingName,
     );
 
-    for (const event of windowEvents)
+    for (const event of windowEvents) {
         window.addEventListener(event, updateActiveTopHeading);
+    }
 
     updateActiveTopHeading();
 
     // Live TOC with Intersection Observer
-
     observer = new IntersectionObserver(intersectionTrigger);
     id2TocItemIndex = {};
 
     for (const tocItem of runtimeToc.value) {
         const id = tocItem.id;
         id2TocItemIndex[id] = tocItem._position;
-        observer.observe(document.getElementById(id));
+        const element = document.getElementById(id);
+        if (element) {
+            observer.observe(element);
+        }
     }
 }
 
-function updateActiveTopHeading() {
-    function getBottom(id: string) {
+function updateActiveTopHeading(): void {
+    function getBottom(id: string): number {
         const defaultBottom = 1;
         const element = document.getElementById(id);
         return element ? element.getBoundingClientRect().bottom : defaultBottom;
@@ -115,39 +125,44 @@ function updateActiveTopHeading() {
         closestAboveHeading = null;
     }
 
-    if (runtimeToc.value?.length) {
-        let topIndex = 0;
-        let bottomIndex = headings.length;
-        let targetIndex = 0;
-
-        while (topIndex < bottomIndex) {
-            const middleIndex = ((topIndex + bottomIndex) / 2) | 0;
-            const middleHeading = headings[middleIndex];
-            const middleHeadingTop = getBottom(middleHeading.id);
-
-            if (middleHeadingTop <= 0) {
-                targetIndex = middleIndex;
-                topIndex = middleIndex + 1;
-            } else {
-                bottomIndex = middleIndex;
-            }
+    if (!runtimeToc.value?.length || !headings.length) return;
+
+    let topIndex = 0;
+    let bottomIndex = headings.length;
+    let targetIndex = 0;
+
+    while (topIndex < bottomIndex) {
+        const middleIndex = ((topIndex + bottomIndex) / 2) | 0;
+        const middleHeading = headings[middleIndex]!;
+        const middleHeadingTop = getBottom(middleHeading.id);
+
+        if (middleHeadingTop <= 0) {
+            targetIndex = middleIndex;
+            topIndex = middleIndex + 1;
+        } else {
+            bottomIndex = middleIndex;
         }
+    }
 
-        closestAboveHeading = headings[targetIndex];
-        if (closestAboveHeading && closestAboveHeading._active < 2)
-            closestAboveHeading._active =
-                getBottom(closestAboveHeading.id) <= 0 ? 1 : 0;
+    closestAboveHeading = headings[targetIndex]!;
+    if (closestAboveHeading && closestAboveHeading._active < 2) {
+        closestAboveHeading._active =
+            getBottom(closestAboveHeading.id) <= 0 ? 1 : 0;
     }
 }
 
-function intersectionTrigger(entries: IntersectionObserverEntry[]) {
+function intersectionTrigger(entries: IntersectionObserverEntry[]): void {
     for (const entry of entries) {
-        const tocItem = runtimeToc.value[id2TocItemIndex[entry.target.id]];
-        tocItem._active = entry.isIntersecting
-            ? 2
-            : tocItem._active === 1
-              ? 1
-              : 0;
+        const itemIndex = id2TocItemIndex[entry.target.id]!;
+        const tocItem = runtimeToc.value?.[itemIndex];
+
+        if (tocItem) {
+            tocItem._active = entry.isIntersecting
+                ? 2
+                : tocItem._active === 1
+                  ? 1
+                  : 0;
+        }
     }
 }
 
@@ -162,8 +177,9 @@ onMounted(() => {
             if (
                 stringifyBitranLocation(topicData.value.location) ===
                 stringifyBitranLocation(topicLocation.value)
-            )
+            ) {
                 enableLiveToc();
+            }
         },
         { immediate: true },
     );
@@ -176,7 +192,7 @@ onUnmounted(() => {
 
 <template>
     <section :class="$style.topicToc">
-        <TreeContainer v-if="runtimeToc.length > 0">
+        <TreeContainer v-if="runtimeToc?.length > 0" :key="tocStateKey">
             <TopicTocItem
                 v-for="tocItem of runtimeToc"
                 v-memo="[tocStateKey, tocItem.id, tocItem._active]"

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

@@ -1,21 +1,20 @@
 <script lang="ts" setup>
 import type { TocItem } from '@erudit/shared/bitran/toc';
 
-const { tocItem } = defineProps<{ tocItem: TocItem; active: boolean }>();
-
-const productName = tocItem.productName;
+const props = defineProps<{ tocItem: TocItem; active: boolean }>();
+const productName = props.tocItem.productName;
 const productIcon = await useBitranElementIcon(productName);
 const productPhrase = await useBitranElementLanguage(productName);
 
-function tocItemClick(event: Event) {
+function tocItemClick(event: MouseEvent): void {
     navigateTo({
         query: {
-            element: tocItem.id,
+            element: props.tocItem.id,
         },
+        //hash: props.tocItem.id, // Apply page hash as requested in the comment
     });
     event.preventDefault();
     event.stopPropagation();
-    return false;
 }
 </script>
 
@@ -23,7 +22,7 @@ function tocItemClick(event: Event) {
     <TreeItem
         :label="tocItem.title || productPhrase('_element_title')"
         :level="tocItem.level"
-        :link="`?element=${tocItem.id}` /* Apply page hash! */"
+        :link="`?element=${tocItem.id}`"
         :svg="productIcon"
         :active
         @click="tocItemClick"

package/app/components/bitran/BitranContent.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { Bitran, type BitranContent } from '@bitran-js/renderer-vue';
+import {
+    setEruditBitranRuntime,
+    type BitranContext,
+} from '@erudit-js/cog/schema';
 
-import type { BitranContext } from '@shared/bitran/context';
+import eruditConfig from '#erudit/config';
 
 import RenderWrapper from './RenderWrapper.vue';
 
@@ -10,9 +14,18 @@ const props = defineProps<{
     context: BitranContext;
 }>();
 
+/* Remove transpiler from Bitran Vue Component at all? It takes RootNode already... */
 const bitranTranspiler = await useBitranTranspiler();
 const bitranRenderers = await useBitranRenderers();
 
+[(bitranTranspiler.parser, bitranTranspiler.stringifier)].forEach((item) => {
+    setEruditBitranRuntime(item, {
+        eruditConfig,
+        insideInclude: false,
+        context: props.context,
+    });
+});
+
 const formatText = useFormatText();
 
 // onMounted(() => {
@@ -20,6 +33,9 @@ const formatText = useFormatText();
 //         //console.log('Highlighting product:', urlElement.value);
 //     }, { immediate: true });
 // });
+
+const isDev = import.meta.dev;
+const isServer = import.meta.server;
 </script>
 
 <template>
@@ -31,15 +47,18 @@ const formatText = useFormatText();
         :editMode="false"
         :formatText
         :RenderWrapper
+        :isDev
+        :isServer
+        :language="eruditConfig.language"
     />
 </template>
 
 <style lang="scss" module>
-@use '@bitran-js/renderer-vue/scss/def' as bitranDef;
+@use '$/def/bp';
 
 .eruditBitranContainer {
     padding: var(--_pMainY) var(--_pMainX);
-    padding-left: calc(var(--_pMainX) - #{bitranDef.$asideWidth});
+    padding-left: calc(var(--_pMainX) - var(--_bitran_asideWidth));
 
     // Setting up Bitran
 
@@ -59,5 +78,14 @@ const formatText = useFormatText();
     --bitran_textMuted: var(--textMuted);
     --bitran_textDimmed: var(--textDimmed);
     --bitran_textDisabled: var(--textDisabled);
+    --bitran_textDeep: var(--textDeep);
+
+    --bitran_colorBrand: var(--brand);
+
+    --bitran_colorBorder: var(--border);
+
+    @include bp.below('mobile') {
+        --bitran_gapBlocks: calc(22px);
+    }
 }
 </style>

package/app/components/contributor/ContributorAvatar.vue

@@ -7,8 +7,16 @@ const hasAvatar = computed(() => !!props.avatar);
 
 <template>
     <div
-        :class="[$style.contributorAvatar, !hasAvatar && $style.noAvatar]"
-        :style="{ '--_avatarBlendColor': stringColor(props.contributorId) }"
+        :class="$style.contributorAvatar"
+        :style="{
+            ...(!hasAvatar
+                ? {
+                      backgroundImage: `url(${eruditAsset('user.svg')})`,
+                      backgroundColor: stringColor(props.contributorId),
+                      backgroundBlendMode: 'hard-light',
+                  }
+                : {}),
+        }"
     >
         <img
             v-if="hasAvatar"
@@ -30,12 +38,6 @@ const hasAvatar = computed(() => !!props.avatar);
     overflow: hidden;
     background: var(--border);
 
-    &.noAvatar {
-        background-image: url('/_erudit-asset/user.svg');
-        background-color: var(--_avatarBlendColor);
-        background-blend-mode: hard-light;
-    }
-
     > img {
         display: block;
     }

package/app/components/main/topic/MainTopic.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import type { TopicPart } from 'erudit-cog/schema';
-import { NO_ALIASES } from '@erudit-js/bitran-elements/aliases/shared';
+import { NO_ALIASES, type TopicPart } from '@erudit-js/cog/schema';
 
 import eruditConfig from '#erudit/config';
 
 import { type ContentTopicData } from '@erudit/shared/content/data/type/topic';
-import { topicLocation } from '../../../../app/scripts/aside/minor/topic';
+import { topicLocation } from '@app/scripts/aside/minor/topic';
 
 import ContentDecoration from '../utils/ContentDecoration.vue';
 import ContentTitle from '../utils/ContentTitle.vue';

package/app/components/main/topic/TopicPartSwitch.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { topicParts, type TopicPart } from 'erudit-cog/schema';
+import { topicParts, type TopicPart } from '@erudit-js/cog/schema';
 
 import type { TopicPartLinks } from '@erudit/shared/content/data/type/topic';
 import { TOPIC_PART_ICON } from '@erudit/shared/icons';

package/app/components/main/utils/Breadcrumb.vue

@@ -56,18 +56,13 @@ function getIcon(contextIcon: string) {
 
         @include transition(color);
 
-        // [my-icon]
-        // {
-        //     position: relative;
-        //     top: .6px;
-        // }
-
         &:hover {
             color: var(--textMuted);
         }
     }
 
     .sep {
+        flex-shrink: 0;
         position: relative;
         top: 0.5px;
     }

package/app/components/main/utils/ContentDescription.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-defineProps<{ description: string; }>();
+defineProps<{ description: string }>();
 const pretty = await useFormatText();
 </script>
 
@@ -10,11 +10,10 @@ const pretty = await useFormatText();
 </template>
 
 <style lang="scss" module>
-.contentDescription
-{
+.contentDescription {
     padding: var(--_pMainY) var(--_pMainX);
     font-weight: 500;
     font-size: 1.1em;
     color: var(--text);
 }
-</style>
+</style>

package/app/components/main/utils/ContentPopover.vue

@@ -17,8 +17,7 @@ const { floatingStyles, middlewareData } = useFloating(
         whileElementsMounted: autoUpdate,
         middleware: [
             shift({
-                boundary: document?.querySelector('[erudit-main]'),
-                padding: 15,
+                boundary: document?.querySelector('[erudit-main]') || undefined,
             }),
             arrow({ element: arrowElement }),
         ],
@@ -27,15 +26,26 @@ const { floatingStyles, middlewareData } = useFloating(
 
 const popoverVisible = ref(false);
 
+const showDelay = 400;
 const hideDelay = 100;
-let hideTimeout;
+let showTimeout: any;
+let hideTimeout: any;
 
-function showPopover() {
+function showPopover(immediate?: boolean) {
     clearTimeout(hideTimeout);
-    popoverVisible.value = true;
+    clearTimeout(showTimeout);
+
+    if (immediate) {
+        popoverVisible.value = true;
+    } else {
+        showTimeout = setTimeout(() => {
+            popoverVisible.value = true;
+        }, showDelay);
+    }
 }
 
 function hidePopover() {
+    clearTimeout(showTimeout);
     hideTimeout = setTimeout(() => {
         popoverVisible.value = false;
     }, hideDelay);
@@ -47,8 +57,9 @@ function hidePopover() {
         ref="reference"
         :class="$style.reference"
         :style="`--popoverColor: ${data.color}`"
-        @mouseenter="showPopover"
+        @mouseenter="() => showPopover()"
         @mouseleave="hidePopover"
+        @click="() => showPopover(true)"
     >
         <MyIcon v-if="isMyIcon(data.icon)" :name="data.icon as any" />
         <MyRuntimeIcon v-else name="popover-icon" :svg="data.icon" />
@@ -129,9 +140,10 @@ function hidePopover() {
 
     position: absolute;
     z-index: 999;
-    min-width: 300px;
     max-width: 320px;
     padding-top: var(--gap);
+    padding-left: var(--gap);
+    padding-right: var(--gap);
     line-height: normal;
 
     .arrow {

package/app/components/main/utils/ContentPopovers.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ContentFlag } from '@package';
+import type { ContentFlag } from '@erudit-js/cog/schema';
 
 import type { ContentGenericData } from '@shared/content/data/base';
 
@@ -24,7 +24,7 @@ const phrase = await usePhrases(
 
 const flagData: Record<ContentFlag, PopoverData> = {
     dev: {
-        icon: <MyIconName>'alert',
+        icon: <MyIconName>'construction',
         color: 'var(--warn)',
         title: phrase.flag_dev,
         description: phrase.flag_dev_description,
@@ -63,13 +63,14 @@ const hasPopovers = computed(() => {
 <template>
     <section v-if="hasPopovers" :class="$style.popovers">
         <ContentPopover
-            v-for="flagName of Object.keys(generic.flags)"
+            v-for="flagName of Object.keys(generic.flags) as ContentFlag[]"
             :data="flagData[flagName]"
         />
 
         <ContentPopover v-if="generic?.dependencies" :data="dependenciesData">
             <ul :class="$style.dependenciesList">
                 <li v-for="(value, key) in generic.dependencies">
+                    <MyIcon :name="'arrow-left'" wrapper="span" />
                     <NuxtLink :prefetch="false" :to="key">{{ value }}</NuxtLink>
                 </li>
             </ul>
@@ -87,18 +88,23 @@ const hasPopovers = computed(() => {
 
 .dependenciesList {
     margin-top: var(--gapSmall);
-    list-style-type: square;
+    list-style-type: none;
     list-style-position: inside;
     padding-inline-start: 0;
 
     li {
-        &::marker {
-            content: '↪';
+        display: flex;
+        gap: var(--gapSmall);
+        align-items: center;
+
+        [my-icon] {
+            flex-shrink: 0;
+            font-size: 0.95em;
+            transform: scaleX(-1);
         }
 
         a {
             color: inherit;
-            padding-left: var(--gapSmall);
         }
     }
 }

package/app/components/main/utils/ContentReferences.vue

@@ -3,16 +3,16 @@ import type { ContentReferences } from '@package';
 
 import ReferenceGroup from './reference/ReferenceGroup.vue';
 
-const props = defineProps<{ references: ContentReferences; }>();
+const props = defineProps<{ references: ContentReferences }>();
 
 const count = computed(() => {
-    return props.references.reduce((sum, referenceGroup)  => sum + (referenceGroup.references.length || 0), 0);
+    return props.references.reduce(
+        (sum, referenceGroup) => sum + (referenceGroup.references.length || 0),
+        0,
+    );
 });
 
-const phrase = await usePhrases(
-    'references',
-    'references_description',
-);
+const phrase = await usePhrases('references', 'references_description');
 </script>
 
 <template>
@@ -30,47 +30,41 @@ const phrase = await usePhrases(
 </template>
 
 <style lang="scss" module>
-.heading
-{
+.heading {
     display: flex;
     align-items: center;
     gap: var(--gap);
     padding: var(--_pMainY) var(--_pMainX);
 
-    .icon
-    {
-        font-size: .9em;
+    .icon {
+        font-size: 0.9em;
         color: var(--textMuted);
     }
 
-    .count
-    {
+    .count {
         position: relative;
         top: 1px;
         font-weight: 550;
-        font-size: .6em;
-        background: color-mix(in srgb, var(--textDimmed), transparent 65%) ;
+        font-size: 0.6em;
+        background: color-mix(in srgb, var(--textDimmed), transparent 65%);
         border-radius: 20px;
         padding: 2px 10px;
     }
 }
 
-.description
-{
+.description {
     padding: var(--_pMainY) var(--_pMainX);
 }
 
-.referenceGroups
-{
+.referenceGroups {
     display: flex;
     flex-direction: column;
     padding: var(--_pMainY) var(--_pMainX);
 
-    > *:not(:last-of-type)
-    {
+    > *:not(:last-of-type) {
         padding-bottom: var(--gap);
         margin-bottom: var(--gap);
         border-bottom: 1px solid var(--border);
     }
 }
-</style>
+</style>