erudit 3.0.0-dev.22 → 3.0.0-dev.25

package/app/components/aside/minor/news/elements/Mix.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import type { mixSchema, ProseElement } from '@jsprose/core';
+
+import RenderNewsElement from '../RenderNewsElement.vue';
+
+defineProps<{ element: ProseElement<typeof mixSchema> }>();
+</script>
+
+<template>
+    <RenderNewsElement v-for="child of element.children" :element="child" />
+</template>

package/app/components/aside/minor/news/elements/P.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+import type { paragraphSchema } from '@erudit-js/prose/elements/paragraph/core';
+
+import RenderNewsElement from '../RenderNewsElement.vue';
+
+defineProps<{ element: ProseElement<typeof paragraphSchema> }>();
+</script>
+
+<template>
+    <p>
+        <RenderNewsElement v-for="child of element.children" :element="child" />
+    </p>
+</template>

package/app/components/aside/minor/news/elements/Ref.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+import type { refSchema } from '@erudit-js/prose/elements/link/reference/core';
+import type { LinkStorage } from '@erudit-js/prose/elements/link/storage';
+
+const { closePreview, setPreview } = usePreview();
+const { element } = defineProps<{ element: ProseElement<typeof refSchema> }>();
+const linkStorage = (element as any).storageValue as LinkStorage;
+
+const doubleClick = {
+    timeout: undefined as ReturnType<typeof setTimeout> | undefined,
+    startTimeout() {
+        this.timeout = setTimeout(() => {
+            this.reset();
+        }, 400);
+    },
+    reset() {
+        clearTimeout(this.timeout);
+        this.timeout = undefined;
+    },
+};
+
+function linkClick() {
+    if (doubleClick.timeout) {
+        doubleClick.reset();
+        closePreview();
+        const openUrl =
+            linkStorage.type === 'direct'
+                ? linkStorage.resolvedHref
+                : withBaseUrl(linkStorage.resolvedHref.slice(1));
+        window.open(openUrl, '_blank');
+        return false;
+    }
+
+    setPreview(linkStorage.previewRequest);
+    doubleClick.startTimeout();
+    return false;
+}
+</script>
+
+<template>
+    <EruditLink
+        @click.capture.prevent="linkClick"
+        :to="linkStorage.resolvedHref"
+        :style="{
+            '--tGap': '1px',
+            '--xGap': '4px',
+            '--bGap': '4px',
+        }"
+        class="hocus:bg-(--linkColor)/15 relative -mx-[calc(var(--xGap)-3px)]
+            -mt-(--tGap) -mb-(--bGap) rounded-sm bg-transparent px-(--xGap)
+            pt-(--tGap) pb-(--bGap) text-(--linkColor) underline
+            decoration-[color-mix(in_srgb,var(--linkColor)30%,transparent)]
+            decoration-2 underline-offset-2 transition-[color,background]"
+    >
+        {{ formatText(element.data.label) }}
+    </EruditLink>
+</template>

package/app/components/aside/minor/news/elements/Text.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { Text, h } from 'vue';
+import type { ProseElement, textSchema } from '@jsprose/core';
+
+const { element } = defineProps<{ element: ProseElement<typeof textSchema> }>();
+
+const originalText = element.data;
+const leadingSpace = originalText.match(/^(\s*)/)?.[1] ? ' ' : '';
+const trailingSpace = originalText.match(/(\s*)$/)?.[1] ? ' ' : '';
+const formattedText = formatText(originalText);
+const textWithSpaces = leadingSpace + formattedText + trailingSpace;
+
+const TextComponent = h(Text, textWithSpaces);
+</script>
+
+<template>
+    <component :is="TextComponent" />
+</template>

