erudit 3.0.0-dev.9 → 4.0.0-dev.2

package/app/assets/icons/search/glass.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M17.58,10.33c0,1.6-.52,3.08-1.39,4.28l4.41,4.42c.44.44.44,1.14,0,1.58-.44.44-1.14.44-1.58,0l-4.41-4.42c-1.2.88-2.68,1.39-4.28,1.39-4,0-7.25-3.24-7.25-7.25s3.24-7.25,7.25-7.25,7.25,3.24,7.25,7.25ZM10.33,15.34c2.77,0,5.02-2.25,5.02-5.02s-2.25-5.02-5.02-5.02-5.02,2.25-5.02,5.02,2.25,5.02,5.02,5.02Z"/>
+</svg>

package/app/assets/icons/search/wtf.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M20.6,19.02l-4.41-4.42c.87-1.2,1.39-2.68,1.39-4.28,0-4-3.24-7.25-7.25-7.25s-7.25,3.24-7.25,7.25,3.24,7.25,7.25,7.25c1.6,0,3.08-.52,4.28-1.39l4.41,4.42c.44.44,1.14.44,1.58,0,.44-.44.44-1.14,0-1.58h0ZM10.33,15.34c-2.77,0-5.02-2.25-5.02-5.02s2.25-5.02,5.02-5.02,5.02,2.25,5.02,5.02-2.25,5.02-5.02,5.02ZM10.51,8.52c0,.78-.5,1.24-.89,1.63-.38.4-.53.79-.53,1.24v.16s-1.38,0-1.38,0v-.27c-.02-.48.12-.99.59-1.5.33-.36.62-.69.62-1.01,0-.33-.22-.56-.73-.58-.37,0-.81.14-1.1.33l-.37-1.1c.41-.24,1.03-.44,1.81-.44,1.3,0,1.97.68,1.97,1.54h0ZM9.29,12.92c0,.53-.37.93-.93.93s-.93-.39-.93-.93c0-.55.37-.93.93-.93s.92.38.93.93ZM11.75,11.55l-.24-4.46h1.61l-.24,4.46h-1.13ZM13.24,12.92c0,.53-.37.93-.93.93s-.93-.39-.93-.93c0-.55.37-.93.93-.93s.92.38.93.93Z"/>
+</svg>

