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

package/.nuxtrc

@@ -1 +1 @@
-typescript.includeWorkspace = true
+typescript.includeWorkspace=true

package/app/app.vue

@@ -1,34 +1,34 @@
-<script lang="ts" setup>
-initFavicon();
-initOgImage();
-initAnalytics();
-
-// Watching and setting theme
-initThemeWatcher();
-
-// Fetching and setting global navigation variable
-await initGlobalContentNav();
-
-await initFormatText();
-await initAppElements();
-
-// Watching route changes and set corresponsing aside major pane
-initAsideMajorPaneWatcher();
-</script>
-
-<template>
-    <NuxtLoadingIndicator color="var(--color-brand)" />
-    <div
-        class="relative m-auto min-h-dvh max-w-(--w-max-content) overflow-clip
-            border-x
-            border-[light-dark(var(--color-neutral-300),var(--color-neutral-800))]
-            shadow-[0_0_3px_0px_light-dark(rgba(0,0,0,0.05),rgba(0,0,0,0.18))]"
-    >
-        <SiteMain>
-            <NuxtPage></NuxtPage>
-        </SiteMain>
-        <SiteAsideOverlay />
-        <SiteAside :type="AsideType.Major" />
-        <SiteAside :type="AsideType.Minor" />
-    </div>
-</template>
+<script lang="ts" setup>
+initFavicon();
+initOgImage();
+initAnalytics();
+
+// Watching and setting theme
+initThemeWatcher();
+
+// Fetching and setting global navigation variable
+await initGlobalContentNav();
+
+await initFormatText();
+await initAppElements();
+
+// Watching route changes and set corresponsing aside major pane
+initAsideMajorPaneWatcher();
+</script>
+
+<template>
+  <NuxtLoadingIndicator color="var(--color-brand)" />
+  <div
+    class="relative m-auto min-h-dvh max-w-(--w-max-content) overflow-clip
+      border-x
+      border-[light-dark(var(--color-neutral-300),var(--color-neutral-800))]
+      shadow-[0_0_3px_0px_light-dark(rgba(0,0,0,0.05),rgba(0,0,0,0.18))]"
+  >
+    <SiteMain>
+      <NuxtPage></NuxtPage>
+    </SiteMain>
+    <SiteAsideOverlay />
+    <SiteAside :type="AsideType.Major" />
+    <SiteAside :type="AsideType.Minor" />
+  </div>
+</template>

package/app/components/EruditLink.ts

@@ -1,9 +1,9 @@
 export default defineNuxtLink({
-    componentName: 'EruditLink',
-    trailingSlash: 'append',
-    prefetch: true,
-    prefetchOn: {
-        visibility: false,
-        interaction: true,
-    },
+  componentName: 'EruditLink',
+  trailingSlash: 'append',
+  prefetch: true,
+  prefetchOn: {
+    visibility: false,
+    interaction: true,
+  },
 });

package/app/components/FancyBold.vue

@@ -1,16 +1,16 @@
-<script lang="ts" setup>
-const { color = 'var(--color-brand)' } = defineProps<{
-    text: string;
-    color?: string;
-}>();
-</script>
-
-<template>
-    <span
-        :style="{ '--titleColor': color }"
-        class="text-text-deep leading-tight font-extrabold
-            text-shadow-[2px_2px_color-mix(in_srgb,var(--titleColor),transparent_65%)]"
-    >
-        {{ formatText(text) }}
-    </span>
-</template>
+<script lang="ts" setup>
+const { color = 'var(--color-brand)' } = defineProps<{
+  text: string;
+  color?: string;
+}>();
+</script>
+
+<template>
+  <span
+    :style="{ '--titleColor': color }"
+    class="text-text-deep leading-tight font-extrabold
+      text-shadow-[2px_2px_color-mix(in_srgb,var(--titleColor),transparent_65%)]"
+  >
+    {{ formatText(text) }}
+  </span>
+</template>

package/app/components/FancyCard.vue

