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

package/app/components/main/MainQuote.vue

@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { Quote } from '@erudit-js/core/quote';
+import type { MaybeMyIconName, MyIconName } from '#my-icons';
+
+const { quote } = defineProps<{
+    quote: Quote;
+    hasBecomeLink?: boolean;
+    hasNextLink?: boolean;
+}>();
+const emit = defineEmits(['next']);
+
+const color = quote.color ?? stringColor(quote.name);
+
+const message = (() => {
+    const messages =
+        quote.type === 'cameo'
+            ? quote.messages
+            : (quote.messages ??
+              ERUDIT.config.project.sponsors?.defaultSponsorMessages!);
+
+    const randomMessageI = Math.floor(Math.random() * messages.length);
+    const randomMessage = messages[randomMessageI]!;
+
+    return randomMessage;
+})();
+
+const avatarUrl = (() => {
+    if (quote.type === 'cameo') {
+        return withBaseUrl(quote.avatarUrl);
+    }
+
+    return quote.avatarUrl
+        ? withBaseUrl(quote.avatarUrl)
+        : ('diamond' satisfies MyIconName);
+})();
+
+function nextClick() {
+    emit('next');
+    setTimeout(() => {
+        nextIcon.value = loadingSvg;
+    }, 400);
+}
+
+const nextIcon = ref<MaybeMyIconName>('arrow/left');
+
+const phrase = await usePhrases('add_quote', 'next_quote');
+</script>
+
+<template>
+    <div
+        :style="{
+            '--color': color,
+            '--colorBorder':
+                'color-mix(in srgb, var(--color), var(--color-border) 70%)',
+            '--colorBg':
+                'color-mix(in srgb, var(--color), var(--color-bg-main) 85%)',
+            '--colorText':
+                'color-mix(in srgb, var(--color), var(--color-text) 85%)',
+            '--colorIcon':
+                'color-mix(in srgb, var(--color), var(--color-text) 30%)',
+        }"
+        class="micro:gap-[40px] flex gap-[30px]"
+    >
+        <div class="shrink-0">
+            <EruditLink
+                external
+                target="_blank"
+                :to="quote.link"
+                class="block rounded-full ring-2 ring-(--colorBorder)"
+            >
+                <SmartMedia
+                    :url="avatarUrl"
+                    class="border-bg-main micro:size-[60px] size-[40px]
+                        rounded-full border-2
+                        [box-shadow:0_0_16px_0_var(--color)] transition-[border]
+                        [--mediaColor:var(--color)]"
+                />
+            </EruditLink>
+        </div>
+        <div
+            class="p-small micro:p-normal relative flex-1 rounded
+                rounded-tl-none border-2 border-(--colorBorder) bg-(--colorBg)
+                transition-[background,border]"
+        >
+            <div
+                class="micro:[--arrowSize:22px] absolute -top-[2px]
+                    -left-(--arrowSize) h-(--arrowSize) w-(--arrowSize)
+                    bg-(--colorBorder) transition-[background]
+                    [--arrowSize:14px]
+                    [--arrowSizeSmall:calc(var(--arrowSize)-2px)]
+                    [clip-path:polygon(110%_0,110%_110%,0_0)]"
+            >
+                <div
+                    class="absolute top-[2px] -right-[3px] h-(--arrowSizeSmall)
+                        w-(--arrowSizeSmall) bg-(--colorBg)
+                        transition-[background]
+                        [clip-path:polygon(100%_0,100%_100%,0_0)]"
+                ></div>
+            </div>
+            <div class="gap-small flex flex-col font-serif text-(--colorText)">
+                <div>{{ formatText(message) }}</div>
+                <div
+                    class="text-main-sm gap-normal flex flex-wrap font-semibold"
+                >
+                    <div class="flex-1">
+                        <MaybeMyIcon
+                            v-if="quote.type === 'cameo' || quote.avatarUrl"
+                            class="relative -top-[1.5px] mr-1.5 inline
+                                text-(--colorIcon)"
+                            :name="quote.icon!"
+                        />
+                        <EruditLink
+                            v-if="quote.link"
+                            external
+                            :to="quote.link"
+                            target="_blank"
+                            class="text-hover-underline"
+                        >
+                            {{ formatText(quote.name) }}
+                        </EruditLink>
+                        <span v-else>{{ formatText(quote.name) }}</span>
+                        <MyIcon
+                            v-if="quote.link"
+                            name="arrow/outward"
+                            class="relative -top-1 -right-1 inline
+                                text-(--colorText)/40"
+                        />
+                    </div>
+                    <div
+                        v-if="hasBecomeLink || hasNextLink"
+                        class="gap-normal micro:text-[1.5em] flex items-center
+                            text-[1.2em]"
+                    >
+                        <EruditLink
+                            v-if="hasBecomeLink"
+                            :to="PAGES.sponsors"
+                            :title="phrase.add_quote"
+                            class="hocus:text-(--colorIcon)
+                                text-(--colorIcon)/40 transition-[color]"
+                        >
+                            <MyIcon name="plus" />
+                        </EruditLink>
+                        <button
+                            v-if="hasNextLink"
+                            @click="nextClick"
+                            :title="phrase.next_quote"
+                            class="hocus:text-(--colorIcon) cursor-pointer
+                                text-(--colorIcon)/40 transition-[color]"
+                        >
+                            <MaybeMyIcon
+                                :name="nextIcon"
+                                class="-scale-x-100"
+                            />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/app/components/main/MainQuoteLoader.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { Quote, QuoteIds } from '@erudit-js/core/quote';
+
+const nuxtApp = useNuxtApp();
+const payloadKey = 'quote-ids';
+const payloadValue: QuoteIds =
+    (nuxtApp.static.data[payloadKey] ||=
+    nuxtApp.payload.data[payloadKey] ||=
+        await $fetch('/api/quote/ids', { responseType: 'json' }));
+
+// Calculate total number of quotes
+const totalQuotes = computed(() => {
+    return Object.values(payloadValue).reduce(
+        (sum, ids) => sum + (ids?.length ?? 0),
+        0,
+    );
+});
+
+const hasMultipleQuotes = computed(() => totalQuotes.value > 1);
+
+const currentQuoteId = ref<string | undefined>();
+
+function getRandomQuoteId() {
+    const allQuoteIds: string[] = [];
+
+    // Collect all quote IDs
+    for (const type in payloadValue) {
+        const ids = payloadValue[type as keyof QuoteIds];
+        if (ids) {
+            allQuoteIds.push(...ids);
+        }
+    }
+
+    // If only one quote exists, return it
+    if (allQuoteIds.length === 1) {
+        return allQuoteIds[0];
+    }
+
+    // Filter out the current quote ID to avoid repetition
+    const availableIds = currentQuoteId.value
+        ? allQuoteIds.filter((id) => id !== currentQuoteId.value)
+        : allQuoteIds;
+
+    // Select a random quote from available ones
+    const randomIdI = Math.floor(Math.random() * availableIds.length);
+    return availableIds[randomIdI];
+}
+
+const quote = shallowRef<Quote>();
+const quoteKey = ref(0);
+
+let loadingQuote = false;
+
+async function nextQuote() {
+    loadingQuote = true;
+
+    const nextQuoteId = getRandomQuoteId();
+    currentQuoteId.value = nextQuoteId;
+    const nextQuote = await $fetch(`/api/quote/data/${nextQuoteId}`, {
+        responseType: 'json',
+    });
+    quote.value = nextQuote;
+    quoteKey.value++;
+
+    loadingQuote = false;
+}
+
+onMounted(() => {
+    if (Object.keys(payloadValue).length === 0) {
+        return;
+    }
+
+    nextQuote();
+});
+</script>
+
+<template>
+    <section v-if="quote" :key="quoteKey" class="px-main py-main-half">
+        <MainQuote
+            :quote
+            :hasBecomeLink="true"
+            :hasNextLink="hasMultipleQuotes"
+            @next="!loadingQuote && nextQuote()"
+        />
+    </section>
+</template>

