erudit 4.0.0-dev.3 → 4.0.0-dev.5

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

@@ -1,132 +1,132 @@
-<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]"
-                    >
-                        <MyRuntimeIcon v-if="newsLoading" :svg="loadingSvg" />
-                        <span>{{ phrase.show_more }}</span>
-                    </button>
-                </TransitionFade>
-            </ScrollHolder>
-        </div>
-    </AsideMinorPane>
-</template>
+<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]"
+          >
+            <Loading v-if="newsLoading" />
+            <span>{{ phrase.show_more }}</span>
+          </button>
+        </TransitionFade>
+      </ScrollHolder>
+    </div>
+  </AsideMinorPane>
+</template>

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

@@ -1,69 +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">
-        <div
-            class="mb-small gap-small flex items-center"
-            :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>
+<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">
+    <div
+      class="mb-small gap-small flex items-center"
+      :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

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

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

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