erudit 3.0.0-dev.3 → 3.0.0-dev.30

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

@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import { topicParts, type TopicPart } from 'erudit-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.location.type as TopicPart;
-});
-</script>
-
-<template>
-    <section :class="$style.topicNav">
-        <AsideMinorTopLink
-            :title="topicData.nav?.previous?.title"
-            :link="topicData.nav?.previous?.link"
-            :icon="'arrow-left'"
-        />
-
-        <AsideMinorTopLink
-            v-for="topicPart of topicParts"
-            :title="phrase[topicPart]"
-            :icon="TOPIC_PART_ICON[topicPart]"
-            :link="topicData.nav?.[topicPart]"
-            :active="topicPart === currentTopicPart"
-        />
-
-        <AsideMinorTopLink
-            :title="topicData.nav?.next?.title"
-            :link="topicData.nav?.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,203 +0,0 @@
-<script lang="ts" setup>
-import { headingName } from '@erudit-js/bitran-elements/heading/shared';
-
-import { stringifyBitranLocation } from '@shared/bitran/location';
-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';
-
-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 phrase = await usePhrases('empty_toc');
-const runtimeToc = ref<RuntimeToc>();
-const tocStateKey = ref(0);
-
-watch(topicData, setupRuntimeToc);
-setupRuntimeToc();
-
-function setupRuntimeToc() {
-    const _newToc: RuntimeToc = [];
-
-    for (let i = 0; i < topicData.value.toc.length; i++) {
-        _newToc.push({
-            ...topicData.value.toc[i]!,
-            _active: 0,
-            _position: i,
-        });
-    }
-
-    tocStateKey.value++;
-    runtimeToc.value = _newToc;
-}
-
-//
-// Live TOC
-//
-
-let observer: IntersectionObserver;
-let id2TocItemIndex: Record<string, number> = {};
-
-const windowEvents = ['DOMContentLoaded', 'load', 'resize', 'scroll'];
-let headings: RuntimeTocItem[];
-let closestAboveHeading: RuntimeTocItem;
-
-function disableLiveToc() {
-    // Live TOC heading with `window` events
-
-    for (const event of windowEvents)
-        window.removeEventListener(event, updateActiveTopHeading);
-
-    headings = closestAboveHeading = null;
-
-    // Live TOC with Intersection Observer
-
-    id2TocItemIndex = null;
-
-    observer?.disconnect();
-    observer = null;
-
-    //
-
-    if (runtimeToc.value?.length) {
-        for (const tocItem of runtimeToc.value) tocItem._active = 0;
-    }
-}
-
-function enableLiveToc() {
-    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;
-        observer.observe(document.getElementById(id));
-    }
-}
-
-function updateActiveTopHeading() {
-    function getBottom(id: string) {
-        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) {
-        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[]) {
-    for (const entry of entries) {
-        const tocItem = runtimeToc.value[id2TocItemIndex[entry.target.id]];
-        tocItem._active = entry.isIntersecting
-            ? 2
-            : tocItem._active === 1
-              ? 1
-              : 0;
-    }
-}
-
-onMounted(() => {
-    watch(
-        [topicData, topicLocation],
-        () => {
-            disableLiveToc();
-
-            if (!topicData.value.location || !topicLocation.value) return;
-
-            if (
-                stringifyBitranLocation(topicData.value.location) ===
-                stringifyBitranLocation(topicLocation.value)
-            )
-                enableLiveToc();
-        },
-        { immediate: true },
-    );
-});
-
-onUnmounted(() => {
-    disableLiveToc();
-});
-</script>
-
-<template>
-    <section :class="$style.topicToc">
-        <TreeContainer v-if="runtimeToc.length > 0">
-            <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,31 +0,0 @@
-<script lang="ts" setup>
-import type { TocItem } from '@erudit/shared/bitran/toc';
-
-const { tocItem } = defineProps<{ tocItem: TocItem; active: boolean }>();
-
-const productName = tocItem.productName;
-const productIcon = await useBitranElementIcon(productName);
-const productPhrase = await useBitranElementLanguage(productName);
-
-function tocItemClick(event: Event) {
-    navigateTo({
-        query: {
-            element: tocItem.id,
-        },
-    });
-    event.preventDefault();
-    event.stopPropagation();
-    return false;
-}
-</script>
-
-<template>
-    <TreeItem
-        :label="tocItem.title || productPhrase('_element_title')"
-        :level="tocItem.level"
-        :link="`?element=${tocItem.id}` /* Apply page hash! */"
-        :svg="productIcon"
-        :active
-        @click="tocItemClick"
-    />
-</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,63 +0,0 @@
-<script lang="ts" setup>
-import { Bitran, type BitranContent } from '@bitran-js/renderer-vue';
-
-import type { BitranContext } from '@shared/bitran/context';
-
-import RenderWrapper from './RenderWrapper.vue';
-
-const props = defineProps<{
-    content: BitranContent;
-    context: BitranContext;
-}>();
-
-const bitranTranspiler = await useBitranTranspiler();
-const bitranRenderers = await useBitranRenderers();
-
-const formatText = useFormatText();
-
-// onMounted(() => {
-//     watch(urlElement, () => {
-//         //console.log('Highlighting product:', urlElement.value);
-//     }, { immediate: true });
-// });
-</script>
-
-<template>
-    <Bitran
-        :class="$style.eruditBitranContainer"
-        :transpiler="bitranTranspiler"
-        :renderers="bitranRenderers"
-        :content
-        :editMode="false"
-        :formatText
-        :RenderWrapper
-    />
-</template>
-
-<style lang="scss" module>
-@use '@bitran-js/renderer-vue/scss/def' as bitranDef;
-
-.eruditBitranContainer {
-    padding: var(--_pMainY) var(--_pMainX);
-    padding-left: calc(var(--_pMainX) - #{bitranDef.$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);
-}
-</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/ContributorAvatar.vue

@@ -1,43 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{ contributorId: string; avatar?: string }>();
-const baseUrlPath = useBaseUrlPath();
-
-const hasAvatar = computed(() => !!props.avatar);
-</script>
-
-<template>
-    <div
-        :class="[$style.contributorAvatar, !hasAvatar && $style.noAvatar]"
-        :style="{ '--_avatarBlendColor': stringColor(props.contributorId) }"
-    >
-        <img
-            v-if="hasAvatar"
-            :src="baseUrlPath(contributorAsset(avatar!))"
-            loading="lazy"
-        />
-    </div>
-</template>
-
-<style lang="scss" module>
-.contributorAvatar {
-    $avatarSize: 40px;
-    --_avatarBlendColor: var(--brand);
-
-    position: relative;
-    width: #{$avatarSize};
-    height: #{$avatarSize};
-    border-radius: 50%;
-    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;
-    }
-}
-</style>

package/app/components/contributor/ContributorListItem.vue

@@ -1,35 +0,0 @@
-<script lang="ts" setup>
-import { type ContentContributor } from '@shared/contributor';
-import { createContributorLink } from '@shared/link';
-
-defineProps<ContentContributor>();
-
-const Link = defineNuxtLink({ prefetch: false });
-</script>
-
-<template>
-    <Link
-        :class="$style.contributor"
-        :to="createContributorLink(contributorId)"
-    >
-        <ContributorAvatar :contributorId :avatar />
-        <span>{{ displayName || contributorId }}</span>
-    </Link>
-</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);
-    }
-}
-</style>

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

