erudit 2.0.0-dev.9 → 3.0.0-dev.10

package/app/app.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { brandLogotype, brandColorLogotype } from 'erudit-cog/utils/brand';
+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';
+import { AsideType } from '@app/scripts/aside';
+import { createOgImageTags, defaultOgImage } from '@app/scripts/og';
 
 const route = useRoute();
 const favicon = useFavicon();
@@ -12,6 +12,10 @@ const siteUrl = useSiteUrl();
 const pageUrl = usePageUrl();
 const baseUrlPath = useBaseUrlPath();
 
+const theme = ref({
+    brand: 'red',
+});
+
 const faviconHref = computed(() => {
     const href = baseUrlPath(favicon.value);
 
@@ -30,9 +34,12 @@ const phrase = await usePhrases('site_info_title');
 useHead({
     htmlAttrs: {
         lang: eruditConfig.language || 'en',
-        style: eruditConfig.debug?.slowTransition
-            ? `--transitionSpeed: .5s`
-            : null,
+        style: {
+            '--brand': eruditConfig.site?.style?.brandColor || undefined,
+            '--transitionSpeed': eruditConfig.debug?.slowTransition
+                ? '.5s'
+                : undefined,
+        } as any,
     },
     link: [
         { rel: 'icon', href: faviconHref },
@@ -42,7 +49,7 @@ useHead({
         {
             key: 'immediate-js',
             tagPriority: 'critical',
-            innerHTML: (await import('./scripts/_immediate.js?raw')).default,
+            innerHTML: (await import('@app/scripts/_immediate.js?raw')).default,
         },
     ],
     style: [
@@ -52,7 +59,14 @@ useHead({
             innerHTML: (await import('$/_immediate.css?raw')).default,
         },
     ],
-    meta: [...createOgImageTags(siteUrl, defaultOgImage)],
+    meta: [
+        {
+            name: 'viewport',
+            content:
+                'width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no',
+        },
+        ...createOgImageTags(siteUrl, defaultOgImage),
+    ],
 });
 
 useSeoMeta({
@@ -115,10 +129,19 @@ if (import.meta.client) {
         '🌈',
     ];
     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%)',
+        '%c' +
+            brandLogotype +
+            '\n%cv' +
+            version +
+            ' ' +
+            emoji +
+            ' %cBeating heart of modern educational sites!\n\n%cLearn more: https://github.com/Gwynerva/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>

package/app/components/SiteAside.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { previewVisible } from '../../app/scripts/preview/state';
+import { previewVisible } from '@app/scripts/preview/state';
 import {
     AsideType,
     clickTargets,
     forcedAside,
     switchVisible,
-} from '../../app/scripts/aside';
+} from '@app/scripts/aside';
 
 const props = defineProps<{
     type: AsideType;
@@ -13,17 +13,28 @@ const props = defineProps<{
 
 const $style = useCssModule();
 
-const switchElement = ref<HTMLElement>();
-const asideElement = ref<HTMLElement>();
+const switchElement = useTemplateRef('switchElement');
+const asideElement = useTemplateRef('asideElement');
+
+const mounted = ref(false);
 
 const canShowSwitch = computed(
-    () => switchVisible.value && !forcedAside.value && !previewVisible.value,
+    () =>
+        mounted.value &&
+        switchVisible.value &&
+        !forcedAside.value &&
+        !previewVisible.value,
+);
+
+const asideForceVisible = computed(
+    () => props.type === forcedAside.value && !previewVisible.value,
 );
-const asideForceVisible = computed(() => props.type === forcedAside.value);
 
 const typeClass = props.type === AsideType.Major ? $style.major : $style.minor;
 
 onMounted(() => {
+    mounted.value = true;
+
     clickTargets[props.type].push(
         ...[switchElement.value!, asideElement.value!],
     );

package/app/components/SiteMain.vue

@@ -11,7 +11,6 @@
 
 <style lang="scss" module>
 @use '$/def/bp';
-@use '@bitran-js/renderer-vue/scss/def' as bitranDef;
 
 .main {
     --_pMainBase: var(--gapBig);
@@ -24,8 +23,8 @@
     font-size: 18px;
 
     @include bp.below('mobile') {
-        //        --_pMainBase: #{bitranDef.$asideWidth};
-        font-size: 15px;
+        --_pMainBase: var(--_bitran_asideWidth);
+        font-size: 14px;
     }
 
     .mainInner {

package/app/components/aside/AsideListItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MyIconName } from '#my-icons';
 
-defineProps<{
+const props = defineProps<{
     link?: string;
     icon?: MyIconName;
     main?: string;
@@ -9,12 +9,12 @@ defineProps<{
     secondary?: string;
 }>();
 
-const nuxtLink = defineNuxtLink({});
+const vnode = h(props.link ? defineNuxtLink({}) : 'div');
 </script>
 
 <template>
     <component
-        :is="link ? nuxtLink : 'div'"
+        :is="vnode"
         :to="link"
         :class="[$style.asideListItem, active ? $style.active : '']"
     >

package/app/components/aside/AsideMinor.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { AsideMinorData } from '@shared/asideMinor';
-import { asideMinorKey } from '../../../app/scripts/aside/minor/state';
+import { asideMinorKey } from '@app/scripts/aside/minor/state';
 
 import {
     LazyAsideMinorNews,

package/app/components/aside/major/SiteInfo.vue

@@ -20,9 +20,9 @@ const siteInfo = computed<SiteInfo>(() => {
         };
 
     return {
-        logotype: eruditConfig.site?.logotype,
+        logotype: eruditConfig.site?.logotype || eruditAsset('logotype.svg'),
         title: eruditConfig.site?.title || phrase.site_info_title,
-        slogan: eruditConfig.site?.slogan,
+        slogan: eruditConfig.site?.slogan || phrase.site_info_slogan,
     };
 });
 </script>

package/app/components/aside/major/panes/Search.vue

@@ -1,3 +1,11 @@
 <template>
-    <div :style="{ padding: 'var(--gap)', color: 'var(--textMuted)', textAlign: 'center' }">Here be dragons...</div>
-</template>
+    <div
+        :style="{
+            padding: 'var(--gap)',
+            color: 'var(--textMuted)',
+            textAlign: 'center',
+        }"
+    >
+        Here be dragons...
+    </div>
+</template>

package/app/components/aside/major/panes/nav/Nav.vue

@@ -5,7 +5,7 @@ import {
     insideNavBook,
     navBookId,
     navBookVisible,
-} from '../../../../../../app/scripts/aside/major/nav';
+} from '@app/scripts/aside/major/nav';
 
 import NavGlobal from './NavGlobal.vue';
 import NavBook from './NavBook.vue';
@@ -13,40 +13,36 @@ import NavBook from './NavBook.vue';
 const contentRoute = useContentRoute();
 const asideMajorNav = getAsideMajorNavPayload();
 
-asideMajorNav.booksIds ||= (await $fetch(
-    '/api/aside/major/nav/bookIds',
-)) as string[];
+asideMajorNav.booksIds ||= (await $fetch('/api/aside/major/nav/bookIds', {
+    responseType: 'json',
+})) as string[];
 
-asideMajorNav.globalNav ||= (await $fetch(
-    '/api/aside/major/nav/global',
-)) as FrontNav;
+asideMajorNav.globalNav ||= (await $fetch('/api/aside/major/nav/global', {
+    responseType: 'json',
+})) as FrontNav;
 
-//
-// Check if inside book from start
-//
-
-// Reset server-leaked state from other pages
-navBookId.value = undefined;
-insideNavBook.value = false;
-
-if (contentRoute.value) {
-    for (const bookId of asideMajorNav.booksIds) {
-        if (contentRoute.value.contentId.startsWith(bookId)) {
-            navBookId.value = bookId;
-            insideNavBook.value = true;
-            break;
+const checkIfInsideBook = () => {
+    if (contentRoute.value) {
+        for (const bookId of asideMajorNav.booksIds) {
+            if (contentRoute.value.contentId.startsWith(bookId)) {
+                navBookId.value = bookId;
+                insideNavBook.value = true;
+                return;
+            }
         }
     }
-}
+
+    // If we get here, we're not in any book
+    navBookId.value = undefined;
+    insideNavBook.value = false;
+};
+
+checkIfInsideBook();
 
 onMounted(() => {
-    watch(
-        contentRoute,
-        () =>
-            (insideNavBook.value = insideNavBook.value
-                ? !!contentRoute.value
-                : false),
-    );
+    watch(contentRoute, () => {
+        checkIfInsideBook();
+    });
 });
 </script>
 

package/app/components/aside/major/panes/nav/NavBook.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { FrontNavBook } from '@shared/frontNav';
-import { insideNavBook, navBookId } from '../../../../../../app/scripts/aside/major/nav';
+import { insideNavBook, navBookId } from '@app/scripts/aside/major/nav';
 
 import PaneContentScroll from '../../PaneContentScroll.vue';
 import FNav from './fnav/FNav.vue';
@@ -23,6 +23,7 @@ async function setupNavBook() {
     );
     book.value = await $fetch(
         `/api/aside/major/nav/bookNav/${navBookId.value}`,
+        { responseType: 'json' },
     );
 
     loading.value = false;

package/app/components/aside/major/panes/nav/NavGlobal.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getAsideMajorNavPayload } from '../../../../../../app/scripts/aside/major/nav';
+import { getAsideMajorNavPayload } from '@app/scripts/aside/major/nav';
 
 import FNav from './fnav/FNav.vue';
 import PaneContentScroll from '../../PaneContentScroll.vue';

package/app/components/aside/major/panes/nav/fnav/FNav.vue

@@ -4,7 +4,7 @@ import type {
     FrontNavContainer,
     FrontNavItem,
 } from '@shared/frontNav';
-import { navStateKey, type NavState } from '../../../../../../../app/scripts/aside/major/nav';
+import { navStateKey, type NavState } from '@app/scripts/aside/major/nav';
 
 import FNavItem from './FNavItem.vue';
 

package/app/components/aside/major/panes/nav/fnav/FNavBook.vue

@@ -4,7 +4,7 @@ import {
     insideNavBook,
     navBookId,
     navStateKey,
-} from '../../../../../../../app/scripts/aside/major/nav';
+} from '@app/scripts/aside/major/nav';
 
 import FNavFlags from './FNavFlags.vue';
 

package/app/components/aside/major/panes/nav/fnav/FNavFlags.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ContentFlag } from 'erudit-cog/schema';
-import { flagsData } from '../../../../../../../app/scripts/flag';
+import type { ContentFlag } from '@erudit-js/cog/schema';
+import { flagsData } from '@app/scripts/flag';
 
 defineProps<{ flags: Record<ContentFlag, boolean> }>();
 

package/app/components/aside/major/panes/nav/fnav/FNavFolder.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { FrontNavFolder } from '@shared/frontNav';
-import { navStateKey } from '../../../../../../../app/scripts/aside/major/nav';
+import { navStateKey } from '@app/scripts/aside/major/nav';
 
 import FNavItem from './FNavItem.vue';
 import FNavFlags from './FNavFlags.vue';

package/app/components/aside/major/panes/nav/fnav/FNavSeparator.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { navStateKey } from '../../../../../../../app/scripts/aside/major/nav';
+import { navStateKey } from '@app/scripts/aside/major/nav';
 import type { FrontNavSeparator } from '@shared/frontNav';
 
 import FNavItem from './FNavItem.vue';

package/app/components/aside/major/panes/nav/fnav/FNavTopic.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { navStateKey } from '../../../../../../../app/scripts/aside/major/nav';
+import { navStateKey } from '@app/scripts/aside/major/nav';
 import type { FrontNavTopic } from '@shared/frontNav';
 
 import FNavFlags from './FNavFlags.vue';

package/app/components/aside/major/panes/other/ItemGenerator.vue

@@ -1,15 +1,13 @@
 <script lang="ts" setup>
 import { version } from '@erudit/package.json';
-
-const phrase = await usePhrases('generator');
 </script>
 
 <template>
     <AsideListItem
-        link="https://github.com/Gwynerva/erudit"
+        link="https://github.com/erudit-js/erudit"
         target="_blank"
         icon="chip"
-        :main="phrase.generator + ':'"
-        :secondary="`Erudit ${version}`"
+        main="Erudit:"
+        :secondary="version"
     />
 </template>

package/app/components/aside/minor/AsideMinorContributor.vue

@@ -2,4 +2,4 @@
     <AsideMinorPane>
         <div>Contributor</div>
     </AsideMinorPane>
-</template>
+</template>

package/app/components/aside/minor/AsideMinorNews.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-// import { injectNewsData } from '../../../../app/scripts/aside/minor/state';
+// import { injectNewsData } from '@app/scripts/aside/minor/state';
 
 // const newsData = injectNewsData();
 </script>

package/app/components/aside/minor/AsideMinorPane.vue

@@ -5,12 +5,11 @@
 </template>
 
 <style lang="scss" module>
-.asideMinorPane
-{
+.asideMinorPane {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
 }
-</style>
+</style>

package/app/components/aside/minor/content/AsideMinorContent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { AsideMinorContent } from '@shared/aside/minor';
-import { injectAsideData } from '../../../../../app/scripts/aside/minor/state';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
 
 const contentData = injectAsideData<AsideMinorContent>();
 const phrase = await usePhrases('contributors', 'no_contributors');

package/app/components/aside/minor/topic/AsideMinorTopic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { AsideMinorTopic } from '@shared/aside/minor';
-import { injectAsideData } from '../../../../../app/scripts/aside/minor/state';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
 
 import TopicNav from './TopicNav.vue';
 import TopicToc from './TopicToc.vue';

package/app/components/aside/minor/topic/TopicContributors.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { injectAsideData } from '../../../../../app/scripts/aside/minor/state';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
 import { type AsideMinorTopic } from '@shared/aside/minor';
 
 import AsideOverlayPane from '../../utils/AsideOverlayPane.vue';

package/app/components/aside/minor/topic/TopicNav.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { topicParts, type TopicPart } from 'erudit-cog/schema';
+import { topicParts, type TopicPart } from '@erudit-js/cog/schema';
 
-import { injectAsideData } from '../../../../../app/scripts/aside/minor/state';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
 import type { AsideMinorTopic } from '@shared/aside/minor';
 import { TOPIC_PART_ICON } from '@erudit/shared/icons';