erudit 2.0.0-dev.7

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

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+
+import AsideOverlayPane from '../utils/AsideOverlayPane.vue';
+
+const props = defineProps<{ fullContentId: string }>();
+const phrase = await usePhrases(
+    'make_contribution',
+    'material_improvement',
+    'edit_page',
+    'how_to_improve',
+    'report_problem',
+);
+const paneVisible = defineModel<boolean>('pane');
+
+const issueLink = computed(() => {
+    const ghRepositorty = eruditConfig.repository;
+    return ghRepositorty
+        ? `https://github.com/${ghRepositorty.name}/issues/`
+        : null;
+});
+
+const editPageLink = computed(() => {
+    const ghRepository = eruditConfig.repository;
+    return ghRepository
+        ? `https://github.com/${ghRepository.name}/tree/${ghRepository.branch}/content/${props.fullContentId}`
+        : null;
+});
+</script>
+
+<template>
+    <button :class="$style.contribute" @click="paneVisible = true">
+        <div :class="$style.icon"><MyIcon name="draw" /></div>
+        <div :class="$style.label">{{ phrase.make_contribution }}</div>
+    </button>
+    <TransitionFade>
+        <AsideOverlayPane v-if="paneVisible" stick="bottom">
+            <div :class="$style.paneBottomActions">
+                <AsideListItem
+                    icon="circle-help"
+                    :main="phrase.how_to_improve"
+                />
+                <AsideListItem
+                    v-if="issueLink"
+                    icon="bug"
+                    :main="phrase.report_problem"
+                    :link="issueLink"
+                    target="_blank"
+                />
+                <AsideListItem
+                    v-if="editPageLink"
+                    icon="draw"
+                    :main="phrase.edit_page"
+                    :link="editPageLink"
+                    target="_blank"
+                />
+            </div>
+            <div :class="$style.paneFooter">
+                <span>{{ phrase.material_improvement }}</span>
+                <span style="flex: 1"></span>
+                <MyIcon
+                    name="cross"
+                    :class="$style.close"
+                    @click="paneVisible = false"
+                />
+            </div>
+        </AsideOverlayPane>
+    </TransitionFade>
+</template>
+
+<style lang="scss" module>
+.contribute {
+    display: flex;
+    gap: var(--gap);
+    align-items: center;
+    border: none;
+    border-top: 1px solid var(--border);
+    padding: var(--gap);
+    background: transparent;
+    cursor: pointer;
+    @include transition(background);
+
+    &:hover {
+        background: var(--bgAccent);
+        .icon {
+            border-color: var(--textDimmed);
+        }
+        .label {
+            color: var(--text);
+        }
+    }
+
+    .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 3px dashed var(--border);
+        border-radius: 50%;
+        color: var(--textMuted);
+        @include transition(border-color);
+    }
+
+    .label {
+        color: var(--textMuted);
+        @include transition(color);
+    }
+}
+
+.paneBottomActions {
+    overflow: auto;
+    @include scroll;
+
+    > * {
+        border-bottom: none !important;
+        border-top: 1px solid var(--border);
+        min-height: 70px;
+    }
+}
+
+.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;
+
+    .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/content/AsideMinorContent.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { AsideMinorContent } from '@shared/aside/minor';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
+
+const contentData = injectAsideData<AsideMinorContent>();
+const phrase = await usePhrases('contributors', 'no_contributors');
+const contributePaneVisible = ref(false);
+
+watch(contentData, () => (contributePaneVisible.value = false));
+</script>
+
+<template>
+    <AsideMinorPane :class="$style.asideMinorContent">
+        <section :class="$style.contentNav">
+            <AsideMinorTopLink
+                :title="contentData.nav?.previous?.title"
+                :link="contentData.nav?.previous?.link"
+                :icon="'arrow-left'"
+            />
+
+            <div :class="$style.title">
+                {{ phrase.contributors }}:
+                <span>{{ contentData.contributors?.length || 0 }}</span>
+            </div>
+
+            <AsideMinorTopLink
+                :title="contentData.nav?.next?.title"
+                :link="contentData.nav?.next?.link"
+                :icon="'arrow-left'"
+                class="icon-flip-h"
+            />
+        </section>
+        <section v-if="contentData.contributors" :class="$style.contributors">
+            <ContributorListItem
+                v-for="contributor of contentData.contributors"
+                v-bind="contributor"
+            />
+        </section>
+        <section v-else :class="$style.noContributors">
+            {{ phrase.no_contributors }}
+        </section>
+        <AsideMinorContribute
+            :fullContentId="contentData.fullContentId"
+            v-model:pane="contributePaneVisible"
+        />
+    </AsideMinorPane>
+</template>
+
+<style lang="scss" module>
+.asideMinorContent {
+    display: flex;
+    flex-direction: column;
+
+    .contentNav {
+        border-bottom: 1px solid var(--border);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        .title {
+            text-align: center;
+            color: var(--text);
+            font-size: 1.1em;
+            font-weight: 600;
+            width: 158px;
+
+            span {
+                padding-left: var(--gap);
+                color: var(--textMuted);
+            }
+        }
+    }
+
+    .contributors {
+        flex: 1;
+        overflow: auto;
+        @include scroll;
+
+        > * {
+            border-bottom: 1px solid var(--border);
+        }
+    }
+
+    .noContributors {
+        flex: 1;
+        text-align: center;
+        padding: var(--gap);
+        color: var(--textMuted);
+    }
+}
+</style>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { AsideMinorTopic } from '@shared/aside/minor';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
+
+import TopicNav from './TopicNav.vue';
+import TopicToc from './TopicToc.vue';
+import TopicContributors from './TopicContributors.vue';
+
+const topicData = injectAsideData<AsideMinorTopic>();
+const contributePaneVisible = ref(false);
+
+watch(topicData, () => (contributePaneVisible.value = false));
+</script>
+
+<template>
+    <AsideMinorPane :class="$style.asideMinorTopic">
+        <TopicNav />
+        <TopicToc />
+        <TopicContributors v-if="topicData.contributors" />
+        <AsideMinorContribute
+            :fullContentId="topicData.fullContentId"
+            v-model:pane="contributePaneVisible"
+        />
+    </AsideMinorPane>
+</template>
+
+<style lang="scss" module>
+.asideMinorTopic {
+    display: flex;
+    flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+import { injectAsideData } from '@app/scripts/aside/minor/state';
+import { type AsideMinorTopic } from '@shared/aside/minor';
+
+import AsideOverlayPane from '../../utils/AsideOverlayPane.vue';
+import type { ContentContributor } from '@shared/contributor';
+
+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">
+                <ContributorAvatar
+                    v-for="contributor of showcase"
+                    :contributorId="contributor.contributorId"
+                    :avatar="contributor.avatar"
+                    :class="$style.avatar"
+                />
+            </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 {
+        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

@@ -0,0 +1,49 @@
+<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

@@ -0,0 +1,202 @@
+<script lang="ts" setup>
+import { stringifyBitranLocation } from '@shared/bitran/location';
+import type { TocItem } from '@erudit/shared/bitran/toc';
+import { headingName } from '@shared/bitran/products/heading/shared';
+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>