@@ -1,58 +1,52 @@
-<script lang="ts" setup>
-defineProps<{
-    title: string;
-    mediaUrl?: string;
-    description?: string;
-    link?: {
-        href: string;
-        external?: boolean;
-    };
-    color?: string;
-}>();
-</script>
-
-<template>
-    <EruditLink
-        :to="link?.href"
-        :external="link?.external"
-        :target="link?.external ? '_blank' : undefined"
-        :style="{
-            '--color': color ?? stringColor(title),
-            '--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) 65%)',
-            '--colorIcon':
-                'color-mix(in srgb, var(--color), var(--color-text) 30%)',
-        }"
-        :class="[
-            `p-small micro:p-normal not-last:mb-normal gap-small text-main-sm
-            relative flex w-full break-inside-avoid-column flex-col items-center
-            rounded border border-(--colorBorder) bg-linear-to-tr
-            from-(--colorBg)/30 to-(--colorBg) transition-shadow`,
-            link && 'hocus:ring-(--colorBorder) ring-2 ring-transparent',
-        ]"
-    >
-        <SmartMedia
-            v-if="mediaUrl"
-            :url="mediaUrl"
-            :style="{ '--mediaColor': color }"
-            class="border-bg-main micro:size-[56px] size-[46px] rounded-full
-                border-2 [box-shadow:0_0_16px_0_var(--color)]"
-        />
-        <div class="text-center font-semibold text-(--colorText)">
-            {{ formatText(title) }}
-        </div>
-        <div
-            v-if="description"
-            class="text-text-muted relative -top-1 text-center"
-        >
-            {{ formatText(description) }}
-        </div>
-        <div v-if="$slots.tags" class="gap-small flex flex-wrap justify-center">
-            <slot name="tags"></slot>
-        </div>
-    </EruditLink>
-</template>
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+  mediaUrl?: string;
+  description?: string;
+  link?: {
+    href: string;
+    external?: boolean;
+  };
+  color?: string;
+}>();
+</script>
+
+<template>
+  <EruditLink
+    :to="link?.href"
+    :external="link?.external"
+    :target="link?.external ? '_blank' : undefined"
+    :style="{
+      '--color': color ?? stringColor(title),
+      '--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) 65%)',
+      '--colorIcon': 'color-mix(in srgb, var(--color), var(--color-text) 30%)',
+    }"
+    :class="[
+      `p-small micro:p-normal not-last:mb-normal gap-small text-main-sm relative
+      flex w-full break-inside-avoid-column flex-col items-center rounded border
+      border-(--colorBorder) bg-linear-to-tr from-(--colorBg)/30 to-(--colorBg)
+      transition-shadow`,
+      link && 'hocus:ring-(--colorBorder) ring-2 ring-transparent',
+    ]"
+  >
+    <SmartMedia
+      v-if="mediaUrl"
+      :url="mediaUrl"
+      :style="{ '--mediaColor': color }"
+      class="border-bg-main micro:size-[56px] size-[46px] rounded-full border-2
+        [box-shadow:0_0_16px_0_var(--color)]"
+    />
+    <div class="text-center font-semibold text-(--colorText)">
+      {{ formatText(title) }}
+    </div>
+    <div v-if="description" class="text-text-muted relative -top-1 text-center">
+      {{ formatText(description) }}
+    </div>
+    <div v-if="$slots.tags" class="gap-small flex flex-wrap justify-center">
+      <slot name="tags"></slot>
+    </div>
+  </EruditLink>
+</template>

package/app/components/FancyCardTag.vue

@@ -1,16 +1,16 @@
-<script lang="ts" setup>
-defineProps<{ title?: string }>();
-</script>
-
-<template>
-    <div
-        :title
-        :class="[
-            `bg-bg-main text-main-xs flex items-center gap-1.5 rounded-full
-            border border-(--colorBorder) px-1.5 py-0.5 text-(--colorText)`,
-            title && 'cursor-help',
-        ]"
-    >
-        <slot></slot>
-    </div>
-</template>
+<script lang="ts" setup>
+defineProps<{ title?: string }>();
+</script>
+
+<template>
+  <div
+    :title
+    :class="[
+      `bg-bg-main text-main-xs flex items-center gap-1.5 rounded-full border
+      border-(--colorBorder) px-1.5 py-0.5 text-(--colorText)`,
+      title && 'cursor-help',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

package/app/components/Loading.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+const loadingSvg = useLoadingSvg();
+</script>
+
+<template>
+  <MyRuntimeIcon :svg="loadingSvg" />
+</template>

package/app/components/Prose.vue

