erudit 4.0.0-dev.4 → 4.0.0

package/app/components/site/SiteAside.vue

@@ -8,61 +8,60 @@ const isMajor = computed(() => props.type === AsideType.Major);
 const isMinor = computed(() => props.type === AsideType.Minor);
 
 const opened = computed(() => {
-    return props.type === asideState.value.opened;
+  return props.type === asideState.value.opened;
 });
 </script>
 
 <template>
-    <aside
+  <aside
+    :class="[
+      `absolute top-0 z-30 h-full w-(--w-aside) text-[18px]
+      transition-[left,right]`,
+      opened
+        ? isMajor
+          ? 'left-0'
+          : 'right-0'
+        : isMajor
+          ? 'aside1:left-0 -left-(--w-aside)'
+          : 'aside2:right-0 -right-(--w-aside)',
+    ]"
+  >
+    <div class="sticky top-0 h-dvh">
+      <AsideSwitch />
+      <div
         :class="[
-            `absolute top-0 z-30 h-full w-(--w-aside) text-[18px]
-            transition-[left,right]`,
-            opened
-                ? isMajor
-                    ? 'left-0'
-                    : 'right-0'
-                : isMajor
-                  ? 'aside1:left-0 -left-(--w-aside)'
-                  : 'aside2:right-0 -right-(--w-aside)',
+          `bg-bg-aside absolute top-0 left-0 h-full w-full
+          border-[light-dark(var(--color-neutral-200),var(--color-neutral-800))]`,
+          {
+            'border-e': isMajor,
+            'border-s': isMinor,
+            [`max-aside1:border-e-2 max-aside1:bg-bg-aside/96
+            max-aside1:backdrop-blur-sm
+            max-aside1:shadow-[0_0_20px_12px_light-dark(rgba(0,0,0,.14),rgba(255,255,255,.05))]`]:
+              opened && isMajor,
+            [`max-aside2:border-s-2 max-aside2:bg-bg-aside/96
+            max-aside2:backdrop-blur-sm
+            max-aside2:shadow-[0_0_20px_12px_light-dark(rgba(0,0,0,.14),rgba(255,255,255,.05))]`]:
+              opened && isMinor,
+          },
         ]"
-    >
-        <div class="sticky top-0 h-dvh">
-            <AsideSwitch />
-            <div
-                :class="[
-                    `bg-bg-aside absolute top-0 left-0 h-full w-full
-                    border-[light-dark(var(--color-neutral-200),var(--color-neutral-800))]`,
-                    {
-                        'border-e': isMajor,
-                        'border-s': isMinor,
-                        [`max-aside1:border-e-2 max-aside1:bg-bg-aside/96
-                        max-aside1:backdrop-blur-sm
-                        max-aside1:shadow-[0_0_20px_12px_light-dark(rgba(0,0,0,.14),rgba(255,255,255,.05))]`]:
-                            opened && isMajor,
-                        [`max-aside2:border-s-2 max-aside2:bg-bg-aside/96
-                        max-aside2:backdrop-blur-sm
-                        max-aside2:shadow-[0_0_20px_12px_light-dark(rgba(0,0,0,.14),rgba(255,255,255,.05))]`]:
-                            opened && isMinor,
-                    },
-                ]"
-            >
-                <AsideMajor v-if="type === AsideType.Major" />
-                <AsideMinor v-else />
-                <!-- Inner aside shadow to separate aside from main content -->
-                <div
-                    :class="[
-                        `pointer-events-none absolute top-0 h-full w-full
-                        touch-none bg-linear-to-l
-                        from-[light-dark(rgba(0,0,0,0.02),rgba(0,0,0,0.1))]
-                        via-transparent via-[3px] opacity-100`,
-                        {
-                            '-scale-100': isMinor,
-                            'max-aside1:opacity-0': opened && isMajor,
-                            'max-aside2:opacity-0': opened && isMinor,
-                        },
-                    ]"
-                ></div>
-            </div>
-        </div>
-    </aside>
+      >
+        <AsideMajor v-if="type === AsideType.Major" />
+        <AsideMinor v-else />
+        <!-- Inner aside shadow to separate aside from main content -->
+        <div
+          :class="[
+            `pointer-events-none absolute top-0 h-full w-full touch-none
+            bg-linear-to-l from-[light-dark(rgba(0,0,0,0.02),rgba(0,0,0,0.1))]
+            via-transparent via-[3px] opacity-100`,
+            {
+              '-scale-100': isMinor,
+              'max-aside1:opacity-0': opened && isMajor,
+              'max-aside2:opacity-0': opened && isMinor,
+            },
+          ]"
+        ></div>
+      </div>
+    </div>
+  </aside>
 </template>

