erudit 4.0.0-dev.4 → 4.0.0-dev.5

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

@@ -1,123 +1,112 @@
-<script lang="ts" setup>
-import type { TopicPart } from '@erudit-js/core/content/topic';
-import type { ContentType } from '@erudit-js/core/content/type';
-
-const { contentType, contentRelativePath, topicPart } = defineProps<{
-    contentRelativePath: string;
-    contentType: ContentType;
-    topicPart?: TopicPart;
-}>();
-
-const optionsOpened = ref(false);
-
-const howToImproveLink = ERUDIT.config.project.contributors?.howToImproveLink;
-const reportIssueLink = ERUDIT.config.project.contributors?.reportIssueLink;
-
-const editLink = computed(() => {
-    const prefix = ERUDIT.config.project.contributors?.editLinkPrefix;
-
-    if (prefix) {
-        const postfix = (() => {
-            switch (contentType) {
-                case 'book':
-                    return '/book.ts';
-                case 'page':
-                    return '/page.tsx';
-                case 'group':
-                    return '/group.ts';
-                case 'topic':
-                    return `/${topicPart!}.tsx`;
-            }
-        })();
-
-        return `${prefix}${contentRelativePath}${postfix}`;
-    }
-});
-
-const contributorsEnabled = ERUDIT.config.project.contributors?.enabled;
-const canImprove =
-    contributorsEnabled && (howToImproveLink || reportIssueLink || editLink);
-
-const phrase = await usePhrases(
-    'make_contribution',
-    'improve_material',
-    'how_to_improve',
-    'report_issue',
-    'edit_page',
-);
-</script>
-
-<template>
-    <template v-if="canImprove">
-        <TransitionFade>
-            <div
-                v-if="optionsOpened"
-                class="absolute top-0 left-0 z-10 h-full w-full"
-            >
-                <div
-                    class="bg-bg-aside flex h-full w-full flex-col justify-end"
-                >
-                    <div
-                        class="nice-scrollbars overflow-auto *:border-t
-                            *:border-b-0"
-                    >
-                        <AsideListItem
-                            v-if="howToImproveLink"
-                            icon="question-circle"
-                            :main="phrase.how_to_improve"
-                            :to="howToImproveLink"
-                            target="_blank"
-                        />
-                        <AsideListItem
-                            v-if="reportIssueLink"
-                            icon="bug"
-                            :main="phrase.report_issue"
-                            :to="reportIssueLink"
-                            target="_blank"
-                        />
-                        <AsideListItem
-                            v-if="editLink"
-                            icon="draw"
-                            :main="phrase.edit_page"
-                            :to="editLink"
-                            target="_blank"
-                        />
-                    </div>
-                    <div
-                        class="border-border flex items-center border-t py-1
-                            pr-0"
-                    >
-                        <div class="pl-normal flex-1 text-sm font-semibold">
-                            {{ formatText(phrase.improve_material) }}
-                        </div>
-                        <button
-                            @click="optionsOpened = false"
-                            class="text-text-muted hocus:text-text p-normal
-                                cursor-pointer transition-[color]"
-                        >
-                            <MyIcon
-                                name="plus"
-                                class="rotate-45 text-[24px] leading-none"
-                            />
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </TransitionFade>
-        <AsideListItem
-            :main="formatText(phrase.make_contribution)"
-            @click="optionsOpened = true"
-            class="group border-t border-b-0 py-1"
-        >
-            <template #icon>
-                <div
-                    class="border-border group-hocus:border-text-dimmed grid
-                        size-[40px] place-items-center rounded-full border-3
-                        border-dashed transition-[border]"
-                >
-                    <MyIcon name="draw" class="text-text-muted size-[56%]" />
-                </div>
-            </template>
-        </AsideListItem>
-    </template>
-</template>
+<script lang="ts" setup>
+import type { TopicPart } from '@erudit-js/core/content/topic';
+import type { ContentType } from '@erudit-js/core/content/type';
+
+const { contentType, contentRelativePath, topicPart } = defineProps<{
+  contentRelativePath: string;
+  contentType: ContentType;
+  topicPart?: TopicPart;
+}>();
+
+const optionsOpened = ref(false);
+
+const howToImproveLink = ERUDIT.config.contributors?.howToImproveLink;
+const reportIssueLink = ERUDIT.config.contributors?.reportIssueLink;
+
+const editLink = computed(() => {
+  const prefix = ERUDIT.config.contributors?.editLinkPrefix;
+
+  if (prefix) {
+    const postfix = (() => {
+      switch (contentType) {
+        case 'book':
+          return '/book.ts';
+        case 'page':
+          return '/page.tsx';
+        case 'group':
+          return '/group.ts';
+        case 'topic':
+          return `/${topicPart!}.tsx`;
+      }
+    })();
+
+    return `${prefix}${contentRelativePath}${postfix}`;
+  }
+});
+
+const contributorsEnabled = ERUDIT.config.contributors?.enabled;
+const canImprove =
+  contributorsEnabled && (howToImproveLink || reportIssueLink || editLink);
+
+const phrase = await usePhrases(
+  'make_contribution',
+  'improve_material',
+  'how_to_improve',
+  'report_issue',
+  'edit_page',
+);
+</script>
+
+<template>
+  <template v-if="canImprove">
+    <TransitionFade>
+      <div
+        v-if="optionsOpened"
+        class="absolute top-0 left-0 z-10 h-full w-full"
+      >
+        <div class="bg-bg-aside flex h-full w-full flex-col justify-end">
+          <div class="nice-scrollbars overflow-auto *:border-t *:border-b-0">
+            <AsideListItem
+              v-if="howToImproveLink"
+              icon="question-circle"
+              :main="phrase.how_to_improve"
+              :to="howToImproveLink"
+              target="_blank"
+            />
+            <AsideListItem
+              v-if="reportIssueLink"
+              icon="bug"
+              :main="phrase.report_issue"
+              :to="reportIssueLink"
+              target="_blank"
+            />
+            <AsideListItem
+              v-if="editLink"
+              icon="draw"
+              :main="phrase.edit_page"
+              :to="editLink"
+              target="_blank"
+            />
+          </div>
+          <div class="border-border flex items-center border-t py-1 pr-0">
+            <div class="pl-normal flex-1 text-sm font-semibold">
+              {{ formatText(phrase.improve_material) }}
+            </div>
+            <button
+              @click="optionsOpened = false"
+              class="text-text-muted hocus:text-text p-normal cursor-pointer
+                transition-[color]"
+            >
+              <MyIcon name="plus" class="rotate-45 text-[24px] leading-none" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </TransitionFade>
+    <AsideListItem
+      :main="formatText(phrase.make_contribution)"
+      @click="optionsOpened = true"
+      class="group border-t border-b-0 py-1"
+    >
+      <template #icon>
+        <div
+          class="border-border group-hocus:border-text-dimmed grid size-[40px]
+            place-items-center rounded-full border-3 border-dashed
+            transition-[border]"
+        >
+          <MyIcon name="draw" class="text-text-muted size-[56%]" />
+        </div>
+      </template>
+    </AsideListItem>
+  </template>
+</template>

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

