erudit 2.0.0-dev.8 → 2.0.0-dev.9

package/app/components/SiteMain.vue

@@ -1,35 +1,35 @@
-<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/public/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.$asideFullWidth};
-        font-size: 15px;
-    }
-
-    .mainInner {
-        padding: var(--_pMainY) 0;
-    }
-}
-</style>
+<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 +1,51 @@
-<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>
+<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 +1,45 @@
-<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>
+<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 +1,50 @@
-<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>
+<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/AsideListItem.vue

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

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>
+        <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>