@@ -1,79 +0,0 @@
-<script lang="ts" setup>
-import type { TopicPart } from 'erudit-cog/schema';
-import { NO_ALIASES } from '@erudit-js/bitran-elements/aliases/shared';
-
-import eruditConfig from '#erudit/config';
-
-import { type ContentTopicData } from '@erudit/shared/content/data/type/topic';
-import { topicLocation } from '@app/scripts/aside/minor/topic';
-
-import ContentDecoration from '../utils/ContentDecoration.vue';
-import ContentTitle from '../utils/ContentTitle.vue';
-import ContentDescription from '../utils/ContentDescription.vue';
-import TopicPartSwitch from './TopicPartSwitch.vue';
-import Breadcrumb from '../utils/Breadcrumb.vue';
-import ContentPopovers from '../utils/ContentPopovers.vue';
-import ContentReferences from '../utils/ContentReferences.vue';
-import ContentSection from '../utils/ContentSection.vue';
-import { TOPIC_PART_ICON } from '@erudit/shared/icons';
-
-const location = useBitranLocation();
-const topicPart = computed(() => location.value?.type as TopicPart);
-
-const topicData = await useContentData<ContentTopicData>();
-await useContentPage(topicData);
-
-const phrase = await usePhrases('article', 'summary', 'practice');
-
-const content = await useBitranContent(location);
-
-onMounted(() => {
-    watchEffect(() => {
-        // Telling live toc that content is mounted
-        topicLocation.value = location.value;
-    });
-});
-</script>
-
-<template>
-    <ContentDecoration
-        v-if="topicData.generic.decoration"
-        :decoration="topicData.generic.decoration"
-    />
-
-    <Breadcrumb
-        v-if="topicData.generic.context?.length > 1"
-        :context="topicData.generic.context"
-    />
-
-    <ContentTitle
-        :title="
-            topicData.generic?.title ||
-            topicData.generic.contentId.split('/').pop()!
-        "
-        :icon="TOPIC_PART_ICON[location!.type as TopicPart]"
-        :hint="phrase[location!.type as TopicPart]"
-    />
-
-    <ContentDescription
-        v-if="topicData.generic?.description"
-        :description="topicData.generic?.description"
-    />
-
-    <ContentPopovers :generic="topicData.generic" />
-
-    <TopicPartSwitch
-        :partLinks="topicData.topicPartLinks"
-        :active="topicPart"
-    />
-
-    <div style="clear: both"></div>
-
-    <BitranContent :content :context="{ location, aliases: NO_ALIASES() }" />
-
-    <ContentSection v-if="topicData.generic.references">
-        <ContentReferences :references="topicData.generic.references" />
-    </ContentSection>
-
-    <AdsBottomBanner v-if="eruditConfig.ads?.bottomBlockId" />
-</template>

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