package/app/components/main/MainSection.vue

@@ -1,58 +1,55 @@
 <template>
-    <section :class="$style.mainSection">
-        <div :class="$style.hr">
-            <div :class="$style.shade"></div>
-            <div v-if="$slots.header" :class="$style.header">
+    <section :class="[$style.section, 'bg-bg-main transition-[background]']">
+        <!-- Section Header -->
+        <div
+            :class="[
+                $style.header,
+                'border-border relative border-b-2 transition-[border]',
+            ]"
+        >
+            <!-- Header Shade -->
+            <div class="absolute bottom-0 h-[70px] w-full">
+                <!-- Light mode gradient -->
+                <div
+                    class="absolute inset-0 bg-linear-to-t from-[#f7f7f7]
+                        to-transparent opacity-100 transition-opacity
+                        dark:opacity-0"
+                ></div>
+                <!-- Dark mode gradient -->
+                <div
+                    class="absolute inset-0 bg-linear-to-t from-[#1b1b1b]
+                        to-transparent opacity-0 transition-opacity
+                        dark:opacity-100"
+                ></div>
+            </div>
+
+            <!-- Header Content -->
+            <div :class="[$style.headerContent, 'relative z-1']">
                 <slot name="header"></slot>
             </div>
         </div>
-        <div :class="$style.content">
+
+        <!-- Section Body -->
+        <div class="relative z-1">
             <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;