package/app/components/site/SiteAsideOverlay.vue

@@ -6,16 +6,16 @@
 const asideState = useAsideState();
 
 function overlayClick() {
-    asideState.value.opened = undefined;
-    // Allow switches to immediately reappear if nothing else prevents it
-    asideState.value.scrolledUp = true;
+  asideState.value.opened = undefined;
+  // Allow switches to immediately reappear if nothing else prevents it
+  asideState.value.scrolledUp = true;
 }
 </script>
 
 <template>
-    <div
-        class="fixed top-0 left-0 z-20 h-dvh w-dvh"
-        v-if="asideState.opened"
-        @click="overlayClick"
-    ></div>
+  <div
+    class="fixed top-0 left-0 z-20 h-dvh w-dvh"
+    v-if="asideState.opened"
+    @click="overlayClick"
+  ></div>
 </template>

package/app/components/site/SiteMain.vue

@@ -1,13 +1,13 @@
 <template>
-    <main
-        class="aside1:ps-(--w-aside) aside2:pe-(--w-aside) micro:text-[18px]
-            relative px-0 text-[15px] transition-[padding]"
-    >
-        <div class="text-main" data-erudit-main>
-            <Preview />
-            <div class="bg-bg-main min-h-dvh dark:bg-[#212121]">
-                <slot></slot>
-            </div>
-        </div>
-    </main>
+  <main
+    class="aside1:ps-(--w-aside) aside2:pe-(--w-aside) micro:text-[18px]
+      relative px-0 text-[15px] transition-[padding]"
+  >
+    <div class="text-main" data-erudit-main>
+      <Preview />
+      <div class="bg-bg-main min-h-dvh dark:bg-[#212121]">
+        <slot></slot>
+      </div>
+    </div>
+  </main>
 </template>

package/app/components/transition/Fade.vue

@@ -2,29 +2,29 @@
 const styles = useCssModule();
 
 function setTransition(el: Element) {
-    el.classList.add(styles.fadeTransition);
+  el.classList.add(styles.fadeTransition);
 }
 </script>
 
 <template>
-    <Transition
-        enter-from-class="opacity-0"
-        leave-to-class="opacity-0"
-        @before-enter="setTransition"
-        @after-enter="setTransition"
-        @enter-cancelled="setTransition"
-        @before-leave="setTransition"
-        @after-leave="setTransition"
-        @leave-cancelled="setTransition"
-    >
-        <slot></slot>
-    </Transition>
+  <Transition
+    enter-from-class="opacity-0"
+    leave-to-class="opacity-0"
+    @before-enter="setTransition"
+    @after-enter="setTransition"
+    @enter-cancelled="setTransition"
+    @before-leave="setTransition"
+    @after-leave="setTransition"
+    @leave-cancelled="setTransition"
+  >
+    <slot></slot>
+  </Transition>
 </template>
 
 <style module>
 .fadeTransition {
-    transition-property: opacity;
-    transition-duration: var(--default-transition-duration);
-    transition-timing-function: var(--default-transition-timing-function);
+  transition-property: opacity;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
 }
 </style>

package/app/components/transition/Slide.vue

@@ -2,46 +2,46 @@
 const styles = useCssModule();
 
 const { direction = 'forward' } = defineProps<{
-    direction: 'forward' | 'backward';
+  direction: 'forward' | 'backward';
 }>();
 
 function setTransition(el: Element) {
-    el.classList.add(styles.slideTransition);
+  el.classList.add(styles.slideTransition);
 }
 
 const transitionClasses = computed(() => {
-    const isForward = direction !== 'backward';
-    return {
-        enterFrom: isForward ? 'translate-x-full' : '-translate-x-full',
-        enterTo: 'translate-x-0',
-        leaveFrom: 'translate-x-0',
-        leaveTo: isForward ? '-translate-x-full' : 'translate-x-full',
-    };
+  const isForward = direction !== 'backward';
+  return {
+    enterFrom: isForward ? 'translate-x-full' : '-translate-x-full',
+    enterTo: 'translate-x-0',
+    leaveFrom: 'translate-x-0',
+    leaveTo: isForward ? '-translate-x-full' : 'translate-x-full',
+  };
 });
 </script>
 
 <template>