package/app/components/indexPage/IndexPagePersons.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const { personType, persons } = defineProps<{
+    personType: 'contributor' | 'sponsor';
+    title: string;
+    link: string;
+    persons: IndexPagePersons;
+}>();
+
+const changeInterval = 2500;
+
+const personIds = Object.keys(persons);
+const personsNumber = personIds.length;
+const avatarsNumber = Math.min(4, personsNumber);
+const moreNumber = personsNumber - avatarsNumber;
+
+type DisplayedAvatar = {
+    personId: string;
+    url: string | undefined;
+    color: string | undefined;
+};
+
+const displayedAvatars = ref<DisplayedAvatar[]>(
+    Array.from({ length: avatarsNumber }, (_, i) => ({
+        personId: `dummy-${i}`,
+        url: undefined,
+        color: undefined,
+    })),
+);
+
+let intervalId: number | undefined;
+
+function idToAvatarUrl(id: string, extension: string | 0) {
+    if (extension === 0) {
+        return personType === 'contributor' ? 'user' : 'diamond';
+    }
+
+    return withBaseUrl(`/file/${personType}s/${id}/avatar.${extension}`);
+}
+
+function getRandomFrom<T>(arr: T[]): T {
+    return arr[Math.floor(Math.random() * arr.length)]!;
+}
+
+onMounted(() => {
+    const shuffled = [...personIds].sort(() => Math.random() - 0.5);
+    const initialIds = shuffled.slice(0, avatarsNumber);
+
+    displayedAvatars.value = initialIds.map((id) => ({
+        personId: id,
+        url: idToAvatarUrl(id, persons[id]!),
+        color: stringColor(id),
+    }));
+
+    if (personsNumber <= avatarsNumber) return;
+
+    intervalId = window.setInterval(() => {
+        const usedIds = displayedAvatars.value.map((a) => a.personId);
+
+        const hiddenIds = personIds.filter((id) => !usedIds.includes(id));
+
+        if (!hiddenIds.length) return;
+
+        const slotIndex = Math.floor(
+            Math.random() * displayedAvatars.value.length,
+        );
+
+        const newPersonId = getRandomFrom(hiddenIds);
+
+        displayedAvatars.value[slotIndex] = {
+            personId: newPersonId,
+            url: idToAvatarUrl(newPersonId, persons[newPersonId]!),
+            color: stringColor(newPersonId),
+        };
+    }, changeInterval);
+});
+
+onBeforeUnmount(() => {
+    if (intervalId) {
+        clearInterval(intervalId);
+    }
+});
+</script>
+
+<template>
+    <EruditLink
+        :to="link"
+        class="group gap-normal flex flex-col items-center [--avatarSize:50px]"
+    >
+        <div
+            class="group-hocus:text-brand text-text-muted text-main-lg
+                font-semibold transition-[color]"
+        >
+            {{ title }}
+        </div>
+        <div class="flex gap-1.5">
+            <SmartMedia
+                v-for="data in displayedAvatars"
+                :key="data.personId"
+                :url="data.url"
+                :style="{ '--mediaColor': data.color }"
+                class="size-(--avatarSize) rounded-full"
+            />
+            <div
+                v-if="moreNumber"
+                class="group-hocus:text-brand group-hocus:border-brand
+                    border-text-dimmed text-text-muted grid size-(--avatarSize)
+                    place-items-center rounded-full border-3 border-dashed
+                    text-[17px] leading-none font-semibold
+                    transition-[color,border]"
+            >
+                {{ '+' + moreNumber }}
+            </div>
+        </div>
+    </EruditLink>
+</template>

package/app/components/main/MainAction.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+
+defineProps<{ icon: MaybeMyIconName; label: string; link: string }>();
+</script>
+
+<template>
+    <section class="px-main py-main-half clear-both grid place-items-center">
+        <EruditLink
+            :to="link"
+            class="bg-brand gap-small micro:gap-normal px-normal text-main-lg
+                shadow-brand/30 micro:h-[55px] hocus:bg-brand/80 flex h-[50px]
+                items-center rounded font-bold text-white shadow-lg
+                transition-[background]"
+        >
+            <MaybeMyIcon :name="icon" class="text-[1.1em]" />
+            <span>{{ formatText(label) }}</span>
+        </EruditLink>
+    </section>
+</template>

