erudit 2.0.0-dev.7 → 2.0.0-dev.9

package/.nuxtrc

@@ -1 +1 @@
-typescript.includeWorkspace = true
+typescript.includeWorkspace = true

package/app/app.vue

@@ -1,172 +1,172 @@
-<script lang="ts" setup>
-import { brandLogotype, brandColorLogotype } from 'erudit-cog/utils/brand';
-
-import eruditConfig from '#erudit/config';
-import { version } from '@erudit/package.json';
-import { AsideType } from '@app/scripts/aside';
-import { createOgImageTags, defaultOgImage } from '@app/scripts/og';
-
-const route = useRoute();
-const favicon = useFavicon();
-const siteUrl = useSiteUrl();
-const pageUrl = usePageUrl();
-const baseUrlPath = useBaseUrlPath();
-
-const faviconHref = computed(() => {
-    const href = baseUrlPath(favicon.value);
-
-    setTimeout(() => {
-        if (import.meta.client)
-            document
-                .querySelector('link[rel="icon"]')
-                ?.setAttribute('href', href); // Force update favicon
-    }, 200);
-
-    return href;
-});
-
-const phrase = await usePhrases('site_info_title');
-
-useHead({
-    htmlAttrs: {
-        lang: eruditConfig.language || 'en',
-        style: eruditConfig.debug?.slowTransition
-            ? `--transitionSpeed: .5s`
-            : null,
-    },
-    link: [
-        { rel: 'icon', href: faviconHref },
-        { rel: 'canonical', href: pageUrl },
-    ],
-    script: [
-        {
-            key: 'immediate-js',
-            tagPriority: 'critical',
-            innerHTML: (await import('@app/scripts/_immediate.js?raw')).default,
-        },
-    ],
-    style: [
-        {
-            key: 'immediate-css',
-            tagPriority: 'critical',
-            innerHTML: (await import('$/_immediate.css?raw')).default,
-        },
-    ],
-    meta: [...createOgImageTags(siteUrl, defaultOgImage)],
-});
-
-useSeoMeta({
-    ogUrl: usePageUrl(),
-    ogSiteName:
-        eruditConfig.seo?.title ||
-        eruditConfig.site?.title ||
-        phrase.site_info_title,
-});
-
-// @ts-ignore
-if (!eruditConfig?.repository?.sharedUrl) delete majorPanes.language;
-
-const { activePane } = useMajorPane();
-
-//
-// Swtiching major pane to match the new route
-//
-
-watch(route, () => {
-    if (route.path === '/') return (activePane.value = 'index');
-
-    const pathType = route.path.split('/')[1];
-    if (['book', 'group', 'article', 'summary', 'practice'].includes(pathType!))
-        return (activePane.value = 'index');
-
-    return (activePane.value = 'pages');
-});
-
-if (import.meta.client) {
-    //
-    // Theme Switch Watcher
-    //
-
-    const { theme, binaryTheme } = useTheme();
-
-    watch(theme, (newTheme) => {
-        localStorage.setItem('theme', newTheme);
-        document.documentElement.setAttribute('data-theme', binaryTheme.value);
-    });
-
-    //
-    // Welcome
-    //
-
-    document.documentElement.before(document.createComment(brandLogotype));
-    const emojies = [
-        '😂',
-        '❤️',
-        '🤣',
-        '🎉',
-        '🔥',
-        '💖',
-        '👀',
-        '✨',
-        '💗',
-        '💚',
-        '💙',
-        '🎁',
-        '🌈',
-    ];
-    const emoji = emojies[Math.floor(Math.random() * emojies.length)];
-    console.log(
-        brandColorLogotype +
-            `\nv${version} ${emoji} %cBeating heart of modern educational sites!\x1B[m\n\nLearn more: https://github.com/Gwynerva/erudit\n `,
-        'font-style: italic; color: color-mix(in srgb, currentColor, transparent 50%)',
-    );
-}
-</script>
-
-<template>
-    <SiteAside :type="AsideType.Major"><AsideMajor /></SiteAside>
-    <SiteAside :type="AsideType.Minor"><AsideMinor /></SiteAside>
-
-    <div :class="$style.mainContainer">
-        <div><!-- Phantom aside major --></div>
-        <SiteMain><NuxtPage /></SiteMain>
-        <div><!-- Phantom aside minor --></div>
-    </div>
-</template>
-
-<style lang="scss">
-@use '$/normalize';
-@use '$/app';
-</style>
-
-<style lang="scss" module>
-@use '$/def/bp';
-@use '$/def/z';
-
-.mainContainer {
-    --w_asideMajor: 0;
-    --w_asideMinor: 0;
-    --w_main: minmax(0, 1fr);
-
-    position: relative;
-    z-index: z.$main;
-
-    display: grid;
-    grid-template-columns: var(--w_asideMajor) var(--w_main) var(--w_asideMinor);
-
-    margin: auto;
-    max-width: calc(2 * var(--wAside) + var(--wMainMax));
-
-    @include transition(grid);
-
-    @include bp.above('aside1') {
-        --w_asideMajor: var(--wAside);
-        --w_asideMinor: 0;
-    }
-
-    @include bp.above('aside2') {
-        --w_asideMajor: var(--wAside);
-        --w_asideMinor: var(--wAside);
-    }
-}
-</style>
+<script lang="ts" setup>
+import { brandLogotype, brandColorLogotype } from 'erudit-cog/utils/brand';
+
+import eruditConfig from '#erudit/config';
+import { version } from '@erudit/package.json';
+import { AsideType } from '../app/scripts/aside';
+import { createOgImageTags, defaultOgImage } from '../app/scripts/og';
+
+const route = useRoute();
+const favicon = useFavicon();
+const siteUrl = useSiteUrl();
+const pageUrl = usePageUrl();
+const baseUrlPath = useBaseUrlPath();
+
+const faviconHref = computed(() => {
+    const href = baseUrlPath(favicon.value);
+
+    setTimeout(() => {
+        if (import.meta.client)
+            document
+                .querySelector('link[rel="icon"]')
+                ?.setAttribute('href', href); // Force update favicon
+    }, 200);
+
+    return href;
+});
+
+const phrase = await usePhrases('site_info_title');
+
+useHead({
+    htmlAttrs: {
+        lang: eruditConfig.language || 'en',
+        style: eruditConfig.debug?.slowTransition
+            ? `--transitionSpeed: .5s`
+            : null,
+    },
+    link: [
+        { rel: 'icon', href: faviconHref },
+        { rel: 'canonical', href: pageUrl },
+    ],
+    script: [
+        {
+            key: 'immediate-js',
+            tagPriority: 'critical',
+            innerHTML: (await import('./scripts/_immediate.js?raw')).default,
+        },
+    ],
+    style: [
+        {
+            key: 'immediate-css',
+            tagPriority: 'critical',
+            innerHTML: (await import('$/_immediate.css?raw')).default,
+        },
+    ],
+    meta: [...createOgImageTags(siteUrl, defaultOgImage)],
+});
+
+useSeoMeta({
+    ogUrl: usePageUrl(),
+    ogSiteName:
+        eruditConfig.seo?.title ||
+        eruditConfig.site?.title ||
+        phrase.site_info_title,
+});
+
+// @ts-ignore
+if (!eruditConfig?.repository?.sharedUrl) delete majorPanes.language;
+
+const { activePane } = useMajorPane();
+
+//
+// Swtiching major pane to match the new route
+//
+
+watch(route, () => {
+    if (route.path === '/') return (activePane.value = 'index');
+
+    const pathType = route.path.split('/')[1];
+    if (['book', 'group', 'article', 'summary', 'practice'].includes(pathType!))
+        return (activePane.value = 'index');
+
+    return (activePane.value = 'pages');
+});
+
+if (import.meta.client) {
+    //
+    // Theme Switch Watcher
+    //
+
+    const { theme, binaryTheme } = useTheme();
+
+    watch(theme, (newTheme) => {
+        localStorage.setItem('theme', newTheme);
+        document.documentElement.setAttribute('data-theme', binaryTheme.value);
+    });
+
+    //
+    // Welcome
+    //
+
+    document.documentElement.before(document.createComment(brandLogotype));
+    const emojies = [
+        '😂',
+        '❤️',
+        '🤣',
+        '🎉',
+        '🔥',
+        '💖',
+        '👀',
+        '✨',
+        '💗',
+        '💚',
+        '💙',
+        '🎁',
+        '🌈',
+    ];
+    const emoji = emojies[Math.floor(Math.random() * emojies.length)];
+    console.log(
+        brandColorLogotype +
+            `\nv${version} ${emoji} %cBeating heart of modern educational sites!\x1B[m\n\nLearn more: https://github.com/Gwynerva/erudit\n `,
+        'font-style: italic; color: color-mix(in srgb, currentColor, transparent 50%)',
+    );
+}
+</script>
+
+<template>
+    <SiteAside :type="AsideType.Major"><AsideMajor /></SiteAside>
+    <SiteAside :type="AsideType.Minor"><AsideMinor /></SiteAside>
+
+    <div :class="$style.mainContainer">
+        <div><!-- Phantom aside major --></div>
+        <SiteMain><NuxtPage /></SiteMain>
+        <div><!-- Phantom aside minor --></div>
+    </div>
+</template>
+
+<style lang="scss">
+@use '$/normalize';
+@use '$/app';
+</style>
+
+<style lang="scss" module>
+@use '$/def/bp';
+@use '$/def/z';
+
+.mainContainer {
+    --w_asideMajor: 0;
+    --w_asideMinor: 0;
+    --w_main: minmax(0, 1fr);
+
+    position: relative;
+    z-index: z.$main;
+
+    display: grid;
+    grid-template-columns: var(--w_asideMajor) var(--w_main) var(--w_asideMinor);
+
+    margin: auto;
+    max-width: calc(2 * var(--wAside) + var(--wMainMax));
+
+    @include transition(grid);
+
+    @include bp.above('aside1') {
+        --w_asideMajor: var(--wAside);
+        --w_asideMinor: 0;
+    }
+
+    @include bp.above('aside2') {
+        --w_asideMajor: var(--wAside);
+        --w_asideMinor: var(--wAside);
+    }
+}
+</style>