package/app/assets/icons/sun-moon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.07 512.07">
-    <path d="M446.94,256.04l62.3-90.4c3.1-4.5,3.7-10.2,1.6-15.2-2.1-5-6.6-8.6-11.9-9.6l-107.9-19.8-19.9-107.9c-1-5.3-4.6-9.8-9.6-11.9-5-2.1-10.7-1.5-15.2,1.6l-90.3,62.3L165.74,2.84c-4.5-3.1-10.2-3.7-15.2-1.6-5,2.1-8.6,6.6-9.6,11.9l-19.9,107.9-107.9,19.9c-5.3,1-9.8,4.6-11.9,9.6s-1.5,10.7,1.6,15.2l62.3,90.3L2.84,346.34c-3.1,4.5-3.7,10.2-1.6,15.2s6.6,8.6,11.9,9.6l107.9,19.9,19.9,107.9c1,5.3,4.6,9.8,9.6,11.9s10.7,1.5,15.2-1.6l90.3-62.3,90.3,62.3c4.5,3.1,10.2,3.7,15.2,1.6s8.6-6.6,9.6-11.9l19.9-107.9,107.9-19.9c5.3-1,9.8-4.6,11.9-9.6s1.5-10.7-1.6-15.2l-62.3-90.3ZM256.04,411.71c-85.97,0-155.67-69.7-155.67-155.67s69.7-155.67,155.67-155.67,155.67,69.7,155.67,155.67-69.7,155.67-155.67,155.67ZM257.94,144.66c-62.51,0-113.13,50.77-113.13,113.38s50.62,113.38,113.13,113.38c30.67,0,58.46-12.25,78.86-32.09,2.53-2.48,3.19-6.33,1.57-9.47s-5.11-4.91-8.6-4.3c-4.96.86-10.02,1.32-15.24,1.32-49.05,0-88.83-39.89-88.83-89.08,0-33.31,18.22-62.31,45.2-77.59,3.09-1.77,4.66-5.31,3.9-8.76s-3.69-6.02-7.24-6.33c-3.19-.25-6.38-.4-9.62-.4v-.05Z" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+  <path d="M520.03,320l65.28-94.73c3.25-4.72,3.88-10.69,1.68-15.93s-6.92-9.01-12.47-10.06l-113.06-20.75-20.85-113.06c-1.05-5.55-4.82-10.27-10.06-12.47-5.24-2.2-11.21-1.57-15.93,1.68l-94.62,65.28-94.62-65.28c-4.72-3.25-10.69-3.88-15.93-1.68-5.24,2.2-9.01,6.92-10.06,12.47l-20.85,113.06-113.06,20.85c-5.55,1.05-10.27,4.82-12.47,10.06s-1.57,11.21,1.68,15.93l65.28,94.62-65.28,94.62c-3.25,4.72-3.88,10.69-1.68,15.93s6.92,9.01,12.47,10.06l113.06,20.85,20.85,113.06c1.05,5.55,4.82,10.27,10.06,12.47,5.24,2.2,11.21,1.57,15.93-1.68l94.62-65.28,94.62,65.28c4.72,3.25,10.69,3.88,15.93,1.68s9.01-6.92,10.06-12.47l20.85-113.06,113.06-20.85c5.55-1.05,10.27-4.82,12.47-10.06,2.2-5.24,1.57-11.21-1.68-15.93l-65.28-94.62h0ZM320,483.12c-90.08,0-163.12-73.04-163.12-163.12s73.04-163.12,163.12-163.12,163.12,73.04,163.12,163.12-73.04,163.12-163.12,163.12h0ZM321.99,203.29c-65.5,0-118.54,53.2-118.54,118.81s53.04,118.81,118.54,118.81c32.14,0,61.26-12.84,82.63-33.63,2.65-2.6,3.34-6.63,1.65-9.92s-5.35-5.14-9.01-4.51c-5.2.9-10.5,1.38-15.97,1.38-51.4,0-93.08-41.8-93.08-93.34,0-34.9,19.09-65.29,47.36-81.3,3.24-1.85,4.88-5.56,4.09-9.18s-3.87-6.31-7.59-6.63c-3.34-.26-6.69-.42-10.08-.42v-.05h0Z"/>
 </svg>

package/app/assets/icons/sun.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-    <path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+    <path d="M210.2 53.9C217.6 50.8 226 51.7 232.7 56.1L320.5 114.3L408.3 56.1C415 51.7 423.4 50.9 430.8 53.9C438.2 56.9 443.4 63.5 445 71.3L465.9 174.5L569.1 195.4C576.9 197 583.5 202.4 586.5 209.7C589.5 217 588.7 225.5 584.3 232.2L526.1 320L584.3 407.8C588.7 414.5 589.5 422.9 586.5 430.3C583.5 437.7 576.9 443.1 569.1 444.6L465.8 465.4L445 568.7C443.4 576.5 438 583.1 430.7 586.1C423.4 589.1 414.9 588.3 408.2 583.9L320.4 525.7L232.6 583.9C225.9 588.3 217.5 589.1 210.1 586.1C202.7 583.1 197.3 576.5 195.8 568.7L175 465.4L71.7 444.5C63.9 442.9 57.3 437.5 54.3 430.2C51.3 422.9 52.1 414.4 56.5 407.7L114.7 320L56.5 232.2C52.1 225.5 51.3 217.1 54.3 209.7C57.3 202.3 63.9 196.9 71.7 195.4L175 174.6L195.9 71.3C197.5 63.5 202.9 56.9 210.2 53.9zM239.6 320C239.6 275.6 275.6 239.6 320 239.6C364.4 239.6 400.4 275.6 400.4 320C400.4 364.4 364.4 400.4 320 400.4C275.6 400.4 239.6 364.4 239.6 320zM448.4 320C448.4 249.1 390.9 191.6 320 191.6C249.1 191.6 191.6 249.1 191.6 320C191.6 390.9 249.1 448.4 320 448.4C390.9 448.4 448.4 390.9 448.4 320z"/>
 </svg>

