erudit 3.0.0-dev.8 → 4.0.0-dev.1

package/app/components/aside/minor/content/Toc.vue

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { ResolvedTocItem } from '@erudit-js/prose';
+
+import TocItem from './TocItem.vue';
+
+const props = defineProps<{ toc?: ResolvedTocItem[] }>();
+
+const phrase = await usePhrases('no_toc');
+
+/**
+ * Active heading IDs (provided to children)
+ */
+const activeHeadingIds = shallowRef<Set<string>>(new Set());
+provide('activeHeadingIds', activeHeadingIds);
+
+/**
+ * Collect all heading items from TOC tree (DFS)
+ */
+function collectHeadings(items: ResolvedTocItem[]): ResolvedTocItem[] {
+    const result: ResolvedTocItem[] = [];
+
+    const walk = (item: ResolvedTocItem) => {
+        if (item.type === 'heading') {
+            result.push(item);
+            item.children.forEach(walk);
+        }
+    };
+
+    items.forEach(walk);
+    return result;
+}
+
+/**
+ * Find the last heading above the viewport (initial load fix)
+ */
+function findLastHeadingAboveViewport(
+    elements: { id: string; el: HTMLElement }[],
+): string | null {
+    const scrollY = window.scrollY;
+    let last: string | null = null;
+
+    for (const { id, el } of elements) {
+        if (el.offsetTop < scrollY) {
+            last = id;
+        } else {
+            break;
+        }
+    }
+
+    return last;
+}
+
+onMounted(() => {
+    if (!props.toc) return;
+
+    /**
+     * 1️⃣ Collect headings
+     */
+    const headings = collectHeadings(props.toc);
+
+    /**
+     * 2️⃣ Resolve DOM elements (once)
+     */
+    const elements = headings
+        .map((h) => ({
+            id: h.elementId,
+            el: document.getElementById(h.elementId),
+        }))
+        .filter((h): h is { id: string; el: HTMLElement } => !!h.el);
+
+    if (elements.length === 0) return;
+
+    /**
+     * 3️⃣ Handles page load / refresh in middle of document
+     */
+    const visibleIds = new Set<string>();
+    let lastAboveViewportId = findLastHeadingAboveViewport(elements);
+
+    if (lastAboveViewportId) {
+        activeHeadingIds.value = new Set([lastAboveViewportId]);
+    }
+
+    /**
+     * 4️⃣ IntersectionObserver
+     */
+    const observer = new IntersectionObserver(
+        (entries) => {
+            let changed = false;
+
+            for (const entry of entries) {
+                const id = entry.target.id;
+
+                if (entry.isIntersecting) {
+                    if (!visibleIds.has(id)) {
+                        visibleIds.add(id);
+                        changed = true;
+                    }
+                } else {
+                    if (visibleIds.delete(id)) {
+                        changed = true;
+                    }
+
+                    // Track last heading above viewport
+                    if (entry.boundingClientRect.top < 0) {
+                        lastAboveViewportId = id;
+                    } else {
+                        // If heading is below viewport and it was the last one above, clear it
+                        if (lastAboveViewportId === id) {
+                            lastAboveViewportId = null;
+                        }
+                    }
+                }
+            }
+
+            if (!changed) return;
+
+            const next = new Set<string>();
+
+            if (visibleIds.size > 0) {
+                visibleIds.forEach((id) => next.add(id));
+            } else if (lastAboveViewportId) {
+                // Verify the heading is still above viewport before using it
+                const lastEl = document.getElementById(lastAboveViewportId);
+                if (lastEl && lastEl.getBoundingClientRect().top < 0) {
+                    next.add(lastAboveViewportId);
+                }
+            }
+
+            activeHeadingIds.value = next;
+        },
+        {
+            root: null,
+        },
+    );
+
+    /**
+     * 5️⃣ Observe all headings
+     */
+    elements.forEach(({ el }) => observer.observe(el));
+
+    /**
+     * 6️⃣ Cleanup
+     */
+    onUnmounted(() => {
+        observer.disconnect();
+    });
+});
+</script>
+
+<template>
+    <div v-if="toc">
+        <TreeContainer>
+            <TocItem
+                v-for="tocItem of toc"
+                :key="tocItem.elementId"
+                :item="tocItem"
+                :level="0"
+            />
+        </TreeContainer>
+    </div>
+
+    <AsidePlainMessage v-else :text="phrase.no_toc" />
+</template>

