erudit 3.0.0-dev.23 → 3.0.0-dev.25

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

@@ -1,183 +0,0 @@
-<script lang="ts" setup>
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-import { type AsideMinorTopic } from '@shared/aside/minor';
-import type { ContentContributor } from '@shared/contributor';
-
-import AsideOverlayPane from '../../utils/AsideOverlayPane.vue';
-
-const phrase = await usePhrases('contributors');
-const topicData = injectAsideData<AsideMinorTopic>();
-const listPaneVisible = ref(false);
-
-const showcaseMax = 4;
-const showcase = shallowRef<ContentContributor[]>();
-
-const counter = computed(() => {
-    const toShow = Math.min(showcaseMax, topicData.value.contributors!.length);
-
-    return {
-        showcase: toShow,
-        rest: topicData.value.contributors!.length - toShow,
-    };
-});
-
-let previousFullId: string;
-
-onMounted(() => {
-    watch(
-        topicData,
-        () => {
-            if (previousFullId === topicData.value.fullContentId) return;
-
-            previousFullId = topicData.value.fullContentId;
-            showcase.value = [...topicData.value.contributors!]
-                .sort(() => 0.5 - Math.random())
-                .slice(0, counter.value.showcase);
-            listPaneVisible.value = false;
-        },
-        { immediate: true },
-    );
-});
-</script>
-
-<template>
-    <section :class="$style.topicContributors" @click="listPaneVisible = true">
-        <div :class="$style.showcase">
-            <template v-if="showcase">
-                <Avatar
-                    v-for="contributor of showcase"
-                    icon="user"
-                    :src="
-                        contributor.avatar
-                            ? `/contributors/${contributor.avatar}`
-                            : undefined
-                    "
-                    :class="$style.avatar"
-                    :color="stringColor(contributor.contributorId)"
-                />
-            </template>
-            <template v-else>
-                <div
-                    v-if="!showcase"
-                    v-for="i in counter.showcase"
-                    :class="$style.avatarReplacer"
-                ></div>
-            </template>
-        </div>
-        <div v-if="counter.rest" :class="$style.restCounter">
-            + {{ counter.rest }}
-        </div>
-    </section>
-    <TransitionFade>
-        <AsideOverlayPane v-if="listPaneVisible" stick="bottom">
-            <div :class="$style.paneList">
-                <ContributorListItem
-                    v-for="contributor of topicData.contributors"
-                    v-bind="contributor"
-                />
-            </div>
-            <div :class="$style.paneFooter">
-                <span>{{ phrase.contributors }}:</span>
-                <span :class="$style.counter">{{
-                    topicData.contributors!.length
-                }}</span>
-                <span style="flex: 1"></span>
-                <MyIcon
-                    name="cross"
-                    :class="$style.close"
-                    @click="listPaneVisible = false"
-                />
-            </div>
-        </AsideOverlayPane>
-    </TransitionFade>
-</template>
-
-<style lang="scss" module>
-.topicContributors {
-    border-top: 1px solid var(--border);
-    padding: var(--gap);
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    cursor: pointer;
-    background: transparent;
-
-    @include transition(background);
-
-    &:hover {
-        background: var(--bgAccent);
-    }
-}
-
-.showcase {
-    $showcaseAvatarSize: 40px;
-
-    display: flex;
-    gap: var(--gap);
-
-    .avatar,
-    .avatarReplacer {
-        --avatarSize: #{$showcaseAvatarSize};
-        width: #{$showcaseAvatarSize};
-        height: #{$showcaseAvatarSize};
-    }
-
-    .avatarReplacer {
-        border-radius: 50%;
-        background: var(--textDimmed);
-        animation: avatarReplacer 500ms infinite ease-in-out alternate;
-    }
-}
-
-.restCounter {
-    color: var(--textMuted);
-    font-size: 1.1em;
-    font-weight: 600;
-}
-
-@keyframes avatarReplacer {
-    from {
-        opacity: 0.625;
-    }
-    to {
-        opacity: 0.4;
-    }
-}
-
-.paneList {
-    overflow: auto;
-    @include scroll;
-
-    > * {
-        border-top: 1px solid var(--border);
-    }
-}
-
-.paneFooter {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    border-top: 1px solid var(--border);
-    height: 70px;
-    padding-left: var(--gap);
-    font-size: 1.1em;
-    font-weight: 600;
-
-    .counter {
-        color: var(--textMuted);
-    }
-
-    .close {
-        cursor: pointer;
-        padding: var(--gap);
-        font-size: 20px;
-        color: var(--textMuted);
-
-        @include transition(color);
-
-        &:hover {
-            color: var(--text);
-        }
-    }
-}
-</style>

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