package/app/components/main/MainBreadcrumbs.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+defineProps<{ breadcrumbs: Breadcrumbs }>();
+</script>
+
+<template>
+    <section
+        v-if="breadcrumbs.length > 0"
+        class="gap-small max-micro:justify-center px-main py-main-half flex
+            flex-wrap"
+    >
+        <EruditLink
+            v-for="(breadcrumb, i) of breadcrumbs"
+            :to="breadcrumb.link"
+            class="gap-small text-text-dimmed hocus:text-text-muted flex
+                items-center transition-[color]"
+        >
+            <MaybeMyIcon :name="breadcrumb.icon" class="text-[1.2em]" />
+            <span>{{ formatText(breadcrumb.title) }}</span>
+            <MyIcon
+                name="chevron-right"
+                :class="{
+                    'relative -left-[3px]': true,
+                    'rotate-90': i === breadcrumbs.length - 1,
+                }"
+            />
+        </EruditLink>
+    </section>
+</template>

package/app/components/main/MainContentChild.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+const { child } = defineProps<{ child: MainContentChildrenItem }>();
+
+const hasExtra = child.stats || child.quickLinks;
+</script>
+
+<template>
+    <div
+        class="border-border hocus:ring-brand/25 hocus:border-brand group
+            dark:bg-bg-aside rounded border bg-neutral-100 ring-2
+            ring-transparent transition-[border,box-shadow,background]"
+    >
+        <EruditLink :to="child.link" class="p-normal gap-small flex flex-col">
+            <div class="gap-small micro:gap-normal flex items-center">
+                <MyIcon
+                    :name="ICONS[child.type]"
+                    class="text-text-muted group-hocus:text-brand shrink-0
+                        text-[1.2em] transition-[color]"
+                />
+                <h2
+                    class="group-hocus:text-brand gap-small micro:text-main-lg
+                        flex items-center font-bold transition-[color]"
+                >
+                    {{ formatText(child.title) }}
+                </h2>
+            </div>
+
+            <div v-if="child.description" class="text-text-muted">
+                {{ formatText(child.description) }}
+            </div>
+        </EruditLink>
+        <div
+            v-if="hasExtra"
+            class="border-t-border p-normal gap-normal flex flex-col border-t
+                transition-[border]"
+        >
+            <div v-if="child.quickLinks" class="relative top-[1px]">
+                <MainQuickLinks
+                    :elementSnippets="child.quickLinks"
+                    mode="children"
+                />
+            </div>
+            <div v-if="child.stats">
+                <MainContentStats :stats="child.stats" mode="children" />
+            </div>
+        </div>
+    </div>
+</template>

package/app/components/main/MainContentChildren.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineProps<{ children: MainContentChildrenItem[] }>();
+</script>
+
+<template>
+    <MainSection>
+        <div
+            class="gap-main p-main flex flex-col
+                py-[calc(var(--spacing-main)*1.5)]"
+        >
+            <MainContentChild v-for="child of children" :child />
+        </div>
+    </MainSection>
+</template>

package/app/components/main/MainDecoration.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+defineProps<{ decoration?: string }>();
+</script>
+
+<template>
+    <section
+        v-if="decoration"
+        class="pl-small pb-small pt-main pr-main float-right max-[700px]:hidden"
+    >
+        <img
+            :src="fileUrl(decoration!)"
+            class="block aspect-square max-h-[125px] w-full max-w-[125px]"
+        />
+    </section>
+</template>

package/app/components/main/MainDescription.vue

@@ -1,24 +1,13 @@
 <script lang="ts" setup>
-defineProps<{ description: string; html?: boolean }>();
-const pretty = useFormatText();
+defineProps<{ description: string | undefined }>();
 </script>
 
 <template>
     <section
-        v-if="html"
-        :class="$style.contentDescription"
-        v-html="description"
-    ></section>
-    <section v-else :class="$style.contentDescription">
-        {{ pretty(description) }}
+        v-if="description"
+        class="text-main-lg max-micro:text-center px-main py-main-half
+            font-semibold transition-[color]"
+    >
+        {{ formatText(description) }}
     </section>
 </template>
-
-<style lang="scss" module>
-.contentDescription {
-    padding: var(--_pMainY) var(--_pMainX);
-    font-weight: 500;
-    font-size: 1.1em;
-    color: var(--text);
-}
-</style>