-    <Transition
-        :enter-from-class="transitionClasses.enterFrom"
-        :enter-to-class="transitionClasses.enterTo"
-        :leave-from-class="transitionClasses.leaveFrom"
-        :leave-to-class="transitionClasses.leaveTo"
-        @before-enter="setTransition"
-        @after-enter="setTransition"
-        @enter-cancelled="setTransition"
-        @before-leave="setTransition"
-        @after-leave="setTransition"
-        @leave-cancelled="setTransition"
-    >
-        <slot></slot>
-    </Transition>
+  <Transition
+    :enter-from-class="transitionClasses.enterFrom"
+    :enter-to-class="transitionClasses.enterTo"
+    :leave-from-class="transitionClasses.leaveFrom"
+    :leave-to-class="transitionClasses.leaveTo"
+    @before-enter="setTransition"
+    @after-enter="setTransition"
+    @enter-cancelled="setTransition"
+    @before-leave="setTransition"
+    @after-leave="setTransition"
+    @leave-cancelled="setTransition"
+  >
+    <slot></slot>
+  </Transition>
 </template>
 
 <style module>
 .slideTransition {
-    transition-property: translate;
-    transition-duration: var(--default-transition-duration);
-    transition-timing-function: var(--default-transition-timing-function);
-    backface-visibility: hidden;
+  transition-property: translate;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
+  backface-visibility: hidden;
 }
 </style>

package/app/components/tree/TreeContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="py-small px-0">
-        <slot></slot>
-    </div>
+  <div class="py-small px-0">
+    <slot></slot>
+  </div>
 </template>

package/app/components/tree/TreeItem.vue

@@ -2,39 +2,35 @@
 import type { MaybeMyIconName } from '#my-icons';
 
 defineProps<{
-    level?: number;
-    to?: string;
-    icon?: MaybeMyIconName;
-    main?: string;
-    state?: undefined | 'active' | 'accent';
+  level?: number;
+  to?: string;
+  icon?: MaybeMyIconName;
+  main?: string;
+  state?: undefined | 'active' | 'accent';
 }>();
 </script>
 
 <template>
-    <EruditLink :to>
-        <div
-            :style="{ '--level': level ? +level : 0 }"
-            :class="[
-                `px-normal py-small hocus:bg-bg-accent flex cursor-pointer
-                items-center gap-[calc(var(--spacing-normal)/2)] text-[.85em]
-                transition-[background,color]`,
-                'pl-[calc(var(--spacing-normal)*(var(--level)+1)-2px)]',
-                {
-                    'text-text-muted hocus:text-text': !state,
-                    'text-brand': state === 'active',
-                    'text-text': state === 'accent',
-                },
-            ]"
-        >
-            <MaybeMyIcon
-                v-if="icon"
-                :name="icon"
-                class="shrink-0 text-[1.2em]"
-            />
-            <div class="flex-1">{{ main }}</div>
-            <div class="shrink-0" v-if="$slots.secondary">
-                <slot name="secondary"></slot>
-            </div>
-        </div>
-    </EruditLink>
+  <EruditLink :to>
+    <div
+      :style="{ '--level': level ? +level : 0 }"
+      :class="[
+        `px-normal py-small hocus:bg-bg-accent flex cursor-pointer items-center
+        gap-[calc(var(--spacing-normal)/2)] text-[.85em]
+        transition-[background,color]`,
+        'pl-[calc(var(--spacing-normal)*(var(--level)+1)-2px)]',
+        {
+          'text-text-muted hocus:text-text': !state,
+          'text-brand': state === 'active',
+          'text-text': state === 'accent',
+        },
+      ]"
+    >
+      <MaybeMyIcon v-if="icon" :name="icon" class="shrink-0 text-[1.2em]" />
+      <div class="flex-1">{{ main }}</div>
+      <div class="shrink-0" v-if="$slots.secondary">
+        <slot name="secondary"></slot>
+      </div>
+    </div>
+  </EruditLink>
 </template>

package/app/composables/ads.ts

@@ -1,23 +1,23 @@
 export function adsAllowed() {
-    const debugAllowed = ERUDIT.config.project.debug?.ads;
+  const debugAllowed = ERUDIT.config.debug?.ads;
 
-    if (debugAllowed === true) {
-        return true;
-    }
+  if (debugAllowed === true) {
+    return true;
+  }
 
-    const adsConfig = ERUDIT.config.project.ads;
+  const adsConfig = ERUDIT.config.ads;
 
-    if (adsConfig === undefined) {
-        return false;
-    }
+  if (adsConfig === undefined) {
+    return false;
+  }
 
-    return ERUDIT.config.mode === 'static';
+  return ERUDIT.config.mode === 'static';
 }
 
 export function adsAsideAllowed() {
-    return adsAllowed() && Boolean(ERUDIT.config.project.ads?.aside);
+  return adsAllowed() && Boolean(ERUDIT.config.ads?.aside);
 }
 
 export function adsBottomAllowed() {
-    return adsAllowed() && Boolean(ERUDIT.config.project.ads?.bottom);
+  return adsAllowed() && Boolean(ERUDIT.config.ads?.bottom);
 }

package/app/composables/analytics.ts

