erudit 3.0.0-dev.20 → 3.0.0-dev.21

package/app/components/contributor/ContributorListItem.vue

@@ -3,18 +3,22 @@ import { type ContentContributor } from '@shared/contributor';
 import { createContributorLink } from '@shared/link';
 
 defineProps<ContentContributor>();
-
-const Link = defineNuxtLink({ prefetch: false });
 </script>
 
 <template>
-    <Link
+    <EruditLink
+        :prefetch="false"
         :class="$style.contributor"
         :to="createContributorLink(contributorId)"
     >
-        <ContributorAvatar :contributorId :avatar />
+        <Avatar
+            icon="user"
+            :src="avatar ? `/contributors/${avatar}` : undefined"
+            :class="$style.avatar"
+            :color="stringColor(contributorId)"
+        />
         <span>{{ displayName || contributorId }}</span>
-    </Link>
+    </EruditLink>
 </template>
 
 <style lang="scss" module>
@@ -31,5 +35,9 @@ const Link = defineNuxtLink({ prefetch: false });
     &:hover {
         background: var(--bgAccent);
     }
+
+    .avatar {
+        --avatarSize: 40px;
+    }
 }
 </style>

package/app/components/main/MainActionButton.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    icon: MyIconName;
+    label: string;
+    link: string;
+}>();
+</script>
+
+<template>
+    <section :class="$style.actionButtonSection">
+        <EruditLink
+            :prefetch="false"
+            :to="link"
+            target="_blank"
+            :class="$style.actionButton"
+        >
+            <MyIcon :name="icon" :class="$style.actionButtonIcon" />
+            <span :class="$style.actionButtonLabel">{{ label }}</span>
+        </EruditLink>
+    </section>
+</template>
+
+<style lang="scss" module>
+.actionButtonSection {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: var(--_pMainY) var(--_pMainX);
+}
+
+.actionButton {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: white;
+    text-decoration: none;
+    font-weight: 600;
+    background: var(--brand);
+    border-radius: 5px;
+    padding: 12px 20px;
+    box-shadow: 0 0 14px 1px color-mix(in srgb, var(--brand), transparent 60%);
+
+    @include transition(background);
+
+    &:hover {
+        background: color-mix(in srgb, var(--brand), transparent 25%);
+    }
+}
+</style>

package/app/components/main/MainBitranContent.vue

@@ -6,7 +6,6 @@ import {
 } from '@erudit-js/cog/schema';
 
 import type { RawBitranContent } from '@shared/bitran/content';
