erudit 3.0.0-dev.2 → 3.0.0-dev.21

package/app/components/SiteMain.vue

@@ -1,35 +1,32 @@
-<template>
-    <main :class="$style.main" erudit-main>
-        <ClientOnly>
-            <Preview />
-        </ClientOnly>
-        <div :class="$style.mainInner">
-            <slot></slot>
-        </div>
-    </main>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-@use '@bitran-js/renderer-vue/scss/def' as bitranDef;
-
-.main {
-    --_pMainBase: var(--gapBig);
-    --_pMainX: var(--_pMainBase);
-    --_pMainY: calc(var(--_pMainBase) / 2);
-
-    position: relative;
-    min-height: 100dvh;
-    background: var(--bgMain);
-    font-size: 18px;
-
-    @include bp.below('mobile') {
-        //        --_pMainBase: #{bitranDef.$asideWidth};
-        font-size: 15px;
-    }
-
-    .mainInner {
-        padding: var(--_pMainY) 0;
-    }
-}
-</style>
+<template>
+    <main :class="$style.main" erudit-main>
+        <Preview />
+        <div :class="$style.mainInner">
+            <slot></slot>
+        </div>
+    </main>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.main {
+    --_pMainX: 30px;
+    --_pMainY: 18px;
+
+    position: relative;
+    min-height: 100dvh;
+    background: var(--bgMain);
+    font-size: 18px;
+
+    @include bp.below('mobile') {
+        --_pMainX: 18px;
+        --_pMainY: 14px;
+        font-size: 15px;
+    }
+
+    .mainInner {
+        padding: var(--_pMainY) 0;
+    }
+}
+</style>

package/app/components/ads/Ads.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { EruditAds } from '@erudit-js/cog/schema';
+
+import { LazyAdsProviderCustom, LazyAdsProviderYandex } 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 '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,61 @@
+<script setup lang="ts">
+import type { EruditAds } from '@erudit-js/cog/schema';
+
+import eruditConfig from '#erudit/config';
+
+const adsData = ref<EruditAds>();
+
+onMounted(() => {
+    const asideAds = eruditConfig.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="$style.darkMagicAside">
+        <div :class="$style.inner">
+            <Ads :data="adsData" />
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+.darkMagicAside {
+    padding: var(--gap);
+    border-top: 1px solid var(--border);
+
+    @media (max-height: 500px) {
+        display: none;
+    }
+
+    .inner {
+        position: relative;
+        max-height: 300px;
+
+        @media (max-height: 700px) {
+            max-height: 100px;
+        }
+    }
+}
+</style>

package/app/components/ads/AdsBannerBottom.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import eruditConfig from '#erudit/config';
+</script>
+
+<template>
+    <section :class="$style.darkMagicBottom">
+        <div :class="$style.inner">
+            <Ads :data="eruditConfig.ads!.bottom!" />
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+.darkMagicBottom {
+    padding: var(--_pMainY) var(--_pMainX);
+
+    .inner {
+        position: relative;
+        max-height: 300px;
+    }
+}
+</style>

package/app/components/ads/AdsProviderCustom.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { EruditAdsCustom } from '@erudit-js/cog/schema';
+
+const props = defineProps<{ data: EruditAdsCustom }>();
+
+const randomBanner =
+    props.data.banners[Math.floor(Math.random() * props.data.banners.length)]!;
+</script>
+
+<template>
+    <div :class="$style.darkMagicCustom">
+        <a :href="randomBanner.src" target="_blank">
+            <img :src="randomBanner.src" />
+        </a>
+    </div>
+</template>
+
+<style lang="scss" module>
+.darkMagicCustom {
+    max-height: inherit;
+
+    a {
+        max-height: inherit;
+        display: block;
+    }
+
+    img {
+        display: block;
+        margin: 0 auto;
+        max-height: inherit;
+        object-fit: contain;
+        object-position: center;
+    }
+}
+</style>

package/app/components/ads/AdsProviderYandex.vue

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

package/app/components/ads/AdsReplacer.vue

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

package/app/components/aside/AsideListItem.vue

@@ -1,74 +1,91 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-defineProps<{
-    link?: string;
-    icon?: MyIconName;
-    main?: string;
-    active?: boolean;
-    secondary?: string;
-}>();
-
-const nuxtLink = defineNuxtLink({});
-</script>
-
-<template>
-    <component
-        :is="link ? nuxtLink : 'div'"
-        :to="link"
-        :class="[$style.asideListItem, active ? $style.active : '']"
-    >
-        <slot>
-            <MyIcon v-if="icon" :name="icon" />
-            <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 { 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>

package/app/components/aside/AsideMajor.vue

@@ -1,56 +1,56 @@
-<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>
-        <AdsLeftBanner v-if="eruditConfig.ads?.leftBlockId" />
-    </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>
+<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>