@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import { topicParts, type TopicPart } from '@erudit-js/cog/schema';
-
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-import type { AsideMinorTopic } from '@shared/aside/minor';
-import { TOPIC_PART_ICON } from '@erudit/shared/icons';
-
-const phrase = await usePhrases('article', 'summary', 'practice');
-
-const topicData = injectAsideData<AsideMinorTopic>();
-
-const currentTopicPart = computed(() => {
-    return topicData.value.part;
-});
-</script>
-
-<template>
-    <section :class="$style.topicNav">
-        <AsideMinorTopLink
-            :title="topicData.previousNext?.previous?.title"
-            :link="topicData.previousNext?.previous?.link"
-            :icon="'arrow-left'"
-        />
-
-        <AsideMinorTopLink
-            v-for="topicPart of topicParts"
-            :title="phrase[topicPart]"
-            :icon="TOPIC_PART_ICON[topicPart]"
-            :link="topicData.partLinks?.[topicPart]"
-            :active="topicPart === currentTopicPart"
-        />
-
-        <AsideMinorTopLink
-            :title="topicData.previousNext?.next?.title"
-            :link="topicData.previousNext?.next?.link"
-            :icon="'arrow-left'"
-            class="icon-flip-h"
-        />
-    </section>
-</template>
-
-<style lang="scss" module>
-.topicNav {
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-}
-</style>

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