@@ -1,102 +1,102 @@
-import type {
-    GoogleAnalytics,
-    YandexAnalytics,
-} from '@erudit-js/core/eruditConfig/analytics';
-
-export function initAnalytics() {
-    const analytics = ERUDIT.config.project.analytics;
-
-    const analyticsEnabled = (() => {
-        const debugValue = ERUDIT.config.project.debug.analytics;
-
-        if (typeof debugValue === 'boolean') {
-            return debugValue;
-        }
-
-        return ERUDIT.config.mode === 'static' ? true : false;
-    })();
-
-    if (!analytics || !analyticsEnabled) {
-        return;
-    }
-
-    if (analytics.google) {
-        googleAnalytics(analytics.google);
-    }
-
-    if (analytics.yandex) {
-        yandexAnalytics(analytics.yandex);
-    }
-}
-
-function googleAnalytics(analytics: GoogleAnalytics) {
-    if (analytics.gtag) {
-        useHead({
-            script: [
-                {
-                    key: 'google-analytics-script',
-                    src: `https://www.googletagmanager.com/gtag/js?id=${analytics.gtag}`,
-                    async: true,
-                },
-                {
-                    key: 'google-analytics-inline-script',
-                    innerHTML: `
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', '${analytics.gtag}');
-                    `.trim(),
-                },
-            ],
-        });
-    }
-
-    if (analytics.verification) {
-        useHead({
-            meta: [
-                {
-                    name: 'google-site-verification',
-                    content: analytics.verification,
-                },
-            ],
-        });
-    }
-}
-
-function yandexAnalytics(analytics: YandexAnalytics) {
-    if (analytics.metricsId) {
-        useHead({
-            script: [
-                {
-                    key: 'yandex-metrica-script',
-                    innerHTML: `
-(function(m,e,t,r,i,k,a){
-    m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
-    m[i].l=1*new Date();
-    k=e.createElement(t),a=e.getElementsByTagName(t)[0],
-    k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
-})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
-
-ym(${analytics.metricsId}, "init", {
-    clickmap:true,
-    trackLinks:true,
-    accurateTrackBounce:true,
-    webvisor:true
-});
-                    `.trim(),
-                },
-            ],
-        });
-    }
-
-    if (analytics.verification) {
-        useHead({
-            meta: [
-                {
-                    name: 'yandex-verification',
-                    content: analytics.verification,
-                },
-            ],
-        });
-    }
-}
+import type {
+  GoogleAnalytics,
+  YandexAnalytics,
+} from '@erudit-js/core/eruditConfig/analytics';
+
+export function initAnalytics() {
+  const analytics = ERUDIT.config.analytics;
+
+  const analyticsEnabled = (() => {
+    const debugValue = ERUDIT.config.debug.analytics;
+
+    if (typeof debugValue === 'boolean') {
+      return debugValue;
+    }
+
+    return ERUDIT.config.mode === 'static' ? true : false;
+  })();
+
+  if (!analytics || !analyticsEnabled) {
+    return;
+  }
+
+  if (analytics.google) {
+    googleAnalytics(analytics.google);
+  }
+
+  if (analytics.yandex) {
+    yandexAnalytics(analytics.yandex);
+  }
+}
+
+function googleAnalytics(analytics: GoogleAnalytics) {
+  if (analytics.gtag) {
+    useHead({
+      script: [
+        {
+          key: 'google-analytics-script',
+          src: `https://www.googletagmanager.com/gtag/js?id=${analytics.gtag}`,
+          async: true,
+        },
+        {
+          key: 'google-analytics-inline-script',
+          innerHTML: `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', '${analytics.gtag}');
+                    `.trim(),
+        },
+      ],
+    });
+  }
+
+  if (analytics.verification) {
+    useHead({
+      meta: [
+        {
+          name: 'google-site-verification',
+          content: analytics.verification,
+        },
+      ],
+    });
+  }
+}
+
+function yandexAnalytics(analytics: YandexAnalytics) {
+  if (analytics.metricsId) {
+    useHead({
+      script: [
+        {
+          key: 'yandex-metrica-script',
+          innerHTML: `
+(function(m,e,t,r,i,k,a){
+    m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+    m[i].l=1*new Date();
+    k=e.createElement(t),a=e.getElementsByTagName(t)[0],
+    k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
+})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+ym(${analytics.metricsId}, "init", {
+    clickmap:true,
+    trackLinks:true,
+    accurateTrackBounce:true,
+    webvisor:true
+});
+                    `.trim(),
+        },
+      ],
+    });
+  }
+
+  if (analytics.verification) {
+    useHead({
+      meta: [
+        {
+          name: 'yandex-verification',
+          content: analytics.verification,
+        },
+      ],
+    });
+  }
+}