erudit 3.0.0-dev.23 → 3.0.0-dev.26

package/app/components/QuickLinks.vue

@@ -1,99 +0,0 @@
-<script lang="ts" setup>
-import type { QuickLinks } from '@shared/quickLink';
-
-interface FrontQuickLink {
-    label: string;
-    link: string;
-    elementTitle: string;
-    elementIcon: string;
-}
-
-const props = defineProps<{ links: QuickLinks }>();
-const pretty = useFormatText();
-
-const frontQuickLinks: FrontQuickLink[] = [];
-for (const link of props.links) {
-    const elementIcon = await useBitranElementIcon(link.elementName);
-    const elementLanguage = await useBitranElementLanguage(link.elementName);
-    frontQuickLinks.push({
-        label: link.label,
-        link: link.link,
-        elementTitle: elementLanguage('_element_title'),
-        elementIcon: elementIcon,
-    });
-}
-</script>
-
-<template>
-    <nav :class="$style.quickLinks">
-        <ul>
-            <li v-for="frontQuickLink of frontQuickLinks">
-                <EruditLink
-                    :to="frontQuickLink.link"
-                    :title="frontQuickLink.elementTitle"
-                    :class="$style.quickLink"
-                >
-                    <MyRuntimeIcon
-                        name="quick-link-icon"
-                        :svg="frontQuickLink.elementIcon"
-                        :class="$style.quickLinkIcon"
-                    />
-                    <span :class="$style.quickLinkLabel">
-                        {{ pretty(frontQuickLink.label) }}
-                    </span>
-                </EruditLink>
-            </li>
-        </ul>
-    </nav>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.quickLinks {
-    --_erudit_quickLink_bg: var(--bgMain);
-
-    > ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--gap);
-
-        @include bp.below('mobile') {
-            gap: var(--gapSmall);
-        }
-
-        .quickLink {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: var(--textMuted);
-            font-size: 0.85em;
-            text-decoration: none;
-            box-shadow: 0px 0px 0px 0px transparent;
-            background: var(--_erudit_quickLink_bg);
-
-            @include transition(color, border, box-shadow);
-
-            border: 1px solid var(--border);
-            border-radius: 5px;
-            padding: 3px 7px;
-
-            &:hover {
-                color: var(--brand);
-                border-color: var(--brand);
-                box-shadow: 0px 0px 0px 2px
-                    color-mix(in srgb, var(--brand), transparent 70%);
-            }
-
-            [my-icon] {
-                flex-shrink: 0;
-                font-size: 0.9em;
-            }
-        }
-    }
-}
-</style>

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>