@@ -1,212 +0,0 @@
-<script lang="ts" setup>
-import { headingName } from '@erudit-js/bitran-elements/heading/shared';
-
-import type { TocItem } from '@erudit/shared/bitran/toc';
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-import type { AsideMinorTopic } from '@shared/aside/minor';
-
-import TopicTocItem from './TopicTocItem.vue';
-
-interface RuntimeTocItem extends TocItem {
-    /**
-     * * `0` — Not active
-     * * `1` — Active for `window` events
-     * * `2` — Active for Intersection Observer and currently in viewport
-     */
-    _active: 0 | 1 | 2;
-    _position: number;
-}
-
-type RuntimeToc = RuntimeTocItem[];
-
-const topicData = injectAsideData<AsideMinorTopic>();
-const runtimeToc = ref<RuntimeToc>([]);
-const tocStateKey = ref(0);
-const phrase = await usePhrases('empty_toc');
-
-watch(topicData, setupRuntimeToc);
-setupRuntimeToc();
-
-function setupRuntimeToc(): void {
-    const _newToc: RuntimeToc = [];
-
-    for (let i = 0; i < topicData.value.toc.length; i++) {
-        _newToc.push({
-            ...topicData.value.toc[i]!,
-            _active: 0,
-            _position: i,
-        });
-    }
-
-    runtimeToc.value = _newToc;
-    tocStateKey.value++;
-}
-
-//
-// Live TOC
-//
-
-let observer: IntersectionObserver | null = null;
-let id2TocItemIndex: Record<string, number> = {};
-
-const windowEvents = ['DOMContentLoaded', 'load', 'resize', 'scroll'] as const;
-let headings: RuntimeTocItem[] = [];
-let closestAboveHeading: RuntimeTocItem | null = null;
-
-function disableLiveToc(): void {
-    // Skip if not in client-side
-    if (import.meta.server) return;
-
-    // Live TOC heading with `window` events
-    for (const event of windowEvents) {
-        window.removeEventListener(event, updateActiveTopHeading);
-    }
-
-    headings = [];
-    closestAboveHeading = null;
-
-    // Live TOC with Intersection Observer
-    id2TocItemIndex = {};
-
-    if (observer) {
-        observer.disconnect();
-        observer = null;
-    }
-
-    // Reset active state
-    if (runtimeToc.value?.length) {
-        for (const tocItem of runtimeToc.value) {
-            tocItem._active = 0;
-        }
-    }
-}
-
-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) {
-        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;
-        const element = document.getElementById(id);
-        if (element) {
-            observer.observe(element);
-        }
-    }
-}
-
-function updateActiveTopHeading(): void {
-    function getBottom(id: string): number {
-        const defaultBottom = 1;
-        const element = document.getElementById(id);
-        return element ? element.getBoundingClientRect().bottom : defaultBottom;
-    }
-
-    if (closestAboveHeading) {
-        closestAboveHeading._active = closestAboveHeading._active === 2 ? 2 : 0;
-        closestAboveHeading = null;
-    }
-
-    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;
-    }
-}
-
-function intersectionTrigger(entries: IntersectionObserverEntry[]): void {
-    for (const entry of entries) {
-        const itemIndex = id2TocItemIndex[entry.target.id]!;
-        const tocItem = runtimeToc.value?.[itemIndex];
-
-        if (tocItem) {
-            tocItem._active = entry.isIntersecting
-                ? 2
-                : tocItem._active === 1
-                  ? 1
-                  : 0;
-        }
-    }
-}
-
-watch(
-    () => topicData.value.part,
-    () => {
-        disableLiveToc();
-        nextTick().then(() => {
-            enableLiveToc();
-        });
-    },
-);
-
-onMounted(() => {
-    enableLiveToc();
-});
-
-onUnmounted(() => {
-    disableLiveToc();
-});
-</script>
-
-<template>
-    <section :class="$style.topicToc">
-        <TreeContainer v-if="runtimeToc?.length > 0" :key="tocStateKey">
-            <TopicTocItem
-                v-for="tocItem of runtimeToc"
-                v-memo="[tocStateKey, tocItem.id, tocItem._active]"
-                :active="!!tocItem._active"
-                :tocItem
-            />
-        </TreeContainer>
-        <div v-else :class="$style.tocEmpty">{{ phrase.empty_toc }}</div>
-    </section>
-</template>
-
-<style lang="scss" module>
-.topicToc {
-    flex: 1;
-    overflow: auto;
-    @include scroll();
-}
-
-.tocEmpty {
-    padding: var(--gap);
-    text-align: center;
-    color: var(--textMuted);
-}
-</style>

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

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import type { TocItem } from '@erudit/shared/bitran/toc';
-
-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();
-</script>
-
-<template>
-    <TreeItem
-        :label="pretty(tocItem.title || productPhrase('_element_title'))"
-        :level="tocItem.level"
-        :link="`#${tocItem.id}`"
-        :svg="productIcon"
-        :active
-    />
-</template>

package/app/components/aside/utils/AsideOverlayPane.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{ stick?: 'top' | 'bottom' }>();
-const style = useCssModule();
-
-const classes = computed(() => {
-    const _classes: string[] = [style.asideOverlayPane];
-
-    if (props.stick === 'bottom') _classes.push(style.stickBottom);
-
-    return _classes;
-});
-</script>
-
-<template>
-    <section :class="classes">
-        <slot></slot>
-    </section>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.asideOverlayPane {
-    position: absolute;
-    z-index: 10;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--bgAside);
-
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-
-    &.stickBottom {
-        justify-content: end;
-    }
-}
-</style>

package/app/components/bitran/BitranContent.vue