package/app/assets/icons/translate.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M15.24,18.95l-.85,2.43c-.07.18-.18.33-.35.45s-.35.18-.55.18c-.33,0-.6-.14-.81-.41s-.25-.58-.11-.91l3.8-10.05c.08-.18.21-.33.38-.45s.35-.18.55-.18h.75c.2,0,.38.06.55.18s.29.27.38.45l3.8,10.08c.13.32.1.61-.1.89s-.47.41-.8.41c-.22,0-.4-.06-.56-.18s-.28-.28-.36-.48l-.85-2.4h-4.85ZM9.21,13.98l-4.35,4.33c-.18.18-.41.28-.69.29s-.51-.09-.71-.29c-.18-.18-.28-.42-.28-.7s.09-.52.28-.7l4.35-4.35c-.58-.58-1.11-1.25-1.59-2s-.91-1.6-1.31-2.55h2.1c.33.65.67,1.22,1,1.7s.73.97,1.2,1.45c.55-.55,1.12-1.32,1.71-2.31s1.04-1.94,1.34-2.84H2.16c-.28,0-.52-.1-.71-.29s-.29-.43-.29-.71.1-.52.29-.71.43-.29.71-.29h6v-1c0-.28.1-.52.29-.71s.43-.29.71-.29.52.1.71.29.29.43.29.71v1h6c.28,0,.52.1.71.29s.29.43.29.71-.1.52-.29.71-.43.29-.71.29h-1.9c-.35,1.2-.88,2.43-1.58,3.7s-1.39,2.23-2.08,2.9l2.4,2.45-.75,2.05-3.05-3.13ZM15.86,17.2h3.6l-1.8-5.1-1.8,5.1Z"/>
+</svg>

package/app/assets/icons/user.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-    <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464l349.5 0c-8.9-63.3-63.3-112-129-112l-91.4 0c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3z" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+    <path d="M320 312C386.3 312 440 258.3 440 192C440 125.7 386.3 72 320 72C253.7 72 200 125.7 200 192C200 258.3 253.7 312 320 312zM290.3 368C191.8 368 112 447.8 112 546.3C112 562.7 125.3 576 141.7 576L498.3 576C514.7 576 528 562.7 528 546.3C528 447.8 448.2 368 349.7 368L290.3 368z"/>
 </svg>

package/app/assets/icons/users.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-    <path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0L21.3 320C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3l-213.3 0zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352l117.3 0C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7l-330.7 0c-14.7 0-26.7-11.9-26.7-26.7z" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+    <path d="M320 80C377.4 80 424 126.6 424 184C424 241.4 377.4 288 320 288C262.6 288 216 241.4 216 184C216 126.6 262.6 80 320 80zM96 152C135.8 152 168 184.2 168 224C168 263.8 135.8 296 96 296C56.2 296 24 263.8 24 224C24 184.2 56.2 152 96 152zM0 480C0 409.3 57.3 352 128 352C140.8 352 153.2 353.9 164.9 357.4C132 394.2 112 442.8 112 496L112 512C112 523.4 114.4 534.2 118.7 544L32 544C14.3 544 0 529.7 0 512L0 480zM521.3 544C525.6 534.2 528 523.4 528 512L528 496C528 442.8 508 394.2 475.1 357.4C486.8 353.9 499.2 352 512 352C582.7 352 640 409.3 640 480L640 512C640 529.7 625.7 544 608 544L521.3 544zM472 224C472 184.2 504.2 152 544 152C583.8 152 616 184.2 616 224C616 263.8 583.8 296 544 296C504.2 296 472 263.8 472 224zM160 496C160 407.6 231.6 336 320 336C408.4 336 480 407.6 480 496L480 512C480 529.7 465.7 544 448 544L192 544C174.3 544 160 529.7 160 512L160 496z"/>
 </svg>