@@ -1,51 +1,55 @@
-<script lang="ts" setup>
-import type { AnySchema, GenericStorage, ProseElement } from '@jsprose/core';
-import { Prose, type ProseContext } from '@erudit-js/prose/app';
-
-import { EruditLink, MaybeMyIcon, TransitionFade } from '#components';
-
-const { element, storage, useHashUrl } = defineProps<{
-    element: ProseElement<AnySchema>;
-    storage: GenericStorage;
-    useHashUrl: boolean;
-}>();
-
-const route = useRoute();
-
-const hashUrl = computed(() => {
-    return useHashUrl
-        ? route.hash
-            ? route.hash.slice(1)
-            : undefined
-        : undefined;
-});
-
-const { setPreview, closePreview } = usePreview();
-
-const context: ProseContext = {
-    appElements,
-    mode: ERUDIT.config.mode,
-    languageCode: ERUDIT.config.project.language.current,
-    formatText,
-    pathUrl: route.path,
-    baseUrl: ERUDIT.config.project.baseUrl,
-    hashUrl,
-    eruditIcons: ICONS,
-    EruditIcon: MaybeMyIcon,
-    EruditTransition: TransitionFade,
-    EruditLink,
-    setPreview,
-    closePreview,
-    loadingSvg,
-};
-</script>
-
-<template>
-    <Prose
-        :element
-        :storage
-        :context
-        :style="{ '--proseGap': 'calc(var(--spacing-main)*1.1)' }"
-        class="py-main px-[calc(var(--proseGap)-var(--proseAsideWidth))]"
-    />
-</template>
+<script lang="ts" setup>
+import type { AnySchema, GenericStorage, ProseElement } from '@jsprose/core';
+import type { EruditMode } from '@erudit-js/core/mode';
+import { Prose, type ProseContext } from '@erudit-js/prose/app';
+
+import { EruditLink, MaybeMyIcon, TransitionFade } from '#components';
+
+const { element, storage, useHashUrl } = defineProps<{
+  element: ProseElement<AnySchema>;
+  storage: GenericStorage;
+  useHashUrl: boolean;
+}>();
+
+const runtimeConfig = useRuntimeConfig();
+
+const loadingSvg = useLoadingSvg();
+const route = useRoute();
+
+const hashUrl = computed(() => {
+  return useHashUrl
+    ? route.hash
+      ? route.hash.slice(1)
+      : undefined
+    : undefined;
+});
+
+const { setPreview, closePreview } = usePreview();
+
+const context: ProseContext = {
+  appElements,
+  mode: runtimeConfig.public.eruditMode as EruditMode,
+  languageCode: ERUDIT.config.language.current,
+  formatText,
+  pathUrl: route.path,
+  baseUrl: runtimeConfig.app.baseURL,
+  hashUrl,
+  eruditIcons: ICONS,
+  EruditIcon: MaybeMyIcon,
+  EruditTransition: TransitionFade,
+  EruditLink,
+  setPreview,
+  closePreview,
+  loadingSvg,
+};
+</script>
+
+<template>
+  <Prose
+    :element
+    :storage
+    :context
+    :style="{ '--proseGap': 'calc(var(--spacing-main)*1.1)' }"
+    class="py-main px-[calc(var(--proseGap)-var(--proseAsideWidth))]"
+  />
+</template>

package/app/components/ScrollHolder.vue

@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 const { direction = 'ltr' } = defineProps<{
-    direction?: 'ltr' | 'rtl';
+  direction?: 'ltr' | 'rtl';
 }>();
 </script>
 
 <template>
-    <template v-if="direction === 'ltr'">
-        <div class="nice-scrollbars h-full w-full overflow-auto">
-            <slot></slot>
-        </div>
-    </template>
-    <template v-else>
-        <div dir="rtl" class="nice-scrollbars h-full w-full overflow-auto">
-            <div dir="ltr">
-                <slot></slot>
-            </div>
-        </div>
-    </template>
+  <template v-if="direction === 'ltr'">
+    <div class="nice-scrollbars h-full w-full overflow-auto">
+      <slot></slot>
+    </div>
+  </template>
+  <template v-else>
+    <div dir="rtl" class="nice-scrollbars h-full w-full overflow-auto">
+      <div dir="ltr">
+        <slot></slot>
+      </div>
+    </div>
+  </template>
 </template>

package/app/components/SmartMedia.vue