@@ -1,90 +0,0 @@
-<script lang="ts" setup>
-import { Bitran, type BitranContent } from '@bitran-js/renderer-vue';
-import { setEruditBitranRuntime } from '@erudit-js/cog/schema';
-
-import eruditConfig from '#erudit/config';
-import type { RawBitranContent } from '@shared/bitran/content';
-import RenderWrapper from './RenderWrapper.vue';
-
-const props = defineProps<{
-    rawContent: RawBitranContent;
-}>();
-
-for (const route of props.rawContent.routes) {
-    prerenderRoutes([route]);
-}
-
-const bitranTranspiler = await useBitranTranspiler();
-const bitranRenderers = await useBitranRenderers();
-
-[bitranTranspiler.parser, bitranTranspiler.stringifier].forEach((item) => {
-    setEruditBitranRuntime(item, {
-        eruditConfig,
-        insideInclude: false,
-        context: props.rawContent.context,
-    });
-});
-
-const root = await bitranTranspiler.parser.parse(props.rawContent.biCode);
-const bitranContent: BitranContent = {
-    root,
-    renderDataStorage: props.rawContent.storage,
-};
-
-const formatText = useFormatText();
-
-const isDev = import.meta.dev;
-const isServer = import.meta.server;
-</script>
-
-<template>
-    <Bitran
-        :class="$style.eruditBitranContainer"
-        :transpiler="bitranTranspiler"
-        :renderers="bitranRenderers"
-        :content="bitranContent"
-        :editMode="false"
-        :formatText
-        :RenderWrapper
-        :isDev
-        :isServer
-        :language="eruditConfig.language"
-    />
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-:global(.bitran-component).eruditBitranContainer {
-    padding: var(--_pMainY) var(--_pMainX);
-    padding-left: calc(var(--_pMainX) - var(--_bitran_asideWidth));
-
-    // Setting up Bitran
-
-    --bitran_gap: var(--gap);
-    --bitran_gapSmall: var(--gapSmall);
-    --bitran_gapBig: var(--gapBig);
-    --bitran_gapBlocks: var(--gapBig);
-
-    --bitran_xPadding: var(--_pMainX);
-    --bitran_transitionSpeed: var(--transitionSpeed);
-    --bitran_transitionFunction: var(--transitionFunction);
-
-    --bitran_fontMain: 'Noto Sans', sans-serif;
-    --bitran_fontAlt: 'Noto Serif', serif;
-
-    --bitran_text: var(--text);
-    --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/bitran/RenderWrapper.vue

@@ -1,10 +0,0 @@
-<script lang="ts" setup>
-defineProps<{ mode: 'hybrid' | 'client' }>();
-</script>
-
-<template>
-    <slot v-if="mode !== 'client'"></slot>
-    <ClientOnly v-else>
-        <slot></slot>
-    </ClientOnly>
-</template>

package/app/components/contributor/ContributorListItem.vue

@@ -1,43 +0,0 @@
-<script lang="ts" setup>
-import { type ContentContributor } from '@shared/contributor';
-import { createContributorLink } from '@shared/link';
-
-defineProps<ContentContributor>();
-</script>
-
-<template>
-    <EruditLink
-        :prefetch="false"
-        :class="$style.contributor"
-        :to="createContributorLink(contributorId)"
-    >
-        <Avatar
-            icon="user"
-            :src="avatar ? `/contributors/${avatar}` : undefined"
-            :class="$style.avatar"
-            :color="stringColor(contributorId)"
-        />
-        <span>{{ displayName || contributorId }}</span>
-    </EruditLink>
-</template>
-
-<style lang="scss" module>
-.contributor {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: var(--gap);
-    color: var(--text);
-    text-decoration: none;
-
-    @include transition(background);
-
-    &:hover {
-        background: var(--bgAccent);
-    }
-
-    .avatar {
-        --avatarSize: 40px;
-    }
-}
-</style>