-import ContentSection from '@app/components/main/content/ContentSection.vue';
 
 type MainBitranPayload = RawBitranContent & {
     mainLocation: BitranLocation;
@@ -41,7 +40,16 @@ if (
 </script>
 
 <template>
-    <ContentSection v-if="payloadValue.biCode">
+    <MainSection v-if="payloadValue.biCode" :class="$style.mainBitranContent">
+        <template v-if="$slots.header" v-slot:header>
+            <slot name="header"></slot>
+        </template>
         <BitranContent :rawContent="payloadValue" />
-    </ContentSection>
+    </MainSection>
 </template>
+
+<style lang="scss" module>
+.mainBitranContent {
+    padding-top: var(--_pMainY);
+}
+</style>

package/app/components/main/MainBreadcrumb.vue

@@ -7,14 +7,10 @@ defineProps<{ items: BreadcrumbItem[] }>();
 <template>
     <section v-if="items.length" :class="$style.breadcrumb">
         <template v-for="item in items">
-            <NuxtLink
-                :to="item.link"
-                :prefetch="false"
-                :class="$style.breadcrumbItem"
-            >
+            <EruditLink :to="item.link" x :class="$style.breadcrumbItem">
                 <MyIcon :name="item.icon" wrapper="span" />
                 {{ item.title }}
-            </NuxtLink>
+            </EruditLink>
             <MyIcon :class="$style.sep" name="angle-right" />
         </template>
     </section>

package/app/components/main/MainSection.vue

@@ -0,0 +1,58 @@
+<template>
+    <section :class="$style.mainSection">
+        <div :class="$style.hr">
+            <div :class="$style.shade"></div>
+            <div v-if="$slots.header" :class="$style.header">
+                <slot name="header"></slot>
+            </div>
+        </div>
+        <div :class="$style.content">
+            <slot></slot>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+.mainSection {
+    .hr {
+        position: relative;
+        border-bottom: 2px solid var(--border);
+        margin: var(--_pMainY) 0;
+
+        .shade {
+            position: absolute;
+            z-index: 0;
+            bottom: 0;
+            left: 0;
+            height: 50px;
+            width: 100%;
+            background: linear-gradient(to bottom, transparent, var(--bgAside));
+        }
+
+        .header {
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    &:nth-child(even of .mainSection) {
+        .hr {
+            transform: scaleY(-1);
+
+            .header {
+                transform: scaleY(-1);
+            }
+        }
+    }
+
+    .content {
+        position: relative;
+        z-index: 1;
+    }
+}
+
+:not(.mainSection):has(+ .mainSection) {
+    position: relative;
+    z-index: 1;
+}
+</style>

package/app/components/main/cameo/MainCameo.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { type Cameo } from '@erudit-js/cog/schema';
+
+const nuxtApp = useNuxtApp();
+const currentCameo = shallowRef<Cameo>();
+
+const payloadKey = 'cameo';
+const payloadValue = shallowRef<{
+    cameos: Record<string, Cameo>;
+    sponsorCameos: Record<string, Cameo>;
+}>();
+
+async function init() {
+    payloadValue.value = nuxtApp.payload.data[payloadKey] ||= {
+        cameos: Object.fromEntries(
+            (await $fetch('/api/cameo/ids', { responseType: 'json' })).map(
+                (id: string) => [id, null],
+            ),
+        ),
+        sponsorCameos: Object.fromEntries(
+            (
+                await $fetch('/api/sponsor/cameo/ids', { responseType: 'json' })
+            ).map((id: string) => [id, null]),
+        ),
+    };
+
+    if (
+        Object.keys(payloadValue.value!.cameos).length === 0 &&
+        Object.keys(payloadValue.value!.sponsorCameos).length === 0
+    ) {
+        return;
+    }
+
+    await nextCameo();
+}
+
+function getAllAvailableCameos(): Array<{
+    id: string;
+    type: 'cameo' | 'sponsor';
+}> {
+    const cameoIds = Object.keys(payloadValue.value!.cameos);
+    const sponsorIds = Object.keys(payloadValue.value!.sponsorCameos);
+
+    return [
+        ...cameoIds.map((id) => ({ id, type: 'cameo' as const })),
+        ...sponsorIds.map((id) => ({ id, type: 'sponsor' as const })),
+    ];
+}
+
+function getRandomCameoExcluding(
+    exclude?: string,
+): { id: string; type: 'cameo' | 'sponsor' } | null {
+    const availableCameos = getAllAvailableCameos();
+
+    if (availableCameos.length === 0) return null;
+
+    // Filter out the current cameo if we need to exclude it
+    const filteredCameos = exclude
+        ? availableCameos.filter((cameo) => cameo.id !== exclude)
+        : availableCameos;
+
+    // If we only have one cameo and it's the current one, return it anyway
+    const targetCameos =
+        filteredCameos.length > 0 ? filteredCameos : availableCameos;
+
+    const randomIndex = Math.floor(Math.random() * targetCameos.length);
+    return targetCameos[randomIndex]!;
+}
+
+function getNextCameoId(): { id: string; type: 'cameo' | 'sponsor' } | null {
+    const currentCameoId = currentCameo.value?.cameoId;
+    return getRandomCameoExcluding(currentCameoId);
+}
+
+async function getCameoData(cameoId: string, type: 'cameo' | 'sponsor') {
+    const targetPayload =
+        type === 'cameo'
+            ? payloadValue.value!.cameos
+            : payloadValue.value!.sponsorCameos;
+
+    if (targetPayload[cameoId]) {
+        return targetPayload[cameoId];
+    }
+
+    const apiPath =
+        type === 'cameo'
+            ? `/api/cameo/data/${cameoId}`
+            : `/api/sponsor/cameo/data/${cameoId}`;
+
+    const cameoData = (await $fetch(apiPath, {
+        responseType: 'json',
+    })) as Cameo;
+
+    targetPayload[cameoId] = cameoData;
+    return cameoData;
+}
+
+async function nextCameo() {
+    const nextCameoInfo = getNextCameoId();
+    if (!nextCameoInfo) return;
+
+    currentCameo.value = await getCameoData(
+        nextCameoInfo.id,
+        nextCameoInfo.type,
+    );
+}
+
+const hasMultipleCameos = computed(() => {
+    if (!payloadValue.value) return false;
+
+    const totalCameos =
+        Object.keys(payloadValue.value.cameos).length +
+        Object.keys(payloadValue.value.sponsorCameos).length;
+    return totalCameos > 1;
+});
+
+onMounted(init);
+</script>
+
+<template>
+    <section v-if="currentCameo" :class="$style.cameo">
+        <MainCameoData
+            :key="currentCameo.cameoId"
+            :data="currentCameo"
+            :hasMultipleCameos
+            v-on:next-cameo="nextCameo"
+        />
+    </section>
+</template>
+
+<style lang="scss" module>
+.cameo {
+    padding: var(--_pMainY) var(--_pMainX);
+}
+</style>

package/app/components/main/cameo/MainCameoData.vue

@@ -0,0 +1,232 @@
+<script lang="ts" setup>
+import { type Cameo } from '@erudit-js/cog/schema';
+
+import eruditConfig from '#erudit/config';
+import { detectStrictFileType } from '@erudit/utils/ext';
+
+const props = defineProps<{
+    data: Cameo;
+    hasMultipleCameos: boolean;
+}>();
+const emit = defineEmits<{
+    (e: 'nextCameo'): void;
+}>();
+
+function getRandomAvatar(data: Cameo) {
+    const avatars = data.avatars;
+
+    if (!avatars || avatars.length === 0) {
+        throw new Error(
+            `No avatars available for the cameo with ID: ${data.cameoId}`,
+        );
+    }
+
+    const url = avatars[Math.floor(Math.random() * avatars.length)]!;
+    let type = detectStrictFileType(url, 'image', 'video');
+
+    return { url, type };
+}
+
+const { url: avatarSrc, type: avatarType } = getRandomAvatar(props.data);
+
+const message =
+    props.data.messages[
+        Math.floor(Math.random() * props.data.messages.length)
+    ]!;
+</script>
+
+<template>
+    <div
+        :class="$style.cameoData"
+        :style="{ '--cameoColor': data.color ?? stringColor(data.cameoId) }"
+    >
+        <a :href="data.link" :class="$style.avatar" target="_blank">
+            <Avatar
+                :src="avatarSrc"
+                :color="data.color ?? stringColor(data.cameoId)"
+                :styling="{ glow: true, border: true }"
+            />
+        </a>
+        <div :class="$style.info">
+            <div :class="$style.triangleBorder">
+                <div :class="$style.triangle"></div>
+            </div>
+            <div :class="$style.message" v-html="message"></div>
+            <footer>
+                <MyRuntimeIcon
+                    v-if="data.icon"
+                    name="cameo-icon"
+                    :svg="data.icon"
+                    :class="$style.icon"
+                />
+                <a :class="$style.name" :href="data.link" target="_blank">
+                    {{ data.name }}
+                </a>
+                <MyIcon
+                    v-if="data.link"
+                    :class="$style.external"
+                    name="link-external"
+                />
+                <span :style="{ flex: 1 }"></span>
+                <span :class="$style.actions">
+                    <EruditLink v-if="eruditConfig.sponsors" to="/sponsors/">
+                        <MyIcon name="cameo-add" />
+                    </EruditLink>
+                    <MyIcon
+                        v-if="hasMultipleCameos"
+                        name="arrow-left"
+                        @click="emit('nextCameo')"
+                        :style="{ transform: 'scale(-1)' }"
+                    />
+                </span>
+            </footer>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.cameoData {
+    display: flex;
+    align-items: start;
+    gap: 40px;
+
+    @include bp.below('mobile') {
+        gap: 28px;
+    }
+
+    .avatar > * {
+        --avatarSize: 60px;
+
+        @include bp.below('mobile') {
+            --avatarSize: 40px;
+        }
+    }
+
+    .info {
+        --cameoTriangleSize: 24px;
+        --cameoBg: color-mix(
+            in srgb,
+            light-dark(#ffffff, #1c1c1e),
+            var(--cameoColor) 15%
+        );
+        --cameoBorder: color-mix(in srgb, var(--border), var(--cameoColor) 30%);
+
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        position: relative;
+        background: var(--cameoBg);
+        border: 2px solid var(--cameoBorder);
+        border-radius: 5px;
+        border-top-left-radius: 0;
+        padding: var(--gap);
+        font-family: 'Noto Serif', serif;
+        color: color-mix(in srgb, var(--text), var(--cameoColor) 10%);
+
+        @include bp.below('mobile') {
+            --cameoTriangleSize: 16px;
+            padding: var(--gapSmall);
+        }
+
+        .message {
+            font-size: 1.05em;
+
+            strong {
+                font-weight: 500;
+                color: color-mix(
+                    in srgb,
+                    var(--textDeep),
+                    var(--cameoColor) 20%
+                );
+            }
+        }
+
+        footer {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.95em;
+            flex-wrap: wrap;
+
+            .icon {
+                color: color-mix(in srgb, var(--text), var(--cameoColor) 80%);
+            }
+
+            .name {
+                font-family: 'Noto Sans', sans-serif;
+                color: inherit;
+                text-decoration-color: transparent;
+                font-weight: 600;
+
+                @include transition(text-decoration-color);
+
+                &:hover {
+                    text-decoration-color: inherit;
+                }
+            }
+
+            .external {
+                opacity: 0.35;
+                font-size: 0.7em;
+                margin-left: 3px;
+            }
+
+            .actions {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                font-size: 0.9em;
+
+                > * {
+                    color: color-mix(
+                        in srgb,
+                        var(--textDeep),
+                        var(--cameoColor) 40%
+                    );
+                    cursor: pointer;
+                    opacity: 0.3;
+                    padding: 5px;
+                    position: relative;
+                    top: 6px;
+
+                    @include transition(opacity);
+
+                    &:hover {
+                        opacity: 1;
+                    }
+
+                    @include bp.below('mobile') {
+                        top: 0;
+                    }
+                }
+            }
+        }
+
+        .triangle,
+        .triangleBorder {
+            position: absolute;
+            border-style: solid;
+        }
+
+        .triangleBorder {
+            top: -2px;
+            left: calc(-1 * var(--cameoTriangleSize));
+            border-width: 0 var(--cameoTriangleSize) var(--cameoTriangleSize) 0;
+            border-color: transparent var(--cameoBorder) transparent transparent;
+        }
+
+        .triangle {
+            --_smallerTriangleSize: calc(var(--cameoTriangleSize) - 4px);
+
+            left: 5px;
+            top: 2px;
+            border-width: 0 var(--_smallerTriangleSize)
+                var(--_smallerTriangleSize) 0;
+            border-color: transparent var(--cameoBg) transparent transparent;
+        }
+    }
+}
+</style>

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

@@ -71,7 +71,7 @@ const hasPopovers = computed(() => {
             <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>
+                    <EruditLink :to="key">{{ value }}</EruditLink>
                 </li>
             </ul>
         </ContentPopover>

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

@@ -5,13 +5,11 @@ import eruditConfig from '#erudit/config';
 
 import { type ContentTopicData } from '@shared/content/data/type/topic';
 import { TOPIC_PART_ICON } from '@shared/icons';
-import { topicLocation } from '@app/scripts/aside/minor/topic';
 
 import ContentBreadcrumb from '@app/components/main/content/ContentBreadcrumb.vue';
 import ContentDecoration from '@app/components/main/content/ContentDecoration.vue';
 import ContentPopovers from '@app/components/main/content/ContentPopovers.vue';
 import ContentReferences from '@app/components/main/content/ContentReferences.vue';
-import ContentSection from '@app/components/main/content/ContentSection.vue';
 import TopicPartSwitch from './TopicPartSwitch.vue';
 
 const location = useBitranLocation() as Ref<BitranLocation>;
@@ -21,13 +19,6 @@ const topicData = await useContentData<ContentTopicData>();
 await useContentPage(topicData);
 
 const phrase = await usePhrases('article', 'summary', 'practice');
-
-onMounted(() => {
-    watchEffect(() => {
-        // Telling live toc that content is mounted
-        topicLocation.value = location.value;
-    });
-});
 </script>
 
 <template>
@@ -54,22 +45,26 @@ onMounted(() => {
 
     <ContentPopovers :generic="topicData.generic" />
 
-    <TopicPartSwitch
-        :partLinks="topicData.topicPartLinks"
-        :active="topicPart"
-    />
+    <MainCameo />
 
     <div style="clear: both"></div>
 
-    <MainBitranContent :location />
+    <MainBitranContent :location>
+        <template v-slot:header>
+            <TopicPartSwitch
+                :partLinks="topicData.topicPartLinks"
+                :active="topicPart"
+            />
+        </template>
+    </MainBitranContent>
 
-    <ContentSection v-if="topicData.generic.references">
+    <MainSection v-if="topicData.generic.references">
         <ContentReferences :references="topicData.generic.references" />
-    </ContentSection>
+    </MainSection>
 
-    <ContentSection v-if="adsAllowed() && eruditConfig.ads?.bottom">
+    <MainSection v-if="adsAllowed() && eruditConfig.ads?.bottom">
         <AdsBannerBottom />
-    </ContentSection>
+    </MainSection>
 </template>
 
 <style lang="scss" module>

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

@@ -7,13 +7,13 @@ 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
+        <EruditLink
             v-for="topicPart of topicParts"
+            :prefetch="false"
             :to="partLinks[topicPart]"
             :class="[
                 $style.partButton,
@@ -23,7 +23,7 @@ const Link = defineNuxtLink({ prefetch: false });
         >
             <MyIcon :name="TOPIC_PART_ICON[topicPart]" />
             <div :class="$style.label">{{ phrase[topicPart] }}</div>
-        </Link>
+        </EruditLink>
     </section>
 </template>
 
@@ -33,23 +33,18 @@ const Link = defineNuxtLink({ prefetch: false });
 .topicPartSwitch {
     --height: 50px;
 
-    position: relative;
-    top: 65px;
-
     display: flex;
     align-items: end;
     justify-content: center;
     gap: var(--gapBig);
-    margin: var(--_pMainY) 0;
-    margin-top: -40px;
+    margin: var(--_pMainY) 0 0;
+
+    position: relative;
+    top: 2px;
 
     width: 100%;
     height: var(--height);
     border-bottom: 2px solid transparent;
-
-    @include bp.below('mobile') {
-        top: 56px;
-    }
 }
 
 .partButton {

package/app/components/preview/PreviewFooterAction.vue

@@ -7,7 +7,7 @@ defineProps<{
     brand?: boolean;
 }>();
 
-const nuxtLink = defineNuxtLink({ prefetch: false });
+const nuxtLink = defineNuxtLink({ prefetch: false, trailingSlash: 'append' });
 </script>
 
 <template>