-        }
+<style module>
+.section:nth-child(1 of .section) {
+    .header {
+        display: none;
     }
+}
 
-    &:nth-child(even of .mainSection) {
-        .hr {
-            transform: scaleY(-1);
-
-            .header {
-                transform: scaleY(-1);
-            }
-        }
+.section:nth-child(odd of .section) {
+    .header {
+        transform: scaleY(-1);
     }
 
-    .content {
-        position: relative;
-        z-index: 1;
+    .headerContent {
+        transform: scaleY(-1);
     }
 }
-
-:not(.mainSection):has(+ .mainSection) {
-    position: relative;
-    z-index: 1;
-}
 </style>

package/app/components/main/MainSectionPreamble.vue

@@ -0,0 +1,5 @@
+<template>
+    <MainSection class="py-main-half">
+        <slot></slot>
+    </MainSection>
+</template>

package/app/components/main/MainSubTitle.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps<{ title: string }>();
+</script>
+
+<template>
+    <div
+        class="text-main-sm micro:text-left pb-main-half text-center
+            font-semibold"
+    >
+        {{ formatText(title) }}
+    </div>
+</template>

package/app/components/main/MainTitle.vue

@@ -1,76 +1,33 @@
 <script lang="ts" setup>
-import { isMyIcon } from '#my-icons';
+import type { MaybeMyIconName } from '#my-icons';
 
-defineProps<{ icon: string; title: string; hint?: string }>();
+const { color = 'var(--color-brand)' } = defineProps<{
+    icon: MaybeMyIconName;
+    title: string;
+    color?: string;
+}>();
 </script>
 
 <template>
-    <section :class="$style.contentTitle">
-        <MyIcon
-            v-if="isMyIcon(icon)"
-            :name="icon as any"
-            :title="hint"
-            :class="{ [$style.hasHint]: !!hint }"
-        />
-        <MyRuntimeIcon
-            v-else
-            name="content-title-icon"
-            :svg="icon"
-            :title="hint"
-            :class="{ [$style.hasHint]: !!hint }"
-        />
-        <h1>{{ title }}</h1>
+    <section
+        :style="{ '--titleColor': color }"
+        class="gap-small micro:gap-normal micro:flex-row micro:justify-start
+            px-main py-main-half not-first:micro:-my-3 not-first:micro:-top-1.5
+            relative flex flex-col items-center justify-center"
+    >
+        <div
+            class="max-micro:rounded-full max-micro:p-4
+                max-micro:bg-(--titleColor)/80"
+        >
+            <MaybeMyIcon
+                :name="icon"
+                class="max-micro:text-white micro:text-[38px] text-[30px]
+                    text-[color-mix(in_srgb,var(--titleColor),var(--color-text)_70%)]
+                    transition-[color]"
+            />
+        </div>
+        <h1 class="text-size-h1 max-micro:text-center">
+            <FancyBold :text="title" :color="color" />
+        </h1>
     </section>
 </template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.contentTitle {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: 0 var(--_pMainX);
-
-    @include bp.below('mobile') {
-        padding: var(--_pMainY) var(--_pMainX);
-    }
-
-    [my-icon] {
-        flex-shrink: 0;
-        font-size: 1.65em;
-        color: var(--textMuted);
-        position: relative;
-        top: 1px;
-    }
-
-    .hasHint {
-        cursor: help;
-    }
-
-    h1 {
-        font-size: 1.925em;
-    }
-
-    @include bp.below('mobile') {
-        padding-top: var(--gap);
-        flex-direction: column;
-
-        [my-icon] {
-            padding: 16px;
-            background: color-mix(
-                in srgb,
-                var(--textDisabled),
-                transparent 50%
-            );
-            color: var(--text);
-            border-radius: 50%;
-        }
-
-        h1 {
-            text-align: center;
-            font-size: 1.8em;
-        }
-    }
-}
-</style>

package/app/components/main/MainTopicPartPage.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+const { mainContent } = defineProps<{
+    mainContent: MainContentTopicPart;
+}>();
+
+const { showContentTopicAside } = useAsideMinor();
+
+async function proseMounted() {
+    await nextTick();
+    showContentTopicAside({
+        part: mainContent.part,
+        parts: mainContent.parts,
+        shortContentId: mainContent.shortId,
+        contentRelativePath: mainContent.contentRelativePath,
+        toc: mainContent.toc,
+        contributions: mainContent.contributions,
+    });
+}
+
+const phrase = await usePhrases(
+    'summary',
+    'practice',
+    'article_seo_description',
+    'summary_seo_description',
+    'practice_seo_description',
+);
+
+await useContentSeo({
+    title: mainContent.title,
+    bookTitle: mainContent.bookTitle,
+    contentTypeSuffix:
+        mainContent.part !== 'article' ? phrase[mainContent.part] : undefined,
+    contentTypePath: {
+        type: 'topic',
+        topicPart: mainContent.part,
+        contentId: mainContent.shortId,
+    },
+    description:
+        mainContent.part === 'article'
+            ? mainContent.description ||
+              phrase.article_seo_description(mainContent.title)
+            : mainContent.part === 'summary'
+              ? phrase.summary_seo_description(mainContent.title)
+              : mainContent.part === 'practice'
+                ? phrase.practice_seo_description(mainContent.title)
+                : undefined,
+    seo: mainContent.seo,
+    snippets: mainContent.snippets,
+});
+</script>
+
+<template>
+    <MainGlow />
+    <MainDecoration :decoration="mainContent.decoration" />
+    <MainSectionPreamble>
+        <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
+        <MainTitle :icon="ICONS[mainContent.part]" :title="mainContent.title" />
+        <MainFlags :flags="mainContent.flags" />
+        <MainDescription :description="mainContent.description" />
+        <MainQuickLinks mode="single" :elementSnippets="mainContent.snippets" />
+        <MainConnections :connections="mainContent.connections" />
+        <MainContentStats mode="single" :stats="mainContent.stats" />
+        <div class="h-main-half"></div>
+        <MainQuoteLoader />
+        <div class="h-main-half"></div>
+    </MainSectionPreamble>
+    <MainSection>
+        <template #header>
+            <MainTopicPartSwitch
+                :shortContentId="mainContent.shortId"
+                :parts="mainContent.parts"
+                :activePart="mainContent.part"
+            />
+        </template>
+        <template #default>
+            <Prose
+                :element="mainContent.proseElement"
+                :storage="mainContent.storage"
+                :urlPath="'/' + mainContent.fullId"
+                :useHashUrl="true"
+                @vue:mounted="proseMounted"
+            />
+        </template>
+    </MainSection>
+    <MainSection>
+        <AdsBannerBottom v-if="adsBottomAllowed()" />
+    </MainSection>
+</template>

package/app/components/main/MainTopicPartSwitch.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { type TopicPart } from '@erudit-js/core/content/topic';
+
+interface TopicPartSwitchData {
+    state: 'active' | 'inactive' | 'missing';
+    label: string;
+    link: string;
+}
+
+const { shortContentId, parts, activePart } = defineProps<{
+    shortContentId: string;
+    parts: TopicPart[];
+    activePart: TopicPart;
+}>();
+
+const phrase = await usePhrases('article', 'summary', 'practice');
+
+const getPartData = (part: TopicPart): TopicPartSwitchData => ({
+    state:
+        activePart === part
+            ? 'active'
+            : parts.includes(part)
+              ? 'inactive'
+              : 'missing',
+    label: phrase[part],
+    link: PAGES.topic(part, shortContentId),
+});
+
+const data: Record<TopicPart, TopicPartSwitchData> = {
+    article: getPartData('article'),
+    summary: getPartData('summary'),
+    practice: getPartData('practice'),
+};
+</script>
+
+<template>
+    <div
+        :style="{ '--switchHeight': '45px' }"
+        class="gap-normal flex justify-center"
+    >
+        <EruditLink
+            v-for="(partData, partKey) of data"
+            :to="partData.state !== 'missing' ? partData.link : undefined"
+            :class="[
+                `micro:[--switchHeight:50px] micro:gap-small px-small
+                micro:px-normal border-border relative -bottom-[2px] flex
+                h-(--switchHeight) items-center gap-1 rounded rounded-b-none
+                border-2 transition-[border,color,background]`,
+                partData.state === 'missing' &&
+                    'text-text-disabled/75 border-b-border cursor-not-allowed',
+                partData.state === 'active' &&
+                    'text-brand bg-bg-main border-b-transparent',
+                partData.state === 'inactive' &&
+                    `text-text-muted hocus:text-text bg-bg-aside
+                    border-b-[color-mix(in_srgb,var(--color-border),var(--color-bg-main)_65%)]`,
+            ]"
+        >
+            <MyIcon
+                :name="ICONS[partKey]"
+                class="max-micro:mx-1 text-[1.2em]"
+            />
+            <span
+                :class="[
+                    'micro:inline font-semibold',
+                    partData.state !== 'active' && 'max-micro:hidden',
+                ]"
+                >{{ partData.label }}</span
+            >
+        </EruditLink>
+    </div>
+</template>

package/app/components/main/connections/Deps.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import ScrollPane from './ScrollPane.vue';
+
+defineProps<{ deps: ContentDep[] }>();
+</script>
+
+<template>
+    <ScrollPane>
+        <div v-for="dep of deps" class="gap-small flex">
+            <MyIcon
+                :name="ICONS[dep.contentType]"
+                class="relative top-1 shrink-0"
+            />
+            <div class="flex flex-col gap-0.5">
+                <div>
+                    <EruditLink :to="dep.link" class="text-hover-underline">
+                        {{ formatText(dep.title) }}
+                        <MyIcon
+                            name="arrow/outward"
+                            class="text-text-disabled text-main-sm relative
+                                -top-1 inline"
+                        />
+                    </EruditLink>
+                </div>
+                <div
+                    v-if="dep.type === 'hard'"
+                    class="text-text-muted text-main-sm italic"
+                >
+                    {{ formatText(dep.reason) }}
+                </div>
+            </div>
+        </div>
+    </ScrollPane>
+</template>