package/app/assets/icons/warning.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M2.72,21c-.18,0-.35-.05-.5-.14-.15-.09-.27-.21-.35-.36s-.13-.31-.14-.49.04-.35.14-.51L11.13,3.5c.1-.17.23-.29.39-.38s.32-.13.49-.13.33.04.49.13.29.21.39.38l9.25,16c.1.17.15.34.14.51s-.05.34-.14.49-.2.27-.35.36c-.15.09-.32.14-.5.14H2.72ZM4.45,19h15.1l-7.55-13-7.55,13ZM12,18c.28,0,.52-.1.71-.29.19-.19.29-.43.29-.71s-.1-.52-.29-.71c-.19-.19-.43-.29-.71-.29s-.52.1-.71.29-.29.43-.29.71.1.52.29.71c.19.19.43.29.71.29ZM12,15c.28,0,.52-.1.71-.29.19-.19.29-.43.29-.71v-3c0-.28-.1-.52-.29-.71-.19-.19-.43-.29-.71-.29s-.52.1-.71.29-.29.43-.29.71v3c0,.28.1.52.29.71s.43.29.71.29Z"/>
+</svg>

package/app/components/EruditLink.ts

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

package/app/components/FancyBold.vue

@@ -0,0 +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>

package/app/components/FancyCard.vue

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

@@ -0,0 +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>

package/app/components/Prose.vue

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