@@ -1,36 +1,36 @@
-<script lang="ts" setup>
-import type { ContentContribution } from '@erudit-js/core/content/contributions';
-
-defineProps<{ contribution: ContentContribution }>();
-</script>
-
-<template>
-    <EruditLink
-        :to="PAGES.contributor(contribution.contributorId)"
-        class="p-normal hocus:bg-bg-accent block bg-transparent
-            transition-[background]"
-    >
-        <div class="gap-normal flex items-center">
-            <SmartMedia
-                class="micro:size-[40px] size-[30px] shrink-0 rounded-full"
-                :style="{
-                    '--mediaColor': stringColor(contribution.contributorId),
-                }"
-                :url="
-                    contribution.avatarUrl
-                        ? withBaseUrl(contribution.avatarUrl)
-                        : 'user'
-                "
-            />
-            <span class="text-[0.9em]">{{
-                contribution.name || contribution.contributorId
-            }}</span>
-        </div>
-        <div
-            v-if="contribution.description"
-            class="pt-small text-text-muted text-sm"
-        >
-            {{ formatText(contribution.description) }}
-        </div>
-    </EruditLink>
-</template>
+<script lang="ts" setup>
+import type { ContentContribution } from '@erudit-js/core/content/contributions';
+
+defineProps<{ contribution: ContentContribution }>();
+
+const withBaseUrl = useBaseUrl();
+</script>
+
+<template>
+  <EruditLink
+    :to="PAGES.contributor(contribution.contributorId)"
+    class="p-normal hocus:bg-bg-accent block bg-transparent
+      transition-[background]"
+  >
+    <div class="gap-normal flex items-center">
+      <SmartMedia
+        class="micro:size-[40px] size-[30px] shrink-0 rounded-full"
+        :style="{
+          '--mediaColor': stringColor(contribution.contributorId),
+        }"
+        :url="
+          contribution.avatarUrl ? withBaseUrl(contribution.avatarUrl) : 'user'
+        "
+      />
+      <span class="text-[0.9em]">{{
+        contribution.name || contribution.contributorId
+      }}</span>
+    </div>
+    <div
+      v-if="contribution.description"
+      class="pt-small text-text-muted text-sm"
+    >
+      {{ formatText(contribution.description) }}
+    </div>
+  </EruditLink>
+</template>

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

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