package/app/components/aside/minor/content/TocItem.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { ResolvedTocItem } from '@erudit-js/prose';
+import { headingSchema } from '@erudit-js/prose/elements/heading/core';
+
+const { item, level } = defineProps<{ item: ResolvedTocItem; level: number }>();
+
+const elementIcon = await (async () => {
+    let schemaName =
+        item.type === 'heading' ? headingSchema.name : item.schemaName;
+
+    return await getElementIcon(schemaName);
+})();
+
+const active = ref(false);
+
+// Inject active heading IDs from parent
+const activeHeadingIds = inject<Ref<Set<string>>>(
+    'activeHeadingIds',
+    ref(new Set()),
+);
+
+onMounted(() => {
+    if (item.type === 'heading') {
+        // For headings, use the provided active IDs
+        watch(
+            activeHeadingIds,
+            (ids) => {
+                active.value = ids.has(item.elementId);
+            },
+            { immediate: true },
+        );
+    } else if (item.elementId) {
+        // For non-heading elements, use IntersectionObserver
+        const targetElement = document.getElementById(item.elementId);
+
+        if (targetElement) {
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    active.value = entry.isIntersecting;
+                });
+            });
+
+            observer.observe(targetElement);
+
+            onUnmounted(() => {
+                observer.disconnect();
+            });
+        }
+    }
+});
+</script>
+
+<template>
+    <TreeItem
+        :level
+        :icon="elementIcon"
+        :main="formatText(item.title)"
+        :state="active ? 'active' : undefined"
+        :to="'#' + item.elementId"
+    />
+    <div v-if="item.type === 'heading'" class="relative overflow-hidden">
+        <div
+            :style="{ '--level': level ? +level : 0 }"
+            :class="[
+                `absolute top-0
+                left-[calc(var(--spacing-normal)*(var(--level)+1)+8px)] h-full
+                border-l opacity-40 transition-[border]`,
+                [active ? 'border-brand' : 'border-text-dimmed'],
+            ]"
+        ></div>
+        <TocItem
+            v-for="child of item.children"
+            :item="child"
+            :level="item.level"
+        />
+    </div>
+</template>

package/app/components/aside/minor/content/TopicPartButton.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { TopicPart } from '@erudit-js/core/content/topic';
+
+defineProps<{ part: TopicPart; active?: boolean; link?: string }>();
+
+const phrase = await usePhrases('article', 'summary', 'practice');
+</script>
+
+<template>
+    <EruditLink
+        :to="link"
+        :class="[
+            `gap-small group py-normal relative flex items-center px-2
+            transition-[color]`,
+            {
+                'text-text-disabled cursor-not-allowed': !link,
+                'text-text-muted hocus:text-text': !active && link,
+                'text-text': active,
+            },
+        ]"
+    >
+        <MyIcon :name="ICONS[part]" class="text-[22px]" />
+        <span v-if="active" class="font-semibold">{{ phrase[part] }}</span>
+        <div
+            :class="[
+                `absolute -bottom-[2px] left-0 h-[3px] w-full rounded-[20px]
+                transition-[background]`,
+                {
+                    'group-hocus:bg-border bg-transparent': !active && link,
+                    'bg-text-muted': active,
+                },
+            ]"
+        ></div>
+    </EruditLink>
+</template>

package/app/components/aside/minor/contributor/AsideMinorContributor.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import ItemBook from './ItemBook.vue';
+import ItemContent from './ItemContent.vue';
+
+const { asideMinorState } = useAsideMinor();
+const contributions = (asideMinorState.value as AsideMinorContributor)
+    .contributions;
+
+const phrase = await usePhrases('contribution', 'no_contribution');
+</script>
+
+<template>
+    <AsideMinorPane>
+        <div class="flex h-full w-full flex-col">
+            <AsideMinorPlainHeader
+                icon="draw"
+                :title="phrase.contribution"
+                :count="contributions?.length"
+            />
+            <ScrollHolder v-if="contributions" class="flex-1">
+                <TreeContainer>
+                    <template v-for="item of contributions">
+                        <ItemContent
+                            v-if="item.type === 'topic' || item.type === 'page'"
+                            :content="item"
+                        />
+                        <ItemBook
+                            v-else-if="item.type === 'book'"
+                            :book="item"
+                        />
+                    </template>
+                </TreeContainer>
+            </ScrollHolder>
+            <section v-else>
+                <AsidePlainMessage :text="phrase.no_contribution" />
+            </section>
+        </div>
+    </AsideMinorPane>
+</template>

