erudit 3.0.0-dev.2 → 3.0.0-dev.21

package/app/app.vue

@@ -1,172 +1,195 @@
-<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, brandColors } from '@erudit-js/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: {
+            '--brand': eruditConfig.site?.style?.brandColor || undefined,
+            '--transitionSpeed': eruditConfig.debug?.slowTransition
+                ? '.5s'
+                : undefined,
+        } as any,
+    },
+    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: [
+        {
+            name: 'viewport',
+            content:
+                'width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no',
+        },
+        ...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
+    //
+
+    const comment = document.createComment(` ${brandLogotype} `);
+    document.insertBefore(comment, document.firstChild);
+
+    const emojies = [
+        '😂',
+        '❤️',
+        '🤣',
+        '🎉',
+        '🔥',
+        '💖',
+        '👀',
+        '✨',
+        '💗',
+        '💚',
+        '💙',
+        '🎁',
+        '🌈',
+    ];
+    const emoji = emojies[Math.floor(Math.random() * emojies.length)];
+
+    console.log(
+        '%c' +
+            brandLogotype +
+            '\n%cv' +
+            version +
+            ' ' +
+            emoji +
+            ' %cBeating heart of modern educational sites!\n\n%cLearn more: https://github.com/erudit-js/erudit\n ',
+        `color: transparent; background: linear-gradient(to right, ${brandColors[0]}, ${brandColors[1]}); background-clip: text; -webkit-background-clip: text;`,
+        'color: inherit;',
+        'font-style: italic; color: #888;',
+        'color: inherit;',
+    );
+}
+</script>
+
+<template>
+    <NuxtLoadingIndicator color="var(--brand)" />
+
+    <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/assets/icons/cameo-add.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+<path d="M896 0h-768c-70.6 0-128 57.4-128 128v576c0 70.6 57.4 128 128 128h192v160c0 12.2 6.8 23.2 17.6 28.6s23.8 4.2 33.6-3l247.4-185.6h277.4c70.6 0 128-57.4 128-128v-576c0-70.6-57.4-128-128-128zM688.6 465.2h-127.4v127.4c0 27.2-22 49.2-49.2 49.2s-49.2-22-49.2-49.2v-127.4h-127.4c-27.2 0-49.2-22-49.2-49.2s22-49.2 49.2-49.2h127.4v-127.4c0-27.2 22-49.2 49.2-49.2s49.2 22 49.2 49.2v127.4h127.4c27.2 0 49.2 22 49.2 49.2s-22 49.2-49.2 49.2z"></path>
+</svg>

package/app/assets/icons/diamond.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <path class="cls-1" d="M12,22.5L.3,8.5,3.8,1.5h16.4l3.5,7-11.7,14.1ZM9.2,7.3h5.6l-1.8-3.5h-2l-1.8,3.5ZM10.8,17.5v-7.8h-6.5l6.5,7.8ZM13.2,17.5l6.5-7.8h-6.5v7.8ZM17.4,7.3h3.1l-1.8-3.5h-3.1l1.8,3.5ZM3.5,7.3h3.1l1.8-3.5h-3.1l-1.8,3.5Z"/>
+</svg>

package/app/assets/icons/graduation.svg

@@ -0,0 +1,3 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path  d="m5.2 18.2q-0.6-0.3-0.9-0.8-0.2-0.5-0.2-1.1v-5l-2.6-1.4q-0.2-0.2-0.4-0.4-0.1-0.2-0.1-0.5 0-0.3 0.1-0.5 0.2-0.3 0.4-0.4l8.9-4.8q0.2-0.2 0.5-0.2 0.2-0.1 0.5-0.1 0.2 0 0.5 0.1 0.2 0 0.5 0.2l9.9 5.4q0.3 0.1 0.4 0.4 0.2 0.2 0.2 0.5v6.7q0 0.4-0.3 0.7-0.3 0.3-0.8 0.3-0.4 0-0.7-0.3-0.3-0.3-0.3-0.7v-6.2l-2.1 1.2v5q0 0.6-0.3 1.1-0.3 0.5-0.8 0.8l-5.2 2.8q-0.3 0.1-0.5 0.2-0.3 0-0.5 0-0.3 0-0.5 0-0.3-0.1-0.5-0.2zm6.2-5.3l7.2-3.9-7.2-3.9-7.2 3.9zm0 6.3l5.3-2.8v-4l-4.2 2.4q-0.3 0.1-0.5 0.2-0.3 0-0.6 0-0.2 0-0.5 0-0.2-0.1-0.5-0.2l-4.2-2.4v4z"/>
+</svg>

package/app/components/Avatar.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+import { detectStrictFileType } from '@erudit/utils/ext';
+
+const props = defineProps<{
+    src?: string;
+    icon?: MyIconName;
+    color?: string;
+    styling?: Partial<{
+        glow: boolean;
+        border: boolean;
+    }>;
+}>();
+
+const assetRoute = useAssetRoute();
+
+const avatarSrc = computed(() => {
+    return props.src ? assetRoute(props.src) : undefined;
+});
+
+const fallbackVisible = computed(() => {
+    return !avatarSrc.value /* || failed to load src */;
+});
+
+const avatarType = computed(() => {
+    return avatarSrc.value
+        ? detectStrictFileType(avatarSrc.value, 'image', 'video')
+        : undefined;
+});
+</script>
+
+<template>
+    <div
+        :class="[
+            $style.avatar,
+            styling?.glow && $style.glow,
+            styling?.border && $style.border,
+        ]"
+        :style="{ ['--avatarColor']: props.color }"
+    >
+        <div :class="$style.inner">
+            <div v-if="fallbackVisible" :class="$style.fallback">
+                <MyIcon :name="icon || '__missing'" />
+            </div>
+            <template v-else>
+                <img
+                    v-if="avatarType === 'image'"
+                    :src="avatarSrc"
+                    loading="lazy"
+                />
+                <video
+                    v-else
+                    :src="avatarSrc"
+                    preload="metadata"
+                    autoplay
+                    loop
+                    muted
+                ></video>
+            </template>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+.avatar {
+    --avatarSize: 110px;
+    --avatarColor: var(--border);
+
+    width: var(--avatarSize);
+    height: var(--avatarSize);
+    border-radius: 50%;
+
+    .inner {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 50%;
+
+        img,
+        video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+
+    .fallback {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+            45deg,
+            color-mix(in srgb, var(--avatarColor), black 10%),
+            color-mix(in srgb, var(--avatarColor), white 40%)
+        );
+        color: color-mix(in srgb, black, var(--avatarColor) 50%);
+        font-size: calc(var(--avatarSize) / 1.85);
+    }
+
+    //
+    //
+    //
+
+    &.glow {
+        box-shadow: 0 0 7px 7px
+            color-mix(in srgb, var(--avatarColor), transparent 85%);
+    }
+
+    &.border {
+        border: 2px solid var(--avatarColor);
+        padding: 2px;
+    }
+}
+</style>

package/app/components/EruditLink.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+const props = defineProps<{
+    to?: string;
+    prefetch?: boolean;
+}>();
+
+const EruditLink = defineNuxtLink({
+    prefetch: props.prefetch ?? true,
+    trailingSlash: 'append',
+});
+</script>
+
+<template>
+    <EruditLink :to="props.to">
+        <slot></slot>
+    </EruditLink>
+</template>

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>