package/app/components/main/MainFlag.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import { autoUpdate, shift, useFloating } from '@floating-ui/vue';
+import type { MyIconName } from '#my-icons';
+import type { ContentFlag } from '@erudit-js/core/content/flags';
+
+interface FlagData {
+    icon: MyIconName;
+    color: string;
+    title: string;
+    description: string;
+}
+
+const { flag } = defineProps<{ flag: ContentFlag }>();
+
+const phrase = await usePhrases(
+    'flag_advanced',
+    'flag_advanced_description',
+    'flag_dev',
+    'flag_dev_description',
+    'flag_secondary',
+    'flag_secondary_description',
+);
+
+const flagsData: Record<ContentFlag, FlagData> = {
+    dev: {
+        icon: 'construction',
+        color: 'light-dark(var(--color-yellow-700),var(--color-yellow-500))',
+        title: phrase.flag_dev,
+        description: phrase.flag_dev_description,
+    },
+    advanced: {
+        icon: 'asterisk',
+        color: 'light-dark(#72189a,#ff94ff)',
+        title: phrase.flag_advanced,
+        description: phrase.flag_advanced_description,
+    },
+    secondary: {
+        icon: 'puzzle',
+        color: 'light-dark(#558a1a,#8bb759)',
+        title: phrase.flag_secondary,
+        description: phrase.flag_secondary_description,
+    },
+};
+
+const flagData = flagsData[flag];
+
+const referenceElement = useTemplateRef('reference');
+const popupElement = useTemplateRef('popup');
+const popupVisible = ref(false);
+const showTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+
+const { floatingStyles } = useFloating(referenceElement, popupElement, {
+    placement: 'bottom',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+        shift({
+            boundary:
+                document?.querySelector('[data-erudit-main]') || undefined,
+        }),
+    ],
+});
+
+const showPopup = () => {
+    showTimeout.value = setTimeout(() => {
+        popupVisible.value = true;
+    }, 400);
+};
+
+const hidePopup = () => {
+    if (showTimeout.value) {
+        clearTimeout(showTimeout.value);
+        showTimeout.value = null;
+    }
+    popupVisible.value = false;
+};
+
+onUnmounted(() => {
+    if (showTimeout.value) {
+        clearTimeout(showTimeout.value);
+    }
+});
+</script>
+
+<template>
+    <div
+        ref="reference"
+        :style="{ '--flagColor': flagData.color }"
+        @mouseenter="showPopup"
+        @mouseleave="hidePopup"
+    >
+        <div
+            @touchstart="popupVisible ? hidePopup() : showPopup()"
+            class="px-small text-main-sm flex cursor-help items-center gap-1
+                rounded border border-(--flagColor)/30 bg-(--flagColor)/15 py-1
+                text-(--flagColor)"
+        >
+            <MyIcon :name="flagData.icon" class="text-[1.3em]" />
+            <span>{{ formatText(flagData.title) }}</span>
+        </div>
+        <TransitionFade>
+            <div
+                v-if="popupVisible"
+                :style="floatingStyles"
+                ref="popup"
+                class="z-10 max-w-[320px] p-2"
+            >
+                <div
+                    class="bg-bg-main rounded border-2 border-(--flagColor)/30
+                        shadow-[0_0_14px_var(--flagColor)]/40
+                        dark:shadow-[0_0_14px_var(--flagColor)]/20"
+                >
+                    <div
+                        class="p-small bg-linear-60 from-(--flagColor)/5
+                            to-(--flagColor)/20 text-(--flagColor)"
+                    >
+                        <div class="p-small float-right pt-0 pr-0">
+                            <MyIcon
+                                :name="flagData.icon"
+                                class="text-[40px] opacity-30"
+                            />
+                        </div>
+                        <div class="pb-small text-main-sm font-semibold">
+                            {{ formatText(flagData.title) }}
+                        </div>
+                        <div class="text-main-xs">
+                            {{ formatText(flagData.description) }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </TransitionFade>
+    </div>
+</template>

package/app/components/main/MainFlags.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { ContentFlag, ContentFlags } from '@erudit-js/core/content/flags';
+
+const { flags } = defineProps<{ flags?: ContentFlags }>();
+
+const flagKeys = (flags ? Object.keys(flags).sort() : []) as ContentFlag[];
+</script>
+
+<template>
+    <section
+        v-if="flags"
+        class="gap-small micro:gap-normal micro:justify-start px-main
+            py-main-half flex flex-wrap justify-center"
+    >
+        <MainFlag v-for="flag of flagKeys" :flag />
+    </section>
+</template>

package/app/components/main/MainGlow.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+const { color = 'var(--color-brand)' } = defineProps<{ color?: string }>();
+</script>
+
+<template>
+    <section
+        :style="{ '--glowColor': color }"
+        class="pointer-events-none absolute top-0 left-0 h-[300px] w-full
+            touch-none overflow-hidden bg-linear-to-b from-(--glowColor)/16
+            to-transparent dark:from-(--glowColor)/8"
+    ></section>
+</template>

package/app/components/main/MainQuickLink.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { autoUpdate, shift, useFloating } from '@floating-ui/vue';
+
+const { quickLink } = defineProps<{ quickLink: ElementSnippet }>();
+
+const referenceElement = useTemplateRef('reference');
+const popupElement = useTemplateRef('popup');
+const popupVisible = ref(false);
+const showTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+
+const { floatingStyles } = useFloating(referenceElement, popupElement, {
+    placement: 'bottom',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+        shift({
+            boundary:
+                document?.querySelector('[data-erudit-main]') || undefined,
+        }),
+    ],
+});
+
+const showPopup = () => {
+    showTimeout.value = setTimeout(() => {
+        popupVisible.value = true;
+    }, 400);
+};
+
+const hidePopup = () => {
+    if (showTimeout.value) {
+        clearTimeout(showTimeout.value);
+        showTimeout.value = null;
+    }
+    popupVisible.value = false;
+};
+
+onUnmounted(() => {
+    if (showTimeout.value) {
+        clearTimeout(showTimeout.value);
+    }
+});
+
+const elementIcon = await getElementIcon(quickLink.schemaName);
+</script>
+
+<template>
+    <div ref="reference" @mouseenter="showPopup" @mouseleave="hidePopup">
+        <EruditLink
+            @touchstart="popupVisible ? hidePopup() : showPopup()"
+            :to="quickLink.link"
+            class="gap-small border-border px-small text-text-muted text-main-sm
+                hocus:text-brand hocus:border-brand hocus:ring-brand/25 flex
+                items-center rounded border bg-(--quickBg) py-1 ring-2
+                ring-transparent
+                transition-[background,color,border,box-shadow]"
+        >
+            <MaybeMyIcon :name="elementIcon" class="-mr-0.5 text-[1.2em]" />
+            <span>{{ formatText(quickLink.title) }}</span>
+        </EruditLink>
+        <TransitionFade>
+            <div
+                v-if="quickLink.description && popupVisible"
+                :style="floatingStyles"
+                ref="popup"
+                class="z-10 max-w-[300px] p-2"
+            >
+                <div
+                    class="px-small text-main-xs rounded bg-neutral-900 py-1
+                        text-white shadow-lg/30 dark:bg-neutral-400
+                        dark:text-black dark:shadow-neutral-500"
+                >
+                    {{ formatText(quickLink.description) }}
+                </div>
+            </div>
+        </TransitionFade>
+    </div>
+</template>

