erudit 3.0.0-dev.2 → 3.0.0-dev.21

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

@@ -1,177 +1,183 @@
-<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>
+<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 +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>
+<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>