@@ -1,112 +1,107 @@
-<script lang="ts" setup>
-import { isMyIcon, type MyIconName } from '#my-icons';
-import { computed, ref, watch } from 'vue';
-
-const { url } = defineProps<{ url?: MyIconName | (string & {}) }>();
-
-const mediaType = computed<'icon' | 'image' | 'video' | null>(() => {
-    if (!url) {
-        return null;
-    }
-
-    const extension = url.split('.').pop() || '';
-
-    if (isMyIcon(url)) {
-        return 'icon';
-    }
-
-    if (['mp4', 'webm', 'ogg'].includes(extension)) {
-        return 'video';
-    }
-
-    if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(extension)) {
-        return 'image';
-    }
-
-    throw new Error(`Unknown media type for URL: ${url}`);
-});
-
-const visible = ref(false);
-const loaded = ref(false);
-const loading = computed(() => !url || !loaded.value || !visible.value);
-
-const mediaElement = useTemplateRef('media');
-
-watch(
-    () => url,
-    () => {
-        loaded.value = false;
-    },
-);
-
-onMounted(() => {
-    const intersectionObserver = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-            visible.value = entry.isIntersecting;
-        });
-    });
-
-    if (mediaElement.value) {
-        intersectionObserver.observe(mediaElement.value);
-    }
-});
-</script>
-
-<template>
-    <div
-        ref="media"
-        class="overflow-hidden"
-        :style="{
-            '--_mediaColor': 'var(--mediaColor,var(--color-text-disabled))',
-        }"
-    >
-        <div class="relative h-full w-full">
-            <TransitionFade>
-                <div v-if="loading">
-                    <div
-                        class="absolute z-10 h-full w-full animate-pulse
-                            bg-(--_mediaColor)/50
-                            transition-[opacity,background]"
-                    ></div>
-                </div>
-            </TransitionFade>
-            <TransitionFade>
-                <template v-if="visible">
-                    <div
-                        v-if="mediaType === 'icon'"
-                        class="absolute h-full w-full"
-                    >
-                        <div
-                            class="grid size-full place-items-center
-                                bg-(--_mediaColor)/30 text-(--_mediaColor)
-                                transition-[color,background]"
-                        >
-                            <MyIcon
-                                @vue:mounted="loaded = true"
-                                :name="url as MyIconName"
-                                class="h-2/3 w-2/3"
-                            />
-                        </div>
-                    </div>
-                    <img
-                        v-if="mediaType === 'image'"
-                        :src="url"
-                        loading="lazy"
-                        @load="loaded = true"
-                        class="absolute block h-full w-full object-cover"
-                    />
-                    <video
-                        v-else-if="mediaType === 'video'"
-                        :src="url"
-                        @loadeddata="loaded = true"
-                        autoplay
-                        muted
-                        loop
-                        playsinline
-                        class="absolute block h-full w-full object-cover"
-                    ></video>
-                </template>
-            </TransitionFade>
-        </div>
-    </div>
-</template>
+<script lang="ts" setup>
+import { isMyIcon, type MyIconName } from '#my-icons';
+import { computed, ref, watch } from 'vue';
+
+const { url } = defineProps<{ url?: MyIconName | (string & {}) }>();
+
+const mediaType = computed<'icon' | 'image' | 'video' | null>(() => {
+  if (!url) {
+    return null;
+  }
+
+  const extension = url.split('.').pop() || '';
+
+  if (isMyIcon(url)) {
+    return 'icon';
+  }
+
+  if (['mp4', 'webm', 'ogg'].includes(extension)) {
+    return 'video';
+  }
+
+  if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(extension)) {
+    return 'image';
+  }
+
+  throw new Error(`Unknown media type for URL: ${url}`);
+});
+
+const visible = ref(false);
+const loaded = ref(false);
+const loading = computed(() => !url || !loaded.value || !visible.value);
+
+const mediaElement = useTemplateRef('media');
+
+watch(
+  () => url,
+  () => {
+    loaded.value = false;
+  },
+);
+
+onMounted(() => {
+  const intersectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      visible.value = entry.isIntersecting;
+    });
+  });
+
+  if (mediaElement.value) {
+    intersectionObserver.observe(mediaElement.value);
+  }
+});
+</script>
+
+<template>
+  <div
+    ref="media"
+    class="overflow-hidden"
+    :style="{
+      '--_mediaColor': 'var(--mediaColor,var(--color-text-disabled))',
+    }"
+  >
+    <div class="relative h-full w-full">
+      <TransitionFade>
+        <div v-if="loading">
+          <div
+            class="absolute z-10 h-full w-full animate-pulse
+              bg-(--_mediaColor)/50 transition-[opacity,background]"
+          ></div>
+        </div>
+      </TransitionFade>
+      <TransitionFade>
+        <template v-if="visible">
+          <div v-if="mediaType === 'icon'" class="absolute h-full w-full">
+            <div
+              class="grid size-full place-items-center bg-(--_mediaColor)/30
+                text-(--_mediaColor) transition-[color,background]"
+            >
+              <MyIcon
+                @vue:mounted="loaded = true"
+                :name="url as MyIconName"
+                class="h-2/3 w-2/3"
+              />
+            </div>
+          </div>
+          <img
+            v-if="mediaType === 'image'"
+            :src="url"
+            loading="lazy"
+            @load="loaded = true"
+            class="absolute block h-full w-full object-cover"
+          />
+          <video
+            v-else-if="mediaType === 'video'"
+            :src="url"
+            @loadeddata="loaded = true"
+            autoplay
+            muted
+            loop
+            playsinline
+            class="absolute block h-full w-full object-cover"
+          ></video>
+        </template>
+      </TransitionFade>
+    </div>
+  </div>
+</template>