@@ -1,118 +0,0 @@
-<script lang="ts" setup>
-import { topicParts, type TopicPart } from 'erudit-cog/schema';
-
-import type { TopicPartLinks } from '@erudit/shared/content/data/type/topic';
-import { TOPIC_PART_ICON } from '@erudit/shared/icons';
-
-defineProps<{ partLinks: TopicPartLinks; active: TopicPart }>();
-
-const phrase = await usePhrases('article', 'summary', 'practice');
-const Link = defineNuxtLink({ prefetch: false });
-</script>
-
-<template>
-    <section :class="$style.topicPartSwitch">
-        <Link
-            v-for="topicPart of topicParts"
-            :to="partLinks[topicPart]"
-            :class="[
-                $style.partButton,
-                active === topicPart && $style.active,
-                !partLinks[topicPart] && $style.noLink,
-            ]"
-        >
-            <MyIcon :name="TOPIC_PART_ICON[topicPart]" />
-            <div :class="$style.label">{{ phrase[topicPart] }}</div>
-        </Link>
-    </section>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.topicPartSwitch {
-    --height: 50px;
-
-    display: flex;
-    align-items: end;
-    justify-content: center;
-    gap: var(--gapBig);
-    margin: var(--_pMainY) 0;
-    margin-top: var(--gapBig);
-
-    width: 100%;
-    height: var(--height);
-    background: linear-gradient(to bottom, transparent, var(--bgAside));
-    border-bottom: 2px solid var(--border);
-}
-
-.partButton {
-    position: relative;
-    top: 2px;
-
-    display: flex;
-    align-items: center;
-    gap: calc(var(--gap) / 1.3);
-    padding: 0 var(--gap);
-
-    height: var(--height);
-    background: var(--bgMain);
-    border: 2px solid var(--border);
-    border-bottom-color: transparent;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-
-    line-height: 0;
-    text-decoration: none;
-    font-weight: 550;
-    color: var(--textMuted);
-
-    @include transition(color, background, border-color);
-
-    [my-icon] {
-        font-size: 1.1em;
-    }
-
-    &:not(.active) {
-        background: var(--bgAside);
-        border-bottom-color: color-mix(
-            in srgb,
-            var(--border),
-            var(--bgMain) 50%
-        );
-
-        &.noLink {
-            color: color-mix(in srgb, var(--textDisabled), transparent 35%);
-            border-bottom-color: var(--border);
-            cursor: not-allowed;
-        }
-
-        &:not(.noLink):hover {
-            color: var(--text);
-            background: var(--bgMain);
-            border-bottom-color: transparent;
-        }
-    }
-
-    &.active {
-        color: var(--brand);
-    }
-}
-
-@include bp.below('mobile') {
-    .topicPartSwitch {
-        --height: 45px;
-        gap: var(--gap);
-    }
-
-    .partButton {
-        gap: var(--gapSmall);
-
-        &:not(.active) {
-            .label {
-                display: none;
-            }
-        }
-    }
-}
-</style>