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

package/app/components/SiteAside.vue

@@ -1,393 +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 = useTemplateRef('switchElement');
-const asideElement = useTemplateRef('asideElement');
-
-const mounted = ref(false);
-
-const canShowSwitch = computed(
-    () =>
-        mounted.value &&
-        switchVisible.value &&
-        !forcedAside.value &&
-        !previewVisible.value,
-);
-
-const asideForceVisible = computed(
-    () => props.type === forcedAside.value && !previewVisible.value,
-);
-
-const typeClass = props.type === AsideType.Major ? $style.major : $style.minor;
-
-onMounted(() => {
-    mounted.value = true;
-
-    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,32 +0,0 @@
-<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/AdsProviderCustom.vue

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

package/app/components/aside/major/panes/Language.vue

@@ -1,79 +0,0 @@
-<script lang="ts" setup>
-import PaneContentScroll from '../PaneContentScroll.vue';
-
-const phrase = await usePhrases(
-    '_language_code',
-    '_language_title',
-    'add_translation',
-);
-
-interface ClientLanguage {
-    code: string;
-    name: string;
-    link?: string;
-    active?: boolean;
-}
-
-function defineLanguage(clientLanguage: ClientLanguage): ClientLanguage {
-    if (phrase._language_code === clientLanguage.code)
-        clientLanguage.active = true;
-
-    return clientLanguage;
-}
-
-const languages = ref<ClientLanguage[]>([
-    defineLanguage({
-        code: phrase._language_code,
-        name: phrase._language_title,
-    }),
-]);
-
-const apiLanguages = await useExternalApiLanguages();
-
-for (const [code, data] of Object.entries(apiLanguages) as any) {
-    if (code === phrase._language_code) continue;
-
-    languages.value.push({
-        code,
-        name: data.name,
-        link: data.link,
-    });
-}
-
-function wip() {
-    alert(
-        'Work in progress. If you want to add your translation, contact me. Telegram: @math_head',
-    );
-}
-</script>
-
-<template>
-    <PaneContentScroll>
-        <AsideListItem
-            v-for="clientLanguage of languages"
-            :class="[clientLanguage.active ? $style.active : '']"
-            :link="clientLanguage.active ? undefined : clientLanguage.link"
-        >
-            <div :class="$style.code">{{ clientLanguage.code }}</div>
-            <div :class="$style.name">{{ clientLanguage.name }}</div>
-        </AsideListItem>
-        <AsideListItem
-            icon="plus-circle"
-            :main="phrase.add_translation"
-            @click="wip"
-        />
-    </PaneContentScroll>
-</template>
-
-<style lang="scss" module>
-.active {
-    color: var(--brand) !important;
-    background: transparent !important;
-    cursor: default;
-}
-
-.code {
-    text-transform: uppercase;
-    font-weight: 650;
-}
-</style>