erudit 3.0.0-dev.22 → 3.0.0-dev.25

package/app/components/ads/AdsReplacer.vue

@@ -1,73 +1,28 @@
-<script lang="ts" setup>
-const phrase = await usePhrases('ads_replacer');
-</script>
-
-<template>
-    <div style="max-height: inherit; overflow: hidden">
-        <div style="width: 100vw; height: 100vh"></div>
-        <div :class="$style.darkMagicReplacer">
-            <div :class="$style.replacer">
-                <MyIcon name="pirate" />
-                <div v-html="phrase.ads_replacer"></div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-.darkMagicReplacer {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    container: darkMagic / size;
-
-    .replacer {
-        width: 100%;
-        height: 100%;
-
-        font-size: 1.5rem;
-        color: var(--textMuted);
-        background: var(--bgAccent);
-
-        box-shadow: inset 0px 0px 5px 0px
-            light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.05));
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: var(--gapBig);
-
-        [my-icon] {
-            font-size: 65px;
-        }
-
-        strong {
-            color: inherit;
-        }
-
-        @container (max-width: 500px) {
-            flex-direction: column;
-            gap: var(--gap);
-
-            font-size: 1.2rem;
-            text-align: center;
-
-            [my-icon] {
-                font-size: 55px;
-            }
-        }
-
-        @container (max-width: 300px) {
-            font-size: 1rem;
-        }
-
-        @container (max-height: 200px) {
-            [my-icon] {
-                display: none;
-            }
-        }
-    }
-}
-</style>
+<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))]
+                    transition-[background,color] @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/{AdsProviderYandex.vue → provider/Yandex.vue}

@@ -1,91 +1,84 @@
-<script lang="ts" setup>
-import type { EruditAdsYandex } from '@erudit-js/cog/schema';
-
-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 theme = useTheme();
-
-        window.yaContextCb.push(() => {
-            Ya?.Context?.AdvManager?.render({
-                blockId: props.data.blockId,
-                renderTo: uid,
-                darkTheme: theme.binaryTheme.value === 'dark',
-            });
-        });
-    } catch (error) {
-        console.error('Failed to load Yandex ads:', error);
-    }
-});
-</script>
-
-<template>
-    <div :id="uid" :class="$style.darkMagicYandex">
-        <AdsReplacer />
-    </div>
-</template>
-
-<style lang="scss" module>
-.darkMagicYandex {
-    overflow: hidden;
-    max-height: inherit;
-}
-</style>
+<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>

package/app/components/aside/AsideListItem.vue