package/app/components/main/MainQuickLinks.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+const { elementSnippets } = defineProps<{
+    mode: 'single' | 'children';
+    elementSnippets?: ElementSnippet[];
+}>();
+
+const quickLinks = (() => {
+    if (!elementSnippets) {
+        return;
+    }
+
+    const filtered = elementSnippets.filter(
+        (snippet) => snippet.quick === true,
+    );
+
+    return filtered.length > 0 ? filtered : undefined;
+})();
+
+const phrase = await usePhrases('key_elements');
+</script>
+
+<template>
+    <template v-if="elementSnippets">
+        <section v-if="mode === 'single'" class="px-main py-main-half">
+            <MainSubTitle :title="phrase.key_elements + ':'" />
+            <div
+                :style="{ '--quickBg': 'var(--color-bg-aside)' }"
+                class="gap-small micro:gap-normal micro:justify-start flex
+                    flex-wrap justify-center"
+            >
+                <MainQuickLink v-for="quickLink of quickLinks" :quickLink />
+            </div>
+        </section>
+        <div
+            v-else
+            :style="{ '--quickBg': 'var(--color-bg-main)' }"
+            class="gap-small text-main-sm flex flex-wrap"
+        >
+            <MainQuickLink v-for="quickLink of quickLinks" :quickLink />
+        </div>
+    </template>
+</template>