package/app/components/ScrollHolder.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+const { direction = 'ltr' } = defineProps<{
+    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>

package/app/components/SmartMedia.vue

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

package/app/components/ads/Ads.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
+
+import {
+    LazyAdsProviderCustom,
+    LazyAdsProviderYandex,
+    LazyAdsReplacer,
+} from '#components';
+
+const props = defineProps<{ data: EruditAds }>();
+const route = useRoute();
+
+const adsKey = ref(0);
+const AdsComponent = shallowRef<Component>();
+
+function updateAds() {
+    AdsComponent.value = (() => {
+        switch (props.data?.provider) {
+            case 'replacer':
+                return LazyAdsReplacer;
+            case 'yandex':
+                return LazyAdsProviderYandex;
+            case 'custom':
+                return LazyAdsProviderCustom;
+        }
+
+        return undefined;
+    })();
+    adsKey.value++;
+}
+
+onMounted(() => {
+    watch(() => route.path, updateAds, { immediate: true });
+});
+</script>
+
+<template>
+    <AdsComponent v-if="AdsComponent" :data :key="adsKey" />
+</template>

package/app/components/ads/AdsBannerAside.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
+
+const adsData = ref<EruditAds>();
+
+onMounted(() => {
+    const asideAds = ERUDIT.config.project.ads!.aside!;
+
+    if (asideAds.provider === 'custom') {
+        let banners =
+            window.innerHeight <= 700
+                ? asideAds.banners.mobile
+                : asideAds.banners.full;
+
+        if (!banners) {
+            banners = asideAds.banners.full || asideAds.banners.mobile;
+        }
+
+        if (!banners) {
+            return;
+        }
+
+        adsData.value = {
+            provider: 'custom',
+            banners: banners,
+        };
+    } else {
+        adsData.value = asideAds;
+    }
+});
+</script>
+
+<template>
+    <section
+        v-if="adsData"
+        class="p-small border-border border-t [@media(max-height:500px)]:hidden"
+    >
+        <div
+            class="relative max-h-[300px] overflow-hidden
+                [@media(max-height:700px)]:max-h-[100px]"
+        >
+            <Ads :data="adsData" />
+        </div>
+    </section>
+</template>

package/app/components/ads/AdsBannerBottom.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { EruditAds } from '@erudit-js/core/eruditConfig/ads';
+
+const adsData = ref<EruditAds>();
+
+onMounted(() => {
+    adsData.value = ERUDIT.config.project.ads!.bottom!;
+});
+</script>
+
+<template>
+    <section v-if="adsData" class="px-main py-main">
+        <div class="relative max-h-[300px] overflow-hidden">
+            <Ads :data="adsData" />
+        </div>
+    </section>
+</template>

package/app/components/ads/AdsReplacer.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+const phrase = await usePhrases('ads_replacer');
+</script>
+
+<template>
+    <div class="max-h-[inherit] overflow-hidden">
+        <div class="h-dvh w-dvw"></div>
+        <div class="[container-type:size] absolute top-0 left-0 h-full w-full">
+            <div
+                class="text-text-muted gap-normal @max-[550px]:gap-small flex
+                    h-full w-full flex-row items-center justify-center
+                    bg-neutral-200
+                    shadow-[inset_0px_0px_5px_0px_light-dark(rgba(0,0,0,0.12),rgba(255,255,255,0.08))]
+                    @max-[550px]:flex-col @max-[550px]:text-center
+                    dark:bg-neutral-800"
+            >
+                <MyIcon
+                    name="handshake"
+                    class="text-[70px] [@container(max-height:150px)]:hidden"
+                />
+                <div
+                    v-html="phrase.ads_replacer"
+                    class="p-small text-lg @max-[550px]:text-sm"
+                ></div>
+            </div>
+        </div>
+    </div>
+</template>

package/app/components/ads/provider/Custom.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { EruditAdsCustom } from '@erudit-js/core/eruditConfig/ads';
+
+const props = defineProps<{ data: EruditAdsCustom }>();
+
+const randomBanner =
+    props.data.banners[Math.floor(Math.random() * props.data.banners.length)]!;
+</script>
+
+<template>
+    <div>
+        <a :href="randomBanner.link" target="_blank" class="block">
+            <img
+                :src="randomBanner.src"
+                class="mx-auto my-0 block object-contain object-center"
+            />
+        </a>
+    </div>
+</template>

package/app/components/ads/provider/Yandex.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { EruditAdsYandex } from '@erudit-js/core/eruditConfig/ads';
+
+declare global {
+    interface Window {
+        yaContextCb: Array<() => void>;
+        __yandexScriptLoaded?: boolean;
+        __yandexScriptLoading?: boolean;
+    }
+
+    var Ya: any;
+}
+
+const props = defineProps<{ data: EruditAdsYandex }>();
+const uid = useId();
+
+const loadYandexScript = (): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        // Script already loaded
+        if (window.__yandexScriptLoaded) {
+            resolve();
+            return;
+        }
+
+        // Script is currently loading, wait for it
+        if (window.__yandexScriptLoading) {
+            const checkLoaded = () => {
+                if (window.__yandexScriptLoaded) {
+                    resolve();
+                } else {
+                    setTimeout(checkLoaded, 50);
+                }
+            };
+            checkLoaded();
+            return;
+        }
+
+        // Load script for the first time
+        window.__yandexScriptLoading = true;
+        window.yaContextCb = window.yaContextCb || [];
+
+        const script = document.createElement('script');
+        script.src = 'https://yandex.ru/ads/system/context.js';
+        script.async = true;
+
+        script.onload = () => {
+            window.__yandexScriptLoaded = true;
+            window.__yandexScriptLoading = false;
+            resolve();
+        };
+
+        script.onerror = () => {
+            window.__yandexScriptLoading = false;
+            reject(new Error('Failed to load Yandex context script'));
+        };
+
+        document.head.appendChild(script);
+    });
+};
+
+onMounted(async () => {
+    try {
+        await loadYandexScript();
+
+        const { binaryTheme } = useTheme();
+
+        window.yaContextCb.push(() => {
+            Ya?.Context?.AdvManager?.render({
+                blockId: props.data.blockId,
+                renderTo: uid,
+                darkTheme: binaryTheme.value === 'dark',
+            });
+        });
+    } catch (error) {
+        console.error('Failed to load Yandex ads:', error);
+    }
+});
+</script>
+
+<template>
+    <div :id="uid">
+        <AdsReplacer />
+    </div>
+</template>