@@ -1,91 +1,66 @@
-<script lang="ts" setup>
-import { isMyIcon, type MyIconName } from '#my-icons';
-import { computed } from 'vue';
-
-const props = defineProps<{
-    link?: string;
-    icon?: string;
-    main?: string;
-    active?: boolean;
-    secondary?: string;
-}>();
-
-const isExternalLink = computed(() => {
-    if (!props.link) return false;
-    return (
-        props.link.startsWith('http://') ||
-        props.link.startsWith('https://') ||
-        props.link.startsWith('//')
-    );
-});
-
-const vnode = h(
-    props.link ? defineNuxtLink({ trailingSlash: 'append' }) : 'div',
-);
-</script>
-
-<template>
-    <component
-        :is="vnode"
-        :to="link"
-        :target="isExternalLink ? '_blank' : undefined"
-        :rel="isExternalLink ? 'noopener noreferrer' : undefined"
-        :class="[$style.asideListItem, active ? $style.active : '']"
-    >
-        <slot>
-            <template v-if="icon">
-                <MyIcon v-if="isMyIcon(icon)" :name="icon as MyIconName" />
-                <MyRuntimeIcon v-else name="AsideListItem Icon" :svg="icon" />
-            </template>
-            <div :class="$style.main">{{ main }}</div>
-            <div v-if="secondary" :class="$style.secondary">
-                {{ secondary }}
-            </div>
-        </slot>
-    </component>
-</template>
-
-<style lang="scss" module>
-.asideListItem {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: var(--gap);
-    height: 60px;
-    border-bottom: 1px solid var(--border);
-    color: var(--textMuted);
-    text-decoration: none;
-    background: transparent;
-    cursor: pointer;
-    @include transition(color, background);
-
-    &:hover {
-        color: var(--text);
-        background: var(--bgAccent);
-    }
-
-    [my-icon] {
-        position: relative;
-        top: 1px;
-        flex-shrink: 0;
-        font-size: 20px;
-    }
-
-    .secondary {
-        font-weight: 500;
-        color: var(--textDimmed);
-    }
-
-    [my-icon],
-    .main {
-        @include transition(color);
-    }
-
-    &.active {
-        [my-icon],
-        .main {
-            color: var(--brand);
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+
+const { to, hoverable = true } = defineProps<{
+    to?: string;
+    icon?: MaybeMyIconName;
+    main?: string;
+    secondary?: string | number;
+    active?: boolean;
+    hoverable?: boolean;
+}>();
+
+const isExternalLink = computed(() => {
+    return to?.startsWith('http');
+});
+</script>
+
+<template>
+    <EruditLink
+        :class="[
+            `border-border block min-h-(--h-min-aside-item) border-b
+            bg-transparent text-sm transition-[background,color,border]`,
+            hoverable && 'hocus:bg-bg-accent cursor-pointer',
+            active
+                ? 'text-brand'
+                : ['text-text-muted', hoverable && 'hocus:text-text'],
+        ]"
+        :to
+    >
+        <slot>
+            <div
+                class="gap-normal px-normal flex min-h-(--h-min-aside-item)
+                    items-center"
+            >
+                <MaybeMyIcon
+                    v-if="icon"
+                    :name="icon"
+                    class="shrink-0 text-[23px]"
+                />
+                <slot name="icon" v-else-if="$slots.icon"></slot>
+
+                <span v-if="main" class="relative">
+                    {{ main }}
+                    <MyIcon
+                        v-if="isExternalLink"
+                        name="arrow/outward"
+                        class="text-text-dimmed absolute -top-[1px]
+                            -right-[16px] text-xs"
+                    />
+                </span>
+                <slot name="main" v-else-if="$slots.main"></slot>
+
+                <span
+                    v-if="secondary"
+                    :class="[
+                        'text-text-dimmed text-xs font-[500]',
+                        isExternalLink && 'ps-[5px]',
+                    ]"
+                >
+                    {{ secondary }}
+                </span>
+                <slot name="secondary" v-else-if="$slots.secondary"></slot>
+            </div>
+        </slot>
+    </EruditLink>
+</template>

package/app/components/aside/AsideMajor.vue

@@ -1,56 +1,8 @@
-<script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-
-import PaneSwitch from './major/PaneSwitch.vue';
-
-const { panes, activePane, getPaneOrder } = useMajorPane();
-
-function paneStyle(paneKey: MajorPaneKey) {
-    const thisPaneOrder = getPaneOrder(paneKey);
-    const activePaneOrder = getPaneOrder(activePane.value);
-
-    return {
-        left: `calc(${Math.sign(thisPaneOrder - activePaneOrder)} * var(--wAside))`,
-        opacity: thisPaneOrder === activePaneOrder ? 1 : 0,
-    };
-}
-</script>
-
-<template>
-    <div :class="$style.asideInner">
-        <AsideMajorSiteInfo />
-        <PaneSwitch />
-        <div :class="$style.paneHolder">
-            <component
-                v-for="(pane, paneKey) of panes"
-                :is="pane.content"
-                :class="$style.pane"
-                :style="paneStyle(paneKey)"
-            />
-        </div>
-        <AdsBannerAside v-if="adsAllowed() && eruditConfig.ads?.aside" />
-    </div>
-</template>
-
-<style lang="scss" module>
-.asideInner {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.paneHolder {
-    flex: 1;
-    position: relative;
-    overflow-x: hidden;
-}
-
-.pane {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    @include transition(left, opacity);
-}
-</style>
+<template>
+    <div class="flex h-full flex-col">
+        <AsideMajorSiteInfo />
+        <AsideMajorPaneSwitcher />
+        <AsideMajorPaneHolder />
+        <AdsBannerAside v-if="adsAsideAllowed()" />
+    </div>
+</template>