package/app/components/Loading.vue

@@ -1,23 +1,23 @@
-<script lang="ts" setup>
-const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="10" height="10" x="1" y="1" fill="currentColor" rx="1"><animate id="svgSpinnersBlocksShuffle30" fill="freeze" attributeName="x" begin="0;svgSpinnersBlocksShuffle3b.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle31" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle38.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle32" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle39.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle33" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle3a.end" dur="0.2s" values="13;1"/></rect><rect width="10" height="10" x="1" y="13" fill="currentColor" rx="1"><animate id="svgSpinnersBlocksShuffle34" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle30.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle35" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle31.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle36" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle32.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle37" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle33.end" dur="0.2s" values="13;1"/></rect><rect width="10" height="10" x="13" y="13" fill="currentColor" rx="1"><animate id="svgSpinnersBlocksShuffle38" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle34.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle39" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle35.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle3a" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle36.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle3b" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle37.end" dur="0.2s" values="1;13"/></rect></svg>`;
-</script>
-
-<template>
-    <MyRuntimeIcon name="loading" :svg :class="$style.loading" />
-</template>
-
-<style lang="scss" module>
-.loading {
-    color: var(--textDimmed);
-    animation: loading 500ms infinite ease-in-out alternate;
-}
-
-@keyframes loading {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0.5;
-    }
-}
-</style>
+<script lang="ts" setup>
+const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="10" height="10" x="1" y="1" fill="currentColor" rx="1"><animate id="svgSpinnersBlocksShuffle30" fill="freeze" attributeName="x" begin="0;svgSpinnersBlocksShuffle3b.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle31" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle38.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle32" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle39.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle33" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle3a.end" dur="0.2s" values="13;1"/></rect><rect width="10" height="10" x="1" y="13" fill="currentColor" rx="1"><animate id="svgSpinnersBlocksShuffle34" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle30.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle35" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle31.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle36" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle32.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle37" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle33.end" dur="0.2s" values="13;1"/></rect><rect width="10" height="10" x="13" y="13" fill="currentColor" rx="1"><animate id="svgSpinnersBlocksShuffle38" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle34.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle39" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle35.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle3a" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle36.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle3b" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle37.end" dur="0.2s" values="1;13"/></rect></svg>`;
+</script>
+
+<template>
+    <MyRuntimeIcon name="loading" :svg :class="$style.loading" />
+</template>
+
+<style lang="scss" module>
+.loading {
+    color: var(--textDimmed);
+    animation: loading 500ms infinite ease-in-out alternate;
+}
+
+@keyframes loading {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0.5;
+    }
+}
+</style>