package/app/components/aside/minor/contributor/ItemBook.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { ContributorContributionBook } from '@erudit-js/core/content/contributions';
+import ItemContent from './ItemContent.vue';
+
+defineProps<{ book: ContributorContributionBook }>();
+
+const opened = ref(false);
+</script>
+
+<template>
+    <TreeItem
+        :icon="ICONS['book']"
+        :main="formatText(book.title)"
+        :state="opened ? 'accent' : undefined"
+        @click="opened = !opened"
+    >
+        <template #secondary>
+            <MyIcon
+                name="plus"
+                :class="[
+                    'transition-[rotate]',
+                    opened ? 'rotate-45' : 'rotate-0',
+                ]"
+            />
+        </template>
+    </TreeItem>
+    <div
+        :class="[
+            'overflow-hidden transition-[height]',
+            opened ? 'h-auto' : 'h-0',
+        ]"
+    >
+        <ItemContent
+            v-for="content in book.items"
+            :content="content"
+            :insideBook="true"
+        />
+    </div>
+</template>

package/app/components/aside/minor/contributor/ItemContent.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { ContributorContributionContent } from '@erudit-js/core/content/contributions';
+
+defineProps<{
+    content: ContributorContributionContent;
+    insideBook?: boolean;
+}>();
+</script>
+
+<template>
+    <TreeItem
+        :icon="ICONS[content.type]"
+        :to="content.link"
+        :main="formatText(content.title)"
+        :level="insideBook ? 1 : 0"
+    />
+</template>

package/app/components/aside/minor/news/AsideMinorNews.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import NewsItem from './NewsItem.vue';
+
+interface NewsCache {
+    total?: number;
+    items: NewsItem[];
+    newIndices: number[];
+    nextIndex?: number;
+}
+
+const STORAGE_KEY = 'last-viewed-news-date';
+const newsTotal = ref(0);
+const newsItems = ref<NewsItem[]>([]);
+const newNewsItems = ref<Set<number>>(new Set());
+const nextBatchIndex = ref<number | undefined>();
+const newsLoading = ref(false);
+
+const nuxtApp = useNuxtApp();
+
+function getCache(): NewsCache | undefined {
+    return nuxtApp.payload.data['news'] as NewsCache | undefined;
+}
+
+function updateCache() {
+    nuxtApp.payload.data['news'] = {
+        total: newsTotal.value || undefined,
+        items: newsItems.value,
+        newIndices: Array.from(newNewsItems.value),
+        nextIndex: nextBatchIndex.value,
+    } as NewsCache;
+}
+
+function getLastViewedDate(): string | null {
+    return localStorage.getItem(STORAGE_KEY);
+}
+
+function updateLastViewedDate(date: string) {
+    localStorage.setItem(STORAGE_KEY, date);
+}
+
+async function fetchNews(index: number) {
+    newsLoading.value = true;
+
+    try {
+        const newsBatch = await $fetch<NewsBatch>(`/api/news/batch/${index}`, {
+            responseType: 'json',
+        });
+
+        if (index === 0) {
+            newsTotal.value = newsBatch.total!;
+            handleNewNewsItems(newsBatch.items);
+        }
+
+        newsItems.value = newsItems.value.concat(newsBatch.items);
+        nextBatchIndex.value = newsBatch.nextIndex;
+
+        updateCache();
+    } catch (error) {
+        console.error('Error fetching news:', error);
+    } finally {
+        newsLoading.value = false;
+    }
+}
+
+function handleNewNewsItems(items: NewsItem[]) {
+    if (items.length === 0) return;
+
+    const lastViewedDate = getLastViewedDate();
+    const latestItemDate = items[0]!.date;
+
+    if (lastViewedDate) {
+        const newItems = items
+            .map((item, idx) => (item.date > lastViewedDate ? idx : -1))
+            .filter((idx) => idx !== -1);
+
+        // Only mark items as new if some (but not all) are new
+        if (newItems.length > 0 && newItems.length < items.length) {
+            newNewsItems.value = new Set(newItems);
+        }
+    }
+
+    updateLastViewedDate(latestItemDate);
+}
+
+const cache = getCache();
+if (cache) {
+    newsTotal.value = cache.total || 0;
+    newsItems.value = cache.items;
+    newNewsItems.value = new Set(cache.newIndices);
+    nextBatchIndex.value = cache.nextIndex;
+} else {
+    await fetchNews(0);
+}
+
+const phrase = await usePhrases('news', 'no_news', 'show_more');
+</script>
+
+<template>
+    <AsideMinorPane>
+        <div class="flex h-full w-full flex-col">
+            <AsideMinorPlainHeader
+                icon="bell"
+                :title="phrase!.news"
+                :count="newsTotal === 0 ? undefined : newsTotal"
+            />
+            <section v-if="newsItems.length === 0">
+                <AsidePlainMessage :text="phrase.no_news" />
+            </section>
+            <ScrollHolder class="flex-1">
+                <NewsItem
+                    v-for="(item, index) in newsItems"
+                    :item
+                    :isNew="newNewsItems.has(index)"
+                />
+                <TransitionFade>
+                    <button
+                        v-if="nextBatchIndex !== undefined"
+                        @click="fetchNews(nextBatchIndex)"
+                        :disabled="newsLoading"
+                        class="my-big px-normal py-small bg-bg-accent
+                            hocus:border-text-disabled gap-normal m-auto flex
+                            w-auto cursor-pointer items-center rounded border-2
+                            border-transparent text-sm
+                            transition-[border,background,color]"
+                    >
+                        <MyRuntimeIcon v-if="newsLoading" :svg="loadingSvg" />
+                        <span>{{ phrase.show_more }}</span>
+                    </button>
+                </TransitionFade>
+            </ScrollHolder>
+        </div>
+    </AsideMinorPane>
+</template>

