erudit 3.0.0-dev.3 → 3.0.0-dev.30

package/app/components/SiteAside.vue

@@ -1,382 +0,0 @@
-<script lang="ts" setup>
-import { previewVisible } from '@app/scripts/preview/state';
-import {
-    AsideType,
-    clickTargets,
-    forcedAside,
-    switchVisible,
-} from '@app/scripts/aside';
-
-const props = defineProps<{
-    type: AsideType;
-}>();
-
-const $style = useCssModule();
-
-const switchElement = ref<HTMLElement>();
-const asideElement = ref<HTMLElement>();
-
-const canShowSwitch = computed(
-    () => switchVisible.value && !forcedAside.value && !previewVisible.value,
-);
-const asideForceVisible = computed(() => props.type === forcedAside.value);
-
-const typeClass = props.type === AsideType.Major ? $style.major : $style.minor;
-
-onMounted(() => {
-    clickTargets[props.type].push(
-        ...[switchElement.value!, asideElement.value!],
-    );
-});
-
-function switchClick() {
-    forcedAside.value = props.type;
-}
-</script>
-
-<template>
-    <div
-        ref="switchElement"
-        @click="switchClick"
-        :class="[
-            $style.asideSwitch,
-            typeClass,
-            canShowSwitch ? $style.visible : '',
-        ]"
-    >
-        <MyIcon name="aside-open" />
-    </div>
-
-    <aside
-        ref="asideElement"
-        :class="[
-            $style.aside,
-            typeClass,
-            asideForceVisible ? $style.forceVisible : '',
-        ]"
-    >
-        <slot></slot>
-        <div :class="$style.innerShadow"></div>
-    </aside>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-@use '$/def/z';
-@use '$/def/size';
-
-// !!
-// !!
-// !! Rewrite the whole logic based on coords relative to main content. It will be 1000% easier. See how <Preview> is implemented!
-// !!
-// !!
-
-@function maxLayoutEdge() {
-    @return calc(
-        50% - min(var(--wMainMax), calc(100% - 2 * var(--wAside))) / 2
-    );
-}
-
-@mixin ___asidePositionLogic {
-    /* For God's sake, don't ever touch this code */
-
-    --_pos: var(--_posHidden); // Start with hidden position (mobile first)
-
-    --_posHidden: calc(-1 * var(--wAside));
-    --_posVisible: var(--_posVisibleCorner);
-
-    --_posVisibleCorner: 0;
-    --_posVisibleMax: calc(#{maxLayoutEdge()} - var(--wAside));
-
-    &.major.forceVisible,
-    &.minor.forceVisible {
-        --_pos: var(--_posVisible); // Always visible when forced
-    }
-
-    &.major {
-        left: var(--_pos);
-
-        @include bp.above('aside1') {
-            --_posVisible: var(--_posVisibleCorner);
-            --_pos: var(--_posVisible);
-        }
-
-        @include bp.above('aside2') {
-            --_posVisible: var(--_posVisibleMax);
-        }
-    }
-
-    &.minor {
-        right: var(--_pos);
-
-        @include bp.above('aside2') {
-            --_posVisible: var(--_posVisibleMax);
-            --_pos: var(--_posVisible);
-        }
-    }
-}
-
-.aside {
-    //
-    // Global
-    //
-
-    position: fixed;
-    z-index: z.$aside;
-    top: 0;
-
-    width: var(--wAside);
-    height: 100dvh;
-
-    background: var(--bgAside);
-    backdrop-filter: initial;
-
-    --shadowColor: #{rgba(black, 0.065)};
-
-    @include transition(left, right, background, backdrop-filter, box-shadow);
-
-    @include dark {
-        --shadowColor: #{rgba(white, 0.075)};
-    }
-
-    //
-
-    @include ___asidePositionLogic;
-
-    //
-    // Global States
-    //
-
-    @mixin asideVisible {
-    }
-
-    @mixin asideHidden {
-    }
-
-    @mixin asideModal {
-        background: color-mix(
-            in srgb,
-            color-mix(in srgb, var(--bgAside), black 0%),
-            transparent 22%
-        );
-        backdrop-filter: blur(10px);
-
-        box-shadow:
-            0px 0px 15px 15px rgba(0, 0, 0, 0.1),
-            0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-
-        @include dark {
-            background: color-mix(in srgb, var(--bgAside), transparent 10%);
-
-            box-shadow:
-                0px 0px 15px 15px rgba(255, 255, 255, 0.025),
-                0px 0px 8px 0px rgba(255, 255, 255, 0.03);
-        }
-    }
-
-    &.major {
-        //
-        // Major Aside
-        //
-
-        box-shadow: -1px 0px 2px 0px var(--shadowColor);
-
-        @include bp.above('aside1') {
-            //
-            // Major Visible
-            //
-
-            @include asideVisible;
-        }
-
-        @include bp.below('aside1') {
-            //
-            // Major Hidden
-            //
-
-            @include asideHidden;
-
-            &.forceVisible {
-                //
-                // Major Modal
-                //
-
-                @include asideModal;
-            }
-        }
-    }
-
-    &.minor {
-        //
-        // Minor Aside
-        //
-
-        box-shadow: 1px 0px 2px 0px var(--shadowColor);
-
-        @include bp.above('aside2') {
-            //
-            // Minor Visible
-            //
-
-            @include asideVisible;
-        }
-
-        @include bp.below('aside2') {
-            //
-            // Minor Hidden
-            //
-
-            @include asideHidden;
-
-            &.forceVisible {
-                //
-                // Minor Modal
-                //
-
-                @include asideModal;
-            }
-        }
-    }
-}
-
-//
-//
-//
-
-@mixin ___switchPositionLogic {
-    /* For God's sake, don't ever touch this code */
-
-    --_switchSize: calc(var(--iconSize) + 2 * var(--p) + var(--m));
-
-    --_pos: var(--_posHidden);
-
-    --_posVisible: calc(var(--_posHidden) + var(--_switchSize));
-    --_posHidden: var(--_posBehindCorner);
-
-    --_posBehindCorner: calc(-1 * var(--_switchSize));
-    --_posBehindMajorAside: calc(var(--wAside) - var(--_switchSize));
-    --_posBehindFullLayout: calc(#{maxLayoutEdge()} - var(--_switchSize));
-
-    &.visible {
-        --_pos: var(--_posVisible);
-    }
-
-    &.major {
-        left: var(--_pos);
-
-        @include bp.above('aside1') {
-            --_posHidden: var(--_posBehindMajorAside);
-            --_posVisible: var(--_posHidden);
-        }
-    }
-
-    &.minor {
-        right: var(--_pos);
-
-        @include bp.above('aside2') {
-            --_posVisible: var(--_posHidden);
-        }
-    }
-
-    &.major,
-    &.minor {
-        @include bp.above('aside2') {
-            --_posHidden: var(--_posBehindFullLayout);
-        }
-    }
-}
-
-.asideSwitch {
-    --iconSize: 36px;
-    --p: 12px;
-    --m: var(--gapBig);
-
-    //
-
-    position: fixed;
-    z-index: z.$asideSwitch;
-    bottom: 0;
-
-    font-size: var(--iconSize);
-    padding: var(--p);
-    margin: var(--gapBig);
-
-    background: #8c8c8c;
-    color: var(--bgMain);
-    box-shadow: 0px 0px 20px 20px var(--bgMain);
-    opacity: 0.95;
-
-    cursor: pointer;
-
-    @include transition(left, right, opacity, box-shadow);
-
-    @include dark {
-        background: #8c8c8c;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-
-    &.minor {
-        svg {
-            transform: scaleX(-1);
-        }
-    }
-
-    @mixin invisible {
-        box-shadow: none; /* TODO: Fix missing fade-out transition! */
-    }
-
-    //
-
-    @include ___switchPositionLogic;
-
-    &:not(.visible) {
-        @include invisible;
-    }
-    &.major {
-        @include bp.above('aside1') {
-            @include invisible;
-        }
-    }
-    @include bp.above('aside2') {
-        @include invisible;
-    }
-}
-
-//
-//
-//
-
-.innerShadow {
-    position: absolute;
-    z-index: 9999;
-    top: 0;
-    width: 30px;
-    height: 100%;
-    pointer-events: none;
-    touch-action: none;
-    box-shadow: -1px 0px 2px 0px
-        color-mix(in srgb, var(--invert), transparent 93%) inset;
-
-    @include transition(box-shadow);
-
-    .major & {
-        right: 0;
-
-        @include bp.below('aside1') {
-            box-shadow: none;
-        }
-    }
-
-    .minor & {
-        left: 0;
-        transform: scaleX(-1);
-
-        @include bp.below('aside2') {
-            box-shadow: none;
-        }
-    }
-}
-</style>

package/app/components/SiteMain.vue

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

package/app/components/ads/BannerTemplate.vue

@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-    bannerId: string;
-}>();
-
-const { getElementId, registerBanner } = useDarkMagic();
-const phrase = await usePhrases('ads_replacer', '_language_code');
-
-onMounted(() => {
-    registerBanner(props.bannerId);
-});
-</script>
-
-<template>
-    <section :class="$style.darkMagicContainer">
-        <div :id="getElementId(bannerId)">
-            <div :class="$style.darkMagicReplacer">
-                <MyIcon name="pirate" />
-                <div v-html="phrase.ads_replacer"></div>
-            </div>
-        </div>
-    </section>
-</template>
-
-<style lang="scss" module>
-.darkMagicContainer {
-    --maxHeight: 300px;
-
-    > div {
-        width: 100%;
-        max-height: var(--maxHeight);
-    }
-}
-
-.darkMagicReplacer {
-    max-height: var(--maxHeight);
-    height: var(--maxHeight);
-    width: 100%;
-    background: var(--bgAccent);
-    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset;
-    color: var(--textMuted);
-
-    @include dark {
-        box-shadow: 0px 0px 3px 1px rgba(white, 0.025) inset;
-    }
-
-    strong {
-        color: inherit;
-    }
-}
-</style>

package/app/components/ads/BottomBanner.vue

@@ -1,45 +0,0 @@
-<script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-</script>
-
-<template>
-    <AdsBannerTemplate
-        :bannerId="eruditConfig.ads!.bottomBlockId!"
-        :class="$style.darkMagicBottom"
-    />
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-@use '$/partials/darkMagic';
-
-.darkMagicBottom {
-    --maxHeight: 300px;
-
-    padding: var(--_pMainY) var(--_pMainX);
-    padding-top: var(--gapBig);
-
-    @include darkMagic.replacer {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: var(--gapBig);
-        font-size: 22px;
-
-        [my-icon] {
-            font-size: 60px;
-        }
-
-        @include bp.below('mobile') {
-            flex-direction: column;
-            gap: var(--gap);
-            font-size: 16px;
-            text-align: center;
-
-            [my-icon] {
-                font-size: 68px;
-            }
-        }
-    }
-}
-</style>

package/app/components/ads/LeftBanner.vue

@@ -1,50 +0,0 @@
-<script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-</script>
-
-<template>
-    <AdsBannerTemplate
-        :bannerId="eruditConfig.ads!.leftBlockId!"
-        :class="$style.darkMagicLeft"
-    />
-</template>
-
-<style lang="scss" module>
-@use '$/partials/darkMagic';
-
-.darkMagicLeft {
-    --maxHeight: 300px;
-
-    padding: var(--gap);
-    border-top: 1px solid var(--border);
-
-    @media (max-height: 1080px) {
-        --maxHeight: 200px;
-    }
-
-    @media (max-height: 700px) {
-        --maxHeight: 100px;
-        [my-icon] {
-            display: none;
-        }
-    }
-
-    @media (max-height: 350px) {
-        display: none;
-    }
-
-    @include darkMagic.replacer {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: var(--gap);
-        text-align: center;
-        font-size: 0.95em;
-
-        [my-icon] {
-            font-size: 46px;
-        }
-    }
-}
-</style>

package/app/components/aside/major/PaneContentScroll.vue

@@ -1,23 +0,0 @@
-<template>
-    <div :class="$style.paneContentScroll">
-        <div>
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-.paneContentScroll {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    direction: rtl;
-    @include scroll;
-
-    > div {
-        width: 100%;
-        height: 100%;
-        direction: ltr;
-    }
-}
-</style>

package/app/components/aside/major/PaneSwitch.vue

@@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import PaneSwitchButton from './PaneSwitchButton.vue';
-
-const { panes, activePane, getPaneOrder } = useMajorPane();
-
-const phrase = await usePhrases(
-    ...Object.values(panes).map((pane) => pane.phrase),
-);
-</script>
-
-<template>
-    <section :class="$style.paneSwitch">
-        <div :class="$style.inner">
-            <PaneSwitchButton
-                v-for="(pane, paneKey) of panes"
-                :paneKey
-                :icon="pane.icon"
-                :title="phrase[pane.phrase]"
-            />
-
-            <div
-                :class="$style.slider"
-                :style="{ '--_activePane': getPaneOrder(activePane) }"
-            ></div>
-        </div>
-    </section>
-</template>
-
-<style lang="scss" module>
-.paneSwitch {
-    --buttonSize: 40px;
-    --gapSize: var(--gap);
-
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    justify-content: center;
-
-    .inner {
-        position: relative;
-        display: flex;
-    }
-
-    .slider {
-        position: absolute;
-        width: var(--buttonSize);
-        height: 3px;
-        bottom: -1px;
-        margin-left: calc(var(--gapSize) / 2);
-        background: var(--textMuted);
-        left: calc(var(--_activePane) * (var(--buttonSize) + var(--gapSize)));
-        @include transition(left);
-    }
-}
-</style>

package/app/components/aside/major/PaneSwitchButton.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-defineProps<{
-    paneKey: MajorPaneKey;
-    icon: MyIconName;
-}>();
-
-const { activePane } = useMajorPane();
-</script>
-
-<template>
-    <button
-        @click="activePane = paneKey"
-        :class="[
-            $style.paneSwtichButton,
-            paneKey === activePane ? $style.active : '',
-        ]"
-    >
-        <MyIcon :name="icon" />
-    </button>
-</template>
-
-<style lang="scss" module>
-.paneSwtichButton {
-    --_padding: calc(var(--gapSize) / 2);
-
-    position: relative;
-    padding: var(--_padding);
-    color: var(--textMuted);
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    @include transition(color);
-
-    &::after {
-        content: '';
-        position: absolute;
-        left: var(--_padding);
-        right: var(--_padding);
-        bottom: -1px;
-        height: 3px;
-        background: transparent;
-        @include transition(background);
-    }
-
-    &:hover,
-    &.active {
-        color: var(--text);
-        &::after {
-            background: var(--border);
-        }
-    }
-
-    [my-icon] {
-        display: grid;
-        place-items: center;
-        width: var(--buttonSize);
-        height: var(--buttonSize);
-        font-size: 22px;
-    }
-}
-</style>