package/app/components/aside/minor/news/NewsItem.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { walkElements } from '@jsprose/core';
+
+import RenderNewsElement from './RenderNewsElement.vue';
+
+const { item, isNew } = defineProps<{
+    item: NewsItem;
+    isNew?: boolean;
+}>();
+
+const itemDate = new Date(item.date);
+const now = new Date();
+
+const isWithinThreeMonths = (() => {
+    const threeMonthsAgo = new Date(now);
+    threeMonthsAgo.setMonth(now.getMonth() - 3);
+    return itemDate >= threeMonthsAgo && itemDate <= now;
+})();
+
+const dateOptions: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+};
+
+const formattedTitle = itemDate.toLocaleDateString(undefined, dateOptions);
+
+// Prepopulate storage values in order not to fuck with provide/inject shit
+await walkElements(item.content.proseElement, async (element) => {
+    if (element.storageKey) {
+        const storageKey = element.storageKey;
+        if (item.content.storage[storageKey] !== undefined) {
+            (element as any).storageValue = item.content.storage[storageKey];
+        }
+    }
+});
+</script>
+
+<template>
+    <div class="p-normal border-border border-b text-sm transition-[border]">
+        <div
+            class="mb-small gap-small flex items-center transition-[color]"
+            :class="
+                isNew
+                    ? 'font-semibold text-orange-700 dark:text-orange-300'
+                    : 'text-text-muted'
+            "
+        >
+            <MyIcon v-if="isNew" name="flame" class="text-[1.2em]" />
+            <NuxtTime
+                :datetime="itemDate"
+                v-bind="dateOptions"
+                :relative="isWithinThreeMonths"
+                :title="formattedTitle"
+                class="cursor-help"
+            />
+        </div>
+        <div
+            :style="{
+                '--linkColor': isNew
+                    ? 'light-dark(var(--color-orange-700),var(--color-orange-300))'
+                    : 'var(--color-brand)',
+            }"
+            class="gap-small flex flex-col text-[0.95em]"
+        >
+            <RenderNewsElement :element="item.content.proseElement" />
+        </div>
+    </div>
+</template>

package/app/components/aside/minor/news/RenderNewsElement.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import {
+    inlinersSchema,
+    mixSchema,
+    textSchema,
+    type AnySchema,
+    type ProseElement,
+} from '@jsprose/core';
+import { paragraphSchema } from '@erudit-js/prose/elements/paragraph/core';
+
+import Mix from './elements/Mix.vue';
+import P from './elements/P.vue';
+import Text from './elements/Text.vue';
+import { refSchema } from '@erudit-js/prose/elements/link/reference/core';
+import Ref from './elements/Ref.vue';
+
+const { element } = defineProps<{ element: ProseElement<AnySchema> }>();
+
+const ElementComponent = (() => {
+    switch (element.schemaName) {
+        case textSchema.name:
+            return Text;
+        case paragraphSchema.name:
+            return P;
+        case refSchema.name:
+            return Ref;
+        case mixSchema.name:
+        case inlinersSchema.name:
+            return Mix;
+        default:
+            return h(
+                'span',
+                { class: 'text-red-500 font-semibold font-mono' },
+                `<${element.schemaName} />`,
+            );
+    }
+})();
+</script>
+
+<template>
+    <ElementComponent v-if="element" :element />
+</template>

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>